make buttonbar class
This commit is contained in:
parent
1fb80d0674
commit
95b73d45e0
3 changed files with 70 additions and 62 deletions
|
|
@ -39,6 +39,8 @@ make' nsfw dir (Info {date, title, artist, tags, nsfwTags,
|
|||
<link rel=stylesheet href=/style/shiny/single.css title=shiny>
|
||||
<link rel='alternate stylesheet' href=/style/tum/single.css title=tummy>
|
||||
|
||||
<script async src=/script/single.js></script>
|
||||
|
||||
$0.prefetches
|
||||
|
||||
<title>$*title</title>
|
||||
|
|
@ -47,10 +49,9 @@ make' nsfw dir (Info {date, title, artist, tags, nsfwTags,
|
|||
<h1>$*title</h1>
|
||||
$artistTag
|
||||
<h2 id=date class="right corner">$formattedDate</h2>
|
||||
$buttonBar
|
||||
</header>
|
||||
|
||||
<script async src=/script/single.js></script>
|
||||
$buttonBar
|
||||
|
||||
<main>
|
||||
<figure id=mainfig>
|
||||
|
|
@ -130,17 +131,17 @@ makeButtonBar title images =
|
|||
case length images of
|
||||
0 -> throw $ NoEligibleImages title
|
||||
1 -> ""
|
||||
_ -> [b|@2
|
||||
<nav class=alts>
|
||||
<ul id=altlist>
|
||||
$6.alts
|
||||
_ -> [b|@0
|
||||
<nav id=alts>
|
||||
<ul class="buttonbar choice">
|
||||
$4.alts
|
||||
</ul>
|
||||
</nav>
|
||||
|]
|
||||
where alts = map (uncurry altButton) $ zip [0..] images
|
||||
|
||||
altButton :: Int -> Image -> Builder
|
||||
altButton i (Image {label, path, nsfw, warning}) = [b|@6
|
||||
altButton i (Image {label, path, nsfw, warning}) = [b|@4
|
||||
<li$nsfwClass>
|
||||
<input type=radio$checked id="$idLabel" name=variant
|
||||
autocomplete=off value="$@path'"
|
||||
|
|
@ -166,7 +167,7 @@ makeTags nsfw sfwTags nsfwTags =
|
|||
if null tags then "" else [b|@4
|
||||
<section class=tags>
|
||||
<h2>tags</h2>
|
||||
<ul>
|
||||
<ul class=buttonbar>
|
||||
$8.tagList
|
||||
</ul>
|
||||
</section>
|
||||
|
|
@ -181,7 +182,7 @@ extLinks nsfw allLinks =
|
|||
if null links then "" else [b|@4
|
||||
<section class=links>
|
||||
<h2>links</h2>
|
||||
<ul>
|
||||
<ul class=buttonbar>
|
||||
$8.linkList
|
||||
</ul>
|
||||
</section>
|
||||
|
|
|
|||
|
|
@ -1,10 +1,6 @@
|
|||
@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%),
|
||||
|
|
@ -14,11 +10,16 @@
|
|||
hsl(195deg, 67%, 67%),
|
||||
hsl(155deg, 57%, 62%)
|
||||
);
|
||||
background: var(--gradient) fixed;
|
||||
margin: 1em;
|
||||
|
||||
--text-col: white;
|
||||
--nsfw-sticker-rotate: 15deg;
|
||||
|
||||
font-family: Muller;
|
||||
font-size: 18pt;
|
||||
font-weight: 600;
|
||||
|
||||
background: var(--gradient) fixed;
|
||||
margin: 1em;
|
||||
}
|
||||
|
||||
header {
|
||||
|
|
@ -81,6 +82,49 @@ footer {
|
|||
}
|
||||
|
||||
|
||||
.buttonbar.choice input {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.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 {
|
||||
--button-bg: hsl(330deg, 40%, 16%, 100%);
|
||||
margin-right: 0.5em;
|
||||
padding: 0 0.35em;
|
||||
border-radius: 0.25em;
|
||||
|
||||
border: 1px solid var(--text-col);
|
||||
background: var(--button-bg);
|
||||
text-shadow: none;
|
||||
}
|
||||
|
||||
.buttonbar.choice :checked + label {
|
||||
color: var(--button-bg);
|
||||
background: var(--text-col);
|
||||
}
|
||||
|
||||
.buttonbar a {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
:root {
|
||||
--gradient:
|
||||
|
|
@ -113,3 +157,11 @@ footer {
|
|||
--border-col: black;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@media (pointer: coarse) {
|
||||
.buttonbar {
|
||||
font-size: 200%;
|
||||
border-width: 2px;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -58,44 +58,7 @@ body {
|
|||
opacity: 65%;
|
||||
}
|
||||
|
||||
|
||||
.alts input {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.alts ul, .tags ul, .links ul {
|
||||
padding: 0;
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
flex-flow: row wrap;
|
||||
margin-bottom: -0.5em;
|
||||
}
|
||||
|
||||
.alts ul {
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.alts li, .tags li, .links li {
|
||||
list-style: none;
|
||||
margin-bottom: 0.5em;
|
||||
}
|
||||
|
||||
.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 .nsfw label::after {
|
||||
#alts .nsfw label::after {
|
||||
content: url(../18_plus_white.svg);
|
||||
transform: rotate(var(--nsfw-sticker-rotate));
|
||||
display: inline-block;
|
||||
|
|
@ -104,14 +67,10 @@ body {
|
|||
padding-left: 0.25em;
|
||||
}
|
||||
|
||||
.alts .nsfw :checked + label::after {
|
||||
#alts .nsfw :checked + label::after {
|
||||
content: url(../18_plus.svg);
|
||||
}
|
||||
|
||||
.alts a, .tags a, .links a {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.info section {
|
||||
display: grid;
|
||||
grid-template-columns: 10% auto;
|
||||
|
|
@ -132,10 +91,6 @@ footer {
|
|||
}
|
||||
|
||||
@media (pointer: coarse) {
|
||||
.alts label, .tags li, .links li {
|
||||
font-size: 200%;
|
||||
border-width: 2px;
|
||||
}
|
||||
footer {
|
||||
font-size: 150%;
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in a new issue