diff --git a/make-pages/GalleryPage.hs b/make-pages/GalleryPage.hs
index 1d0a175..b116769 100644
--- a/make-pages/GalleryPage.hs
+++ b/make-pages/GalleryPage.hs
@@ -2,7 +2,7 @@
module GalleryPage (make) where
import Control.Exception
-import Data.Function (on)
+import Data.Function (on, (&))
import Data.List (sortOn, groupBy)
import qualified Data.Text.Lazy as Lazy
import System.FilePath ((), takeDirectory)
@@ -27,7 +27,8 @@ make' title nsfw infos = [b|@0
-
+
+
$*title
@@ -61,14 +62,16 @@ makeYearItems :: Bool -- ^ nsfw
-> Builder
makeYearItems nsfw year infos = [b|@4
- $^year
+ $year'
$4.items
|]
- where items = map (uncurry $ makeItem nsfw) infos
+ where
+ items = map (uncurry $ makeItem nsfw) infos
+ year' = show year & foldMap \c -> [b|$'c|]
makeItem :: Bool -> FilePath -> Info -> Builder
makeItem nsfw file info@(Info {title}) = [b|@4
-
+
@@ -79,5 +82,4 @@ makeItem nsfw file info@(Info {title}) = [b|@4
where
dir = takeDirectory file
thumb = maybe (throw $ NoThumb dir) (\t -> dir thumbFile t) $ #thumb info
- cls | nsfw && #anyNsfw info = [b|class="item nsfw"|]
- | otherwise = [b|class=item|]
+ nsfw' = if nsfw && #anyNsfw info then " nsfw" else ""
diff --git a/make-pages/IndexPage.hs b/make-pages/IndexPage.hs
index 775f3a0..d17dd45 100644
--- a/make-pages/IndexPage.hs
+++ b/make-pages/IndexPage.hs
@@ -13,7 +13,8 @@ make' (IndexInfo {title, galleries, links, footer}) = [b|@0
-
+
+
$*title
@@ -30,13 +31,13 @@ make' (IndexInfo {title, galleries, links, footer}) = [b|@0
|]
where
galleryList = if null galleries then "" else [b|@2
-
+
|]
where items = map makeItem galleries
linkList = if null links then "" else [b|@2
-
+
|]
@@ -51,7 +52,7 @@ make' (IndexInfo {title, galleries, links, footer}) = [b|@0
makeItem :: GalleryInfo -> Builder
makeItem (GalleryInfo {title, description, prefix, filters}) = [b|@4
- $*title
+ $*title
|]
where nsfw = if hasNsfw filters then " class=nsfw" else ""
diff --git a/make-pages/SinglePage.hs b/make-pages/SinglePage.hs
index 9f99a58..332a609 100644
--- a/make-pages/SinglePage.hs
+++ b/make-pages/SinglePage.hs
@@ -33,7 +33,8 @@ make' nsfw (Info {date, title, artist, tags, nsfwTags,
-
+
+
$*title
diff --git a/style/niss.svg b/style/niss.svg
new file mode 100644
index 0000000..9a4c15d
--- /dev/null
+++ b/style/niss.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/style/niss_tongue.svg b/style/niss_tongue.svg
new file mode 100644
index 0000000..647f59e
--- /dev/null
+++ b/style/niss_tongue.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/style/shiny/base.css b/style/shiny/base.css
new file mode 100644
index 0000000..6fb548b
--- /dev/null
+++ b/style/shiny/base.css
@@ -0,0 +1,72 @@
+@import url(/fonts/muller/muller.css);
+
+:root {
+ font-family: Muller;
+ font-size: x-large;
+ font-weight: 600;
+
+ --gradient:
+ linear-gradient(135deg,
+ hsl(42deg, 67%, 70%),
+ hsl(348deg, 67%, 70%),
+ hsl(334deg, 77%, 80%),
+ hsl(234deg, 77%, 76%),
+ hsl(195deg, 67%, 67%),
+ hsl(155deg, 57%, 62%)
+ );
+ background: var(--gradient) fixed;
+}
+
+header {
+ text-align: center;
+}
+
+h1, h2 { font-weight: 100; }
+h1 { font-size: 300%; }
+h2 { font-size: 125%; }
+
+body {
+ --shadow: hsl(42deg, 82%, 90%, 75%);
+
+ background: hsla(0, 0%, 0%, 60%);
+ border: 3px solid white;
+ box-shadow: 0 0 3em var(--shadow);
+ position: relative;
+
+ max-width: 1200px;
+ padding: 2em 1.5em;
+ margin: 2em auto 3.5em;
+ border-radius: 1.5em;
+
+ color: white;
+ --text-shadow: 2px 2px 3px hsl(0, 0%, 0%, 75%);
+ text-shadow: var(--text-shadow);
+}
+
+header h1 {
+ margin: 0; padding: 0;
+}
+
+a {
+ color: inherit;
+}
+
+footer {
+ font-weight: 500;
+ font-size: 80%;
+}
+
+
+.corner {
+ display: block;
+ margin: 0;
+ padding: 0;
+ position: absolute;
+ top: 0.5em;
+
+ font-size: 100%;
+ font-weight: 500;
+}
+
+.corner.left { left: 2em; }
+.corner.right { right: 2em; }
diff --git a/style/shiny/gallery.css b/style/shiny/gallery.css
new file mode 100644
index 0000000..4ef4763
--- /dev/null
+++ b/style/shiny/gallery.css
@@ -0,0 +1,113 @@
+@import url(base.css);
+
+:root {
+ --image-size: 200px;
+}
+
+.grid {
+ padding: 0;
+ display: grid;
+ grid-template-columns: repeat(auto-fill, var(--image-size));
+ grid-gap: 1em;
+ justify-content: center;
+}
+
+.item {
+ --border-thickness: 2px;
+ list-style: none;
+
+ width: var(--image-size);
+ height: var(--image-size);
+ overflow: hidden;
+
+ position: relative;
+}
+
+.item:not(.year-marker) {
+ box-shadow: var(--text-shadow);
+ border: var(--border-thickness) solid white;
+ border-radius: 0.5em;
+}
+
+
+figure {
+ margin: 0;
+ padding: 0;
+}
+
+figcaption {
+ position: absolute;
+ bottom: 0;
+ left: 0;
+ display: block;
+ text-align: center;
+ width: 100%;
+ background: hsl(0, 0%, 0%, 75%);
+ font-size: 80%;
+ border-top: 1px solid white;
+}
+
+
+.year-marker {
+ grid-area: auto / 1;
+ padding: var(--border-thickness);
+}
+
+.year-text {
+ --gap: 0.2em;
+ display: grid;
+ grid-template-columns: repeat(2, calc(50% - 3 * var(--gap)));
+ grid-gap: var(--gap);
+ align-items: center;
+ justify-content: center;
+ height: 100%;
+ width: 100%;
+}
+
+.year-marker .y {
+ display: block;
+ text-align: center;
+ font-size: calc(var(--image-size) * 0.6);
+ line-height: 0;
+ font-weight: 900;
+ transform: scaleX(110%);
+}
+
+.item.nsfw::after {
+ --size: calc(1/4 * var(--image-size));
+ content: url(../18_plus_white.svg);
+ height: var(--size);
+ width: var(--size);
+
+ display: inline-block;
+ position: absolute;
+ top: 3px;
+ right: 3px;
+
+ transform: rotate(30deg);
+ mix-blend-mode: multiply;
+}
+
+@media (hover) {
+ .item:hover figcaption {
+ opacity: 20%;
+ }
+
+ @media (prefers-reduced-motion) {
+ .item:hover figcaption {
+ transform: translateY(80%);
+ }
+ }
+
+ @media (prefers-reduced-motion: no-preference) {
+ .item figcaption {
+ transition-property: opacity, transform;
+ transition-duration: 0.25s;
+ transition-timing-function: ease-in-out;
+ }
+
+ .item:hover figcaption {
+ transform: translate(-20%, 80%) rotateZ(7deg);
+ }
+ }
+}
diff --git a/style/shiny/index.css b/style/shiny/index.css
new file mode 100644
index 0000000..ae1934f
--- /dev/null
+++ b/style/shiny/index.css
@@ -0,0 +1,97 @@
+@import url(base.css);
+
+:root {
+ height: 100vh;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+}
+
+body {
+ width: 37.5em;
+}
+
+header h1::before, header h1::after {
+ display: inline-block;
+}
+header h1::before {
+ content: url(../niss.svg);
+ padding-right: 0.15em;
+ height: 1em;
+ width: 1em;
+ vertical-align: -0.2em;
+}
+header h1::after {
+ content: url(../niss_tongue.svg);
+ padding-left: 0.15em;
+ height: 1.05em;
+ width: 1.05em;
+ vertical-align: -0.32em;
+}
+
+
+@media screen {
+ .nsfw::after {
+ content: url(../18_plus_white.svg);
+ display: inline-block;
+ height: 0.8em;
+ width: 0.8em;
+ transform: rotate(15deg);
+ vertical-align: top;
+ opacity: 80%;
+ mix-blend-mode: hard-light;
+ padding-left: 0.25em;
+ }
+}
+
+@media speech {
+ .nsfw::after {
+ content: ' (nsfw)';
+ }
+}
+
+
+#mutstd-note {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+}
+
+#peace-sign {
+ transform: rotate(15deg);
+ height: 2em;
+ padding-left: 0.5em;
+}
+
+
+.list {
+ display: grid;
+ margin: 0;
+ padding: 0;
+ grid-template-columns: 50% 50%;
+ align-items: center;
+ justify-content: center;
+
+ font-size: 175%;
+}
+
+.list li {
+ list-style: none;
+ text-align: center;
+}
+
+.list a {
+ text-decoration: none;
+}
+
+main {
+ margin: 2em 0;
+}
+
+@media (pointer: coarse) {
+ .list {
+ font-size: 300%;
+ grid-template-columns: 100%;
+ grid-gap: 1em;
+ }
+}
diff --git a/style/shiny/single.css b/style/shiny/single.css
new file mode 100644
index 0000000..6d42e8c
--- /dev/null
+++ b/style/shiny/single.css
@@ -0,0 +1,125 @@
+@import url(base.css);
+
+:root {
+ --image-width: 1000px;
+}
+
+#mainfig {
+ margin: 1em auto;
+ width: min-content;
+ position: relative;
+ overflow: hidden;
+ border: 2px solid white;
+ border-radius: 1em;
+ box-shadow: var(--text-shadow);
+}
+
+#mainimg {
+ display: block;
+}
+
+#cw {
+ position: absolute;
+ top: 0;
+ left: 0;
+ width: 100%;
+ height: 100%;
+ z-index: 1;
+
+ background: hsl(330deg, 20%, 36%);
+ mix-blend-mode: multiply;
+
+ display: flex;
+ align-items: center;
+ justify-content: center;
+}
+
+#cw-text {
+ font-size: 200%;
+ font-weight: 600;
+ color: hsl(330deg, 100%, 90%);
+ text-shadow: none;
+ transform: rotate(-45deg);
+
+ background: hsl(330deg, 40%, 16%);
+ padding: 0.25em 0.5em;
+ border-radius: 0.5em;
+}
+
+#cw + * img {
+ filter: blur(50px);
+ opacity: 65%;
+}
+
+
+.alts input {
+ display: none;
+}
+
+.alts ul, .tags ul, .links ul {
+ padding: 0;
+ display: flex;
+ align-items: flex-start;
+}
+
+.alts ul {
+ justify-content: center;
+}
+
+.alts li, .tags li, .links li {
+ list-style: none;
+}
+
+.alts label, .tags li, .links li {
+ margin-right: 0.5em;
+ padding: 0 0.35em;
+ border-radius: 0.25em;
+
+ border: 1px solid white;
+ background: hsl(330deg, 40%, 16%, 80%);
+ text-shadow: none;
+}
+
+.alts :checked + label {
+ color: hsl(330deg, 40%, 16%, 80%);
+ background: white;
+}
+
+.alts a, .tags a, .links a {
+ text-decoration: none;
+}
+
+.info section {
+ display: grid;
+ grid-template-columns: 10% auto;
+ grid-gap: 2em;
+ align-items: baseline;
+ width: calc(var(--image-width) - 10%);
+ margin: auto;
+}
+
+.info h2, .info ul, .info p {
+ margin: 0.35em;
+}
+
+footer {
+ font-size: 90%;
+ text-align: center;
+ margin-top: 1em;
+}
+
+@media (pointer: coarse) {
+ .alts label, .tags li, .links li {
+ font-size: 200%;
+ border-width: 2px;
+ }
+}
+
+
+@media (prefers-reduced-motion: no-preference) {
+ .alts label {
+ transition-property: color, background;
+ transition-duration: 0.25s;
+ transition-timing-function: ease-in-out;
+ }
+}
diff --git a/style/tum/index.css b/style/tum/index.css
index 0b74bc9..07233c2 100644
--- a/style/tum/index.css
+++ b/style/tum/index.css
@@ -4,7 +4,7 @@ body {
width: 40em;
}
-.gallery-list, .link-list {
+.list {
display: grid;
align-items: center;
--gap: 0.05em;
@@ -18,30 +18,30 @@ body {
font-weight: 600;
}
-.gallery-list {
+#gallery-list {
grid-template-columns: repeat(2, 50%);
}
-.link-list {
+#link-list {
grid-template-columns: 100%;
}
-.gallery-list + .link-list {
+#gallery-list + #link-list {
padding-top: var(--gap);
}
-main a {
+.list a {
display: block;
font-weight: inherit;
color: var(--text);
padding: 0.5em;
}
-main a:hover {
+.list a:hover {
text-decoration: none;
}
-main li {
+.list li {
list-style: none;
text-align: center;
height: 100%;
@@ -50,7 +50,7 @@ main li {
justify-content: center;
}
-.gallery-list li {
+#gallery-list li {
background: var(--green);
}
@@ -62,12 +62,19 @@ li.nsfw {
background: var(--yellow);
}
-.nsfw a::after {
- content: url(../18_plus.svg);
- display: inline-block;
- width: 1em; height: 1em;
- padding-left: 0.15em;
- vertical-align: -0.1em;
+@media screen {
+ .nsfw a::after {
+ content: url(../18_plus.svg);
+ display: inline-block;
+ width: 1em; height: 1em;
+ padding-left: 0.15em;
+ vertical-align: -0.1em;
+ }
+}
+@media speech {
+ .nsfw::after {
+ content: ' (nsfw)';
+ }
}
footer {
diff --git a/style/tum/single.css b/style/tum/single.css
index 0a92977..0af24df 100644
--- a/style/tum/single.css
+++ b/style/tum/single.css
@@ -150,12 +150,6 @@ footer {
}
}
-@media (prefers-reduced-motion: no-preference) {
- #cw + * img {
- transition: none;
- }
-}
-
@media (prefers-reduced-transparency) {
#cw {
background: hsl(var(--text-hue), 35%, 15%);
@@ -163,6 +157,6 @@ footer {
}
#cw + * img {
- filter: none;
+ filter: initial;
}
}