From 341c2baae3e2cc7d69e6d038c93eb80ccfb92604 Mon Sep 17 00:00:00 2001 From: Rhiannon Morris Date: Mon, 20 Jul 2020 22:40:34 +0200 Subject: [PATCH] new style --- make-pages/GalleryPage.hs | 16 ++--- make-pages/IndexPage.hs | 9 +-- make-pages/SinglePage.hs | 3 +- style/niss.svg | 1 + style/niss_tongue.svg | 1 + style/shiny/base.css | 72 ++++++++++++++++++++++ style/shiny/gallery.css | 113 ++++++++++++++++++++++++++++++++++ style/shiny/index.css | 97 +++++++++++++++++++++++++++++ style/shiny/single.css | 125 ++++++++++++++++++++++++++++++++++++++ style/tum/index.css | 35 ++++++----- style/tum/single.css | 8 +-- 11 files changed, 447 insertions(+), 33 deletions(-) create mode 100644 style/niss.svg create mode 100644 style/niss_tongue.svg create mode 100644 style/shiny/base.css create mode 100644 style/shiny/gallery.css create mode 100644 style/shiny/index.css create mode 100644 style/shiny/single.css 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; } }