new style
This commit is contained in:
parent
76e54d0297
commit
341c2baae3
11 changed files with 447 additions and 33 deletions
|
|
@ -2,7 +2,7 @@
|
||||||
module GalleryPage (make) where
|
module GalleryPage (make) where
|
||||||
|
|
||||||
import Control.Exception
|
import Control.Exception
|
||||||
import Data.Function (on)
|
import Data.Function (on, (&))
|
||||||
import Data.List (sortOn, groupBy)
|
import Data.List (sortOn, groupBy)
|
||||||
import qualified Data.Text.Lazy as Lazy
|
import qualified Data.Text.Lazy as Lazy
|
||||||
import System.FilePath ((</>), takeDirectory)
|
import System.FilePath ((</>), takeDirectory)
|
||||||
|
|
@ -27,7 +27,8 @@ make' title nsfw infos = [b|@0
|
||||||
<!DOCTYPE html>
|
<!DOCTYPE html>
|
||||||
<html lang=en>
|
<html lang=en>
|
||||||
<meta charset=utf-8>
|
<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>
|
<link rel=alternate href=rss.xml type=application/rss+xml>
|
||||||
|
|
||||||
<title>$*title</title>
|
<title>$*title</title>
|
||||||
|
|
@ -61,14 +62,16 @@ makeYearItems :: Bool -- ^ nsfw
|
||||||
-> Builder
|
-> Builder
|
||||||
makeYearItems nsfw year infos = [b|@4
|
makeYearItems nsfw year infos = [b|@4
|
||||||
<li class="item year-marker">
|
<li class="item year-marker">
|
||||||
<span class=year-text>$^year</span>
|
<span class=year-text>$year'</span>
|
||||||
$4.items
|
$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 :: Bool -> FilePath -> Info -> Builder
|
||||||
makeItem nsfw file info@(Info {title}) = [b|@4
|
makeItem nsfw file info@(Info {title}) = [b|@4
|
||||||
<li $cls>
|
<li class="item post$nsfw'">
|
||||||
<figure>
|
<figure>
|
||||||
<a href="$@dir">
|
<a href="$@dir">
|
||||||
<img src="$@thumb">
|
<img src="$@thumb">
|
||||||
|
|
@ -79,5 +82,4 @@ makeItem nsfw file info@(Info {title}) = [b|@4
|
||||||
where
|
where
|
||||||
dir = takeDirectory file
|
dir = takeDirectory file
|
||||||
thumb = maybe (throw $ NoThumb dir) (\t -> dir </> thumbFile t) $ #thumb info
|
thumb = maybe (throw $ NoThumb dir) (\t -> dir </> thumbFile t) $ #thumb info
|
||||||
cls | nsfw && #anyNsfw info = [b|class="item nsfw"|]
|
nsfw' = if nsfw && #anyNsfw info then " nsfw" else ""
|
||||||
| otherwise = [b|class=item|]
|
|
||||||
|
|
|
||||||
|
|
@ -13,7 +13,8 @@ make' (IndexInfo {title, galleries, links, footer}) = [b|@0
|
||||||
<!DOCTYPE html>
|
<!DOCTYPE html>
|
||||||
<html lang=en>
|
<html lang=en>
|
||||||
<meta charset=utf-8>
|
<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>
|
<title>$*title</title>
|
||||||
|
|
||||||
|
|
@ -30,13 +31,13 @@ make' (IndexInfo {title, galleries, links, footer}) = [b|@0
|
||||||
|]
|
|]
|
||||||
where
|
where
|
||||||
galleryList = if null galleries then "" else [b|@2
|
galleryList = if null galleries then "" else [b|@2
|
||||||
<ul class=gallery-list>
|
<ul id=gallery-list class=list>
|
||||||
$4.items
|
$4.items
|
||||||
</ul>
|
</ul>
|
||||||
|]
|
|]
|
||||||
where items = map makeItem galleries
|
where items = map makeItem galleries
|
||||||
linkList = if null links then "" else [b|@2
|
linkList = if null links then "" else [b|@2
|
||||||
<ul class=link-list>
|
<ul id=link-list class=list>
|
||||||
$4.items
|
$4.items
|
||||||
</ul>
|
</ul>
|
||||||
|]
|
|]
|
||||||
|
|
@ -51,7 +52,7 @@ make' (IndexInfo {title, galleries, links, footer}) = [b|@0
|
||||||
|
|
||||||
makeItem :: GalleryInfo -> Builder
|
makeItem :: GalleryInfo -> Builder
|
||||||
makeItem (GalleryInfo {title, description, prefix, filters}) = [b|@4
|
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 ""
|
where nsfw = if hasNsfw filters then " class=nsfw" else ""
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -33,7 +33,8 @@ make' nsfw (Info {date, title, artist, tags, nsfwTags,
|
||||||
<html lang=en>
|
<html lang=en>
|
||||||
<meta charset=utf-8>
|
<meta charset=utf-8>
|
||||||
<meta name=viewport content='width=1200,viewport-fit=cover'>
|
<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>
|
<title>$*title</title>
|
||||||
|
|
||||||
|
|
|
||||||
1
style/niss.svg
Normal file
1
style/niss.svg
Normal file
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 9.8 KiB |
1
style/niss_tongue.svg
Normal file
1
style/niss_tongue.svg
Normal file
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 15 KiB |
72
style/shiny/base.css
Normal file
72
style/shiny/base.css
Normal 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
113
style/shiny/gallery.css
Normal 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
97
style/shiny/index.css
Normal 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
125
style/shiny/single.css
Normal 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;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -4,7 +4,7 @@ body {
|
||||||
width: 40em;
|
width: 40em;
|
||||||
}
|
}
|
||||||
|
|
||||||
.gallery-list, .link-list {
|
.list {
|
||||||
display: grid;
|
display: grid;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
--gap: 0.05em;
|
--gap: 0.05em;
|
||||||
|
|
@ -18,30 +18,30 @@ body {
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
}
|
}
|
||||||
|
|
||||||
.gallery-list {
|
#gallery-list {
|
||||||
grid-template-columns: repeat(2, 50%);
|
grid-template-columns: repeat(2, 50%);
|
||||||
}
|
}
|
||||||
|
|
||||||
.link-list {
|
#link-list {
|
||||||
grid-template-columns: 100%;
|
grid-template-columns: 100%;
|
||||||
}
|
}
|
||||||
|
|
||||||
.gallery-list + .link-list {
|
#gallery-list + #link-list {
|
||||||
padding-top: var(--gap);
|
padding-top: var(--gap);
|
||||||
}
|
}
|
||||||
|
|
||||||
main a {
|
.list a {
|
||||||
display: block;
|
display: block;
|
||||||
font-weight: inherit;
|
font-weight: inherit;
|
||||||
color: var(--text);
|
color: var(--text);
|
||||||
padding: 0.5em;
|
padding: 0.5em;
|
||||||
}
|
}
|
||||||
|
|
||||||
main a:hover {
|
.list a:hover {
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
main li {
|
.list li {
|
||||||
list-style: none;
|
list-style: none;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
|
|
@ -50,7 +50,7 @@ main li {
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
.gallery-list li {
|
#gallery-list li {
|
||||||
background: var(--green);
|
background: var(--green);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -62,12 +62,19 @@ li.nsfw {
|
||||||
background: var(--yellow);
|
background: var(--yellow);
|
||||||
}
|
}
|
||||||
|
|
||||||
.nsfw a::after {
|
@media screen {
|
||||||
|
.nsfw a::after {
|
||||||
content: url(../18_plus.svg);
|
content: url(../18_plus.svg);
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
width: 1em; height: 1em;
|
width: 1em; height: 1em;
|
||||||
padding-left: 0.15em;
|
padding-left: 0.15em;
|
||||||
vertical-align: -0.1em;
|
vertical-align: -0.1em;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
@media speech {
|
||||||
|
.nsfw::after {
|
||||||
|
content: ' (nsfw)';
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
footer {
|
footer {
|
||||||
|
|
|
||||||
|
|
@ -150,12 +150,6 @@ footer {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@media (prefers-reduced-motion: no-preference) {
|
|
||||||
#cw + * img {
|
|
||||||
transition: none;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@media (prefers-reduced-transparency) {
|
@media (prefers-reduced-transparency) {
|
||||||
#cw {
|
#cw {
|
||||||
background: hsl(var(--text-hue), 35%, 15%);
|
background: hsl(var(--text-hue), 35%, 15%);
|
||||||
|
|
@ -163,6 +157,6 @@ footer {
|
||||||
}
|
}
|
||||||
|
|
||||||
#cw + * img {
|
#cw + * img {
|
||||||
filter: none;
|
filter: initial;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue