sammy/cherrykitten.dev
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

some more changes

Browse source
This commit is contained in:
CherryKitten 2024-06-07 14:29:58 +02:00
parent 70f36b7dad
commit 8c6873737c
Signed by: sammy
GPG key ID: 98D8F75FB0658276
3 changed files with 52 additions and 34 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

26
sass/gallery.scss
View file

@ -1,14 +1,22 @@
@import "variables"; @import "variables";
.gallery { .gallery {
display: grid; display: grid;
grid-auto-flow: row dense; grid-auto-flow: row dense;
grid-auto-rows: 1fr; grid-auto-rows: 1fr;
grid-template-columns: 1fr 1fr 1fr; grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: 1fr 1fr 1fr; gap: 2em 2em;
gap: 2em 2em;
grid-template-areas: img {
". . ." max-width: 100%;
". . ." }
". . .";
img:hover {
border: 2px ridge var(--accent);
}
}
.gallery:has(img:hover) img:not(:hover) {
filter: brightness(0.5) contrast(0.5);
} }

51
sass/main.scss
View file

@ -13,7 +13,11 @@ html {
body { body {
margin: 0; margin: 0;
padding: 0; padding: 0;
font-family: Monaco, Consolas, Ubuntu Mono, monospace; font-family:
Monaco,
Consolas,
Ubuntu Mono,
monospace;
font-size: 1rem; font-size: 1rem;
line-height: 1.54; line-height: 1.54;
background-color: var(--background); background-color: var(--background);
@ -27,7 +31,8 @@ body {
font-size: 1rem; font-size: 1rem;
} }
} }
h1, h2 { h1,
h2 {
display: flex; display: flex;
align-items: center; align-items: center;
font-weight: 500; font-weight: 500;
@ -35,7 +40,10 @@ h1, h2 {
color: var(--accent2); color: var(--accent2);
} }
h3, h4, h5, h6 { h3,
h4,
h5,
h6 {
display: flex; display: flex;
align-items: center; align-items: center;
font-weight: 400; font-weight: 400;
@ -54,17 +62,17 @@ h2 {
padding-bottom: 7px; padding-bottom: 7px;
} }
h3 { h3 {
font-size: 1.2rem; font-size: 1.2rem;
font-weight: bolder; font-weight: bolder;
} }
h4, h5, h6 { h4,
h5,
h6 {
font-size: 1.15rem; font-size: 1.15rem;
} }
a { a {
color: inherit; color: inherit;
} }
@ -142,16 +150,16 @@ code {
background: var(--accent-alpha-20); background: var(--accent-alpha-20);
padding: 1px 6px; padding: 1px 6px;
margin: 0 2px; margin: 0 2px;
font-size: .95rem; font-size: 0.95rem;
} }
pre { pre {
font-family: monospace; font-family: monospace;
padding: 20px; padding: 20px;
font-size: .95rem; font-size: 0.95rem;
overflow: auto; overflow: auto;
border-top: 1px solid rgba(255, 255, 255, .1); border-top: 1px solid rgba(255, 255, 255, 0.1);
border-bottom: 1px solid rgba(255, 255, 255, .1); border-bottom: 1px solid rgba(255, 255, 255, 0.1);
@media (max-width: $phone-max-width) { @media (max-width: $phone-max-width) {
white-space: pre-wrap; white-space: pre-wrap;
@ -176,7 +184,7 @@ blockquote {
} }
&:before { &:before {
content: '”'; content: "”";
font-family: Georgia, serif; font-family: Georgia, serif;
font-size: 3.875rem; font-size: 3.875rem;
position: absolute; position: absolute;
@ -197,7 +205,7 @@ blockquote {
} }
p:before { p:before {
content: '>'; content: ">";
display: block; display: block;
position: absolute; position: absolute;
left: -25px; left: -25px;
@ -212,7 +220,9 @@ table {
margin: 40px 0; margin: 40px 0;
} }
table, th, td { table,
th,
td {
border: none; border: none;
padding: 10px; padding: 10px;
} }
@ -222,11 +232,11 @@ th {
} }
td { td {
border-bottom: 1px dotted var(--accent); border-bottom: 1px dotted var(--accent);
} }
ul,
ul, ol { ol {
margin-left: 30px; margin-left: 30px;
padding: 0; padding: 0;
@ -247,12 +257,13 @@ ol ol {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
padding: 40px; padding: 40px;
max-width: 864px; max-width: 75vw;
min-height: 100vh; min-height: 100vh;
margin: 0 auto; margin: 0 auto;
@media (max-width: $phone-max-width) { @media (max-width: $phone-max-width) {
padding: 20px; padding: 20px;
max-width: 864px;
} }
} }
@ -276,11 +287,11 @@ hr {
break-inside: avoid-page; break-inside: avoid-page;
padding-top: 1rem; padding-top: 1rem;
} }
p, table { p,
table {
break-inside: avoid-page; break-inside: avoid-page;
} }
.noprint { .noprint {
display: none; display: none;
} }
} }

9
templates/shortcodes/gallery.html
View file

@ -1,10 +1,9 @@
<div class="gallery"> <div class="gallery">
{% for asset in page.assets -%} {% for asset in page.assets -%} {%- if asset is matching("[.](jpg|png)$") -%}
{%- if asset is matching("[.](jpg|png)$") -%} {% set image = resize_image(path=asset, width=960, height=720, op="fit") %}
{% set image = resize_image(path=asset, width=960, height=720, op="fit") %}
<a href="{{ get_url(path=asset) }}" target="_blank"> <a href="{{ get_url(path=asset) }}" target="_blank">
<img src="{{ image.url }}" /> <img src="{{ image.url }}" />
</a> </a>
{%- endif %} </label>
{%- endfor %} {%- endif %} {%- endfor %}
</div> </div>