diff --git a/assets/88x31.png b/assets/88x31.png new file mode 100644 index 0000000..e455b7a Binary files /dev/null and b/assets/88x31.png differ diff --git a/assets/free.gif b/assets/free.gif new file mode 100644 index 0000000..18acc45 Binary files /dev/null and b/assets/free.gif differ diff --git a/fonts/ibm9x16.woff b/fonts/ibm9x16.woff new file mode 100644 index 0000000..969fb65 Binary files /dev/null and b/fonts/ibm9x16.woff differ diff --git a/index-old.html b/index-old.html new file mode 100644 index 0000000..c336569 --- /dev/null +++ b/index-old.html @@ -0,0 +1,98 @@ + + + + + + + + + + + + + + + Alexia's Website + + + +
+
+
+
+ +
+

Hi There! My name is ⚞Alexia⚟

+

she/they • 18 • transfem ✨

+

+ I'm interested in all things tech, privacy, and our feline overlords + neocat +

+

+ I have a blog and + appreciate donations +

+

+ my PGP keys are published + here, for signing and encrypting mails. +

+
+
+

Donate to Tillian.

+

+ Tillian is living in an abusive household, and has been for years. Robbed of his youth + and childhood. +

+

it would mean a lot if you donated.

+

+ any donations or commissions to/from me will go to Tillian, instead. At + least as much as I can afford. +

+

+ Donate on + Ko-Fi or + PayPal +

+
+
+ +
    +
  • + the Signal Logo +
    • + + +
  • + an E-Mail icon +
    • +
  • + the Fediverse Logo +
    • +
+
+
+
+ + diff --git a/index.html b/index.html index c336569..f5ad251 100644 --- a/index.html +++ b/index.html @@ -1,98 +1,83 @@ - + - - - - - - - - - - - - - Alexia's Website - - -
-
-
-
- -
-

Hi There! My name is ⚞Alexia⚟

-

she/they • 18 • transfem ✨

-

- I'm interested in all things tech, privacy, and our feline overlords - neocat -

-

- I have a blog and - appreciate donations -

-

- my PGP keys are published - here, for signing and encrypting mails. -

-
-
-

Donate to Tillian.

-

- Tillian is living in an abusive household, and has been for years. Robbed of his youth - and childhood. -

-

it would mean a lot if you donated.

-

- any donations or commissions to/from me will go to Tillian, instead. At - least as much as I can afford. -

-

- Donate on - Ko-Fi or - PayPal -

-
-
- -
    -
  • - the Signal Logo -
    • - - -
  • - an E-Mail icon -
    • -
  • - the Fediverse Logo -
    • -
-
-
-
- - + + + + Alexia's webplace + + + + +
+

Alexia's webplace

+

Hello there, fellow traveller!

+

you have stumbled upon my website, congrats!

+

There is a couple of things you could be looking for:

+ + +

Socials and Contacts

+

Socials: Mastodon, Bluesky +

+

Contacts: Signal, Matrix, Email

+ +

Buttons

+ +

cool stuff

+

Some of these have links, hover them!

+ the wetdry world background from super mario 64 together with text saying wetdry.world + Firefox: Take back the web + Discord? No Way! + uBlock Origin NOW! + Join the Fediverse!!! + +

Creatures :3

+ freeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeee + neil + + +

My button

+

Thanks to kyropy for making this!

+ my own 88x31 button! +

You can embed this on your own website too!

+
+ expand for HTML to embed +

+ <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> +

+
+
+ + + \ No newline at end of file diff --git a/styles/styles-old.css b/styles/styles-old.css new file mode 100644 index 0000000..ca63fb5 --- /dev/null +++ b/styles/styles-old.css @@ -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); +} diff --git a/styles/styles.css b/styles/styles.css index ca63fb5..afdeb07 100644 --- a/styles/styles.css +++ b/styles/styles.css @@ -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; +} \ No newline at end of file