From 5a1181ec76c02bd4bfca759fa91397732b9a8520 Mon Sep 17 00:00:00 2001 From: Rhiannon Morris Date: Sun, 19 Jul 2020 12:22:02 +0200 Subject: [PATCH] add extra link support to index page --- make-pages/IndexPage.hs | 42 ++++++++++++++++++++++++++++---------- make-pages/Info.hs | 6 ++++-- style/index.css | 45 +++++++++++++++++++++++++---------------- 3 files changed, 63 insertions(+), 30 deletions(-) diff --git a/make-pages/IndexPage.hs b/make-pages/IndexPage.hs index 47c53d9..e523e3c 100644 --- a/make-pages/IndexPage.hs +++ b/make-pages/IndexPage.hs @@ -10,7 +10,7 @@ make :: IndexInfo -> Lazy.Text make info = toLazyText $ make' info make' :: IndexInfo -> Builder -make' (IndexInfo {title, galleries, footer}) = [b|@0 +make' (IndexInfo {title, galleries, links, footer}) = [b|@0 @@ -23,24 +23,44 @@ make' (IndexInfo {title, galleries, footer}) = [b|@0
+ $galleryList + $linkList +
+ + $footer' + |] + where + galleryList = if null galleries then "" else [b|@2 - - - - |] - where - items = map makeItem galleries + |] + where items = map makeItem galleries + linkList = if null links then "" else [b|@2 + + |] + where items = map makeLink links + footer' = case footer of + Nothing -> "" + Just f -> [b|@0 + + |] makeItem :: GalleryInfo -> Builder makeItem (GalleryInfo {title, prefix, filters}) = [b|@4 $*title |] - where - nsfw = if hasNsfw filters then " class=nsfw" else "" + where nsfw = if hasNsfw filters then " class=nsfw" else "" + +makeLink :: Link -> Builder +makeLink (Link {title, url, nsfw}) = [b|@4 + $*title + |] + where nsfw' = if nsfw then " class=nsfw" else "" hasNsfw :: GalleryFilters -> Bool hasNsfw (GalleryFilters {nsfw}) = nsfw /= Just False diff --git a/make-pages/Info.hs b/make-pages/Info.hs index 14791b2..690267f 100644 --- a/make-pages/Info.hs +++ b/make-pages/Info.hs @@ -200,7 +200,8 @@ data IndexInfo = IndexInfo { title :: !Text, galleries :: ![GalleryInfo], - footer :: !Text + links :: ![Link], + footer :: !(Maybe Text) } deriving Show @@ -208,7 +209,8 @@ instance FromYAML IndexInfo where parseYAML = YAML.withMap "index info" \m -> IndexInfo <$> m .: "title" <*> m .:? "galleries" .!= [] - <*> m .:? "footer" .!= "" + <*> m .:? "links" .!= [] + <*> m .:? "footer" data Pair a b = Pair !a !b diff --git a/style/index.css b/style/index.css index 069ad50..fc9404b 100644 --- a/style/index.css +++ b/style/index.css @@ -4,10 +4,12 @@ body { width: 40em; } -.gallery-list { +.gallery-list, .link-list { display: grid; - grid-template-columns: repeat(2, 50%); align-items: center; + --gap: 0.05em; + grid-gap: var(--gap); + background: var(--text); margin: 0; padding: 0; @@ -16,41 +18,50 @@ body { font-weight: 600; } -.gallery-list a { +.gallery-list { + grid-template-columns: repeat(2, 50%); +} + +.link-list { + grid-template-columns: 100%; +} + +.gallery-list + .link-list { + padding-top: var(--gap); +} + +main a { display: block; font-weight: inherit; color: var(--text); padding: 0.5em; } -.gallery-list a:hover { +main a:hover { text-decoration: none; } -.gallery-list li { +main li { list-style: none; text-align: center; height: 100%; display: flex; align-items: center; justify-content: center; +} +.gallery-list li { background: var(--green); } -.gallery-list li:nth-child(2n) { - border-left: 2px solid hsla(0, 0%, 100%, 30%); -} - -.gallery-list li:nth-child(2n+1) { - border-right: 2px solid hsla(0, 0%, 100%, 30%); -} - - -.gallery-list .nsfw { +li.nsfw { background: var(--red); } +.link-list li { + background: var(--yellow); +} + .nsfw a::after { content: url(18_plus.svg); display: inline-block; @@ -78,14 +89,14 @@ footer { } @media (hover) and (prefers-reduced-motion: no-preference) { - .gallery-list a:hover { + main a:hover { transform: scale(110%); transition: transform 0.25s ease-in-out; } } @media (pointer: coarse) { - .gallery-list { + main { font-size: 300%; }