mirror of
https://codeberg.org/cyrneko/pages.git
synced 2025-05-04 18:13:07 +00:00
first iteration of website redesign (again)
This commit is contained in:
cyrneko
parent
79b534b030
commit
139bf5408c
7 changed files with 547 additions and 367 deletions
BIN
assets/88x31.png
Normal file
BIN
assets/88x31.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 6.3 KiB |
BIN
assets/free.gif
Normal file
BIN
assets/free.gif
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 29 KiB |
BIN
fonts/ibm9x16.woff
Normal file
BIN
fonts/ibm9x16.woff
Normal file
Binary file not shown.
98
index-old.html
Normal file
98
index-old.html
Normal file
|
|
@ -0,0 +1,98 @@
|
||||||
|
<!doctype html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8" />
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||||
|
<meta property="og:title" content="Alexia's Website" />
|
||||||
|
<meta property="og:type" content="website" />
|
||||||
|
<meta property="og:url" content="https://cyrneko.codeberg.page/" />
|
||||||
|
<meta property="og:image" content="https://cyrneko.codeberg.page/assets/preview-banner.png" />
|
||||||
|
<!-- Twitter tags :(((( -->
|
||||||
|
<meta property="twitter:card" content="summary_large_image" />
|
||||||
|
<meta
|
||||||
|
property="twitter:image"
|
||||||
|
content="https://cyrneko.codeberg.page/assets/preview-banner.png"
|
||||||
|
/>
|
||||||
|
<!-- end -->
|
||||||
|
<link rel="stylesheet" href="styles/styles.css" />
|
||||||
|
<title>Alexia's Website</title>
|
||||||
|
</head>
|
||||||
|
|
||||||
|
<body>
|
||||||
|
<div class="wrapper">
|
||||||
|
<div class="center">
|
||||||
|
<div class="content landing main">
|
||||||
|
<div class="avatar-wrapper">
|
||||||
|
<img src="/assets/avatar.png" class="avatar" />
|
||||||
|
</div>
|
||||||
|
<h1>Hi There! My name is <strong>⚞Alexia⚟</strong></h1>
|
||||||
|
<p class="subtext">she/they • 18 • <span class="trans">transfem ✨</span></p>
|
||||||
|
<p>
|
||||||
|
I'm interested in all things tech, privacy, and our feline overlords
|
||||||
|
<img class="emote" src="assets/neocat.png" alt="neocat" width="24px" />
|
||||||
|
</p>
|
||||||
|
<p>
|
||||||
|
I <a href="blog/posts.html">have a blog</a> and
|
||||||
|
<a href="https://ko-fi.com/cyrus42">appreciate donations</a>
|
||||||
|
</p>
|
||||||
|
<p>
|
||||||
|
my PGP keys are published
|
||||||
|
<a
|
||||||
|
href="https://keys.openpgp.org/vks/v1/by-fingerprint/AD6FFD9A3C08C23A9CF03A50801B4BD878A984A4"
|
||||||
|
>here</a
|
||||||
|
>, for signing and encrypting mails.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<div class="content landing important">
|
||||||
|
<h2><strong>Donate to Tillian.</strong></h2>
|
||||||
|
<p>
|
||||||
|
Tillian is living in an abusive household, and has been for years. Robbed of his youth
|
||||||
|
and childhood.
|
||||||
|
</p>
|
||||||
|
<p>it would mean a lot if you donated.</p>
|
||||||
|
<p>
|
||||||
|
<strong>any donations or commissions to/from me will go to Tillian, instead.</strong> At
|
||||||
|
least as much as I can afford.
|
||||||
|
</p>
|
||||||
|
<p>
|
||||||
|
Donate on
|
||||||
|
<a href="https://ko-fi.com/tillianthefoxxo">Ko-Fi</a> or
|
||||||
|
<a href="https://www.paypal.com/paypalme/tillianthefoxxo">PayPal</a>
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<!-- <p class="contact-header subtext">Contact:</p> -->
|
||||||
|
<ul id="contact">
|
||||||
|
<li>
|
||||||
|
<a
|
||||||
|
href="https://signal.me/#eu/X7bBOAGEo-D2ddHAZSm96AxSeaNYsQXnVEW4FA2Mz34R4tcM7qhJSpjFPggdFRBb"
|
||||||
|
target="_blank"
|
||||||
|
><img src="assets/signal.svg" alt="the Signal Logo"
|
||||||
|
/></a>
|
||||||
|
</li>
|
||||||
|
<!-- <li>
|
||||||
|
<a href="https://matrix.to/#/@cyrus:the-apothecary.club" target="_blank"
|
||||||
|
><img src="assets/matrix.svg" alt="the Matrix Logo"
|
||||||
|
/></a>
|
||||||
|
</li> -->
|
||||||
|
<!-- <li>
|
||||||
|
<a href="xmpp:cyrus42@disroot.org" target="_blank"
|
||||||
|
><img src="assets/xmpp.svg" alt="the XMPP Logo"
|
||||||
|
/></a>
|
||||||
|
</li> -->
|
||||||
|
<li>
|
||||||
|
<a href="mailto:cyrus42@disroot.org" target="_blank"
|
||||||
|
><img src="assets/email.svg" alt="an E-Mail icon"
|
||||||
|
/></a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="https://wetdry.world/@cyrus" target="_blank" rel="me"
|
||||||
|
><img src="assets/fediverse.svg" alt="the Fediverse Logo"
|
||||||
|
/></a>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
177
index.html
177
index.html
|
|
@ -1,98 +1,83 @@
|
||||||
<!doctype html>
|
<!DOCTYPE html>
|
||||||
<html lang="en">
|
<html lang="en">
|
||||||
<head>
|
|
||||||
<meta charset="UTF-8" />
|
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
||||||
<meta property="og:title" content="Alexia's Website" />
|
|
||||||
<meta property="og:type" content="website" />
|
|
||||||
<meta property="og:url" content="https://cyrneko.codeberg.page/" />
|
|
||||||
<meta property="og:image" content="https://cyrneko.codeberg.page/assets/preview-banner.png" />
|
|
||||||
<!-- Twitter tags :(((( -->
|
|
||||||
<meta property="twitter:card" content="summary_large_image" />
|
|
||||||
<meta
|
|
||||||
property="twitter:image"
|
|
||||||
content="https://cyrneko.codeberg.page/assets/preview-banner.png"
|
|
||||||
/>
|
|
||||||
<!-- end -->
|
|
||||||
<link rel="stylesheet" href="styles/styles.css" />
|
|
||||||
<title>Alexia's Website</title>
|
|
||||||
</head>
|
|
||||||
|
|
||||||
<body>
|
<head>
|
||||||
<div class="wrapper">
|
<meta charset="UTF-8">
|
||||||
<div class="center">
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
<div class="content landing main">
|
<title>Alexia's webplace</title>
|
||||||
<div class="avatar-wrapper">
|
<link rel="stylesheet" href="/styles/styles.css">
|
||||||
<img src="/assets/avatar.png" class="avatar" />
|
</head>
|
||||||
</div>
|
|
||||||
<h1>Hi There! My name is <strong>⚞Alexia⚟</strong></h1>
|
<body>
|
||||||
<p class="subtext">she/they • 18 • <span class="trans">transfem ✨</span></p>
|
<div class="wrapper">
|
||||||
<p>
|
<h1>Alexia's webplace</h1>
|
||||||
I'm interested in all things tech, privacy, and our feline overlords
|
<p>Hello there, fellow traveller!</p>
|
||||||
<img class="emote" src="assets/neocat.png" alt="neocat" width="24px" />
|
<p>you have stumbled upon my website, congrats!</p>
|
||||||
</p>
|
<p>There is a couple of things you could be looking for:</p>
|
||||||
<p>
|
<ul>
|
||||||
I <a href="blog/posts.html">have a blog</a> and
|
<li><a href="#socials">Socials / Contacts</a></li>
|
||||||
<a href="https://ko-fi.com/cyrus42">appreciate donations</a>
|
<li><a target="_blank" rel="noopener noreferrer"
|
||||||
</p>
|
href="https://whtwnd.com/alexia.bsky.cyrneko.eu">Blogposts</a>
|
||||||
<p>
|
(external)</li>
|
||||||
my PGP keys are published
|
<li><a target="_blank" rel="noopener noreferrer"
|
||||||
<a
|
href="https://ko-fi.com/cyrneko">Donations and
|
||||||
href="https://keys.openpgp.org/vks/v1/by-fingerprint/AD6FFD9A3C08C23A9CF03A50801B4BD878A984A4"
|
Commissions</a> (external)</li>
|
||||||
>here</a
|
<li><a href="#buttons">Buttons</a></li>
|
||||||
>, for signing and encrypting mails.
|
<li><a href="http://cyrneko.codeberg.page/art" target="_blank"
|
||||||
</p>
|
rel="noopener noreferrer">Art.</a></li>
|
||||||
</div>
|
</ul>
|
||||||
<div class="content landing important">
|
|
||||||
<h2><strong>Donate to Tillian.</strong></h2>
|
<h2 id="socials">Socials and Contacts</h2>
|
||||||
<p>
|
<p>Socials: <a href="http://wetdry.world/@cyrus" target="_blank"
|
||||||
Tillian is living in an abusive household, and has been for years. Robbed of his youth
|
rel="noopener noreferrer">Mastodon</a>, <a
|
||||||
and childhood.
|
href="http://bsky.app/profile/cyrneko.eu" target="_blank"
|
||||||
</p>
|
rel="noopener noreferrer">Bluesky</a>
|
||||||
<p>it would mean a lot if you donated.</p>
|
</p>
|
||||||
<p>
|
<p>Contacts: <a target="_blank"
|
||||||
<strong>any donations or commissions to/from me will go to Tillian, instead.</strong> At
|
href="https://signal.me/#eu/X7bBOAGEo-D2ddHAZSm96AxSeaNYsQXnVEW4FA2Mz34R4tcM7qhJSpjFPggdFRBb"
|
||||||
least as much as I can afford.
|
rel="noopener noreferrer">Signal</a>, <a target="_blank"
|
||||||
</p>
|
href="https://matrix.to/#/@alexia:thomcat.rocks"
|
||||||
<p>
|
rel="noopener noreferrer">Matrix</a>, <a
|
||||||
Donate on
|
href="mailto:cyrus42@getgoogleoff.me">Email</a></p>
|
||||||
<a href="https://ko-fi.com/tillianthefoxxo">Ko-Fi</a> or
|
|
||||||
<a href="https://www.paypal.com/paypalme/tillianthefoxxo">PayPal</a>
|
<h2 id="buttons">Buttons</h2>
|
||||||
</p>
|
<!-- -->
|
||||||
</div>
|
<h3>cool stuff</h3>
|
||||||
<div>
|
<p>Some of these have links, hover them!</p>
|
||||||
<!-- <p class="contact-header subtext">Contact:</p> -->
|
<a class="webButton" href="http://wetdry.world" target="_blank"
|
||||||
<ul id="contact">
|
rel="noopener noreferrer"><img loading="lazy"
|
||||||
<li>
|
src="/assets/wetdryworld.png"
|
||||||
<a
|
alt="the wetdry world background from super mario 64 together with text saying wetdry.world"></a>
|
||||||
href="https://signal.me/#eu/X7bBOAGEo-D2ddHAZSm96AxSeaNYsQXnVEW4FA2Mz34R4tcM7qhJSpjFPggdFRBb"
|
<img loading="lazy" src="/assets/firefox.png"
|
||||||
target="_blank"
|
alt="Firefox: Take back the web">
|
||||||
><img src="assets/signal.svg" alt="the Signal Logo"
|
<img loading="lazy" src="/assets/discordnoway.gif" alt="Discord? No Way!">
|
||||||
/></a>
|
<a class="webButton" href="https://ublockorigin.com" target="_blank"
|
||||||
</li>
|
rel="noopener noreferrer"><img loading="lazy" src="/assets/ublock.png"
|
||||||
<!-- <li>
|
alt="uBlock Origin NOW!"></a>
|
||||||
<a href="https://matrix.to/#/@cyrus:the-apothecary.club" target="_blank"
|
<img loading="lazy" src="/assets/fediverse.gif" alt="Join the Fediverse!!!">
|
||||||
><img src="assets/matrix.svg" alt="the Matrix Logo"
|
<!-- -->
|
||||||
/></a>
|
<h3>Creatures :3</h3>
|
||||||
</li> -->
|
<a href="http://freeplay.floof.company" target="_blank"
|
||||||
<!-- <li>
|
rel="noopener noreferrer" class="webButton"><img loading="lazy"
|
||||||
<a href="xmpp:cyrus42@disroot.org" target="_blank"
|
src="/assets/free.gif"
|
||||||
><img src="assets/xmpp.svg" alt="the XMPP Logo"
|
alt="freeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeee"></a>
|
||||||
/></a>
|
<a href="http://neil.cyrneko.eu" target="_blank" rel="noopener noreferrer"
|
||||||
</li> -->
|
class="webButton"><img loading="lazy"
|
||||||
<li>
|
src="https://neil.cyrneko.eu/button.png" alt="neil"></a>
|
||||||
<a href="mailto:cyrus42@disroot.org" target="_blank"
|
</a>
|
||||||
><img src="assets/email.svg" alt="an E-Mail icon"
|
<!-- -->
|
||||||
/></a>
|
<h3>My button</h3>
|
||||||
</li>
|
<p>Thanks to <a href="http://kyropy.neocities.org" target="_blank"
|
||||||
<li>
|
rel="noopener noreferrer">kyropy</a> for making this!</p>
|
||||||
<a href="https://wetdry.world/@cyrus" target="_blank" rel="me"
|
<img loading="lazy" src="/assets/88x31.png" alt="my own 88x31 button!">
|
||||||
><img src="assets/fediverse.svg" alt="the Fediverse Logo"
|
<p>You can embed this on your own website too!</p>
|
||||||
/></a>
|
<details>
|
||||||
</li>
|
<summary>expand for HTML to embed</summary>
|
||||||
</ul>
|
<code><p>
|
||||||
</div>
|
<a href="http://cyrneko.eu" target="_blank" rel="noopener noreferrer"><img src="https://cyrneko.eu/assets/88x31.png" alt="Alexia's button, featuring their character comet holding a non-binary pride flag"></a>
|
||||||
</div>
|
</p></code>
|
||||||
</div>
|
</details>
|
||||||
</body>
|
</div>
|
||||||
</html>
|
</body>
|
||||||
|
|
||||||
|
</html>
|
||||||
304
styles/styles-old.css
Normal file
304
styles/styles-old.css
Normal file
|
|
@ -0,0 +1,304 @@
|
||||||
|
@import url(https://fonts.bunny.net/css?family=inter-tight:100,100i,200,200i,300,300i,400,400i,500,500i,600,600i,700,700i,800,800i,900,900i|unbounded:200,300,400,500,600,700,800,900);
|
||||||
|
|
||||||
|
:root {
|
||||||
|
--background: #24273a;
|
||||||
|
--background-transparent: #24273ac2;
|
||||||
|
--foreground: #cad3f5;
|
||||||
|
--subtext-0: #a5adcb;
|
||||||
|
--surface-0: #363a4f;
|
||||||
|
--overlay-0: #6e738d;
|
||||||
|
--surface-1: #494d64;
|
||||||
|
--surface-1-transparent: #494d64c2;
|
||||||
|
--mantle: #1e2030;
|
||||||
|
--accent: #a6da95;
|
||||||
|
|
||||||
|
--border: var(--overlay-0);
|
||||||
|
|
||||||
|
--special-glow: rgba(165, 173, 203, 0.7);
|
||||||
|
|
||||||
|
--radius: 12px;
|
||||||
|
--radius-big: calc(var(--radius) * 1.5);
|
||||||
|
|
||||||
|
/* Important Stuff */
|
||||||
|
--important-background: #3a222b;
|
||||||
|
--important-foreground: #f5cadc;
|
||||||
|
--important-border: #f5cadc7c;
|
||||||
|
--important-accent: #7dc4e4;
|
||||||
|
/* Catppuccin Macchiato Sapphire */
|
||||||
|
}
|
||||||
|
|
||||||
|
body {
|
||||||
|
margin: 0px;
|
||||||
|
padding: 0px;
|
||||||
|
background-image: url(/assets/wallpaper.jpg);
|
||||||
|
background-position: center;
|
||||||
|
background-repeat: no-repeat;
|
||||||
|
background-size: cover;
|
||||||
|
background-attachment: fixed;
|
||||||
|
color: var(--foreground);
|
||||||
|
font-family: "Inter Tight", sans-serif;
|
||||||
|
}
|
||||||
|
|
||||||
|
strong {
|
||||||
|
font-weight: bolder;
|
||||||
|
}
|
||||||
|
|
||||||
|
a,
|
||||||
|
a:visited {
|
||||||
|
color: var(--accent);
|
||||||
|
text-decoration: underline;
|
||||||
|
}
|
||||||
|
|
||||||
|
h1,
|
||||||
|
h2,
|
||||||
|
h3,
|
||||||
|
h4,
|
||||||
|
h5,
|
||||||
|
h6 {
|
||||||
|
font-family: "Unbounded", sans-serif;
|
||||||
|
margin-block: 4px;
|
||||||
|
font-weight: 400;
|
||||||
|
}
|
||||||
|
|
||||||
|
img {
|
||||||
|
max-width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
strong {
|
||||||
|
font-weight: 900;
|
||||||
|
}
|
||||||
|
|
||||||
|
img.avatar {
|
||||||
|
border: 4px solid var(--overlay-0);
|
||||||
|
border-radius: 100%;
|
||||||
|
max-height: 42%;
|
||||||
|
max-width: 42%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.contact-header {
|
||||||
|
margin-top: 0px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.subtext {
|
||||||
|
color: var(--subtext-0);
|
||||||
|
}
|
||||||
|
|
||||||
|
.wrapper {
|
||||||
|
background-color: var(--background-transparent);
|
||||||
|
width: 100vw;
|
||||||
|
min-height: 100vh;
|
||||||
|
}
|
||||||
|
|
||||||
|
.center {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
gap: 18px;
|
||||||
|
min-height: 100vh;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
hr.invisible {
|
||||||
|
border-color: transparent !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.content {
|
||||||
|
max-width: 800px;
|
||||||
|
background-color: var(--background);
|
||||||
|
padding: 20px;
|
||||||
|
box-shadow: 0px 0px 32px 12px rgba(0, 0, 0, 0.55);
|
||||||
|
border-radius: var(--radius);
|
||||||
|
border: 2px solid var(--border);
|
||||||
|
}
|
||||||
|
|
||||||
|
.content.landing.main {
|
||||||
|
margin-top: 24px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.content.previewcard {
|
||||||
|
border: none;
|
||||||
|
border-radius: 0px;
|
||||||
|
padding: 32px;
|
||||||
|
/* width: 450px;
|
||||||
|
height: 140px; */
|
||||||
|
ratio: 16 / 9;
|
||||||
|
background-color: var(--background-transparent);
|
||||||
|
backdrop-filter: brightness(35%) blur(16px);
|
||||||
|
box-shadow: none;
|
||||||
|
|
||||||
|
/* GRID START */
|
||||||
|
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: 1fr 1fr;
|
||||||
|
/* grid-template-rows: 1fr 1fr; */
|
||||||
|
grid-template-rows: 1fr;
|
||||||
|
gap: 0px 0px;
|
||||||
|
grid-auto-flow: row;
|
||||||
|
grid-template-areas:
|
||||||
|
/* "top top" */ "top-1 top-2";
|
||||||
|
/* "bottom-1 bottom-2"; */
|
||||||
|
}
|
||||||
|
|
||||||
|
.top {
|
||||||
|
grid-area: top;
|
||||||
|
/* border-bottom: 2px solid var(--surface-0); */
|
||||||
|
}
|
||||||
|
.top-1 {
|
||||||
|
grid-area: top-1;
|
||||||
|
}
|
||||||
|
.top-2 {
|
||||||
|
grid-area: top-2;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
/* padding: 32px; */
|
||||||
|
}
|
||||||
|
.bottom-1 {
|
||||||
|
grid-area: bottom-1;
|
||||||
|
}
|
||||||
|
.bottom-2 {
|
||||||
|
grid-area: bottom-2;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ANOTHER GRID */
|
||||||
|
|
||||||
|
.grid-contacts {
|
||||||
|
width: fit-content;
|
||||||
|
height: fit-content;
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: 1fr 1fr;
|
||||||
|
grid-template-rows: 1fr 1fr;
|
||||||
|
gap: 8px 16px;
|
||||||
|
grid-auto-flow: row;
|
||||||
|
grid-template-areas:
|
||||||
|
". ."
|
||||||
|
". .";
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.grid-contacts > div > a > img {
|
||||||
|
width: 50px;
|
||||||
|
opacity: 0.6;
|
||||||
|
}
|
||||||
|
|
||||||
|
.wrapper-123:has(.grid-contacts) {
|
||||||
|
height: 100%;
|
||||||
|
display: flex;
|
||||||
|
justify-content: right;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.grid-contacts > div {
|
||||||
|
width: fit-content;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* GRID END*/
|
||||||
|
|
||||||
|
.content.landing {
|
||||||
|
width: 335px;
|
||||||
|
background: linear-gradient(
|
||||||
|
to bottom,
|
||||||
|
var(--surface-1),
|
||||||
|
var(--background) 30%
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
.content.landing.important {
|
||||||
|
background: var(--important-background);
|
||||||
|
color: var(--important-foreground);
|
||||||
|
border: 2px solid var(--important-border);
|
||||||
|
}
|
||||||
|
|
||||||
|
.content.landing.important a {
|
||||||
|
color: var(--important-accent) !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.text-shadow {
|
||||||
|
text-shadow: 0px 0px 10px black;
|
||||||
|
}
|
||||||
|
|
||||||
|
foreground .waving {
|
||||||
|
animation: wave 1s alternate infinite ease-in-out;
|
||||||
|
animation-iteration-count: 2;
|
||||||
|
display: inline-block;
|
||||||
|
}
|
||||||
|
|
||||||
|
.emote {
|
||||||
|
vertical-align: sub;
|
||||||
|
transition: 0.5s cubic-bezier(0.075, 0.82, 0.165, 1.5);
|
||||||
|
}
|
||||||
|
|
||||||
|
.emote:hover {
|
||||||
|
transform: scale(300%);
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes wave {
|
||||||
|
0% {
|
||||||
|
transform: rotateZ(0deg);
|
||||||
|
}
|
||||||
|
|
||||||
|
100% {
|
||||||
|
transform: rotateZ(-15deg);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
#contact {
|
||||||
|
list-style-type: none;
|
||||||
|
margin: 0px;
|
||||||
|
margin-bottom: 24px;
|
||||||
|
padding: 0px;
|
||||||
|
display: flex;
|
||||||
|
gap: 12px;
|
||||||
|
}
|
||||||
|
|
||||||
|
#contact li {
|
||||||
|
opacity: 0.5;
|
||||||
|
transition: 0.15s ease-in;
|
||||||
|
}
|
||||||
|
|
||||||
|
#contact li:hover {
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
#contact img {
|
||||||
|
width: 32px;
|
||||||
|
}
|
||||||
|
|
||||||
|
hr {
|
||||||
|
background-color: transparent;
|
||||||
|
border: 2px solid var(--surface-0);
|
||||||
|
}
|
||||||
|
|
||||||
|
.trans {
|
||||||
|
background-image: linear-gradient(
|
||||||
|
to right,
|
||||||
|
rgb(85, 205, 252),
|
||||||
|
rgb(179, 157, 233),
|
||||||
|
rgb(247, 168, 184),
|
||||||
|
rgb(246, 216, 221),
|
||||||
|
rgb(255, 255, 255)
|
||||||
|
);
|
||||||
|
background-clip: text;
|
||||||
|
-webkit-background-clip: text;
|
||||||
|
-webkit-text-fill-color: transparent;
|
||||||
|
}
|
||||||
|
|
||||||
|
.enby {
|
||||||
|
background-image: linear-gradient(
|
||||||
|
to right,
|
||||||
|
rgb(253, 219, 0),
|
||||||
|
rgb(238, 212, 143),
|
||||||
|
rgb(255, 255, 255) 30%,
|
||||||
|
rgb(255, 255, 255),
|
||||||
|
rgb(255, 255, 255) 36%,
|
||||||
|
rgb(212, 181, 222),
|
||||||
|
rgb(156, 92, 212),
|
||||||
|
rgb(88, 50, 96),
|
||||||
|
rgb(0, 0, 0)
|
||||||
|
);
|
||||||
|
background-clip: text;
|
||||||
|
-webkit-background-clip: text;
|
||||||
|
-webkit-text-fill-color: transparent;
|
||||||
|
text-shadow: 0px 0px 1px var(--special-glow);
|
||||||
|
}
|
||||||
|
|
@ -1,304 +1,97 @@
|
||||||
@import url(https://fonts.bunny.net/css?family=inter-tight:100,100i,200,200i,300,300i,400,400i,500,500i,600,600i,700,700i,800,800i,900,900i|unbounded:200,300,400,500,600,700,800,900);
|
|
||||||
|
|
||||||
:root {
|
:root {
|
||||||
--background: #24273a;
|
background-color: black;
|
||||||
--background-transparent: #24273ac2;
|
color: white;
|
||||||
--foreground: #cad3f5;
|
font-family: IBMWeb, monospace;
|
||||||
--subtext-0: #a5adcb;
|
font-size: 1.0em;
|
||||||
--surface-0: #363a4f;
|
/* Variables */
|
||||||
--overlay-0: #6e738d;
|
--margin-inline-text: 0px;
|
||||||
--surface-1: #494d64;
|
--margin-inline: 16px;
|
||||||
--surface-1-transparent: #494d64c2;
|
--margin-block: 6px;
|
||||||
--mantle: #1e2030;
|
/* Used for padding and gap */
|
||||||
--accent: #a6da95;
|
--spacing: 6px;
|
||||||
|
--spacing-medium: calc(var(--spacing) * 2);
|
||||||
--border: var(--overlay-0);
|
--spacing-large: calc(var(--spacing) * 4);
|
||||||
|
--foreground: hsl(0, 0%, 65%);
|
||||||
--special-glow: rgba(165, 173, 203, 0.7);
|
|
||||||
|
|
||||||
--radius: 12px;
|
|
||||||
--radius-big: calc(var(--radius) * 1.5);
|
|
||||||
|
|
||||||
/* Important Stuff */
|
|
||||||
--important-background: #3a222b;
|
|
||||||
--important-foreground: #f5cadc;
|
|
||||||
--important-border: #f5cadc7c;
|
|
||||||
--important-accent: #7dc4e4;
|
|
||||||
/* Catppuccin Macchiato Sapphire */
|
|
||||||
}
|
}
|
||||||
|
|
||||||
body {
|
body {
|
||||||
margin: 0px;
|
margin: 0px;
|
||||||
padding: 0px;
|
padding: 0px;
|
||||||
background-image: url(/assets/wallpaper.jpg);
|
|
||||||
background-position: center;
|
|
||||||
background-repeat: no-repeat;
|
|
||||||
background-size: cover;
|
|
||||||
background-attachment: fixed;
|
|
||||||
color: var(--foreground);
|
|
||||||
font-family: "Inter Tight", sans-serif;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
strong {
|
body div.wrapper {
|
||||||
font-weight: bolder;
|
padding: var(--spacing-medium);
|
||||||
|
margin: auto;
|
||||||
|
max-width: 702px;
|
||||||
|
box-shadow: 0px 0px 48px white;
|
||||||
}
|
}
|
||||||
|
|
||||||
a,
|
@font-face {
|
||||||
a:visited {
|
font-family: IBMWeb;
|
||||||
color: var(--accent);
|
src: url('/fonts/ibm9x16.woff');
|
||||||
text-decoration: underline;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* Margin Normalisation */
|
||||||
h1,
|
h1,
|
||||||
h2,
|
h2,
|
||||||
h3,
|
h3,
|
||||||
h4,
|
h4,
|
||||||
h5,
|
h5,
|
||||||
h6 {
|
h6,
|
||||||
font-family: "Unbounded", sans-serif;
|
p {
|
||||||
margin-block: 4px;
|
margin-inline: var(--margin-inline-text);
|
||||||
font-weight: 400;
|
margin-block: var(--margin-block);
|
||||||
}
|
}
|
||||||
|
|
||||||
img {
|
/* Font normalization */
|
||||||
max-width: 100%;
|
button,
|
||||||
|
code {
|
||||||
|
font-size: inherit;
|
||||||
|
font-family: inherit;
|
||||||
}
|
}
|
||||||
|
|
||||||
strong {
|
p,
|
||||||
font-weight: 900;
|
ul,
|
||||||
|
ol,
|
||||||
|
li,
|
||||||
|
summary {
|
||||||
|
color: var(--foreground);
|
||||||
}
|
}
|
||||||
|
|
||||||
img.avatar {
|
a {
|
||||||
border: 4px solid var(--overlay-0);
|
color: #287bff;
|
||||||
border-radius: 100%;
|
|
||||||
max-height: 42%;
|
|
||||||
max-width: 42%;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.contact-header {
|
a:hover,
|
||||||
margin-top: 0px;
|
a:hover:visited {
|
||||||
|
color: white;
|
||||||
|
background-color: #287bff;
|
||||||
}
|
}
|
||||||
|
|
||||||
.subtext {
|
/* make sure the 88x31 buttons don't have a background color applied, lol */
|
||||||
color: var(--subtext-0);
|
.webButton:hover {
|
||||||
}
|
|
||||||
|
|
||||||
.wrapper {
|
|
||||||
background-color: var(--background-transparent);
|
|
||||||
width: 100vw;
|
|
||||||
min-height: 100vh;
|
|
||||||
}
|
|
||||||
|
|
||||||
.center {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
justify-content: center;
|
|
||||||
align-items: center;
|
|
||||||
gap: 18px;
|
|
||||||
min-height: 100vh;
|
|
||||||
width: 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
hr.invisible {
|
|
||||||
border-color: transparent !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
.content {
|
|
||||||
max-width: 800px;
|
|
||||||
background-color: var(--background);
|
|
||||||
padding: 20px;
|
|
||||||
box-shadow: 0px 0px 32px 12px rgba(0, 0, 0, 0.55);
|
|
||||||
border-radius: var(--radius);
|
|
||||||
border: 2px solid var(--border);
|
|
||||||
}
|
|
||||||
|
|
||||||
.content.landing.main {
|
|
||||||
margin-top: 24px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.content.previewcard {
|
|
||||||
border: none;
|
|
||||||
border-radius: 0px;
|
|
||||||
padding: 32px;
|
|
||||||
/* width: 450px;
|
|
||||||
height: 140px; */
|
|
||||||
ratio: 16 / 9;
|
|
||||||
background-color: var(--background-transparent);
|
|
||||||
backdrop-filter: brightness(35%) blur(16px);
|
|
||||||
box-shadow: none;
|
|
||||||
|
|
||||||
/* GRID START */
|
|
||||||
|
|
||||||
display: grid;
|
|
||||||
grid-template-columns: 1fr 1fr;
|
|
||||||
/* grid-template-rows: 1fr 1fr; */
|
|
||||||
grid-template-rows: 1fr;
|
|
||||||
gap: 0px 0px;
|
|
||||||
grid-auto-flow: row;
|
|
||||||
grid-template-areas:
|
|
||||||
/* "top top" */ "top-1 top-2";
|
|
||||||
/* "bottom-1 bottom-2"; */
|
|
||||||
}
|
|
||||||
|
|
||||||
.top {
|
|
||||||
grid-area: top;
|
|
||||||
/* border-bottom: 2px solid var(--surface-0); */
|
|
||||||
}
|
|
||||||
.top-1 {
|
|
||||||
grid-area: top-1;
|
|
||||||
}
|
|
||||||
.top-2 {
|
|
||||||
grid-area: top-2;
|
|
||||||
justify-content: center;
|
|
||||||
align-items: center;
|
|
||||||
/* padding: 32px; */
|
|
||||||
}
|
|
||||||
.bottom-1 {
|
|
||||||
grid-area: bottom-1;
|
|
||||||
}
|
|
||||||
.bottom-2 {
|
|
||||||
grid-area: bottom-2;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* ANOTHER GRID */
|
|
||||||
|
|
||||||
.grid-contacts {
|
|
||||||
width: fit-content;
|
|
||||||
height: fit-content;
|
|
||||||
display: grid;
|
|
||||||
grid-template-columns: 1fr 1fr;
|
|
||||||
grid-template-rows: 1fr 1fr;
|
|
||||||
gap: 8px 16px;
|
|
||||||
grid-auto-flow: row;
|
|
||||||
grid-template-areas:
|
|
||||||
". ."
|
|
||||||
". .";
|
|
||||||
justify-content: center;
|
|
||||||
align-items: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
.grid-contacts > div > a > img {
|
|
||||||
width: 50px;
|
|
||||||
opacity: 0.6;
|
|
||||||
}
|
|
||||||
|
|
||||||
.wrapper-123:has(.grid-contacts) {
|
|
||||||
height: 100%;
|
|
||||||
display: flex;
|
|
||||||
justify-content: right;
|
|
||||||
align-items: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
.grid-contacts > div {
|
|
||||||
width: fit-content;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* GRID END*/
|
|
||||||
|
|
||||||
.content.landing {
|
|
||||||
width: 335px;
|
|
||||||
background: linear-gradient(
|
|
||||||
to bottom,
|
|
||||||
var(--surface-1),
|
|
||||||
var(--background) 30%
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
.content.landing.important {
|
|
||||||
background: var(--important-background);
|
|
||||||
color: var(--important-foreground);
|
|
||||||
border: 2px solid var(--important-border);
|
|
||||||
}
|
|
||||||
|
|
||||||
.content.landing.important a {
|
|
||||||
color: var(--important-accent) !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
.text-shadow {
|
|
||||||
text-shadow: 0px 0px 10px black;
|
|
||||||
}
|
|
||||||
|
|
||||||
foreground .waving {
|
|
||||||
animation: wave 1s alternate infinite ease-in-out;
|
|
||||||
animation-iteration-count: 2;
|
|
||||||
display: inline-block;
|
|
||||||
}
|
|
||||||
|
|
||||||
.emote {
|
|
||||||
vertical-align: sub;
|
|
||||||
transition: 0.5s cubic-bezier(0.075, 0.82, 0.165, 1.5);
|
|
||||||
}
|
|
||||||
|
|
||||||
.emote:hover {
|
|
||||||
transform: scale(300%);
|
|
||||||
}
|
|
||||||
|
|
||||||
@keyframes wave {
|
|
||||||
0% {
|
|
||||||
transform: rotateZ(0deg);
|
|
||||||
}
|
|
||||||
|
|
||||||
100% {
|
|
||||||
transform: rotateZ(-15deg);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
#contact {
|
|
||||||
list-style-type: none;
|
|
||||||
margin: 0px;
|
|
||||||
margin-bottom: 24px;
|
|
||||||
padding: 0px;
|
|
||||||
display: flex;
|
|
||||||
gap: 12px;
|
|
||||||
}
|
|
||||||
|
|
||||||
#contact li {
|
|
||||||
opacity: 0.5;
|
|
||||||
transition: 0.15s ease-in;
|
|
||||||
}
|
|
||||||
|
|
||||||
#contact li:hover {
|
|
||||||
opacity: 1;
|
|
||||||
}
|
|
||||||
|
|
||||||
#contact img {
|
|
||||||
width: 32px;
|
|
||||||
}
|
|
||||||
|
|
||||||
hr {
|
|
||||||
background-color: transparent;
|
background-color: transparent;
|
||||||
border: 2px solid var(--surface-0);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.trans {
|
/* actually did not look that good */
|
||||||
background-image: linear-gradient(
|
/* a:visited {
|
||||||
to right,
|
color: #e600ff;
|
||||||
rgb(85, 205, 252),
|
} */
|
||||||
rgb(179, 157, 233),
|
|
||||||
rgb(247, 168, 184),
|
button {
|
||||||
rgb(246, 216, 221),
|
border: 2px solid white;
|
||||||
rgb(255, 255, 255)
|
border-radius: 2px;
|
||||||
);
|
background-color: inherit;
|
||||||
background-clip: text;
|
color: inherit;
|
||||||
-webkit-background-clip: text;
|
font-family: IBMWeb, monospace;
|
||||||
-webkit-text-fill-color: transparent;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.enby {
|
code p {
|
||||||
background-image: linear-gradient(
|
outline: 1px solid var(--foreground);
|
||||||
to right,
|
width: fit-content;
|
||||||
rgb(253, 219, 0),
|
padding: var(--spacing-medium);
|
||||||
rgb(238, 212, 143),
|
|
||||||
rgb(255, 255, 255) 30%,
|
|
||||||
rgb(255, 255, 255),
|
|
||||||
rgb(255, 255, 255) 36%,
|
|
||||||
rgb(212, 181, 222),
|
|
||||||
rgb(156, 92, 212),
|
|
||||||
rgb(88, 50, 96),
|
|
||||||
rgb(0, 0, 0)
|
|
||||||
);
|
|
||||||
background-clip: text;
|
|
||||||
-webkit-background-clip: text;
|
|
||||||
-webkit-text-fill-color: transparent;
|
|
||||||
text-shadow: 0px 0px 1px var(--special-glow);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
summary {
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
Loading…
Add table
Add a link
Reference in a new issue