ʕ·ᴥ·ʔ- embrace tradition <3
This commit is contained in:
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
|
After Width: | Height: | Size: 229 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 160 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 267 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 44 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 221 KiB |
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 28 KiB |
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 38 KiB |
Executable
BIN
Binary file not shown.
|
After Width: | Height: | Size: 242 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 99 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 10 KiB |
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 365 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 28 KiB |
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 100 KiB |
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 210 KiB |
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 92 KiB |
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 200 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 59 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 56 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 65 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 66 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 58 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 64 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 61 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 66 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 62 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 65 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 63 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 52 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 56 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 49 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 66 KiB |
@@ -0,0 +1,41 @@
|
||||
const taped = Array.from(document.body.getElementsByClassName("taped"));
|
||||
for (let i = 0; i < taped.length; i++) {
|
||||
const val0 = Math.floor(15 * Math.random());
|
||||
const val1 = Math.floor(15 * Math.random());
|
||||
taped[i].style.setProperty(
|
||||
"--washi-url-0",
|
||||
`url(/assets/images/washi/${val0}.png)`,
|
||||
);
|
||||
taped[i].style.setProperty(
|
||||
"--washi-url-1",
|
||||
`url(/assets/images/washi/${val1}.png)`,
|
||||
);
|
||||
}
|
||||
|
||||
const gallery = Array.from(document.body.getElementsByClassName("gallery-3"));
|
||||
for (let i = 0; i < gallery.length; i++) {
|
||||
const children = Array.from(gallery[i].children);
|
||||
for (let i = 0; i < children.length; i++) {
|
||||
const child = children[i];
|
||||
const val0 = Math.floor(15 * Math.random());
|
||||
const val1 = Math.floor(15 * Math.random());
|
||||
child.style.setProperty(
|
||||
"--washi-url-0",
|
||||
`url(/assets/images/washi/${val0}.png)`,
|
||||
);
|
||||
child.style.setProperty(
|
||||
"--washi-url-1",
|
||||
`url(/assets/images/washi/${val1}.png)`,
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
const content = Array.from(document.getElementsByClassName("content"))[0];
|
||||
const imgs = Array.from(content.getElementsByTagName("img"));
|
||||
for (let i = 0; i < imgs.length; i++) {
|
||||
const img = imgs[i];
|
||||
const anchor = document.createElement("a");
|
||||
anchor.href = img.src;
|
||||
img.parentNode.insertBefore(anchor, img);
|
||||
anchor.appendChild(img);
|
||||
}
|
||||
@@ -0,0 +1 @@
|
||||
<?xml version="1.0" encoding="UTF-8"?><rss><channel><title>ʕ·ᴥ·ʔ-☆ august kline's blog ☆</title><link>https://augustkline.com/blog</link><description>whatever's on my mind, short essays, tech stuff, etc :)</description><item><title>hello word</title><link>/blog/2024-9-30-hello-word.html</link><description>the first post on my blog! check back in soon cause this is very janky rn lol</description><pubDate>2024-9-30</pubDate></item></channel></rss>
|
||||
@@ -0,0 +1,52 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<link rel="icon" type="image/png" href="/assets/images/ribbon.png" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>ʕ·ᴥ·ʔ- george!</title>
|
||||
<link rel="stylesheet" type="text/css" href="/style.css" />
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<main>
|
||||
<div class="container">
|
||||
<div class="clipped">
|
||||
<div class="clipped-items">
|
||||
<a title="ʕ·ᴥ·ʔ- home" aria-label="home" href="/">
|
||||
<img src="/assets/images/me.jpg"
|
||||
alt="august kline, a young woman smiling gently with sunset cityscape behind her"
|
||||
class="clipped-image" />
|
||||
</a>
|
||||
<p class="slip slip-george">ʕ·ᴥ·ʔ</p>
|
||||
<p class="slip slip-label">home</p>
|
||||
</div>
|
||||
<img class="paperclip" src="/assets/images/paperclip.png" />
|
||||
</div>
|
||||
<h1>george! yes!</h1>
|
||||
<div class="content">
|
||||
<div class="taped">
|
||||
<img src="/assets/images/georgeandfuzzy.jpeg" />
|
||||
</div>
|
||||
<p>george is my stuffed monkey. i am building her a computer body.</p>
|
||||
<div class="gallery-3">
|
||||
<div>
|
||||
<img src="/assets/images/hiaugust.jpeg" />
|
||||
</div>
|
||||
<div>
|
||||
<img src="/assets/images/breadboard.jpeg" />
|
||||
</div>
|
||||
<div>
|
||||
<img src="/assets/images/georgebed.jpeg" />
|
||||
</div>
|
||||
</div>
|
||||
<p>am i a crank? ...a little <3</p>
|
||||
</div>
|
||||
</main>
|
||||
<script>const valedictions = ["love", "in solidarity", "yours forever", "just 4 u", "until tomorrow", "endlessly", "yours", "until we meet again", "tirelessly yours", "<3", "with warmth", "xoxo", "with open arms", "gently", "truly yours", "until our next encounter", "awaiting your reply", "with grace", "with love", "solidarity forever", "joyfully", "hearts & little stars", "ribbons & bows", "unabashedly yours", "thinking of u"]; const valediction = document.getElementsByClassName("valediction")[0]; const index = Math.floor(Math.random() * valedictions.length); valediction.textContent = valedictions[index];</script>
|
||||
<script src="/assets/js/washi.js"></script>
|
||||
</body>
|
||||
|
||||
|
||||
</html>
|
||||
@@ -0,0 +1,80 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<link rel="icon" type="image/png" href="/assets/images/ribbon.png" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>ʕ·ᴥ·ʔ- august kline</title>
|
||||
<link rel="stylesheet" type="text/css" href="/style.css" />
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<main>
|
||||
<div class="container">
|
||||
<div class="clipped">
|
||||
<div class="clipped-items">
|
||||
<a title="ʕ·ᴥ·ʔ- home" aria-label="home" href="/">
|
||||
<img src="/assets/images/me.jpg"
|
||||
alt="august kline, a young woman smiling gently with sunset cityscape behind her"
|
||||
class="clipped-image" />
|
||||
</a>
|
||||
<p class="slip slip-george">ʕ·ᴥ·ʔ</p>
|
||||
<p class="slip slip-label">home</p>
|
||||
</div>
|
||||
<img class="paperclip" src="/assets/images/paperclip.png" />
|
||||
</div>
|
||||
<h1>give us money!</h1>
|
||||
<div class="content">
|
||||
<p>did you know the U.S. trans <a
|
||||
href="https://transequality.org/sites/default/files/2024-02/2022%20USTS%20Early%20Insights%20Report_FINAL.pdf"
|
||||
target="_blank" rel="noreferrer">unemployment rate</a> is
|
||||
<b>18%</b>? or that the trans <a
|
||||
href="https://transequality.org/sites/default/files/2024-02/2022%20USTS%20Early%20Insights%20Report_FINAL.pdf"
|
||||
target="_blank" rel="noreferrer">poverty rate</a> is <b>34%</b>?
|
||||
</p>
|
||||
<p>now more than ever, trans people need money! if you know a trans person,
|
||||
give them anything you can. if you don't (or if you have more to give!), here are some
|
||||
groups that need your money:
|
||||
</p>
|
||||
<ul style="display: block; list-style: '~ '; padding-inline-start: 5cqi;">
|
||||
<li style="margin-block: 1cqb; color: slateblue;">
|
||||
<a href="https://www.glitsinc.org/donate" target="_blank" rel="noreferrer"
|
||||
style="--color: slateblue; text-decoration-style: solid;">gays & lesbians
|
||||
living
|
||||
in a transgender society (G.L.I.T.S)</a>
|
||||
</li>
|
||||
<li style="margin-block: 1cqb; color: palevioletred">
|
||||
<a href="https://www.blacktranstravelfund.com/donate.html" target="_blank" rel="noreferrer"
|
||||
style="--color: palevioletred; text-decoration-style: solid;">black trans
|
||||
travel fund</a>
|
||||
</li>
|
||||
<li style="margin-block: 1cqb; color: slategrey">
|
||||
<a href="https://tgijp.org/donate-html/" target="_blank" rel="noreferrer"
|
||||
style="--color: slategrey; text-decoration-style: solid;">transgender
|
||||
gender-variant & intersex justice project (TGIJP)</a>
|
||||
</li>
|
||||
<li style="margin-block: 1cqb; color: palevioletred">
|
||||
<a href="https://srlp.org/donate/" target="_blank" rel="noreferrer"
|
||||
style="--color: palevioletred; text-decoration-style: solid;">sylvia rivera law
|
||||
project</a>
|
||||
</li>
|
||||
<li style="margin-block: 1cqb; color: slateblue">
|
||||
<a href="https://www.them.us/story/orgs-fighting-back-anti-trans-legislation" target="_blank"
|
||||
rel="noreferrer" style="--color: slateblue; text-decoration-style: solid;">and many more
|
||||
in
|
||||
your
|
||||
state!</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<!-- <a class="signature" href="mailto:yours@augustkline.com" title="ʕ·ᴥ·ʔ- send me a message!" -->
|
||||
<!-- style="margin-block-start: 8cqb" aria-label="send me a message"><span -->
|
||||
<!-- class="valediction">love</span>,<br><span class="name">kline</span></a> -->
|
||||
</div>
|
||||
</main>
|
||||
<script>const valedictions = ["love", "in solidarity", "yours forever", "just 4 u", "until tomorrow", "endlessly", "yours", "until we meet again", "tirelessly yours", "<3", "with warmth", "xoxo", "with open arms", "gently", "truly yours", "until our next encounter", "awaiting your reply", "with grace", "with love", "solidarity forever", "joyfully", "hearts & little stars", "ribbons & bows", "unabashedly yours", "thinking of u"]; const valediction = document.getElementsByClassName("valediction")[0]; const index = Math.floor(Math.random() * valedictions.length); valediction.textContent = valedictions[index];</script>
|
||||
</body>
|
||||
|
||||
|
||||
</html>
|
||||
@@ -0,0 +1,55 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<link rel="icon" type="image/png" href="/assets/images/ribbon.png" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>ʕ·ᴥ·ʔ- august kline</title>
|
||||
<link rel="stylesheet" type="text/css" href="/style.css" />
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<main>
|
||||
<div class="container">
|
||||
<div class="clipped">
|
||||
<div class="clipped-items">
|
||||
<a title="ʕ·ᴥ·ʔ- home" aria-label="home" href="/">
|
||||
<img src="/assets/images/me.jpg"
|
||||
alt="august kline, a young woman smiling gently with sunset cityscape behind her"
|
||||
class="clipped-image" />
|
||||
</a>
|
||||
<p class="slip slip-george">ʕ·ᴥ·ʔ</p>
|
||||
<p class="slip slip-label">home</p>
|
||||
</div>
|
||||
<img class="paperclip" src="/assets/images/paperclip.png" />
|
||||
</div>
|
||||
<h1>hi, i'm august...</h1>
|
||||
<div class="content">
|
||||
<p>
|
||||
i'm like, ludicrously into computers <3</p>
|
||||
<p>as of january 2025, myself & my friends no longer <a
|
||||
href="https://web.archive.org/web/20250121015439/https://www.whitehouse.gov/presidential-actions/2025/01/defending-women-from-gender-ideology-extremism-and-restoring-biological-truth-to-the-federal-government/"
|
||||
rel="noreferrer" target="_blank">legally
|
||||
exist</a>
|
||||
here in the u.s.. i have a bag packed for if i have to flee my home. things are dark right now.
|
||||
if you're cis, you can help by <a href="/giving-us-money">giving us money</a>! </p>
|
||||
<p>those in power are trying to wipe us out, but their failure will make our existence
|
||||
<b>undeniable</b>.
|
||||
</p>
|
||||
<p><i>anyways...</i> hi! welcome <3 you can find more at the <i><b>link authority</b></i>:</p>
|
||||
</div>
|
||||
<a class="stamp" style="" href="/links" aria-label="link authority">
|
||||
<img src="/assets/images/linkauthority.svg"
|
||||
style="block-size: 10cqb; margin-inline-start: 5cqi; transform: rotate(-8deg);">
|
||||
</a>
|
||||
<a class="signature" href="mailto:yours@augustkline.com" title="ʕ·ᴥ·ʔ- send me a message!"
|
||||
style="margin-block-start: 8cqb" aria-label="send me a message"><span
|
||||
class="valediction">love</span>,<br><span class="name">kline</span></a>
|
||||
</div>
|
||||
</main>
|
||||
<script>const valedictions = ["love", "in solidarity", "yours forever", "just 4 u", "until tomorrow", "endlessly", "yours", "until we meet again", "tirelessly yours", "<3", "with warmth", "xoxo", "with open arms", "gently", "truly yours", "until our next encounter", "awaiting your reply", "with grace", "with love", "solidarity forever", "joyfully", "hearts & little stars", "ribbons & bows", "unabashedly yours", "thinking of u"]; const valediction = document.getElementsByClassName("valediction")[0]; const index = Math.floor(Math.random() * valedictions.length); valediction.textContent = valedictions[index];</script>
|
||||
</body>
|
||||
|
||||
|
||||
</html>
|
||||
@@ -0,0 +1,50 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<link rel="icon" type="image/png" href="/assets/images/ribbon.png" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>ʕ·ᴥ·ʔ- august kline</title>
|
||||
<link rel="stylesheet" type="text/css" href="/style.css" />
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<main>
|
||||
<div class="container">
|
||||
<div class="clipped">
|
||||
<div class="clipped-items">
|
||||
<a title="ʕ·ᴥ·ʔ- home" aria-label="home" href="/">
|
||||
<img src="/assets/images/me.jpg"
|
||||
alt="august kline, a young woman smiling gently with sunset cityscape behind her"
|
||||
class="clipped-image" />
|
||||
</a>
|
||||
<p class="slip slip-george">ʕ·ᴥ·ʔ</p>
|
||||
<p class="slip slip-label">home</p>
|
||||
</div>
|
||||
<img class="paperclip" src="/assets/images/paperclip.png" />
|
||||
</div>
|
||||
<h1 class="authority"><img src="/assets/images/linkauthority.svg" alt="link authority"
|
||||
style="block-size: 15cqb;"></h1>
|
||||
<div class="content">
|
||||
<p style="margin-block-end: 5cqb;">i hope you like my fun quirky design choices</p>
|
||||
<div class="pos-anchor">
|
||||
<a class="stamp" href="/george">
|
||||
<img src="/assets/images/stampgeorge.svg" style="transform: rotate(-8deg); left: 5cqi"
|
||||
alt="george"></a>
|
||||
<!-- <a class="stamp" href="/links"> -->
|
||||
<!-- <img src="/assets/images/stampprojects.svg" -->
|
||||
<!-- style="transform: rotate(12deg); block-size: 10cqb; right: 0%; top: 0cqb" -->
|
||||
<!-- alt="projects"></a> -->
|
||||
<a class="stamp" href="/minecraft">
|
||||
<img src="/assets/images/stampminecraft.svg"
|
||||
style="transform: rotate(-3deg); left: 28cqi; top: 12cqb;" alt="minecraft"></a>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
</body>
|
||||
|
||||
|
||||
</html>
|
||||
@@ -0,0 +1,43 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<link rel="icon" type="image/png" href="/assets/images/ribbon.png" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>ʕ·ᴥ·ʔ- minecraft</title>
|
||||
<link rel="stylesheet" type="text/css" href="/style.css" />
|
||||
<script src="/assets/js/washi.js" defer></script>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<main>
|
||||
<div class="container">
|
||||
<div class="clipped">
|
||||
<div class="clipped-items">
|
||||
<a title="ʕ·ᴥ·ʔ- home" aria-label="home" href="/">
|
||||
<img src="/assets/images/me.jpg"
|
||||
alt="august kline, a young woman smiling gently with sunset cityscape behind her"
|
||||
class="clipped-image" />
|
||||
</a>
|
||||
<p class="slip slip-george">ʕ·ᴥ·ʔ</p>
|
||||
<p class="slip slip-label">home</p>
|
||||
</div>
|
||||
<img class="paperclip" src="/assets/images/paperclip.png" />
|
||||
</div>
|
||||
<h1><img src="/assets/images/minecraft.png" alt="minecraft"
|
||||
style="transform: rotate(-1deg) translateX(-2cqi);"></h1>
|
||||
<div class="content">
|
||||
<p>i've played minecraft since i was like 10, and recently i started a world this year that i plan on
|
||||
playing forever :)</p>
|
||||
<div class="taped"><a href="/assets/images/foxsleep.png"><img src="/assets/images/foxsleep.png"
|
||||
alt="a minecraft fox sleeping beneath a spruce tree" /></a>
|
||||
</div>
|
||||
<p>i live on a little island called <i>foxtrot island</i>, cause there's a bunch of foxes there lol</p>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
</body>
|
||||
|
||||
|
||||
</html>
|
||||
+457
@@ -0,0 +1,457 @@
|
||||
@font-face {
|
||||
src: url("./assets/fonts/LatinModernMonoRegular.otf");
|
||||
font-family: "LatinModernMono";
|
||||
font-style: normal;
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
src: url("./assets/fonts/LatinModernMonoBold.otf");
|
||||
font-family: "LatinModernMono";
|
||||
font-weight: bold;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
src: url("./assets/fonts/LatinModernMonoBoldOblique.otf");
|
||||
font-family: "LatinModernMono";
|
||||
font-weight: bold;
|
||||
font-style: oblique;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
src: url("./assets/fonts/LatinModernMonoItalic.otf");
|
||||
font-family: "LatinModernMono";
|
||||
font-weight: normal;
|
||||
font-style: oblique;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
src: url("./assets/fonts/Bienchena.ttf");
|
||||
font-family: "Bienchen";
|
||||
}
|
||||
|
||||
:root {
|
||||
--text-color: color-mix(in srgb, black 40%, darkslategrey 60%);
|
||||
--text-bg-color: snow;
|
||||
font-synthesis: none;
|
||||
text-rendering: optimizeLegibility;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
color: var(--text-color);
|
||||
}
|
||||
|
||||
body,
|
||||
html {
|
||||
block-size: 100%;
|
||||
inline-size: 100%;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
body {
|
||||
display: flex;
|
||||
background-color: linen;
|
||||
}
|
||||
|
||||
::selection {
|
||||
background: color-mix(in srgb, mistyrose 80%, transparent 20%);
|
||||
/* background: lightpink; */
|
||||
}
|
||||
|
||||
|
||||
a {
|
||||
&[href^="http"] {
|
||||
--color: darkgreen;
|
||||
text-decoration-style: dashed;
|
||||
}
|
||||
|
||||
text-decoration-thickness: 1px;
|
||||
|
||||
--color: firebrick;
|
||||
color: var(--color);
|
||||
text-decoration-style: wavy;
|
||||
|
||||
@media not (prefers-reduced-motion) {
|
||||
transition: 0.3s outline ease,
|
||||
0.2s text-shadow ease;
|
||||
}
|
||||
|
||||
outline: 2px transparent solid;
|
||||
|
||||
&:hover {
|
||||
text-shadow: 0px 0px 1px var(--color);
|
||||
}
|
||||
|
||||
&:focus-visible {
|
||||
outline: 2px var(--color) solid;
|
||||
}
|
||||
}
|
||||
|
||||
main {
|
||||
user-select: none;
|
||||
/* top: 50%; */
|
||||
/* left: 50%; */
|
||||
/* position: absolute; */
|
||||
container-type: size;
|
||||
background: var(--text-bg-color);
|
||||
transform: rotate(-1deg);
|
||||
aspect-ratio: 5.5 / 8.75;
|
||||
font-family: "Bienchen";
|
||||
box-shadow: 5px 5px 20px rgba(152, 97, 42, 0.1);
|
||||
word-wrap: pretty;
|
||||
margin: auto;
|
||||
|
||||
--scale: 0.9;
|
||||
|
||||
--block: calc(var(--scale) * 100svb);
|
||||
--inline: calc(var(--scale) * 100svi * (8.75 / 5.5));
|
||||
|
||||
block-size: min(var(--inline), var(--block));
|
||||
|
||||
transition: 0.3s transform ease, 0.3s box-shadow ease;
|
||||
|
||||
&>div {
|
||||
padding: 2% 5%;
|
||||
font-size: 8cqb;
|
||||
}
|
||||
|
||||
.content {
|
||||
transform: rotate(-0.5deg);
|
||||
}
|
||||
|
||||
h1 {
|
||||
img {
|
||||
max-inline-size: 70cqi;
|
||||
}
|
||||
|
||||
font-size: 1em;
|
||||
margin-block: 0.5em;
|
||||
color: darkblue;
|
||||
user-select: text;
|
||||
}
|
||||
|
||||
p,
|
||||
li {
|
||||
font-family: "LatinModernMono";
|
||||
line-height: 1.1em;
|
||||
user-select: text;
|
||||
}
|
||||
|
||||
.content {
|
||||
font-size: 0.4em;
|
||||
}
|
||||
|
||||
@media not (prefers-reduced-motion) {
|
||||
&:hover {
|
||||
transform: scale(1.025) rotate(0deg);
|
||||
box-shadow: 0px 0px 30px rgba(152, 97, 42, 0.05);
|
||||
}
|
||||
}
|
||||
|
||||
.signature {
|
||||
appearance: none;
|
||||
color: unset;
|
||||
text-decoration: none;
|
||||
position: absolute;
|
||||
right: 10%;
|
||||
font-family: "Bienchen";
|
||||
font-size: 0.65em;
|
||||
line-height: 0.8em;
|
||||
transform: rotate(-4deg);
|
||||
text-align: end;
|
||||
|
||||
transition: outline 0.3s ease, transform 0.2s ease;
|
||||
|
||||
@media not (prefers-reduced-motion) {
|
||||
* {
|
||||
transition: text-shadow 0.2s ease;
|
||||
text-shadow: -1px 2px 4px rgba(152, 97, 42, 0);
|
||||
}
|
||||
|
||||
|
||||
&:hover,
|
||||
&:focus-visible {
|
||||
transform: translateY(-2px) rotate(-2deg) scale(1.025);
|
||||
|
||||
* {
|
||||
text-shadow: 0px 2px 4px rgba(152, 97, 42, 0.1);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
outline: 2px transparent solid;
|
||||
|
||||
&:focus-visible {
|
||||
outline: 2px crimson solid;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.valediction {
|
||||
color: crimson;
|
||||
letter-spacing: -0.03em;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.clipped {
|
||||
position: absolute;
|
||||
display: block;
|
||||
container-type: inline-size;
|
||||
z-index: 100;
|
||||
top: 0;
|
||||
right: 0;
|
||||
inline-size: 20cqi;
|
||||
|
||||
:first-child {
|
||||
inline-size: 100cqi;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.clipped-items {
|
||||
appearance: none;
|
||||
display: block;
|
||||
transform: rotate(17deg);
|
||||
color: unset;
|
||||
text-shadow: unset;
|
||||
|
||||
img {
|
||||
position: relative;
|
||||
box-shadow: 0px 4px 8px rgba(152, 97, 42, 0.2);
|
||||
outline: 2px transparent solid;
|
||||
transition: outline 0.3s ease;
|
||||
}
|
||||
|
||||
.slip {
|
||||
appearance: unset;
|
||||
margin: 0;
|
||||
|
||||
* {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
position: absolute;
|
||||
background: antiquewhite;
|
||||
color: var(--text-color);
|
||||
font-size: 0.35em;
|
||||
padding-inline: 0.5ch;
|
||||
display: block;
|
||||
z-index: -1;
|
||||
--mask: conic-gradient(from 60deg at left, #0000, #000 1deg 59deg, #0000 60deg) left/51% 0.2em repeat-y,
|
||||
conic-gradient(from -120deg at right, #0000, #000 1deg 59deg, #0000 60deg) right/51% 0.2em repeat-y;
|
||||
-webkit-mask: var(--mask);
|
||||
mask: var(--mask);
|
||||
}
|
||||
|
||||
.slip-george {
|
||||
bottom: 20%;
|
||||
left: 40%;
|
||||
transform: translateX(-50%) rotate(-5deg);
|
||||
}
|
||||
|
||||
.slip-label {
|
||||
z-index: 1;
|
||||
bottom: 65%;
|
||||
left: 70%;
|
||||
transform: translateX(-50%) rotate(25deg);
|
||||
}
|
||||
|
||||
&:focus-visible {
|
||||
outline: none;
|
||||
|
||||
img {
|
||||
outline: 2px crimson solid;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.paperclip {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: -20%;
|
||||
inline-size: 50cqi;
|
||||
filter: brightness(0.85);
|
||||
}
|
||||
|
||||
@media (prefers-reduced-motion) {
|
||||
.clipped-items {
|
||||
transform: rotate(9deg) translate(-5%, 10%);
|
||||
|
||||
.slip-george {
|
||||
bottom: -15%;
|
||||
left: 40%;
|
||||
transform: translateX(-50%) rotate(-15deg);
|
||||
}
|
||||
}
|
||||
|
||||
.paperclip {
|
||||
transform: rotate(4deg);
|
||||
top: -25%;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@media not (prefers-reduced-motion) {
|
||||
* {
|
||||
transition: transform 0.4s ease, top 0.3s ease, bottom 0.3s ease, left 0.3s ease;
|
||||
}
|
||||
|
||||
&:has(.clipped-items:focus) {
|
||||
.clipped-items {
|
||||
transform: rotate(9deg) translate(-5%, 10%);
|
||||
}
|
||||
|
||||
.paperclip {
|
||||
transform: rotate(4deg);
|
||||
top: -25%;
|
||||
}
|
||||
}
|
||||
|
||||
&:hover,
|
||||
&:focus-visible {
|
||||
.clipped-items {
|
||||
transform: rotate(9deg) translate(-5%, 10%);
|
||||
|
||||
.slip-george {
|
||||
bottom: 5%;
|
||||
left: 50%;
|
||||
transform: translateX(-50%) rotate(-18deg);
|
||||
}
|
||||
|
||||
.slip-sitemap {
|
||||
bottom: 70%;
|
||||
left: -30%;
|
||||
transform: translateX(-50%) rotate(7deg);
|
||||
}
|
||||
}
|
||||
|
||||
.paperclip {
|
||||
transform: rotate(4deg);
|
||||
top: -25%;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.authority {
|
||||
img {
|
||||
block-size: 8cqb;
|
||||
opacity: 0.9;
|
||||
}
|
||||
}
|
||||
|
||||
.stamp {
|
||||
display: block;
|
||||
|
||||
img {
|
||||
position: absolute;
|
||||
transition: 0.3s transform ease;
|
||||
block-size: 15cqb;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
img {
|
||||
transform: rotate(0deg) scale(1.05) !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.taped {
|
||||
|
||||
img {
|
||||
max-block-size: 35cqb;
|
||||
max-inline-size: 60cqi;
|
||||
/* box-shadow: 0px 0px 8px rgba(152, 97, 42, 0.3); */
|
||||
}
|
||||
|
||||
&::before,
|
||||
&::after {
|
||||
content: "";
|
||||
display: block;
|
||||
position: absolute;
|
||||
block-size: 4.5cqb;
|
||||
aspect-ratio: 8 / 3;
|
||||
transform: rotate(-45deg);
|
||||
background-size: contain;
|
||||
background-position: center;
|
||||
background-repeat: no-repeat;
|
||||
opacity: 0.95;
|
||||
}
|
||||
|
||||
&::before {
|
||||
top: 0cqb;
|
||||
left: -6cqi;
|
||||
background-image: var(--washi-url-0);
|
||||
}
|
||||
|
||||
&::after {
|
||||
bottom: 1cqb;
|
||||
right: -6cqi;
|
||||
background-image: var(--washi-url-1);
|
||||
}
|
||||
}
|
||||
|
||||
.taped,
|
||||
.gallery-3 {
|
||||
display: inline-flex;
|
||||
position: relative;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin-inline-start: 50%;
|
||||
transform: translateX(-50%) rotate(1deg);
|
||||
}
|
||||
|
||||
.gallery-3 {
|
||||
img {
|
||||
max-block-size: 25cqb;
|
||||
max-inline-size: 40cqi;
|
||||
}
|
||||
|
||||
div {
|
||||
|
||||
/* position: absolute; */
|
||||
&::before,
|
||||
&::after {
|
||||
content: "";
|
||||
display: block;
|
||||
position: absolute;
|
||||
block-size: 3cqb;
|
||||
aspect-ratio: 8 / 3;
|
||||
background-size: contain;
|
||||
background-position: center;
|
||||
background-repeat: no-repeat;
|
||||
opacity: 0.95;
|
||||
}
|
||||
|
||||
--washi-url-0: url("/assets/images/washi/0.png");
|
||||
--washi-url-1: url("/assets/images/washi/0.png");
|
||||
|
||||
&::before {
|
||||
top: -2cqb;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
background-image: var(--washi-url-0);
|
||||
}
|
||||
}
|
||||
|
||||
&>* {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
&>:nth-child(1) {
|
||||
transform: translate(40%, 10%) rotate(-8deg);
|
||||
}
|
||||
|
||||
&>:nth-child(2) {
|
||||
z-index: 100;
|
||||
}
|
||||
|
||||
&>:nth-child(3) {
|
||||
transform: translate(-40%, 10%) rotate(8deg);
|
||||
}
|
||||
}
|
||||
|
||||
.pos-anchor {
|
||||
position: relative;
|
||||
}
|
||||
Reference in New Issue
Block a user