Merge branch 'master' into feature-base-v1.1
This commit is contained in:
commit
7de98a4c7d
GPG Key ID:
7A3F8997BFE894E0
|
|
@ -24,7 +24,7 @@ jobs:
|
||||||
key: ${{ secrets.SSH_KEY }}
|
key: ${{ secrets.SSH_KEY }}
|
||||||
script: |
|
script: |
|
||||||
cd repo/src
|
cd repo/src
|
||||||
sass sass/:css/
|
sass scss/:css/
|
||||||
- name: Build hugo
|
- name: Build hugo
|
||||||
uses: appleboy/ssh-action@master
|
uses: appleboy/ssh-action@master
|
||||||
with:
|
with:
|
||||||
|
|
@ -42,7 +42,7 @@ jobs:
|
||||||
username: ubuntu
|
username: ubuntu
|
||||||
key: ${{ secrets.SSH_KEY }}
|
key: ${{ secrets.SSH_KEY }}
|
||||||
script: |
|
script: |
|
||||||
sudo su
|
sudo rm -rf /usr/share/nginx/html/ilia.moe
|
||||||
rm -rf /usr/share/nginx/html/ilia.moe
|
sudo cp -r repo/src /usr/share/nginx/html/ilia.moe
|
||||||
cp -r repo/src /usr/share/nginx/html/ilia.moe
|
sudo cp -r repo/hugo/recipe/public /usr/share/nginx/html/ilia.moe/cool-stuff/recipes
|
||||||
cp -r repo/hugo/recipe/public /usr/share/nginx/html/ilia.moe/cool-stuff/recipes
|
sudo cp repo/error_pages/* /usr/share/nginx/html/resources
|
||||||
|
|
|
||||||
13
README.md
13
README.md
|
|
@ -1,11 +1,6 @@
|
||||||
# welcome to my ~~video game channel~~ website
|
# welcome to my ~~video game channel~~ website
|
||||||
the part that's public, anyway
|
the part that's public, anyway --- which is essentially all of it
|
||||||
|
|
||||||
There's no backend component to my public website, so it's pretty much "open source" anyway—
|
Everything is pretty messy since I don't have a good handle
|
||||||
you're downloading it if you open the page.
|
on what I want to host at any one time besides just my
|
||||||
I wanted to use git to track it anyway, and GitHub is a pretty easy way to move files around.
|
landing page.
|
||||||
(*just to be super clear—compromising my GitHub would not also imply compromising
|
|
||||||
my website*)
|
|
||||||
I mean, people who use GitHub pages for a personal website are essentially doing what I'm doing but
|
|
||||||
with fewer steps
|
|
||||||
(except I'm cooler because I have to manage nginx).
|
|
||||||
|
|
|
||||||
|
|
@ -1 +1 @@
|
||||||
Subproject commit b33d57d56576d0d78abf92c966ca65affcffe79f
|
Subproject commit 9dc35c1017df047a6b244ac8a431e0694fd54547
|
||||||
|
|
@ -6,11 +6,11 @@
|
||||||
<meta name="viewport" content="width=device-width,initial-scale=1">
|
<meta name="viewport" content="width=device-width,initial-scale=1">
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<div class="overlay">
|
<div id="overlay">
|
||||||
</div>
|
</div>
|
||||||
<div class="outerdiv contentholder">
|
<main class="grid-center--offset-wide">
|
||||||
<div class="contentholder__topfiller"></div>
|
<div>
|
||||||
<div class="content">
|
<div>
|
||||||
<h1>
|
<h1>
|
||||||
About
|
About
|
||||||
</h1>
|
</h1>
|
||||||
|
|
@ -23,7 +23,7 @@ Anyway, here's some information about myself, posted on the aforementioned <mark
|
||||||
I'm studying mathematics (with a focus on computation) at Penn State, and will hopefully be graduating in 2023.
|
I'm studying mathematics (with a focus on computation) at Penn State, and will hopefully be graduating in 2023.
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
<div class="content">
|
<div>
|
||||||
<h1>Opinions</h1>
|
<h1>Opinions</h1>
|
||||||
<h2>A 100% exhaustive list, of course</h2>
|
<h2>A 100% exhaustive list, of course</h2>
|
||||||
<li>
|
<li>
|
||||||
|
|
@ -45,5 +45,9 @@ linux distros don't matter
|
||||||
<li>🦐</li>
|
<li>🦐</li>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
<footer>
|
||||||
|
<p><a href="../">Return</a></p>
|
||||||
|
</footer>
|
||||||
|
</main>
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|
|
||||||
|
|
@ -6,11 +6,10 @@
|
||||||
<meta name="viewport" content="width=device-width,initial-scale=1">
|
<meta name="viewport" content="width=device-width,initial-scale=1">
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<div class="overlay">
|
<div id="overlay">
|
||||||
</div>
|
</div>
|
||||||
<div class="outerdiv contentholder">
|
<main class="grid-center--offset-wide">
|
||||||
<div class="contentholder__topfiller"></div>
|
<div>
|
||||||
<div class="content">
|
|
||||||
<h1>
|
<h1>
|
||||||
Cool Stuff
|
Cool Stuff
|
||||||
</h1>
|
</h1>
|
||||||
|
|
@ -29,9 +28,12 @@ If a page uses/requires JavaScript, its link will be marked with (☕).
|
||||||
Static
|
Static
|
||||||
</h3>
|
</h3>
|
||||||
<ul>
|
<ul>
|
||||||
<li><a href="recipes">Recipes</li>
|
<li><a href="recipes">Recipes</a></li>
|
||||||
</ul>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
<footer>
|
||||||
|
<p><a href="../">Return</a></p>
|
||||||
|
</footer>
|
||||||
|
</main>
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|
|
||||||
|
|
@ -18,33 +18,34 @@
|
||||||
<meta property="twitter:card" content="summary_large_image" />
|
<meta property="twitter:card" content="summary_large_image" />
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<div class="overlay">
|
<div id="overlay">
|
||||||
</div>
|
</div>
|
||||||
<div class="outerdiv">
|
<main class="grid-center--offset">
|
||||||
<div class="name">
|
<div>
|
||||||
<h1 class="name__header">Emilia</h1>
|
<div>
|
||||||
<!--<p class="name__subcontent">she/her</p>-->
|
<h1>Emilia</h1>
|
||||||
<p class="name__subcontent">mathematics enjoyer</p>
|
<p>mathematics enjoyer</p>
|
||||||
<p class="name__subcontent" 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">
|
<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></p>
|
</a></p>
|
||||||
<p class="name__subcontent generated">bottom text</p>
|
<p>bottom text</p>
|
||||||
</div>
|
</div>
|
||||||
<div class="links">
|
</div>
|
||||||
<a class="links__sub" title="about" href="about">
|
<footer class="links">
|
||||||
|
<a title="about" href="about">
|
||||||
📄
|
📄
|
||||||
</a>
|
</a>
|
||||||
<a class="links__sub" id="moonlink" title="cool stuff" href="cool-stuff">
|
<a id="moonlink" title="cool stuff" href="cool-stuff">
|
||||||
🌜
|
🌜
|
||||||
</a>
|
</a>
|
||||||
<a class="links__sub" title="git provider" href="https://github.com/em-ilia">
|
<a title="git provider" href="https://github.com/em-ilia">
|
||||||
💻
|
💻
|
||||||
</a>
|
</a>
|
||||||
<a class="links__sub" title="i love email" href="mailto:em@ilia.moe">
|
<a title="i love email" href="mailto:em@ilia.moe">
|
||||||
📠
|
📠
|
||||||
</a>
|
</a>
|
||||||
</div>
|
</footer>
|
||||||
</div>
|
</main>
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|
|
||||||
|
|
@ -1,2 +0,0 @@
|
||||||
@import 'global'
|
|
||||||
@import 'anim'
|
|
||||||
|
|
@ -1,26 +0,0 @@
|
||||||
// GRADIENTS (you might need them!)
|
|
||||||
$rainbow-gradient: repeating-linear-gradient(to left, red, violet, indigo, blue, green, yellow, orange, red, violet)
|
|
||||||
|
|
||||||
// ANIMATIONS (love to see them)
|
|
||||||
@keyframes gradient-bg
|
|
||||||
from
|
|
||||||
background-position: 0%
|
|
||||||
to
|
|
||||||
background-position: 100%
|
|
||||||
|
|
||||||
@mixin rainbow-text()
|
|
||||||
animation: gradient-bg 4s linear infinite
|
|
||||||
|
|
||||||
// MARKS
|
|
||||||
mark.rainbow
|
|
||||||
background-image: $rainbow-gradient
|
|
||||||
background-size: 1000% 1000%
|
|
||||||
color: transparent
|
|
||||||
-webkit-background-clip: text
|
|
||||||
-webkit-text-fill-color: transparent
|
|
||||||
@include rainbow-text()
|
|
||||||
|
|
||||||
// ALIASES
|
|
||||||
mark.internet
|
|
||||||
@extend .rainbow
|
|
||||||
font-weight: bold
|
|
||||||
|
|
@ -1,138 +0,0 @@
|
||||||
@import 'responsive'
|
|
||||||
@import 'anim'
|
|
||||||
|
|
||||||
$primary-color: #f4b7c3
|
|
||||||
$secondary-color: #f4e8b7
|
|
||||||
$tertiary-color: #b7c3f4
|
|
||||||
$outer-bg: #091519
|
|
||||||
//$outer-bg: #f2e1ba // nice sand color, light theme maybe?
|
|
||||||
$inner-bg: #112932
|
|
||||||
|
|
||||||
@mixin div-center()
|
|
||||||
display: flex
|
|
||||||
justify-content: center
|
|
||||||
align-items: center
|
|
||||||
flex-direction: column
|
|
||||||
align-content: center
|
|
||||||
|
|
||||||
*
|
|
||||||
border-color: $tertiary-color
|
|
||||||
|
|
||||||
body
|
|
||||||
@include div-center()
|
|
||||||
width: 100%
|
|
||||||
height: 100%
|
|
||||||
padding: 0 0 0 0
|
|
||||||
margin: 0 0 0 0
|
|
||||||
overflow: hidden
|
|
||||||
background-color: black
|
|
||||||
|
|
||||||
--is-mobile: 0
|
|
||||||
@include mobile()
|
|
||||||
--is-mobile: 1
|
|
||||||
|
|
||||||
.overlay
|
|
||||||
width: 100%
|
|
||||||
height: 100vh
|
|
||||||
|
|
||||||
position: fixed
|
|
||||||
|
|
||||||
opacity: 0.03
|
|
||||||
z-index: 1
|
|
||||||
background-image: url('../img/noise.gif')
|
|
||||||
background-size: 25%
|
|
||||||
|
|
||||||
@include mobile()
|
|
||||||
background-size: 200%
|
|
||||||
|
|
||||||
.outerdiv
|
|
||||||
@include div-center()
|
|
||||||
width: 90%
|
|
||||||
height: 100vh
|
|
||||||
background-color: $outer-bg
|
|
||||||
flex-direction: column
|
|
||||||
|
|
||||||
@include mobile()
|
|
||||||
width: 100%
|
|
||||||
|
|
||||||
.contentholder
|
|
||||||
justify-content: flex-start
|
|
||||||
overflow: scroll
|
|
||||||
div
|
|
||||||
width: 30rem
|
|
||||||
margin: 1% 0
|
|
||||||
|
|
||||||
@include mobile
|
|
||||||
width: 20rem
|
|
||||||
|
|
||||||
.contentholder__topfiller
|
|
||||||
height: 5%
|
|
||||||
background-color: transparent
|
|
||||||
|
|
||||||
.content
|
|
||||||
z-index: 100
|
|
||||||
|
|
||||||
.returnLink *
|
|
||||||
margin: 3% 0
|
|
||||||
font-size: large
|
|
||||||
|
|
||||||
|
|
||||||
h1
|
|
||||||
color: $primary-color
|
|
||||||
font-family: serif
|
|
||||||
font-size: xxx-large
|
|
||||||
margin: 5px 5px
|
|
||||||
text-align: center
|
|
||||||
|
|
||||||
h2
|
|
||||||
color: $secondary-color
|
|
||||||
font-family: serif
|
|
||||||
font-size: large
|
|
||||||
text-align: center
|
|
||||||
|
|
||||||
h3
|
|
||||||
color: $secondary-color
|
|
||||||
font-size: large
|
|
||||||
|
|
||||||
p
|
|
||||||
color: $secondary-color
|
|
||||||
font-family: sans-serif
|
|
||||||
font-size: large
|
|
||||||
text-align: left
|
|
||||||
margin: 5px 0px
|
|
||||||
|
|
||||||
ol
|
|
||||||
margin: 0px 0px
|
|
||||||
list-style-type: decimal
|
|
||||||
|
|
||||||
ul
|
|
||||||
list-style-type: none
|
|
||||||
li
|
|
||||||
&:before
|
|
||||||
content: "- "
|
|
||||||
|
|
||||||
li
|
|
||||||
@extend p
|
|
||||||
|
|
||||||
a
|
|
||||||
text-decoration: none
|
|
||||||
&:link
|
|
||||||
color: $secondary-color
|
|
||||||
&:visited
|
|
||||||
color: $secondary-color
|
|
||||||
|
|
||||||
header
|
|
||||||
margin: 1% 0 1% 0
|
|
||||||
|
|
||||||
border-style: solid
|
|
||||||
border-width: 0px 0px 2px 0px
|
|
||||||
|
|
||||||
h2
|
|
||||||
margin: 0
|
|
||||||
margin-top: -8px
|
|
||||||
|
|
||||||
article
|
|
||||||
margin: 3% 0
|
|
||||||
|
|
||||||
border-style: solid
|
|
||||||
border-width: 0px 0px 2px 0px
|
|
||||||
|
|
@ -1,51 +0,0 @@
|
||||||
@import 'global'
|
|
||||||
@import 'anim'
|
|
||||||
|
|
||||||
.name
|
|
||||||
margin-top: -10vh
|
|
||||||
|
|
||||||
z-index: 100
|
|
||||||
|
|
||||||
.name__subcontent
|
|
||||||
text-align: left
|
|
||||||
|
|
||||||
@include mobile
|
|
||||||
text-align: center
|
|
||||||
|
|
||||||
a
|
|
||||||
font-size: small
|
|
||||||
display: none
|
|
||||||
position: absolute
|
|
||||||
margin-left: 5px
|
|
||||||
margin-top: 5px
|
|
||||||
|
|
||||||
@include mobile
|
|
||||||
position: relative
|
|
||||||
|
|
||||||
|
|
||||||
.links
|
|
||||||
//background-color: rgba(255,0,0,.2)
|
|
||||||
width: 40%
|
|
||||||
height: 10%
|
|
||||||
position: absolute
|
|
||||||
bottom: 0
|
|
||||||
|
|
||||||
z-index: 99
|
|
||||||
display: flex
|
|
||||||
justify-content: center
|
|
||||||
align-items: center
|
|
||||||
|
|
||||||
@include mobile
|
|
||||||
width: 80%
|
|
||||||
|
|
||||||
.links__sub
|
|
||||||
height: 6vh
|
|
||||||
width: 15%
|
|
||||||
margin: 3%
|
|
||||||
|
|
||||||
display: table-cell
|
|
||||||
text-align: center
|
|
||||||
vertical-align: middle
|
|
||||||
|
|
||||||
font-size: 6vh
|
|
||||||
text-decoration: none
|
|
||||||
|
|
@ -1,6 +0,0 @@
|
||||||
// ok yikes I'll do my best
|
|
||||||
|
|
||||||
// Disable actual check for desktop testing
|
|
||||||
@mixin mobile()
|
|
||||||
@media (pointer: coarse)
|
|
||||||
@content
|
|
||||||
|
|
@ -0,0 +1 @@
|
||||||
|
@import "ilia1";
|
||||||
|
|
@ -0,0 +1,243 @@
|
||||||
|
/* ---------------- */
|
||||||
|
/* ILIA1 STYLE FILE */
|
||||||
|
/* ---------------- */
|
||||||
|
/*
|
||||||
|
* Formalizing the
|
||||||
|
* until now very
|
||||||
|
* disorganized look
|
||||||
|
* and feel of ILIA
|
||||||
|
*/
|
||||||
|
|
||||||
|
@use "sass:color";
|
||||||
|
@import "reset";
|
||||||
|
|
||||||
|
$color-white: hsl(48, 73%, 84%);
|
||||||
|
$color-light: hsl(348, 73%, 84%);
|
||||||
|
$color-dark: hsl(195, 47%, 7%);
|
||||||
|
|
||||||
|
/* --------------- */
|
||||||
|
/* Utility Classes */
|
||||||
|
/* --------------- */
|
||||||
|
|
||||||
|
.flex {
|
||||||
|
display: flex;
|
||||||
|
gap: 2rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.column {
|
||||||
|
@extend .flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
flex-direction: column;
|
||||||
|
align-content: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.row {
|
||||||
|
@extend .flex;
|
||||||
|
flex-direction: row;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
justify-content: space-evenly;
|
||||||
|
align-content: baseline;
|
||||||
|
max-width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.container {
|
||||||
|
padding-inline: clamp(0.5rem, 4rem, 5rem);
|
||||||
|
margin-inline: auto;
|
||||||
|
max-width: 80rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
@mixin grid-center($top-offset:1, $bottom-offset:1, $left-offset:1, $right-offset:1) {
|
||||||
|
display: grid;
|
||||||
|
grid-template-rows: $top-offset*1fr 1fr $bottom-offset*1fr;
|
||||||
|
grid-template-columns: $left-offset*1fr 1fr $right-offset*1fr;
|
||||||
|
grid-template-areas:
|
||||||
|
". . ."
|
||||||
|
". main ."
|
||||||
|
". . .";
|
||||||
|
|
||||||
|
div {
|
||||||
|
place-self: center;
|
||||||
|
grid-area: main;
|
||||||
|
}
|
||||||
|
footer {
|
||||||
|
@extend .row;
|
||||||
|
flex-wrap: nowrap;
|
||||||
|
|
||||||
|
margin-bottom: 2vh;
|
||||||
|
position: static;
|
||||||
|
grid-row: 3 / span 1;
|
||||||
|
grid-column: 2 / span 1;
|
||||||
|
place-self: end center;
|
||||||
|
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.grid-center {
|
||||||
|
@include grid-center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.grid-center--offset {
|
||||||
|
@include grid-center($top-offset: 0.7);
|
||||||
|
}
|
||||||
|
|
||||||
|
.grid-center--offset-wide {
|
||||||
|
@include grid-center($top-offset: 0.7, $left-offset: 0.5, $right-offset: 0.5);
|
||||||
|
}
|
||||||
|
|
||||||
|
.fixed {
|
||||||
|
position: fixed;
|
||||||
|
}
|
||||||
|
|
||||||
|
.scroll {
|
||||||
|
position: scroll;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ---------- */
|
||||||
|
/* Tag Styles */
|
||||||
|
/* ---------- */
|
||||||
|
|
||||||
|
body {
|
||||||
|
overflow: hidden;
|
||||||
|
background-color: black;
|
||||||
|
|
||||||
|
@extend .column;
|
||||||
|
}
|
||||||
|
|
||||||
|
main {
|
||||||
|
width: 90%;
|
||||||
|
height: 100vh;
|
||||||
|
|
||||||
|
background-color: $color-dark;
|
||||||
|
|
||||||
|
* {
|
||||||
|
z-index: 100;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Text */
|
||||||
|
|
||||||
|
h1 {
|
||||||
|
margin: 5px 5px;
|
||||||
|
|
||||||
|
font-family: serif;
|
||||||
|
font-size: $fs-700;
|
||||||
|
text-align: center;
|
||||||
|
|
||||||
|
color: $color-light;
|
||||||
|
}
|
||||||
|
|
||||||
|
h2 {
|
||||||
|
font-family: serif;
|
||||||
|
font-size: $fs-600;
|
||||||
|
text-align: center;
|
||||||
|
|
||||||
|
color: $color-white;
|
||||||
|
}
|
||||||
|
|
||||||
|
h3 {
|
||||||
|
font-family: sans-serif;
|
||||||
|
font-size: $fs-500;
|
||||||
|
|
||||||
|
color: $color-white;
|
||||||
|
}
|
||||||
|
|
||||||
|
p {
|
||||||
|
margin: 5px 0px;
|
||||||
|
|
||||||
|
font-family: sans-serif;
|
||||||
|
font-size: $fs-300;
|
||||||
|
text-align: left;
|
||||||
|
|
||||||
|
color: $color-white;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Lists, Modifiers */
|
||||||
|
|
||||||
|
ol {
|
||||||
|
margin: 0;
|
||||||
|
list-style-type: decimal;
|
||||||
|
}
|
||||||
|
|
||||||
|
ul {
|
||||||
|
list-style-type: none;
|
||||||
|
li {
|
||||||
|
&:before {
|
||||||
|
content: "- ";
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
li {
|
||||||
|
@extend p
|
||||||
|
}
|
||||||
|
|
||||||
|
a {
|
||||||
|
position: relative;
|
||||||
|
z-index: 999;
|
||||||
|
|
||||||
|
text-decoration: none;
|
||||||
|
|
||||||
|
&:link {
|
||||||
|
color: $color-white;
|
||||||
|
}
|
||||||
|
&:visited {
|
||||||
|
color: color.adjust($color-white, $lightness: -20%);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Semantic */
|
||||||
|
|
||||||
|
footer {
|
||||||
|
position: fixed;
|
||||||
|
bottom: 0px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ------------- */
|
||||||
|
/* ILIA Specific */
|
||||||
|
/* ------------- */
|
||||||
|
|
||||||
|
#overlay {
|
||||||
|
width: 100%;
|
||||||
|
height: 100vh;
|
||||||
|
position: fixed;
|
||||||
|
|
||||||
|
opacity: 0.03;
|
||||||
|
z-index: 1;
|
||||||
|
background-image: url('../img/noise.gif');
|
||||||
|
background-size: 25%;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Animations */
|
||||||
|
// GRADIENTS (you might need them!)
|
||||||
|
$rainbow-gradient: repeating-linear-gradient(to left, red, violet, indigo, blue, green, yellow, orange, red, violet);
|
||||||
|
|
||||||
|
// ANIMATIONS (love to see them)
|
||||||
|
@keyframes gradient-bg {
|
||||||
|
from {
|
||||||
|
background-position: 0%;
|
||||||
|
}
|
||||||
|
to {
|
||||||
|
background-position: 100%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@mixin rainbow-text() {
|
||||||
|
animation: gradient-bg 4s linear infinite;
|
||||||
|
}
|
||||||
|
|
||||||
|
// MARKS
|
||||||
|
mark.rainbow {
|
||||||
|
background-image: $rainbow-gradient;
|
||||||
|
background-size: 1000% 1000%;
|
||||||
|
color: transparent;
|
||||||
|
-webkit-background-clip: text;
|
||||||
|
-webkit-text-fill-color: transparent;
|
||||||
|
@include rainbow-text();
|
||||||
|
}
|
||||||
|
|
||||||
|
// ALIASES
|
||||||
|
mark.internet {
|
||||||
|
@extend .rainbow;
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,13 @@
|
||||||
|
@import "ilia1";
|
||||||
|
|
||||||
|
footer {
|
||||||
|
a {
|
||||||
|
display: table-cell;
|
||||||
|
height: 6vh;
|
||||||
|
width: 15%;
|
||||||
|
margin: 3%;
|
||||||
|
|
||||||
|
font-size: 6vh;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,59 @@
|
||||||
|
/* Font Sizes */
|
||||||
|
|
||||||
|
$fs-900: calc(125rem / 16);
|
||||||
|
$fs-800: calc(75rem / 16);
|
||||||
|
$fs-700: calc(56rem / 16);
|
||||||
|
$fs-600: calc(32rem / 16);
|
||||||
|
$fs-500: calc(28rem / 16);
|
||||||
|
$fs-400: calc(24rem / 16);
|
||||||
|
$fs-300: calc(18rem / 16);
|
||||||
|
$fs-200: calc(16rem / 16);
|
||||||
|
|
||||||
|
*,
|
||||||
|
*::before,
|
||||||
|
*::after {
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
|
||||||
|
body, h1, h2, h3, h4, h5, h6, p {
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
h1, h2, h3 {
|
||||||
|
line-height: 1.1;
|
||||||
|
}
|
||||||
|
|
||||||
|
body {
|
||||||
|
font-family: sans-serif;
|
||||||
|
font-size: $fs-400;
|
||||||
|
color: hsl(0, 0%, 0%);
|
||||||
|
background-color: hsl(0, 0%, 100%);
|
||||||
|
line-height: 1.5;
|
||||||
|
min-height: 100vh;
|
||||||
|
}
|
||||||
|
|
||||||
|
img, picture {
|
||||||
|
max-width: 100%;
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
|
||||||
|
input, button, textarea, select {
|
||||||
|
font: inherit;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (prefers-reduced-motion: reduce) {
|
||||||
|
*,
|
||||||
|
*::before,
|
||||||
|
*::after {
|
||||||
|
animation-duration: 0.01ms !important;
|
||||||
|
animation-iteration-count: 1 !important;
|
||||||
|
transition-duration: 0.01ms !important;
|
||||||
|
scroll-behaviour: auto !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@mixin mobile() {
|
||||||
|
@media (pointer: coarse) {
|
||||||
|
@content;
|
||||||
|
}
|
||||||
|
}
|
||||||
Loading…
Reference in New Issue