about
$8*desc
@@ -120,7 +120,7 @@ makeButtonBar title images =
1 -> ""
_ -> [b|@0
@@ -133,21 +133,22 @@ altButton i (Image {label, path, nsfw, warning}) = [b|@4
-
+
|]
where
- nsfwClass = if nsfw then " class=nsfw" else ""
- checked = if i == 0 then " checked" else ""
- idLabel = escId label
- path' = pageFile path
- warning' = ifJust warning \w -> [b| data-warning="$*w"|]
+ nsfwClass = if nsfw then " class=nsfw" else ""
+ nsfwLabelClass = if nsfw then " class=nsfw-label" else ""
+ checked = if i == 0 then " checked" else ""
+ idLabel = escId label
+ path' = pageFile path
+ warning' = ifJust warning \w -> [b| data-warning="$*w"|]
makeTags :: [Strict.Text] -> Builder
makeTags tags =
if null tags then "" else [b|@4
diff --git a/style/shiny/base.css b/style/shiny/base.css
index 662d82d..f480d00 100644
--- a/style/shiny/base.css
+++ b/style/shiny/base.css
@@ -94,7 +94,28 @@ footer {
}
-.buttonbar.choice input {
+.buttonbar {
+ padding: 0;
+ display: flex;
+ align-items: flex-start;
+ flex-flow: row wrap;
+ margin-bottom: -0.5em;
+}
+
+.buttonbar li {
+ list-style: none;
+ margin-bottom: 0.5em;
+}
+
+.buttonbar a {
+ text-decoration: none;
+}
+
+.bb-choice {
+ justify-content: center;
+}
+
+.bb-choice input {
display: inline;
-webkit-appearance: none;
-moz-appearance: none;
@@ -104,25 +125,7 @@ footer {
width: 0;
}
-.buttonbar {
- padding: 0;
- display: flex;
- align-items: flex-start;
- flex-flow: row wrap;
- margin-bottom: -0.5em;
-}
-
-.buttonbar.choice {
- justify-content: center;
-}
-
-.buttonbar li {
- list-style: none;
- margin-bottom: 0.5em;
-}
-
-.buttonbar.choice label,
-.buttonbar:not(.choice) li {
+.bb-choice label, .bb-links li {
--button-bg: hsl(330deg, 40%, 16%, 100%);
margin-right: 0.5em;
padding: 0 0.35em;
@@ -133,22 +136,18 @@ footer {
text-shadow: none;
}
-.buttonbar.choice :focus + label,
-.buttonbar:not(.choice) li:focus-within {
+.bb-choice :focus ~ label, .bb-links li:focus-within {
box-shadow: var(--focus-box);
}
-.buttonbar.choice :checked + label {
+.bb-choice :checked ~ label {
color: var(--button-bg);
background: var(--text-col);
}
-.buttonbar a {
- text-decoration: none;
-}
-summary h1, summary h2, summary h3, summary h4 {
+summary > * {
display: inline;
}
diff --git a/style/shiny/gallery.css b/style/shiny/gallery.css
index 7fe62fc..00ba342 100644
--- a/style/shiny/gallery.css
+++ b/style/shiny/gallery.css
@@ -19,23 +19,23 @@ body {
margin: 1em 0 2em 0;
}
-#filters h3, #filters div > a {
- font-weight: 100;
- font-size: 110%;
+#filters h3, #clear, #reset {
margin: 0;
}
-#filters h3 {
+#clear, #reset {
+ font-weight: 400;
+ font-size: 110%;
+}
+
+#filters h3, #clear {
text-align: right;
grid-area: auto / 1;
}
-#clear {
- text-align: right;
-}
-
#reset {
text-align: left;
+ grid-area: auto / 2;
}
@media (max-width: 80rem) {
diff --git a/style/shiny/index.css b/style/shiny/index.css
index 886327a..4d63b0f 100644
--- a/style/shiny/index.css
+++ b/style/shiny/index.css
@@ -11,17 +11,17 @@ body {
width: 37.5em;
}
-header h1::before, header h1::after {
+#title::before, #title::after {
display: inline-block;
}
-header h1::before {
+#title::before {
content: url(../niss.svg);
padding-right: 0.15em;
height: 1em;
width: 1em;
vertical-align: -0.2em;
}
-header h1::after {
+#title::after {
content: url(../niss_tongue.svg);
padding-left: 0.15em;
height: 1.05em;
diff --git a/style/shiny/single.css b/style/shiny/single.css
index e67ef82..955e3d4 100644
--- a/style/shiny/single.css
+++ b/style/shiny/single.css
@@ -57,12 +57,12 @@ body {
border-radius: 0.5em;
}
-#cw + * img {
+#cw ~ * {
filter: blur(50px);
opacity: 65%;
}
-#alts .nsfw label::after {
+.nsfw-label::after {
content: url(../18_plus_white.svg);
transform: rotate(var(--nsfw-sticker-rotate));
display: inline-block;
@@ -71,7 +71,7 @@ body {
padding-left: 0.25em;
}
-#alts .nsfw :checked + label::after {
+:checked ~ .nsfw-label::after {
content: url(../18_plus.svg);
}