Compare commits
1 Commits
| Author | SHA1 | Date |
|---|---|---|
 Emilia Allison
|
81a8c1cf79
|
|
|
@ -1,5 +1,6 @@
|
||||||
<!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">
|
||||||
|
|
@ -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™)</p>
|
<p>bottom text (now with extra spice™)</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">
|
||||||
📄
|
📄
|
||||||
</a>
|
</a>
|
||||||
|
|
@ -47,4 +55,5 @@
|
||||||
</a>
|
</a>
|
||||||
</footer>
|
</footer>
|
||||||
</main>
|
</main>
|
||||||
|
|
||||||
</html>
|
</html>
|
||||||
|
|
|
||||||
|
|
@ -1,4 +1,4 @@
|
||||||
@import "waltuh/waltuh";
|
@use "new-style/new-style";
|
||||||
|
|
||||||
h1 {
|
h1 {
|
||||||
margin-top: 3vh;
|
margin-top: 3vh;
|
||||||
|
|
|
||||||
|
|
@ -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;
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -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
|
||||||
|
|
@ -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;
|
||||||
}
|
}
|
||||||
|
|
@ -1,4 +1,3 @@
|
||||||
@forward "header";
|
|
||||||
@forward "overlay";
|
@forward "overlay";
|
||||||
@forward "marks";
|
@forward "marks";
|
||||||
@forward "book_entry";
|
@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;
|
height: 100vh;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
|
|
||||||
div {
|
&>div {
|
||||||
justify-self: center;
|
justify-self: center;
|
||||||
grid-area: 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