erin
/
website
1
1
Fork 0
Code Issues Pull Requests Releases Activity

Galaxy/retro theme

This commit is contained in:
~erin 2022-05-10 08:29:51 -04:00
parent 8a47327a14
commit d73f80da6d
No known key found for this signature in database
GPG Key ID: DA70E064A8C70F44
9 changed files with 95 additions and 166 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
_layouts/blog.liquid
View File

@ -6,9 +6,9 @@
<body> <body>
{% include "navigation.liquid" %} {% include "navigation.liquid" %}
<div class="section"> <div class="center">
<div class="inner-section"> <div class="content">
<main> <main>
{{ page.content }} {{ page.content }}
{% for post in collections.posts.pages %} {% for post in collections.posts.pages %}
<article> <article>
@ -25,9 +25,9 @@
</i></p> </i></p>
</article> </article>
{% endfor %} {% endfor %}
</main> </main>
</div>
</div> </div>
</div>
{% include "footer.liquid" %} {% include "footer.liquid" %}
</body> </body>
</html> </html>

14
_layouts/default.liquid
View File

@ -6,13 +6,13 @@
<body> <body>
{% include "navigation.liquid" %} {% include "navigation.liquid" %}
<div class="section"> <div class="center">
<div class="inner-section"> <div class="content">
<main> <main>
{{ page.content }} {{ page.content }}
</main> </main>
</div> </div>
</div> </div>
{% include "footer.liquid" %} {% include "footer.liquid" %}
</body> </body>
</html> </html>

40
_scss/_base.scss
View File

@ -1,34 +1,24 @@
html { html {
image-rendering: pixelated; image-rendering: pixelated;
image-rendering: crisp-edges; font-size: 1.1em;
font-size: 16px; font-family: 'Atkinson Hyperlegible', sans-serif;
color: $foreground-color; color: $foreground-color;
background: $background-color;
line-height: 1.50; line-height: 1.50;
background: $background-color; background-image: url("assets/stars4.gif");
background-repeat: repeat;
} }
/* Smooth scrolling IF user doesn't have a preference due to motion sensitivities */ .center {
@media screen and (prefers-reduced-motion: no-preference) { background-color: $background-color;
html { width: 50%;
scroll-behavior: smooth; text-align: center;
} margin: auto;
border: 5px solid #96CDFB;
} }
.section { .content {
border-radius: 35px; margin: 5%;
background: $background-color; padding: 10px;
box-shadow: 5px 5px 17px scale-color($background-color, $lightness: -35%), text-align: left;
-5px -5px 17px scale-color($background-color, $lightness: +5%);
max-width: 20cm;
margin: 0 auto;
} }
.inner-section {
border-radius: 35px;
background: $background-color;
max-width: 18cm;
margin: 0 auto;
margin-top: 5mm;
padding: 2mm 3mm;
}

11
_scss/_footer.scss
View File

@ -1,17 +1,22 @@
footer { footer {
margin: auto;
margin-top: 5%;
margin-bottom: 5%;
width: 20%;
border: 5px solid #ABE9B3;
ul { ul {
list-style: none; list-style: none;
margin: auto; margin: auto;
padding: 5px; padding: 10px;
display: grid; display: grid;
li { li {
h3 { h3 {
margin-top: auto; margin-top: auto;
} }
font-size: 18px;
text-align: center; text-align: center;
} }
} }
} }

160
_scss/_formatting.scss
View File

@ -1,105 +1,44 @@
// Buttons h1 {
.button { border-bottom: 5px solid #F28FAD;
margin-right: 10px; }
margin-bottom: 25px;
@media only screen and (max-width: 600px) {
margin: auto;
}
padding: 10px;
padding-left: 15px;
padding-right: 15px;
border-radius: 32px;
text-decoration: none;
text-align: center;
cursor: pointer;
transition: all 0.1s ease-in-out;
border-radius: 10px;
background: $background-color;
box-shadow: 5px 5px 10px scale-color($background-color, $lightness: -35%),
-5px -5px 10px scale-color($background-color, $lightness: +5%);
&:hover { h2 {
background: linear-gradient(145deg, margin-top: 1cm;
scale-color($background-color, $lightness: -35%), margin-bottom: 0;
scale-color($background-color, $lightness: +5%)); border-bottom: 3px solid #F8BD96;
}
box-shadow: 5px 5px 10px scale-color($background-color, $lightness: -35%), h3 {
-5px -5px 10px scale-color($background-color, $lightness: +5%); margin-top: 1cm;
} margin-bottom: 0;
&:active {
background: linear-gradient(145deg,
scale-color($background-color, $lightness: -35%),
scale-color($background-color, $lightness: +5%));
box-shadow: 5px 5px 10px scale-color($background-color, $lightness: -35%),
-5px -5px 10px scale-color($background-color, $lightness: +5%);
}
} }
a { a {
color: $accent-color; color: $accent-color;
} }
a:visited {
color: $light-color;
}
ul, ol {
color: #C3BAC6;
}
blockquote {
margin-left: 5mm;
padding-left: 2mm;
color: scale-color($foreground-color, $lightness: -10%);
}
blockquote {
border-left: 4px solid #F28FAD;
}
blockquote blockquote {
border-left: 4px solid #F8BD96;
}
blockquote blockquote blockquote {
border-left: 4px solid #FAE3B0;
}
blockquote blockquote blockquote blockquote {
border-left: 4px solid #ABE9B3;
}
blockquote blockquote blockquote blockquote blockquote {
border-left: 4px solid #B5E8E0;
}
blockquote blockquote blockquote blockquote blockquote blockquote {
border-left: 4px solid #96CDFB;
}
blockquote blockquote blockquote blockquote blockquote blockquote blockquote {
border-left: 4px solid #DDB6F2;
}
code, pre { code, pre {
font-family: "Fira Code", monospace; font-family: "Fira Code", monospace;
overflow: auto; overflow: auto;
border-radius: 10px; border-radius: 5px;
padding: 10px; padding: 5px;
border-bottom: 2px solid #FAE3B0;
background: $background-color !important; }
box-shadow: inset 5px 5px 10px scale-color($background-color, $lightness: -35%),
inset -5px -5px 10px scale-color($background-color, $lightness: +5%); .date {
@media only screen and (min-width: 600px) { font-size: 0.8em;
display: inline-block; }
max-width: 18cm;
@media only screen and (min-width: 600px) {
code, pre {
display: inline-block;
max-width: 18cm;
} }
} }
code { code {
display: inline; display: inline;
font-size: 14px;
} }
p code { p code {
@ -107,40 +46,37 @@ p code {
padding: 5px; padding: 5px;
} }
@media only screen and (max-width: 600px) { blockquote {
code { margin-left: 5mm;
display: inline-block; padding-left: 2mm;
max-width: 95%; color: #bac6e0; }
}
}
blockquote {
border-left: 4px solid #F28FAD; }
h1 { blockquote blockquote {
font-size: 30px; border-left: 4px solid #F8BD96; }
font-weight: normal;
border-bottom: 4px solid #F28FAD;
}
h2 { blockquote blockquote blockquote {
font-size: 25px; border-left: 4px solid #FAE3B0; }
font-weight: normal;
margin-top: 1cm;
margin-bottom: 0;
border-bottom: 2px solid #F8BD96;
}
h3 { blockquote blockquote blockquote blockquote {
font-size: 22px; border-left: 4px solid #ABE9B3; }
font-weight: normal;
margin-top: 1cm; blockquote blockquote blockquote blockquote blockquote {
margin-bottom: 0; border-left: 4px solid #B5E8E0; }
blockquote blockquote blockquote blockquote blockquote blockquote {
border-left: 4px solid #96CDFB; }
blockquote blockquote blockquote blockquote blockquote blockquote blockquote {
border-left: 4px solid #DDB6F2; }
ul, ol {
color: #C3BAC6;
} }
::selection { ::selection {
color: $background-color; color: $background-color;
background: $foreground-color; background: $foreground-color;
} }
.tags {
font-size: 14px;
}

8
_scss/_image.scss
View File

@ -1,8 +0,0 @@
img {
border-radius: 10px;
display: block;
margin-left: auto;
margin-right: auto;
box-shadow: 8px 8px 23px #060606,
-8px -8px 23px #16161a;
}

15
_scss/_navigation.scss
View File

@ -1,20 +1,26 @@
@media only screen and (min-width: 600px) { @media only screen and (min-width: 600px) {
nav { nav {
max-width: 20cm; max-width: 50%;
margin: auto; margin: auto;
padding-top: 10px; margin-top: 25px;
font-size: 20px; margin-bottom: 5%;
font-size: 1.3em;
border: 5px solid #DDB6F2;
ul { ul {
list-style: none; list-style: none;
margin: auto; margin: auto;
padding: 0; padding: 5px;
display: grid; display: grid;
grid-auto-flow: column; grid-auto-flow: column;
li { li {
font-weight: bold;
text-align: center; text-align: center;
padding: 0; padding: 0;
a {
text-decoration: none;
}
} }
} }
} }
@ -44,3 +50,4 @@ nav {
} }
} }
} }

BIN
assets/stars4.gif Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 18 KiB

3
style.scss
View File

@ -1,6 +1,5 @@
$background-color: #161320; $background-color: #161320;
$foreground-color: #D9E0EE; $foreground-color: #D9E0EE;
$light-color: #F5C2E7;
$accent-color: #F2CDCD; $accent-color: #F2CDCD;
@import '_scss/base', '_scss/formatting', '_scss/navigation', '_scss/footer', '_scss/image'; @import '_scss/base', '_scss/formatting', '_scss/footer', '_scss/navigation';