rhi/gallery
1
0
Fork 0
Code Issues 5 Pull requests 1 Releases Wiki Activity

more style stuff!!!

Browse source
This commit is contained in:
Rhiannon Morris 2020-07-18 11:47:50 +02:00
parent a29fff1094
commit 789140240c
8 changed files with 338 additions and 37 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

105
style/18_plus_white.svg Normal file
View file

@ -0,0 +1,105 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg
xmlns:dc="http://purl.org/dc/elements/1.1/"
xmlns:cc="http://creativecommons.org/ns#"
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
xmlns:svg="http://www.w3.org/2000/svg"
xmlns="http://www.w3.org/2000/svg"
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
clip-rule="evenodd"
fill-rule="evenodd"
stroke-linejoin="round"
stroke-miterlimit="1.41421"
viewBox="0 0 32 32"
version="1.1"
id="svg25"
sodipodi:docname="18_plus_white.svgz"
inkscape:version="0.92.4 (5da689c313, 2019-01-14)">
<defs
id="defs29" />
<sodipodi:namedview
pagecolor="#ffffff"
bordercolor="#666666"
borderopacity="1"
objecttolerance="10"
gridtolerance="10"
guidetolerance="10"
inkscape:pageopacity="0"
inkscape:pageshadow="2"
inkscape:window-width="1908"
inkscape:window-height="1005"
id="namedview27"
showgrid="false"
inkscape:zoom="8"
inkscape:cx="16"
inkscape:cy="16"
inkscape:window-x="0"
inkscape:window-y="0"
inkscape:window-maximized="1"
inkscape:current-layer="g23" />
<clipPath
id="a">
<path
clip-rule="evenodd"
d="m0 0h32v32h-32z"
id="path2" />
</clipPath>
<metadata
id="metadata5">
<rdf:RDF>
<cc:Work
rdf:about="">
<dc:format>image/svg+xml</dc:format>
<dc:type
rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
<dc:title></dc:title>
</cc:Work>
</rdf:RDF>
</metadata>
<path
d="m0 0h32v32h-32z"
fill="none"
id="path7" />
<g
clip-path="url(#a)"
id="g23">
<circle
cx="16"
cy="16"
r="16"
id="circle9"
style="fill:#ffffff;fill-opacity:1" />
<circle
cx="16"
cy="16"
fill="#e02a33"
r="14"
id="circle11"
style="fill:#ea7076;fill-opacity:1" />
<circle
cx="16"
cy="16"
r="12"
id="circle13"
style="fill:#ffffff;fill-opacity:1" />
<g
fill="#fff"
fill-rule="nonzero"
id="g21"
style="fill:#000000;fill-opacity:1">
<path
d="m8.523 12.595-1.975 1.43v-2.418l1.975-1.481h2.23v11.748h-2.23z"
id="path15"
style="fill:#000000;fill-opacity:1" />
<path
d="m16.321 22.061c-.693 0-1.311-.139-1.856-.417s-.974-.678-1.286-1.2-.468-1.124-.468-1.805v-.392c0-.533.125-1.024.375-1.472.249-.449.601-.803 1.055-1.064-.363-.216-.655-.52-.877-.911-.221-.392-.332-.843-.332-1.354v-.306c0-.579.139-1.113.418-1.601.278-.488.672-.877 1.183-1.166.511-.29 1.112-.434 1.805-.434.692 0 1.297.144 1.813.434.516.289.911.678 1.183 1.166.273.488.409 1.022.409 1.601v.306c0 .499-.114.948-.341 1.345s-.516.704-.868.92c.454.272.803.632 1.047 1.081.244.448.366.928.366 1.438v.392c0 .692-.156 1.3-.468 1.822s-.743.922-1.294 1.2c-.55.278-1.172.417-1.864.417zm.017-7.236c.386 0 .692-.128.919-.383s.341-.582.341-.979v-.323c0-.375-.117-.687-.349-.937-.233-.25-.537-.374-.911-.374-.375 0-.679.124-.911.374-.233.25-.349.562-.349.937v.323c0 .409.113.738.34.988.227.249.534.374.92.374zm0 5.346c.442 0 .797-.141 1.064-.425s.4-.664.4-1.141v-.409c0-.454-.133-.823-.4-1.106-.267-.284-.622-.426-1.064-.426-.432 0-.784.142-1.056.426-.272.283-.409.652-.409 1.106v.409c0 .465.131.843.392 1.132.261.29.619.434 1.073.434z"
id="path17"
style="fill:#000000;fill-opacity:1" />
<path
d="m22.834 16.943h-2.073v-1.886h2.073v-2.073h1.886v2.073h2.073v1.886h-2.073v2.073h-1.886z"
id="path19"
style="fill:#000000;fill-opacity:1" />
</g>
</g>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 3.7 KiB

12
style/base.css
View file

@ -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;
}

97
style/gallery.css
View file

@ -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;
}
}

1
style/green_heart.svg Normal file
View file

File diff suppressed because one or more lines are too long
Side by side

After

Width:  |  Height:  |  Size: 10 KiB

24
style/index.css
View file

@ -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) {

1
style/purple_heart.svg Normal file
View file

File diff suppressed because one or more lines are too long
Side by side

After

Width:  |  Height:  |  Size: 10 KiB

43
style/single.css
View file

@ -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;
}
}

92
style/v_niss.svg Normal file
View file

@ -0,0 +1,92 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg
xmlns:dc="http://purl.org/dc/elements/1.1/"
xmlns:cc="http://creativecommons.org/ns#"
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
xmlns:svg="http://www.w3.org/2000/svg"
xmlns="http://www.w3.org/2000/svg"
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
clip-rule="evenodd"
fill-rule="evenodd"
stroke-linejoin="round"
stroke-miterlimit="2"
viewBox="0 0 32 32"
version="1.1"
id="svg23"
sodipodi:docname="v_niss.svg"
inkscape:version="0.92.4 (5da689c313, 2019-01-14)">
<defs
id="defs27" />
<sodipodi:namedview
pagecolor="#ffffff"
bordercolor="#666666"
borderopacity="1"
objecttolerance="10"
gridtolerance="10"
guidetolerance="10"
inkscape:pageopacity="0"
inkscape:pageshadow="2"
inkscape:window-width="1908"
inkscape:window-height="1005"
id="namedview25"
showgrid="false"
inkscape:zoom="7.375"
inkscape:cx="-3.7288136"
inkscape:cy="16"
inkscape:window-x="0"
inkscape:window-y="0"
inkscape:window-maximized="1"
inkscape:current-layer="svg23" />
<clipPath
id="a">
<path
clip-rule="evenodd"
d="m0 0h32v32h-32z"
id="path2" />
</clipPath>
<metadata
id="metadata5">
<rdf:RDF>
<cc:Work
rdf:about="">
<dc:format>image/svg+xml</dc:format>
<dc:type
rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
</cc:Work>
</rdf:RDF>
</metadata>
<path
d="M 32,0 H 0 v 32 h 32 z"
id="path7"
inkscape:connector-curvature="0"
style="fill:none" />
<g
clip-path="url(#a)"
id="g21"
transform="matrix(-1,0,0,1,32,0)">
<path
d="m 19.25,3.52 c 0.755,-2.176 3.064,-3.455 5.341,-2.886 2.41,0.603 3.877,3.048 3.275,5.457 L 26,13.554 v 1.77 c 0.832,0.315 1.575,0.85 2.142,1.563 0.948,1.193 1.301,2.753 0.959,4.237 -0.116,0.502 -0.238,1.032 -0.363,1.574 C 27.481,28.143 22.633,32 17.045,32 L 17,31.982 v 0.014 c 0,0 -0.412,0 -1.035,0 -5.571,0 -10.426,-3.79 -11.778,-9.194 C 3.578,20.371 3.009,18.096 3.009,18.096 2.406,15.687 3.873,13.241 6.282,12.639 6.447,12.597 6.613,12.566 6.777,12.543 6.965,10.711 8.275,9.107 10.164,8.634 10.522,8.545 10.882,8.501 11.236,8.499 L 10.634,6.091 c -0.602,-2.409 0.865,-4.854 3.275,-5.457 2.277,-0.569 4.586,0.71 5.341,2.886 z"
id="path9"
inkscape:connector-curvature="0" />
<path
d="m 7,15 c 2.268,-2.268 2.496,-1.997 5,-4 0.736,-0.589 1.057,-2 2,-2 0.943,0 1.333,1.333 2,2 l 8,4 v 9 L 16,22 H 7 V 20.394 C 6.483,20.379 5.985,20.238 5.545,19.992 L 4.987,17.763 Z"
id="path11"
inkscape:connector-curvature="0"
style="fill:#005766" />
<path
d="m 24.229,17 c 0.914,0 1.778,0.417 2.348,1.132 0.569,0.716 0.781,1.652 0.575,2.543 -0.116,0.502 -0.238,1.032 -0.363,1.574 C 25.742,26.786 21.701,30 17.045,30 H 17 c 0.001,-0.001 0.001,-0.003 0.002,-0.004 H 17 15.965 c -4.653,0 -8.709,-3.166 -9.838,-7.679 L 5.545,19.992 c 0.681,0.381 1.503,0.511 2.316,0.308 0.01,-0.002 0.021,-0.005 0.031,-0.008 0.933,-0.233 1.709,-0.877 2.111,-1.75 0.138,-0.299 0.226,-0.614 0.266,-0.933 0.694,0.426 1.549,0.577 2.385,0.368 10e-4,0 0.002,-0.001 0.002,-0.001 0.201,-0.05 0.393,-0.119 0.574,-0.205 -0.02,0.019 0.978,0.078 0.909,-0.655 C 14.677,16.554 15,15.795 15,14.975 c 0,-0.161 0,-0.313 0,-0.447 0,-0.405 -0.068,-0.807 -0.2,-1.19 L 13.741,10.274 12.575,5.606 c -0.335,-1.338 0.48,-2.697 1.819,-3.031 1.338,-0.335 2.697,0.48 3.031,1.819 l 1.825,7.298 1.825,-7.298 c 0.088,-0.344 0.243,-0.666 0.463,-0.944 0.2,-0.252 0.448,-0.465 0.728,-0.624 0.271,-0.154 0.57,-0.257 0.879,-0.301 0.277,-0.04 0.561,-0.032 0.836,0.022 0.269,0.052 0.529,0.149 0.766,0.286 0.22,0.126 0.42,0.286 0.591,0.473 0.347,0.377 0.574,0.86 0.641,1.369 0.041,0.312 0.02,0.627 -0.054,0.931 L 24,13.308 V 15 h -8 v 1.663 L 15,18 c 0,3.314 3.686,6 7,6 l 1,-1 v -2 h -1 c -2.209,0 -4,-1.791 -4,-4 z M 4.987,17.763 4.949,17.611 c -0.335,-1.339 0.48,-2.697 1.818,-3.032 0.521,-0.131 1.045,-0.087 1.511,0.094 l 0.786,1.573 c 0.295,0.589 0.306,1.28 0.031,1.878 -0.275,0.598 -0.807,1.039 -1.446,1.198 -0.01,0.003 -0.02,0.005 -0.031,0.008 -1.119,0.28 -2.262,-0.365 -2.6,-1.468 z m 3.816,-4.275 c -0.26,-1.299 0.546,-2.589 1.846,-2.913 0.876,-0.219 1.761,0.054 2.361,0.645 l 0.845,2.444 C 13.951,13.942 14,14.234 14,14.528 v 0.447 c 0,0.961 -0.654,1.798 -1.586,2.031 -10e-4,0 -0.002,0.001 -0.003,0.001 -0.96,0.24 -1.958,-0.219 -2.401,-1.105 z"
id="path13"
inkscape:connector-curvature="0"
style="fill:#00e2d7" />
<g
id="g19"
style="fill:#008b92">
<path
d="m 23,23 v 1.158 c 0,0.923 -0.426,1.796 -1.154,2.364 -0.728,0.569 -1.677,0.77 -2.574,0.546 -0.917,-0.229 -1.782,-0.445 -2.294,-0.574 -0.318,-0.079 -0.643,-0.119 -0.97,-0.119 h -0.016 c -0.327,0 -0.652,0.04 -0.97,0.119 -0.512,0.129 -1.377,0.345 -2.294,0.574 -0.897,0.224 -1.846,0.023 -2.574,-0.546 C 9.426,25.954 9,25.081 9,24.158 c 0,-0.172 0,-0.34 0,-0.501 0,-1.061 0.421,-2.078 1.172,-2.829 0.819,-0.819 1.951,-1.951 3,-3 0.019,-0.019 0.038,-0.038 0.058,-0.057 0.345,-0.163 0.652,-0.386 0.909,-0.655 0.569,-0.299 1.207,-0.459 1.861,-0.459 V 17 c 0,3.314 2.686,6 6,6 z"
id="path15"
style="fill:#00e2d7;fill-opacity:1"
inkscape:connector-curvature="0" />
</g>
</g>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 5.3 KiB