emilia
/
personal-website
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

a draft that neither em nor i really like

This commit is contained in:
Emilia Allison 2023-11-15 23:37:00 -05:00
parent 7c7cf7b406
commit 81a8c1cf79
Signed by: emilia
GPG Key ID: 7A3F8997BFE894E0
15 changed files with 187 additions and 134 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

27
src/index.html
View File

@ -1,6 +1,7 @@
<!DOCTYPE html> <!DOCTYPE html>
<html> <html>
<head>
<head>
<title>Emilia Allison</title> <title>Emilia Allison</title>
<link rel="stylesheet" href="css/index.css"> <link rel="stylesheet" href="css/index.css">
<script src="js/index.js" defer></script> <script src="js/index.js" defer></script>
@ -13,26 +14,33 @@
<meta property="og:url" content="https://ilia.moe/"> <meta property="og:url" content="https://ilia.moe/">
<meta property="og:title" content="what"> <meta property="og:title" content="what">
<meta property="og:description" content="did you just try to embed my website? please don't do that"> <meta property="og:description" content="did you just try to embed my website? please don't do that">
<meta property="og:image" content="https://external-content.duckduckgo.com/iu/?u=http%3A%2F%2Fclimbers.lsa.umich.edu%2Fwp-content%2Fuploads%2F2013%2F12%2FCitrullus-lanatus-from-Russia.jpg&f=1&nofb=1"> <meta property="og:image"
content="https://external-content.duckduckgo.com/iu/?u=http%3A%2F%2Fclimbers.lsa.umich.edu%2Fwp-content%2Fuploads%2F2013%2F12%2FCitrullus-lanatus-from-Russia.jpg&f=1&nofb=1">
<!-- Twitter --> <!-- Twitter -->
<meta property="twitter:card" content="summary_large_image" /> <meta property="twitter:card" content="summary_large_image" />
</head> </head>
<body class="vsc-initialized"> <body class="vsc-initialized">
<div id="overlay"></div> <div id="overlay"></div>
<main class="offset-grid--top fullsize"> <main class="fullsize offset-grid--left--narrow">
<div> <div>
<h1 class="text-dark ff-serif fs-800 gap-large-bottom"> <div class="main_grid">
Em<span class="waltuh-gradient-underline">ilia</span>. <h1 class="text-dark ff-serif fs-800 gap-large-bottom sideways-text">
Em<span class="new-style-gradient-sideline--right">ilia</span>
</h1> </h1>
<div>
<p>mathematics enjoyer</p> <p>mathematics enjoyer</p>
<p id="pgp_p">pgp: <p id="pgp_p">pgp:
<a href="https://keyserver.ubuntu.com/pks/lookup?search=0x8cbc050e7bbb8779eccd42074b33e52e3bd25455&fingerprint=on&op=index" id="pgp_a" class="fixed"> <a href="https://keyserver.ubuntu.com/pks/lookup?search=0x8cbc050e7bbb8779eccd42074b33e52e3bd25455&fingerprint=on&op=index"
id="pgp_a" class="fixed">
8CBC 050E 7BBB 8779 ECCD 4207 4B33 E52E 3BD2 5455 8CBC 050E 7BBB 8779 ECCD 4207 4B33 E52E 3BD2 5455
</a> </a>
</p> </p>
<p>bottom text (now with extra spice&trade;)</p> <p>bottom text (now with extra spice&trade;)</p>
</div> </div>
<footer class="lock-bottom flex row"> </div>
</div>
<footer class="lock-right flex column">
<a title="about" href="about"> <a title="about" href="about">
&#128196 &#128196
</a> </a>
@ -46,5 +54,6 @@
&#128224 &#128224
</a> </a>
</footer> </footer>
</main> </main>
</html> </html>

2
src/scss/about.scss
View File

@ -1,4 +1,4 @@
@import "waltuh/waltuh"; @use "new-style/new-style";
h1 { h1 {
margin-top: 3vh; margin-top: 3vh;

20
src/scss/index.scss
View File

@ -1,5 +1,5 @@
@use "waltuh/waltuh"; @use "new-style/new-style";
@use "waltuh/variables" as *; @use "new-style/variables" as *;
#pgp_a { #pgp_a {
position: fixed; position: fixed;
@ -9,8 +9,22 @@
margin-top: 0.6rem; margin-top: 0.6rem;
} }
.main_grid {
height: 16em;
display: inline-grid;
grid-template-columns: [title] 1fr [subtext-col] 6fr;
grid-template-rows: [blank1] 1fr [subtext-row] 1fr [blank2] 1fr;
grid-template-areas: "t ." "t d" "t .";
&>h1 {
grid-area: t;
}
&>div {
grid-area: d;
}
}
footer { footer {
width: 100%;
font-size: clamp(2rem, $fs-800, 15vw); font-size: clamp(2rem, $fs-800, 15vw);
justify-content: center !important; justify-content: center !important;
} }

10
src/scss/waltuh/_variables.scss → src/scss/new-style/_variables.scss
View File

@ -1,17 +1,17 @@
@use "sass:color"; @use "sass:color";
@use "sass:math"; @use "sass:math";
$-color-white: hsl(280 30% 80%); $-color-bg: hsl(180 1% 10%);
$-color-dark: color.adjust($-color-white, $lightness: -50%); $-color-dark: color.adjust($-color-bg, $lightness: +80%);
$-color-light: hsl(190 80% 30%); $-color-fg: hsl(344 65% 20%);
$-ff-serif: "Inconsolata", monospace; $-ff-serif: "Inconsolata", monospace;
$-ff-sans: "Jost", sans-serif; $-ff-sans: "Jost", sans-serif;
$-fs-900: math.div(100rem, 16); $-fs-900: math.div(100rem, 16);
@forward "base" with ( @forward "base" with (
$color-white: $-color-white, $color-bg: $-color-bg,
$color-dark: $-color-dark, $color-dark: $-color-dark,
$color-light: $-color-light, $color-fg: $-color-fg,
$ff-serif: $-ff-serif, $ff-serif: $-ff-serif,
$ff-sans: $-ff-sans, $ff-sans: $-ff-sans,
$fs-900: $-fs-900 $fs-900: $-fs-900

33
src/scss/waltuh/base.scss → src/scss/new-style/base.scss
View File

@ -16,8 +16,8 @@
/* colors */ /* colors */
$color-dark: hsl(0 0% 0%) !default; /* Black */ $color-dark: hsl(0 0% 0%) !default; /* Black */
$color-light: hsl(0 0% 50%) !default; /* Gray */ $color-fg: hsl(0 0% 50%) !default; /* Gray */
$color-white: hsl(0 0% 100%) !default;/* White */ $color-bg: hsl(0 0% 100%) !default;/* White */
/* font */ /* font */
@ -82,6 +82,22 @@ $ff-sans: sans-serif !default;
bottom: 0%; bottom: 0%;
} }
.lock-right {
position: fixed;
right: 0%;
}
.lock-top {
position: fixed;
top: 0%;
}
.sideways-text {
writing-mode: vertical-rl;
text-orientation: upright;
letter-spacing: -1.0rem;
}
/* Other */ /* Other */
.hr::after { /* Add fake hr after header */ .hr::after { /* Add fake hr after header */
@ -99,12 +115,12 @@ $ff-sans: sans-serif !default;
/* Color Classes */ /* Color Classes */
.bg-dark { background-color: $color-dark; } .bg-dark { background-color: $color-dark; }
.bg-light { background-color: $color-light; } .bg-light { background-color: $color-fg; }
.bg-white { background-color: $color-white; } .bg-white { background-color: $color-bg; }
.text-dark { color: $color-dark; } .text-dark { color: $color-dark; }
.text-light { color: $color-light; } .text-light { color: $color-fg; }
.text-white { color: $color-white; } .text-white { color: $color-bg; }
/* Font Classes */ /* Font Classes */
@ -135,7 +151,8 @@ section:not(:last-of-type) {
} }
footer { footer {
margin-top: 3vh; height: 100%;
margin-right: 3vw;
} }
/* ----- */ /* ----- */
@ -164,7 +181,7 @@ body {
font-family: $ff-sans; font-family: $ff-sans;
font-size: $fs-400; font-size: $fs-400;
color: $color-dark; color: $color-dark;
background-color: $color-white; background-color: $color-bg;
line-height: 1.5; line-height: 1.5;
min-height: 100vh; min-height: 100vh;
} }

0
src/scss/waltuh/components/_book_entry.scss → src/scss/new-style/components/_book_entry.scss
View File

1
src/scss/waltuh/components/_index.scss → src/scss/new-style/components/_index.scss
View File

@ -1,4 +1,3 @@
@forward "header";
@forward "overlay"; @forward "overlay";
@forward "marks"; @forward "marks";
@forward "book_entry"; @forward "book_entry";

84
src/scss/new-style/components/_marks.scss Normal file
View File

@ -0,0 +1,84 @@
@use "sass:math";
@use "sass:color";
@use "../variables" as *;
@keyframes wipeIn {
from { clip-path: inset(0 100% 0 0); }
to { clip-path: inset(0 0 0 0); }
}
span.new-style-gradient {
font-weight: 600;
color: transparent;
$grad1: color.adjust($color-fg, $saturation: +80%, $lightness: +10%);
$grad2: color.adjust($grad1, $lightness: -10%);
background: linear-gradient($grad1, $grad2);
background-size: 30vmin 30vmin;
background-clip: text;
animation: wipeIn 0.25s ease-in;
}
span.new-style-gradient-underline {
position: relative;
&::after {
@extend span, .new-style-gradient;
background-clip: unset;
border-radius: 2rem;
content: "";
position: absolute;
bottom: -0.1rem;
left: 5%;
height: 0.6rem;
width: 90%;
}
}
%new-style-gradient-sideline {
position: relative;
&::after {
@extend span, .new-style-gradient;
background-clip: unset;
border-radius: 2rem;
content: "";
position: absolute;
bottom: 0%;
height: 95%;
width: 0.6rem;
}
}
span.new-style-gradient-sideline--right {
@extend %new-style-gradient-sideline;
&::after {
right: 0.6rem;
}
}
span.new-style-gradient-sideline--left {
@extend %new-style-gradient-sideline;
&::after {
left: 0.6rem;
}
}
span.spoiler {
background: black;
color: transparent;
user-select: none;
transition: background 100ms ease,
color 100ms ease;
&:hover, &:active, &:focus {
background: inherit;
color: inherit;
}
}

0
src/scss/waltuh/components/_overlay.scss → src/scss/new-style/components/_overlay.scss
View File

2
src/scss/waltuh/layouts/_grid.scss → src/scss/new-style/layouts/_grid.scss
View File

@ -22,7 +22,7 @@
height: 100vh; height: 100vh;
width: 100%; width: 100%;
div { &>div {
justify-self: center; justify-self: center;
grid-area: center; grid-area: center;

0
src/scss/waltuh/layouts/_index.scss → src/scss/new-style/layouts/_index.scss
View File

0
src/scss/waltuh/layouts/_modifiers.scss → src/scss/new-style/layouts/_modifiers.scss
View File

0
src/scss/waltuh/waltuh.scss → src/scss/new-style/new-style.scss
View File

0
src/scss/waltuh/components/_header.scss
View File

70
src/scss/waltuh/components/_marks.scss
View File

@ -1,70 +0,0 @@
@use "sass:math";
@use "sass:color";
@use "../variables" as *;
@keyframes waltuh-gradient-anim {
$r: 6em;
$pd: math.div(2*math.$pi,10);
from {
background-position: 6em 0em;
}
@for $i from 1 through 9 {
#{$i*10}% {
background-position: $r*math.cos($i*$pd) $r*math.sin($i*$pd);
}
}
to {
background-position: 6em 0em;
}
}
@keyframes wipeIn {
from { clip-path: inset(0 100% 0 0); }
to { clip-path: inset(0 0 0 0); }
}
span.waltuh-gradient {
font-weight: 600;
color: transparent;
$grad1: color.adjust($color-dark, $saturation: +80%, $lightness: +20%);
$grad2: color.adjust($grad1, $lightness: +30%);
background: repeating-radial-gradient($color-dark, $grad1, $grad2 80%, white);
background-size: 30vmin 30vmin;
background-clip: text;
animation: waltuh-gradient-anim 12s linear infinite,
wipeIn 0.25s ease-in;
}
span.waltuh-gradient-underline {
position: relative;
&::after {
@extend span, .waltuh-gradient;
background-clip: unset;
border-radius: 2rem;
content: "";
position: absolute;
bottom: 0.2rem;
left: 10%;
height: 0.4rem;
width: 80%;
}
}
span.spoiler {
background: black;
color: transparent;
user-select: none;
transition: background 100ms ease,
color 100ms ease;
&:hover, &:active, &:focus {
background: inherit;
color: inherit;
}
}