rhi
/
gallery
1
0
Fork 0
Code Issues 5 Pull Requests 1 Releases Wiki Activity

new style

This commit is contained in:
Rhiannon Morris 2020-07-20 22:40:34 +02:00
parent 76e54d0297
commit 341c2baae3
11 changed files with 447 additions and 33 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
make-pages/GalleryPage.hs
View File

@ -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
<!DOCTYPE html>
<html lang=en>
<meta charset=utf-8>
<link rel=stylesheet href=/style/tum/gallery.css>
<link rel=stylesheet href=/style/shiny/gallery.css>
<link rel='alternate stylesheet' href=/style/tum/gallery.css>
<link rel=alternate href=rss.xml type=application/rss+xml>
<title>$*title</title>
@ -61,14 +62,16 @@ makeYearItems :: Bool -- ^ nsfw
-> Builder
makeYearItems nsfw year infos = [b|@4
<li class="item year-marker">
<span class=year-text>$^year</span>
<span class=year-text>$year'</span>
$4.items
|]
where items = map (uncurry $ makeItem nsfw) infos
where
items = map (uncurry $ makeItem nsfw) infos
year' = show year & foldMap \c -> [b|<span class=y>$'c</span>|]
makeItem :: Bool -> FilePath -> Info -> Builder
makeItem nsfw file info@(Info {title}) = [b|@4
<li $cls>
<li class="item post$nsfw'">
<figure>
<a href="$@dir">
<img src="$@thumb">
@ -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 ""

9
make-pages/IndexPage.hs
View File

@ -13,7 +13,8 @@ make' (IndexInfo {title, galleries, links, footer}) = [b|@0
<!DOCTYPE html>
<html lang=en>
<meta charset=utf-8>
<link rel=stylesheet href=/style/tum/index.css>
<link rel=stylesheet href=/style/shiny/index.css>
<link rel='alternate stylesheet' href=/style/tum/index.css>
<title>$*title</title>
@ -30,13 +31,13 @@ make' (IndexInfo {title, galleries, links, footer}) = [b|@0
|]
where
galleryList = if null galleries then "" else [b|@2
<ul class=gallery-list>
<ul id=gallery-list class=list>
$4.items
</ul>
|]
where items = map makeItem galleries
linkList = if null links then "" else [b|@2
<ul class=link-list>
<ul id=link-list class=list>
$4.items
</ul>
|]
@ -51,7 +52,7 @@ make' (IndexInfo {title, galleries, links, footer}) = [b|@0
makeItem :: GalleryInfo -> Builder
makeItem (GalleryInfo {title, description, prefix, filters}) = [b|@4
<li$nsfw><a href=$@prefix title="$*description">$*title</a>
<li$nsfw><a href=$@prefix title="$*description">$*title</a></li>
|]
where nsfw = if hasNsfw filters then " class=nsfw" else ""

3
make-pages/SinglePage.hs
View File

@ -33,7 +33,8 @@ make' nsfw (Info {date, title, artist, tags, nsfwTags,
<html lang=en>
<meta charset=utf-8>
<meta name=viewport content='width=1200,viewport-fit=cover'>
<link rel=stylesheet href=/style/tum/single.css>
<link rel=stylesheet href=/style/shiny/single.css>
<link rel='alternate stylesheet' href=/style/tum/single.css>
<title>$*title</title>

1
style/niss.svg Normal file
View File

File diff suppressed because one or more lines are too long
Side by Side

After

Width:  |  Height:  |  Size: 9.8 KiB

1
style/niss_tongue.svg Normal file
View File

File diff suppressed because one or more lines are too long
Side by Side

After

Width:  |  Height:  |  Size: 15 KiB

72
style/shiny/base.css Normal file
View File

@ -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; }

113
style/shiny/gallery.css Normal file
View File

@ -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);
}
}
}

97
style/shiny/index.css Normal file
View File

@ -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;
}
}

125
style/shiny/single.css Normal file
View File

@ -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;
}
}

35
style/tum/index.css
View File

@ -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 {

8
style/tum/single.css
View File

@ -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;
}
}