a draft that neither em nor i really like
This commit is contained in:
parent
7c7cf7b406
commit
81a8c1cf79
GPG Key ID:
7A3F8997BFE894E0
|
|
@ -1,6 +1,7 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
|
||||
<head>
|
||||
<title>Emilia Allison</title>
|
||||
<link rel="stylesheet" href="css/index.css">
|
||||
<script src="js/index.js" defer></script>
|
||||
|
|
@ -13,26 +14,33 @@
|
|||
<meta property="og:url" content="https://ilia.moe/">
|
||||
<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: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 -->
|
||||
<meta property="twitter:card" content="summary_large_image" />
|
||||
</head>
|
||||
</head>
|
||||
|
||||
<body class="vsc-initialized">
|
||||
<div id="overlay"></div>
|
||||
<main class="offset-grid--top fullsize">
|
||||
<main class="fullsize offset-grid--left--narrow">
|
||||
<div>
|
||||
<h1 class="text-dark ff-serif fs-800 gap-large-bottom">
|
||||
Em<span class="waltuh-gradient-underline">ilia</span>.
|
||||
<div class="main_grid">
|
||||
<h1 class="text-dark ff-serif fs-800 gap-large-bottom sideways-text">
|
||||
Em<span class="new-style-gradient-sideline--right">ilia</span>
|
||||
</h1>
|
||||
<div>
|
||||
<p>mathematics enjoyer</p>
|
||||
<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
|
||||
</a>
|
||||
</p>
|
||||
<p>bottom text (now with extra spice™)</p>
|
||||
</div>
|
||||
<footer class="lock-bottom flex row">
|
||||
</div>
|
||||
</div>
|
||||
<footer class="lock-right flex column">
|
||||
<a title="about" href="about">
|
||||
📄
|
||||
</a>
|
||||
|
|
@ -46,5 +54,6 @@
|
|||
📠
|
||||
</a>
|
||||
</footer>
|
||||
</main>
|
||||
</main>
|
||||
|
||||
</html>
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
@import "waltuh/waltuh";
|
||||
@use "new-style/new-style";
|
||||
|
||||
h1 {
|
||||
margin-top: 3vh;
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
@use "waltuh/waltuh";
|
||||
@use "waltuh/variables" as *;
|
||||
@use "new-style/new-style";
|
||||
@use "new-style/variables" as *;
|
||||
|
||||
#pgp_a {
|
||||
position: fixed;
|
||||
|
|
@ -9,8 +9,22 @@
|
|||
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 {
|
||||
width: 100%;
|
||||
font-size: clamp(2rem, $fs-800, 15vw);
|
||||
justify-content: center !important;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,17 +1,17 @@
|
|||
@use "sass:color";
|
||||
@use "sass:math";
|
||||
|
||||
$-color-white: hsl(280 30% 80%);
|
||||
$-color-dark: color.adjust($-color-white, $lightness: -50%);
|
||||
$-color-light: hsl(190 80% 30%);
|
||||
$-color-bg: hsl(180 1% 10%);
|
||||
$-color-dark: color.adjust($-color-bg, $lightness: +80%);
|
||||
$-color-fg: hsl(344 65% 20%);
|
||||
$-ff-serif: "Inconsolata", monospace;
|
||||
$-ff-sans: "Jost", sans-serif;
|
||||
$-fs-900: math.div(100rem, 16);
|
||||
|
||||
@forward "base" with (
|
||||
$color-white: $-color-white,
|
||||
$color-bg: $-color-bg,
|
||||
$color-dark: $-color-dark,
|
||||
$color-light: $-color-light,
|
||||
$color-fg: $-color-fg,
|
||||
$ff-serif: $-ff-serif,
|
||||
$ff-sans: $-ff-sans,
|
||||
$fs-900: $-fs-900
|
||||
|
|
@ -16,8 +16,8 @@
|
|||
/* colors */
|
||||
|
||||
$color-dark: hsl(0 0% 0%) !default; /* Black */
|
||||
$color-light: hsl(0 0% 50%) !default; /* Gray */
|
||||
$color-white: hsl(0 0% 100%) !default;/* White */
|
||||
$color-fg: hsl(0 0% 50%) !default; /* Gray */
|
||||
$color-bg: hsl(0 0% 100%) !default;/* White */
|
||||
|
||||
/* font */
|
||||
|
||||
|
|
@ -82,6 +82,22 @@ $ff-sans: sans-serif !default;
|
|||
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 */
|
||||
|
||||
.hr::after { /* Add fake hr after header */
|
||||
|
|
@ -99,12 +115,12 @@ $ff-sans: sans-serif !default;
|
|||
/* Color Classes */
|
||||
|
||||
.bg-dark { background-color: $color-dark; }
|
||||
.bg-light { background-color: $color-light; }
|
||||
.bg-white { background-color: $color-white; }
|
||||
.bg-light { background-color: $color-fg; }
|
||||
.bg-white { background-color: $color-bg; }
|
||||
|
||||
.text-dark { color: $color-dark; }
|
||||
.text-light { color: $color-light; }
|
||||
.text-white { color: $color-white; }
|
||||
.text-light { color: $color-fg; }
|
||||
.text-white { color: $color-bg; }
|
||||
|
||||
/* Font Classes */
|
||||
|
||||
|
|
@ -135,7 +151,8 @@ section:not(:last-of-type) {
|
|||
}
|
||||
|
||||
footer {
|
||||
margin-top: 3vh;
|
||||
height: 100%;
|
||||
margin-right: 3vw;
|
||||
}
|
||||
|
||||
/* ----- */
|
||||
|
|
@ -164,7 +181,7 @@ body {
|
|||
font-family: $ff-sans;
|
||||
font-size: $fs-400;
|
||||
color: $color-dark;
|
||||
background-color: $color-white;
|
||||
background-color: $color-bg;
|
||||
line-height: 1.5;
|
||||
min-height: 100vh;
|
||||
}
|
||||
|
|
@ -1,4 +1,3 @@
|
|||
@forward "header";
|
||||
@forward "overlay";
|
||||
@forward "marks";
|
||||
@forward "book_entry";
|
||||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
|
@ -22,7 +22,7 @@
|
|||
height: 100vh;
|
||||
width: 100%;
|
||||
|
||||
div {
|
||||
&>div {
|
||||
justify-self: center;
|
||||
grid-area: center;
|
||||
|
||||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
Loading…
Reference in New Issue