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 }}
|
||||
script: |
|
||||
cd repo/src
|
||||
sass sass/:css/
|
||||
sass scss/:css/
|
||||
- name: Build hugo
|
||||
uses: appleboy/ssh-action@master
|
||||
with:
|
||||
|
|
@ -42,7 +42,7 @@ jobs:
|
|||
username: ubuntu
|
||||
key: ${{ secrets.SSH_KEY }}
|
||||
script: |
|
||||
sudo su
|
||||
rm -rf /usr/share/nginx/html/ilia.moe
|
||||
cp -r repo/src /usr/share/nginx/html/ilia.moe
|
||||
cp -r repo/hugo/recipe/public /usr/share/nginx/html/ilia.moe/cool-stuff/recipes
|
||||
sudo rm -rf /usr/share/nginx/html/ilia.moe
|
||||
sudo 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
|
||||
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
|
||||
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—
|
||||
you're downloading it if you open the page.
|
||||
I wanted to use git to track it anyway, and GitHub is a pretty easy way to move files around.
|
||||
(*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).
|
||||
Everything is pretty messy since I don't have a good handle
|
||||
on what I want to host at any one time besides just my
|
||||
landing page.
|
||||
|
|
|
|||
|
|
@ -1 +1 @@
|
|||
Subproject commit b33d57d56576d0d78abf92c966ca65affcffe79f
|
||||
Subproject commit 9dc35c1017df047a6b244ac8a431e0694fd54547
|
||||
|
|
@ -6,11 +6,11 @@
|
|||
<meta name="viewport" content="width=device-width,initial-scale=1">
|
||||
</head>
|
||||
<body>
|
||||
<div class="overlay">
|
||||
<div id="overlay">
|
||||
</div>
|
||||
<div class="outerdiv contentholder">
|
||||
<div class="contentholder__topfiller"></div>
|
||||
<div class="content">
|
||||
<main class="grid-center--offset-wide">
|
||||
<div>
|
||||
<div>
|
||||
<h1>
|
||||
About
|
||||
</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.
|
||||
</p>
|
||||
</div>
|
||||
<div class="content">
|
||||
<div>
|
||||
<h1>Opinions</h1>
|
||||
<h2>A 100% exhaustive list, of course</h2>
|
||||
<li>
|
||||
|
|
@ -45,5 +45,9 @@ linux distros don't matter
|
|||
<li>🦐</li>
|
||||
</div>
|
||||
</div>
|
||||
<footer>
|
||||
<p><a href="../">Return</a></p>
|
||||
</footer>
|
||||
</main>
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
|
|
@ -6,11 +6,10 @@
|
|||
<meta name="viewport" content="width=device-width,initial-scale=1">
|
||||
</head>
|
||||
<body>
|
||||
<div class="overlay">
|
||||
<div id="overlay">
|
||||
</div>
|
||||
<div class="outerdiv contentholder">
|
||||
<div class="contentholder__topfiller"></div>
|
||||
<div class="content">
|
||||
<main class="grid-center--offset-wide">
|
||||
<div>
|
||||
<h1>
|
||||
Cool Stuff
|
||||
</h1>
|
||||
|
|
@ -29,9 +28,12 @@ If a page uses/requires JavaScript, its link will be marked with (☕).
|
|||
Static
|
||||
</h3>
|
||||
<ul>
|
||||
<li><a href="recipes">Recipes</li>
|
||||
<li><a href="recipes">Recipes</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<footer>
|
||||
<p><a href="../">Return</a></p>
|
||||
</footer>
|
||||
</main>
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
|
|
@ -18,33 +18,34 @@
|
|||
<meta property="twitter:card" content="summary_large_image" />
|
||||
</head>
|
||||
<body>
|
||||
<div class="overlay">
|
||||
<div id="overlay">
|
||||
</div>
|
||||
<div class="outerdiv">
|
||||
<div class="name">
|
||||
<h1 class="name__header">Emilia</h1>
|
||||
<!--<p class="name__subcontent">she/her</p>-->
|
||||
<p class="name__subcontent">mathematics enjoyer</p>
|
||||
<p class="name__subcontent" id="pgp_p">pgp:
|
||||
<a href="https://keyserver.ubuntu.com/pks/lookup?search=0x8cbc050e7bbb8779eccd42074b33e52e3bd25455&fingerprint=on&op=index" id="pgp_a">
|
||||
<main class="grid-center--offset">
|
||||
<div>
|
||||
<div>
|
||||
<h1>Emilia</h1>
|
||||
<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">
|
||||
8CBC 050E 7BBB 8779 ECCD 4207 4B33 E52E 3BD2 5455
|
||||
</a></p>
|
||||
<p class="name__subcontent generated">bottom text</p>
|
||||
<p>bottom text</p>
|
||||
</div>
|
||||
<div class="links">
|
||||
<a class="links__sub" title="about" href="about">
|
||||
</div>
|
||||
<footer class="links">
|
||||
<a title="about" href="about">
|
||||
📄
|
||||
</a>
|
||||
<a class="links__sub" id="moonlink" title="cool stuff" href="cool-stuff">
|
||||
<a id="moonlink" title="cool stuff" href="cool-stuff">
|
||||
🌜
|
||||
</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 class="links__sub" title="i love email" href="mailto:em@ilia.moe">
|
||||
<a title="i love email" href="mailto:em@ilia.moe">
|
||||
📠
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
</main>
|
||||
</body>
|
||||
</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