diff --git a/style/18_plus_white.svg b/style/18_plus_white.svg
new file mode 100644
index 0000000..7b6e7b3
--- /dev/null
+++ b/style/18_plus_white.svg
@@ -0,0 +1,105 @@
+
+
diff --git a/style/base.css b/style/base.css
index 79c2713..15ba0a4 100644
--- a/style/base.css
+++ b/style/base.css
@@ -12,7 +12,7 @@ html {
--text-hue: 42;
--text: hsl(var(--text-hue), 25%, 24%);
--text-link: hsl(111, 30%, 42%);
- --shadow: hsla(42, 25%, 24%, 40%);
+ --shadow: hsla(42, 25%, 24%, 60%);
--bheight: 121px;
--bplacement: 60vh;
@@ -107,3 +107,13 @@ h5[id]:hover::after {
content: ' ยง';
opacity: 60%;
}
+
+b {
+ /* rather than always 600 or whatever it does */
+ font-weight: bolder;
+}
+
+.emoji {
+ text-align: baseline;
+ height: 1em;
+}
diff --git a/style/gallery.css b/style/gallery.css
index 86cf117..2952525 100644
--- a/style/gallery.css
+++ b/style/gallery.css
@@ -1,63 +1,109 @@
@import url(base.css);
body {
- max-width: 50em;
+ --image-size: 200px;
+ --grid-gap: 1.5em;
+ --max-cols: 4;
+
+ max-width:
+ calc(var(--max-cols) * var(--image-size) +
+ (var(--max-cols) - 1) * var(--grid-gap) +
+ 4em);
}
.grid {
display: grid;
grid-template-columns: repeat(auto-fill, var(--image-size));
- grid-gap: 1.5em;
+ grid-gap: var(--grid-gap);
justify-content: center;
justify-items: center;
align-items: start;
- --image-size: 200px;
- --border-thickness: 2px;
padding: 0;
margin: 0;
}
.item {
- list-style: none;
- padding: 0;
- margin: 0;
+ --shadow-size: 10px;
+ --border-thickness: 2px;
+
position: relative;
width: var(--image-size);
height: var(--image-size);
- box-shadow: 0 0 10px var(--shadow);
- border: 2px solid var(--text);
+ padding: 0;
+ margin: 0;
+
+ list-style: none;
+
+ box-shadow: 0 0 var(--shadow-size) var(--shadow);
+ border: var(--border-thickness) solid var(--text);
overflow: hidden;
}
+.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;
+}
+
figure {
margin: 0;
padding: 0;
}
.item figcaption {
- width: calc(100% - 2 * var(--border-thickness));
+ width: 100%;
margin: 0;
padding: var(--border-thickness);
+ box-sizing: border-box;
position: absolute;
left: 0;
bottom: 0;
font-size: 80%;
+ font-weight: 500;
text-align: center;
- background: hsl(0, 0%, 100%, 75%);
+ background: hsla(47, 74%, 89%, 87%);
text-shadow:
- -1px -1px 1px white,
- 1px -1px 1px white,
- -1px 1px 1px white,
- 1px 1px 1px white;
+ -1px -1px 1px hsla(47, 74%, 89%, 87%),
+ 1px -1px 1px hsla(47, 74%, 89%, 87%),
+ -1px 1px 1px hsla(47, 74%, 89%, 87%),
+ 1px 1px 1px hsla(47, 74%, 89%, 87%);
border-top: 2px solid var(--text);
}
+.year-marker {
+ background: var(--text);
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ grid-area: auto / 1 / auto / auto;
+}
+
+.year-text {
+ color: var(--lighter-tum);
+ transform: rotate(-45deg);
+ font-weight: 900;
+ font-size: 300%;
+}
+
@media (hover) {
+ .item:not(.year-marker):hover {
+ --shadow-size: 20px;
+ }
+
.item:hover figcaption {
opacity: 20%;
}
@@ -77,13 +123,17 @@ figure {
transform: translate(-20%, 80%) rotateZ(7deg);
}
- .item * {
+ .item, .item figcaption, .item img {
transition: all 0.2s ease-in-out;
}
}
}
@media (hover: none) {
+ .item:not(.year-marker) {
+ height: auto;
+ }
+
.item a {
display: block;
margin: 0;
@@ -98,8 +148,19 @@ figure {
position: static;
background: hsl(0, 0%, 100%, 50%);
}
+}
- .item {
- height: auto;
+@media (prefers-reduced-transparency) {
+ .item figcaption {
+ background: hsl(47, 74%, 89%);
+ text-shadow: none;
+ }
+
+ .item:hover figcaption {
+ opacity: 100%;
+ }
+
+ figcaption {
+ transition: none;
}
}
diff --git a/style/green_heart.svg b/style/green_heart.svg
new file mode 100644
index 0000000..b9d85d1
--- /dev/null
+++ b/style/green_heart.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/style/index.css b/style/index.css
index d4fa4fc..069ad50 100644
--- a/style/index.css
+++ b/style/index.css
@@ -52,9 +52,29 @@ body {
}
.nsfw a::after {
- content: url(18_plus.png);
+ content: url(18_plus.svg);
+ display: inline-block;
+ width: 1em; height: 1em;
padding-left: 0.15em;
- vertical-align: middle;
+ vertical-align: -0.1em;
+}
+
+footer {
+ margin: 1.5em auto 0;
+ font-style: italic;
+}
+
+#mutstd-note {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+}
+
+#peace-sign {
+ display: block;
+ height: 2em;
+ padding-left: 0.5em;
+ transform: rotate(20deg);
}
@media (hover) and (prefers-reduced-motion: no-preference) {
diff --git a/style/purple_heart.svg b/style/purple_heart.svg
new file mode 100644
index 0000000..e750bfa
--- /dev/null
+++ b/style/purple_heart.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/style/single.css b/style/single.css
index 01c7969..f4d5efe 100644
--- a/style/single.css
+++ b/style/single.css
@@ -8,14 +8,14 @@ body {
.date, .artist {
font-weight: 400;
position: absolute;
- top: 0.1em;
+ top: -0.5em;
margin: 0;
padding: 0;
font-size: 100%;
- font-style: oblique;
+ font-style: italic;
}
-.date { right: 0.1em; }
-.artist { left: 0.1em; }
+.date { right: -0.4em; }
+.artist { left: -0.4em; }
#mainfig {
justify-content: center;
@@ -40,24 +40,26 @@ body {
height: 100%;
z-index: 1;
- font-size: 250%;
- font-weight: 900;
- color: white;
background: hsla(var(--text-hue), 35%, 15%, 80%);
mix-blend-mode: multiply;
display: flex;
justify-content: center;
align-items: center;
+ text-align: center;
}
-#cw::before {
- content: 'cw:\A0'; /* nsbp */
+#cw-text {
+ font-size: 300%;
font-weight: 600;
+ color: white;
+ transform: rotate(-45deg);
}
#cw + * img {
filter: blur(50px);
+ opacity: 75%;
+ background: var(--text);
}
figcaption p {
@@ -107,8 +109,10 @@ figcaption p {
}
.alts .nsfw label::after {
- content: url(18_plus_small.png);
- vertical-align: middle;
+ content: url(18_plus.svg);
+ display: inline-block;
+ height: 0.8em; width: 0.8em;
+ vertical-align: -0.1em;
padding-left: 0.15em;
}
@@ -139,7 +143,7 @@ figcaption p {
footer {
font-size: 90%;
- font-style: oblique;
+ font-style: italic;
text-align: center;
}
@@ -152,10 +156,6 @@ footer {
footer {
font-size: 150%;
}
-
- .alts .nsfw label::after {
- content: url(18_plus.png);
- }
}
@media (prefers-reduced-motion: no-preference) {
@@ -163,3 +163,14 @@ footer {
transition: none;
}
}
+
+@media (prefers-reduced-transparency) {
+ #cw {
+ background: hsl(var(--text-hue), 35%, 15%);
+ mix-blend-mode: normal;
+ }
+
+ #cw + * img {
+ filter: none;
+ }
+}
diff --git a/style/v_niss.svg b/style/v_niss.svg
new file mode 100644
index 0000000..acb4077
--- /dev/null
+++ b/style/v_niss.svg
@@ -0,0 +1,92 @@
+
+