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>
|
||||
175
index.html
175
index.html
|
|
@ -1,98 +1,83 @@
|
|||
<!doctype html>
|
||||
<!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>
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Alexia's webplace</title>
|
||||
<link rel="stylesheet" href="/styles/styles.css">
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div class="wrapper">
|
||||
<h1>Alexia's webplace</h1>
|
||||
<p>Hello there, fellow traveller!</p>
|
||||
<p>you have stumbled upon my website, congrats!</p>
|
||||
<p>There is a couple of things you could be looking for:</p>
|
||||
<ul>
|
||||
<li><a href="#socials">Socials / Contacts</a></li>
|
||||
<li><a target="_blank" rel="noopener noreferrer"
|
||||
href="https://whtwnd.com/alexia.bsky.cyrneko.eu">Blogposts</a>
|
||||
(external)</li>
|
||||
<li><a target="_blank" rel="noopener noreferrer"
|
||||
href="https://ko-fi.com/cyrneko">Donations and
|
||||
Commissions</a> (external)</li>
|
||||
<li><a href="#buttons">Buttons</a></li>
|
||||
<li><a href="http://cyrneko.codeberg.page/art" target="_blank"
|
||||
rel="noopener noreferrer">Art.</a></li>
|
||||
</ul>
|
||||
|
||||
<h2 id="socials">Socials and Contacts</h2>
|
||||
<p>Socials: <a href="http://wetdry.world/@cyrus" target="_blank"
|
||||
rel="noopener noreferrer">Mastodon</a>, <a
|
||||
href="http://bsky.app/profile/cyrneko.eu" target="_blank"
|
||||
rel="noopener noreferrer">Bluesky</a>
|
||||
</p>
|
||||
<p>Contacts: <a target="_blank"
|
||||
href="https://signal.me/#eu/X7bBOAGEo-D2ddHAZSm96AxSeaNYsQXnVEW4FA2Mz34R4tcM7qhJSpjFPggdFRBb"
|
||||
rel="noopener noreferrer">Signal</a>, <a target="_blank"
|
||||
href="https://matrix.to/#/@alexia:thomcat.rocks"
|
||||
rel="noopener noreferrer">Matrix</a>, <a
|
||||
href="mailto:cyrus42@getgoogleoff.me">Email</a></p>
|
||||
|
||||
<h2 id="buttons">Buttons</h2>
|
||||
<!-- -->
|
||||
<h3>cool stuff</h3>
|
||||
<p>Some of these have links, hover them!</p>
|
||||
<a class="webButton" href="http://wetdry.world" target="_blank"
|
||||
rel="noopener noreferrer"><img loading="lazy"
|
||||
src="/assets/wetdryworld.png"
|
||||
alt="the wetdry world background from super mario 64 together with text saying wetdry.world"></a>
|
||||
<img loading="lazy" src="/assets/firefox.png"
|
||||
alt="Firefox: Take back the web">
|
||||
<img loading="lazy" src="/assets/discordnoway.gif" alt="Discord? No Way!">
|
||||
<a class="webButton" href="https://ublockorigin.com" target="_blank"
|
||||
rel="noopener noreferrer"><img loading="lazy" src="/assets/ublock.png"
|
||||
alt="uBlock Origin NOW!"></a>
|
||||
<img loading="lazy" src="/assets/fediverse.gif" alt="Join the Fediverse!!!">
|
||||
<!-- -->
|
||||
<h3>Creatures :3</h3>
|
||||
<a href="http://freeplay.floof.company" target="_blank"
|
||||
rel="noopener noreferrer" class="webButton"><img loading="lazy"
|
||||
src="/assets/free.gif"
|
||||
alt="freeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeee"></a>
|
||||
<a href="http://neil.cyrneko.eu" target="_blank" rel="noopener noreferrer"
|
||||
class="webButton"><img loading="lazy"
|
||||
src="https://neil.cyrneko.eu/button.png" alt="neil"></a>
|
||||
</a>
|
||||
<!-- -->
|
||||
<h3>My button</h3>
|
||||
<p>Thanks to <a href="http://kyropy.neocities.org" target="_blank"
|
||||
rel="noopener noreferrer">kyropy</a> for making this!</p>
|
||||
<img loading="lazy" src="/assets/88x31.png" alt="my own 88x31 button!">
|
||||
<p>You can embed this on your own website too!</p>
|
||||
<details>
|
||||
<summary>expand for HTML to embed</summary>
|
||||
<code><p>
|
||||
<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>
|
||||
</p></code>
|
||||
</details>
|
||||
</div>
|
||||
</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 {
|
||||
--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 */
|
||||
background-color: black;
|
||||
color: white;
|
||||
font-family: IBMWeb, monospace;
|
||||
font-size: 1.0em;
|
||||
/* Variables */
|
||||
--margin-inline-text: 0px;
|
||||
--margin-inline: 16px;
|
||||
--margin-block: 6px;
|
||||
/* Used for padding and gap */
|
||||
--spacing: 6px;
|
||||
--spacing-medium: calc(var(--spacing) * 2);
|
||||
--spacing-large: calc(var(--spacing) * 4);
|
||||
--foreground: hsl(0, 0%, 65%);
|
||||
}
|
||||
|
||||
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;
|
||||
body div.wrapper {
|
||||
padding: var(--spacing-medium);
|
||||
margin: auto;
|
||||
max-width: 702px;
|
||||
box-shadow: 0px 0px 48px white;
|
||||
}
|
||||
|
||||
a,
|
||||
a:visited {
|
||||
color: var(--accent);
|
||||
text-decoration: underline;
|
||||
@font-face {
|
||||
font-family: IBMWeb;
|
||||
src: url('/fonts/ibm9x16.woff');
|
||||
}
|
||||
|
||||
/* Margin Normalisation */
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
h4,
|
||||
h5,
|
||||
h6 {
|
||||
font-family: "Unbounded", sans-serif;
|
||||
margin-block: 4px;
|
||||
font-weight: 400;
|
||||
h6,
|
||||
p {
|
||||
margin-inline: var(--margin-inline-text);
|
||||
margin-block: var(--margin-block);
|
||||
}
|
||||
|
||||
img {
|
||||
max-width: 100%;
|
||||
/* Font normalization */
|
||||
button,
|
||||
code {
|
||||
font-size: inherit;
|
||||
font-family: inherit;
|
||||
}
|
||||
|
||||
strong {
|
||||
font-weight: 900;
|
||||
p,
|
||||
ul,
|
||||
ol,
|
||||
li,
|
||||
summary {
|
||||
color: var(--foreground);
|
||||
}
|
||||
|
||||
img.avatar {
|
||||
border: 4px solid var(--overlay-0);
|
||||
border-radius: 100%;
|
||||
max-height: 42%;
|
||||
max-width: 42%;
|
||||
a {
|
||||
color: #287bff;
|
||||
}
|
||||
|
||||
.contact-header {
|
||||
margin-top: 0px;
|
||||
a:hover,
|
||||
a:hover:visited {
|
||||
color: white;
|
||||
background-color: #287bff;
|
||||
}
|
||||
|
||||
.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 {
|
||||
/* make sure the 88x31 buttons don't have a background color applied, lol */
|
||||
.webButton:hover {
|
||||
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;
|
||||
/* actually did not look that good */
|
||||
/* a:visited {
|
||||
color: #e600ff;
|
||||
} */
|
||||
|
||||
button {
|
||||
border: 2px solid white;
|
||||
border-radius: 2px;
|
||||
background-color: inherit;
|
||||
color: inherit;
|
||||
font-family: IBMWeb, monospace;
|
||||
}
|
||||
|
||||
.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);
|
||||
code p {
|
||||
outline: 1px solid var(--foreground);
|
||||
width: fit-content;
|
||||
padding: var(--spacing-medium);
|
||||
}
|
||||
|
||||
summary {
|
||||
cursor: pointer;
|
||||
}
|
||||
Loading…
Add table
Add a link
Reference in a new issue