diff --git a/layouts/shortcodes/spoiler.html b/layouts/shortcodes/spoiler.html
index 9187e489..57b8d714 100644
--- a/layouts/shortcodes/spoiler.html
+++ b/layouts/shortcodes/spoiler.html
@@ -1,4 +1,8 @@
- Show spoiler paragraph
+
+ Click to show this spoiler
+ Hide spoiler
+
{{ .Page.RenderString .Inner }}
+{{ .Page.Store.Set "hasSpoilers" true }}
diff --git a/themes/hello-friend-ng/assets/scss/_main.scss b/themes/hello-friend-ng/assets/scss/_main.scss
index 47efcc77..7e227cfc 100644
--- a/themes/hello-friend-ng/assets/scss/_main.scss
+++ b/themes/hello-friend-ng/assets/scss/_main.scss
@@ -592,34 +592,6 @@ a[href^="#fn:"] {
}
}
-.import-note {
- font-style: italic;
-
- border-left: 1px solid var(--accent);
- opacity: 0.6;
- margin: 20px 0;
- padding: 10px 20px;
- font-size: small;
-
- @media #{$media-size-phone} {
- margin: 10px;
- padding: 10px;
- }
-
- p:first-of-type {
- margin-top: 0;
- margin-bottom: 4px
- }
-
- p:nth-of-type(2) {
- margin-top: 4px;
- }
-
- p:last-of-type {
- margin-bottom: 0;
- }
-}
-
input {
border: 1px solid $light-color-secondary;
background-color: $light-background;
diff --git a/themes/hello-friend-ng/assets/scss/_single.scss b/themes/hello-friend-ng/assets/scss/_single.scss
index dbc5f08b..5599eee8 100644
--- a/themes/hello-friend-ng/assets/scss/_single.scss
+++ b/themes/hello-friend-ng/assets/scss/_single.scss
@@ -306,11 +306,89 @@ details.spoiler {
}
& > summary {
- color: $light-color-secondary;
+ span.open { display: none; }
+ span.closed { display: inline; }
+
+ color: $dark-color-secondary;
cursor: pointer;
+ font-size: small;
}
&[open] > summary {
- display: none;
+ display: inline;
+
+ span.open {
+ transform: rotate(-90deg);
+ transform-origin: bottom left;
+ display: block;
+ position: relative;
+ top: calc(100% - 1.5em);
+ }
+ span.closed { display: none; }
+
+ border-left: 1px solid var(--accent);
+ position: absolute;
+ height: 100%;
+ left: -8px;
+ text-align: right;
}
-}
\ No newline at end of file
+}
+
+.import-note {
+ font-style: italic;
+ border: 0;
+ opacity: 0.6;
+ margin: 0;
+ padding: 0;
+ font-size: small;
+ position: relative;
+
+ &::before {
+ content: '';
+ border-left: 1px solid var(--accent);
+ position: absolute;
+ height: 100%;
+ left: -8px;
+ }
+
+ @media #{$media-size-phone} {
+ margin: 10px;
+ padding: 10px;
+ }
+
+ p:first-of-type {
+ margin-top: 0;
+ margin-bottom: 4px
+ }
+
+ p:nth-of-type(2) {
+ margin-top: 4px;
+ }
+
+ p:last-of-type {
+ margin-bottom: 0;
+ }
+}
+
+.spoiler-explainer {
+ border: 0;
+ font-style: italic;
+ margin: 0;
+ opacity: 0.6;
+ font-size: small;
+ padding: 0px;
+ position: relative;
+
+ svg {
+ height: 1em;
+ vertical-align:text-top;
+ }
+
+ &::before {
+ content: '';
+ border-left: 1px solid var(--accent);
+ position: absolute;
+ height: 100%;
+ left: -8px;
+ }
+}
diff --git a/themes/hello-friend-ng/layouts/_default/single.html b/themes/hello-friend-ng/layouts/_default/single.html
index 5a202344..c007270f 100644
--- a/themes/hello-friend-ng/layouts/_default/single.html
+++ b/themes/hello-friend-ng/layouts/_default/single.html
@@ -56,6 +56,12 @@
{{ end }}
+ {{ if .Page.Store.Get "hasSpoilers" }}
+
+ {{ partial "svg.html" (dict "name" "hidden") }} This post contains spoilers, but they're hidden by default.
+
+ {{ end }}
+
{{ .Content }}
diff --git a/themes/hello-friend-ng/layouts/partials/svg.html b/themes/hello-friend-ng/layouts/partials/svg.html
index e5837b6a..396d9b6e 100644
--- a/themes/hello-friend-ng/layouts/partials/svg.html
+++ b/themes/hello-friend-ng/layouts/partials/svg.html
@@ -1,4 +1,6 @@
-{{- if (eq .name "amazon") -}}
+{{- if (eq .name "hidden") -}}
+
+{{- else if (eq .name "amazon") -}}
{{- else if (eq .name "anilist") -}}