mirror of
https://codeberg.org/cyrneko/pages.git
synced 2025-05-04 18:13:07 +00:00
I am hoping for the best lmao
This commit is contained in:
cyrneko
parent
44c1d7176f
commit
94717c7ff3
4 changed files with 160 additions and 4 deletions
BIN
assets/preview-banner.png
Normal file
BIN
assets/preview-banner.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 42 KiB |
|
|
@ -3,6 +3,10 @@
|
||||||
<head>
|
<head>
|
||||||
<meta charset="UTF-8" />
|
<meta charset="UTF-8" />
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
<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="/assets/preview-banner.png" />
|
||||||
<link rel="stylesheet" href="styles/styles.css" />
|
<link rel="stylesheet" href="styles/styles.css" />
|
||||||
<title>Alexia's Website</title>
|
<title>Alexia's Website</title>
|
||||||
</head>
|
</head>
|
||||||
|
|
@ -12,7 +16,7 @@
|
||||||
<div class="center">
|
<div class="center">
|
||||||
<div class="content landing">
|
<div class="content landing">
|
||||||
<h1>Hi There! My name is <strong>Alexia</strong>.</h1>
|
<h1>Hi There! My name is <strong>Alexia</strong>.</h1>
|
||||||
<p class="subtext">she/they • 18 • <span class="trans">transfem :P</span></p>
|
<p class="subtext">she/they • 18 • <span class="trans">transfem ✨</span></p>
|
||||||
<p>
|
<p>
|
||||||
I'm interested in all things tech, privacy, and our feline overlords
|
I'm interested in all things tech, privacy, and our feline overlords
|
||||||
<img class="emote" src="assets/neocat.png" alt="neocat" width="24px" />
|
<img class="emote" src="assets/neocat.png" alt="neocat" width="24px" />
|
||||||
|
|
@ -38,7 +42,8 @@
|
||||||
</p>
|
</p>
|
||||||
<p>it would mean a lot if you donated.</p>
|
<p>it would mean a lot if you donated.</p>
|
||||||
<p>
|
<p>
|
||||||
<strong>any donations or commissions to/from me will go to Tillian, instead.</strong> At least as much as I can afford.
|
<strong>any donations or commissions to/from me will go to Tillian, instead.</strong> At
|
||||||
|
least as much as I can afford.
|
||||||
</p>
|
</p>
|
||||||
<p>
|
<p>
|
||||||
Donate on
|
Donate on
|
||||||
|
|
|
||||||
62
preview.html
Normal file
62
preview.html
Normal file
|
|
@ -0,0 +1,62 @@
|
||||||
|
<!doctype html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8" />
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||||
|
<link rel="stylesheet" href="styles/styles.css" />
|
||||||
|
<title>alexia-website-titlecard</title>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<!-- The way this works is simple: -->
|
||||||
|
<!-- I lay out the preview card in HTML+CSS -->
|
||||||
|
<!-- Then I screenshot it. -->
|
||||||
|
<style>
|
||||||
|
p {
|
||||||
|
margin-block: 4px;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
<div class="center content-wrapper">
|
||||||
|
<div class="content previewcard">
|
||||||
|
<div class="grid top top-1">
|
||||||
|
<h1><strong>Alexia</strong></h1>
|
||||||
|
<p class="subtext">she/they • <span class="trans">transfem ✨</span></p>
|
||||||
|
<hr class="invisible" />
|
||||||
|
<p>I love tech and cats!</p>
|
||||||
|
<p>say hi :3</p>
|
||||||
|
</div>
|
||||||
|
<div class="grid top top-2">
|
||||||
|
<div class="wrapper-123">
|
||||||
|
<div class="grid-contacts">
|
||||||
|
<div>
|
||||||
|
<a
|
||||||
|
href="https://signal.me/#eu/lQGErCIJyfX6HVOvGJr9HrKJr6BBNcFWo97PmUl39rBDOqjYpP9OI6EsBOZfNwgJ"
|
||||||
|
target="_blank"
|
||||||
|
><img src="assets/signal.svg" alt="the Signal Logo"
|
||||||
|
/></a>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<a
|
||||||
|
href="https://simplex.chat/contact#/?v=2-5&smp=smp%3A%2F%2F1OwYGt-yqOfe2IyVHhxz3ohqo3aCCMjtB-8wn4X_aoY%3D%40smp11.simplex.im%2FaiILWA_m59Ta85pPjJVcvSKWK_hznMRW%23%2F%3Fv%3D1-2%26dh%3DMCowBQYDK2VuAyEAZIDRQ00kXJgvWjjoye9fKeo9Sa1K-JEcM33Aa1F0fyM%253D%26srv%3D6ioorbm6i3yxmuoezrhjk6f6qgkc4syabh7m3so74xunb5nzr4pwgfqd.onion"
|
||||||
|
target="_blank"
|
||||||
|
><img src="assets/simplex.svg" alt="the SimpleX Chat Logo"
|
||||||
|
/></a>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<a href="mailto:cyrus42@disroot.org" target="_blank"
|
||||||
|
><img src="assets/email.svg" alt="an E-Mail icon"
|
||||||
|
/></a>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<a href="https://wetdry.world/@cyrus" target="_blank" rel="me"
|
||||||
|
><img src="assets/mastodon.svg" alt="the Mastodon Logo"
|
||||||
|
/></a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="grid bottom-1"></div>
|
||||||
|
<div class="grid bottom-2"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
|
|
@ -97,15 +97,97 @@ strong {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
hr.invisible {
|
||||||
|
border-color: transparent !important;
|
||||||
|
}
|
||||||
|
|
||||||
.content {
|
.content {
|
||||||
max-width: 800px;
|
max-width: 800px;
|
||||||
background-color: var(--background);
|
background-color: var(--background);
|
||||||
padding: 20px;
|
padding: 20px;
|
||||||
box-shadow: 0px 0px 32px 12px rgba(0, 0, 0, 0.55);
|
box-shadow: 0px 0px 32px 12px rgba(0, 0, 0, 0.55);
|
||||||
border-radius: var(--radius);
|
border-radius: var(--radius);
|
||||||
border: 2px solid var(--border)
|
border: 2px solid var(--border);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.content.previewcard {
|
||||||
|
border: none;
|
||||||
|
border-radius: 0px;
|
||||||
|
padding: 32px;
|
||||||
|
width: 450px;
|
||||||
|
height: 140px;
|
||||||
|
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 {
|
.content.landing {
|
||||||
width: 335px;
|
width: 335px;
|
||||||
}
|
}
|
||||||
|
|
@ -176,7 +258,14 @@ hr {
|
||||||
}
|
}
|
||||||
|
|
||||||
.trans {
|
.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-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;
|
background-clip: text;
|
||||||
-webkit-background-clip: text;
|
-webkit-background-clip: text;
|
||||||
-webkit-text-fill-color: transparent;
|
-webkit-text-fill-color: transparent;
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue