Ash Entwisle
parent
2302b0c1f8
commit
23c1f6ebff
|
|
@ -0,0 +1,82 @@
|
|||
@import 'colours.scss';
|
||||
|
||||
main {
|
||||
width: $size-main-w;
|
||||
min-height: 70vh;
|
||||
|
||||
background-color: $col-bg-default;
|
||||
|
||||
padding-top: 50px;
|
||||
padding-bottom: 50px;
|
||||
padding-left: 5%;
|
||||
padding-right: 5%;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 1.3em;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: 1.25em;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
h3 {
|
||||
font-size: 1.15em;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
h4 {
|
||||
font-size: 1.1em;
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
h5 {
|
||||
font-size: 1.0em;
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
h6 {
|
||||
font-size: 0.9em;
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
p {
|
||||
font-size: 0.9em;
|
||||
font-weight: 300;
|
||||
}
|
||||
|
||||
a {
|
||||
// font-size: 0.9em;
|
||||
// font-weight: 300;
|
||||
|
||||
color: $col-fg-accent;
|
||||
|
||||
transition: color 0.1s;
|
||||
|
||||
text-decoration: underline;
|
||||
text-decoration-style: wavy;
|
||||
|
||||
transition: text-decoration-style 0.1s;
|
||||
|
||||
// on hover, make line straight in 0.1s
|
||||
&:hover {
|
||||
text-decoration-style: solid;
|
||||
transition: text-decoration-style 0.1s;
|
||||
|
||||
color: $col-light-5;
|
||||
transition: color 0.1s;
|
||||
}
|
||||
|
||||
// on click, remove the underline and change to white
|
||||
&:active {
|
||||
text-decoration: none;
|
||||
color: $col-mono-1;
|
||||
}
|
||||
}
|
||||
|
||||
span {
|
||||
font-size: 0.9em;
|
||||
font-weight: 300;
|
||||
}
|
||||
|
|
@ -0,0 +1,108 @@
|
|||
// Monochrome colours
|
||||
$col-mono-1: hsl(220, 11%, 71%);
|
||||
$col-mono-2: hsl(220, 10%, 62%);
|
||||
$col-mono-3: hsl(220, 8%, 54%);
|
||||
$col-mono-4: hsl(220, 9%, 45%);
|
||||
$col-mono-5: hsl(221, 11%, 38%);
|
||||
$col-mono-6: hsl(219, 12%, 28%);
|
||||
$col-mono-7: hsl(220, 13%, 18%);
|
||||
$col-mono-8: hsl(222, 15%, 13%);
|
||||
|
||||
// Lighter Colours
|
||||
$col-light-1: hsl( 0, 41%, 64%);
|
||||
$col-light-2: hsl( 33, 34%, 63%);
|
||||
$col-light-3: hsl( 52, 38%, 67%);
|
||||
$col-light-4: hsl(120, 20%, 66%);
|
||||
$col-light-5: hsl(204, 49%, 68%);
|
||||
$col-light-6: hsl(222, 67%, 70%);
|
||||
$col-light-7: hsl(238, 43%, 66%);
|
||||
$col-light-8: hsl(270, 42%, 64%);
|
||||
|
||||
// Normal Colours
|
||||
$col-normal-1: hsl( 0, 40%, 43%);
|
||||
$col-normal-2: hsl( 33, 38%, 46%);
|
||||
$col-normal-3: hsl( 52, 50%, 47%);
|
||||
$col-normal-4: hsl(120, 36%, 46%);
|
||||
$col-normal-5: hsl(204, 100%, 45%);
|
||||
$col-normal-6: hsl(221, 34%, 39%);
|
||||
$col-normal-7: hsl(231, 44%, 34%);
|
||||
$col-normal-8: hsl(270, 41%, 34%);
|
||||
|
||||
// Darker Colours
|
||||
$col-dark-1: hsl( 0, 53%, 30%);
|
||||
$col-dark-2: hsl( 33, 56%, 30%);
|
||||
$col-dark-3: hsl( 52, 37%, 33%);
|
||||
$col-dark-4: hsl(120, 37%, 35%);
|
||||
$col-dark-5: hsl(204, 60%, 32%);
|
||||
$col-dark-6: hsl(222, 49%, 31%);
|
||||
$col-dark-7: hsl(230, 36%, 24%);
|
||||
$col-dark-8: hsl(270, 36%, 26%);
|
||||
|
||||
// pre-defined colours for UI, DARK MODE
|
||||
|
||||
// Foreground Colours
|
||||
$col-fg-default: $col-mono-1;
|
||||
$col-fg-muted: $col-mono-2;
|
||||
$col-fg-subtle: $col-mono-2;
|
||||
$col-fg-onemph: $col-mono-1;
|
||||
|
||||
$col-fg-accent: $col-light-4;
|
||||
$col-fg-success: $col-normal-4;
|
||||
$col-fg-attention: $col-normal-2;
|
||||
$col-fg-danger: $col-normal-1;
|
||||
$col-fg-open: $col-normal-4;
|
||||
$col-fg-done: $col-normal-5;
|
||||
$col-fg-closed: $col-normal-1;
|
||||
$col-fg-done: $col-normal-8;
|
||||
|
||||
// Emphasis Colours
|
||||
|
||||
$col-emph-default: $col-mono-2;
|
||||
$col-emph-muted: $col-mono-3;
|
||||
$col-emph-subtle: $col-mono-3;
|
||||
$col-emph-onemph: $col-mono-1;
|
||||
|
||||
$col-emph-accent: $col-normal-4;
|
||||
$col-emph-success: $col-normal-4;
|
||||
$col-emph-attention: $col-normal-2;
|
||||
$col-emph-danger: $col-normal-1;
|
||||
$col-emph-open: $col-normal-4;
|
||||
$col-emph-done: $col-normal-5;
|
||||
$col-emph-closed: $col-normal-1;
|
||||
$col-emph-done: $col-normal-8;
|
||||
|
||||
|
||||
// Background Colours
|
||||
|
||||
$col-bg-default: $col-mono-7;
|
||||
$col-bg-muted: $col-mono-8;
|
||||
$col-bg-subtle: $col-mono-8;
|
||||
$col-bg-onemph: $col-mono-1;
|
||||
|
||||
$col-bg-accent: $col-dark-4;
|
||||
$col-bg-success: $col-dark-4;
|
||||
$col-bg-attention: $col-dark-2;
|
||||
$col-bg-danger: $col-dark-1;
|
||||
$col-bg-open: $col-dark-4;
|
||||
$col-bg-done: $col-dark-5;
|
||||
$col-bg-closed: $col-dark-1;
|
||||
$col-bg-done: $col-dark-8;
|
||||
|
||||
// Border Colours
|
||||
|
||||
$col-border-default: $col-mono-7;
|
||||
$col-border-muted: $col-mono-8;
|
||||
$col-border-subtle: $col-mono-7;
|
||||
$col-border-onemph: $col-mono-1;
|
||||
|
||||
$col-border-accent: $col-normal-4;
|
||||
$col-border-success: $col-normal-4;
|
||||
$col-border-attention: $col-normal-2;
|
||||
$col-border-danger: $col-normal-1;
|
||||
$col-border-open: $col-normal-4;
|
||||
$col-border-done: $col-normal-5;
|
||||
$col-border-closed: $col-normal-1;
|
||||
$col-border-done: $col-normal-8;
|
||||
|
||||
|
||||
|
||||
|
|
@ -0,0 +1,24 @@
|
|||
.centerbox {
|
||||
// center centerbox_content in the middle of the screen
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
|
||||
|
||||
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.centerbox_content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
|
||||
// center centerbox_content in the middle of the screen
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
|
||||
}
|
||||
|
|
@ -0,0 +1,82 @@
|
|||
footer {
|
||||
|
||||
// center divs in the footer
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: center;
|
||||
|
||||
// if overflow, wrap divs
|
||||
flex-wrap: wrap;
|
||||
|
||||
padding-left: 5%;
|
||||
padding-right: 5%;
|
||||
padding-top: 10px;
|
||||
padding-bottom: 10px;
|
||||
|
||||
background-color: $col-bg-muted;
|
||||
|
||||
h2 {
|
||||
text-decoration: underline;
|
||||
|
||||
font-size: 1.1em;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.info {
|
||||
max-width: 375px;
|
||||
}
|
||||
|
||||
.copywright {
|
||||
padding-top: 0;
|
||||
|
||||
span a {
|
||||
font-size: 1em;
|
||||
font-weight: 400;
|
||||
}
|
||||
}
|
||||
|
||||
.misc {
|
||||
padding-top: 0;
|
||||
padding-bottom: 0;
|
||||
}
|
||||
|
||||
div {
|
||||
padding-left: 25px;
|
||||
padding-right: 25px;
|
||||
padding-top: 10px;
|
||||
padding-bottom: 10px;
|
||||
}
|
||||
|
||||
p {
|
||||
width: 85%;
|
||||
}
|
||||
|
||||
.link_list {
|
||||
ul {
|
||||
list-style-type: disc;
|
||||
|
||||
font-size: 0.9em;
|
||||
font-weight: 300;
|
||||
}
|
||||
}
|
||||
|
||||
// if less than 500px, flex to column
|
||||
@media (max-width: 500px) {
|
||||
flex-direction: column;
|
||||
|
||||
.link_list {
|
||||
padding: 10%;
|
||||
|
||||
padding-top: 10px;
|
||||
padding-bottom: 10px;
|
||||
}
|
||||
|
||||
.info {
|
||||
width: auto;
|
||||
|
||||
p {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,105 @@
|
|||
@import '../colours.scss';
|
||||
|
||||
header {
|
||||
height: 60px;
|
||||
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
|
||||
color: $col-mono-1;
|
||||
background-color: $col-bg-muted;
|
||||
|
||||
padding-left: 5px;
|
||||
padding-right: 5px;
|
||||
|
||||
.image {
|
||||
|
||||
img {
|
||||
height: 50px;
|
||||
}
|
||||
}
|
||||
|
||||
.left {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
|
||||
.link {
|
||||
margin: 0 10px;
|
||||
}
|
||||
|
||||
#favicon {
|
||||
display: none;
|
||||
}
|
||||
|
||||
// if less than 550px width, hide the h1
|
||||
@media (max-width: 550px) {
|
||||
#favicon {
|
||||
display: block;
|
||||
}
|
||||
|
||||
#full {
|
||||
display: none;
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.right {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
|
||||
padding-right: 10px;
|
||||
|
||||
.link {
|
||||
margin: 0 15px;
|
||||
}
|
||||
|
||||
.link_button {
|
||||
padding: 7.5px;
|
||||
border-radius: 5px;
|
||||
|
||||
color: $col-mono-1;
|
||||
|
||||
font-size: 1em;
|
||||
font-weight: 500;
|
||||
|
||||
text-decoration: none;
|
||||
|
||||
// center text
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
|
||||
|
||||
&:hover {
|
||||
text-decoration: underline;
|
||||
text-decoration-style: solid;
|
||||
text-decoration-thickness: 1.5px;
|
||||
|
||||
transition: text-decoration 0.1s;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// if less than 400, hide left and center the right
|
||||
@media (max-width: 400px) {
|
||||
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
|
||||
.left {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.right {
|
||||
justify-content: center;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,60 @@
|
|||
markdown {
|
||||
|
||||
max-width: 700px;
|
||||
|
||||
h1 {
|
||||
text-decoration: underline;
|
||||
|
||||
font-size: 1.5em;
|
||||
|
||||
padding-bottom: 5px;
|
||||
}
|
||||
|
||||
h2 {
|
||||
text-decoration: underline;
|
||||
|
||||
padding-top: 15px;
|
||||
padding-bottom: 5px;
|
||||
}
|
||||
|
||||
h3 {
|
||||
text-decoration: underline;
|
||||
|
||||
padding-top: 10px;
|
||||
padding-bottom: 5px;
|
||||
}
|
||||
|
||||
p {
|
||||
font-size: 0.9em;
|
||||
font-weight: 300;
|
||||
|
||||
em {
|
||||
font-style: italic;
|
||||
|
||||
font-size: 0.9em;
|
||||
font-weight: 300;
|
||||
}
|
||||
}
|
||||
|
||||
ul {
|
||||
list-style-type: disc;
|
||||
|
||||
padding-left: 15px;
|
||||
|
||||
li {
|
||||
font-size: 0.9em;
|
||||
font-weight: 300;
|
||||
}
|
||||
}
|
||||
|
||||
ol {
|
||||
list-style-type: decimal;
|
||||
|
||||
padding-left: 30px;
|
||||
|
||||
li {
|
||||
font-size: 0.9em;
|
||||
font-weight: 300;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,46 @@
|
|||
// Tailwind Base
|
||||
@import 'tailwindcss/base';
|
||||
@import 'tailwindcss/components';
|
||||
@import 'tailwindcss/utilities';
|
||||
|
||||
// @import '../static/fonts.css';
|
||||
@import 'colours.scss';
|
||||
@import 'sizes.scss';
|
||||
|
||||
// base styles
|
||||
@import 'base.scss';
|
||||
|
||||
// Component Styles
|
||||
@import 'components/header.scss';
|
||||
@import 'components/footer.scss';
|
||||
@import 'components/centerbox.scss';
|
||||
@import 'components/markdown.scss';
|
||||
|
||||
// Page Styles
|
||||
@import 'pages/index.scss';
|
||||
@import 'pages/404.scss';
|
||||
|
||||
// import fonts from ash's CDN
|
||||
@import url('https://proot.zip/styles/jb-mono.css');
|
||||
@import url('https://proot.zip/styles/fa-icons.css');
|
||||
|
||||
|
||||
// Default Styles
|
||||
:root {
|
||||
// Set font to urbanist, fall back to system fonts, include Font Awesome
|
||||
font-family: 'JetBrains Mono', 'Font Awesome 6 Free', 'Font Awesome 6 Brands';
|
||||
|
||||
font-size: 0.9em;
|
||||
font-weight: 400;
|
||||
|
||||
|
||||
// Foreground Colours
|
||||
color: $col-fg-default;
|
||||
|
||||
// Background Colours
|
||||
background-color: $col-bg-muted;
|
||||
|
||||
// Border Colours
|
||||
border-color: $col-border-default;
|
||||
|
||||
}
|
||||
|
|
@ -0,0 +1,43 @@
|
|||
main {
|
||||
#error_main {
|
||||
height: 400px;
|
||||
|
||||
.centerbox_content {
|
||||
width: 40%;
|
||||
min-width: 450px;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 2em;
|
||||
font-weight: 600;
|
||||
|
||||
width: 100%;
|
||||
max-width: 600px;
|
||||
}
|
||||
|
||||
p {
|
||||
font-size: 1.15em;
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
// if less than 500 px, set centerbox_content width to 100% and remove min-width
|
||||
@media (max-width: 500px) {
|
||||
height: 250px;
|
||||
|
||||
.centerbox_content {
|
||||
width: 85%;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 1.5em;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: 1.5em;
|
||||
font-weight: 500;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,137 @@
|
|||
main {
|
||||
#landing_main {
|
||||
// add 5% padding to l and r
|
||||
padding-left: 10%;
|
||||
padding-right: 10%;
|
||||
|
||||
h2 {
|
||||
text-decoration: underline;
|
||||
padding-bottom: 10px;
|
||||
|
||||
font-size: 1.5em;
|
||||
font-weight: 700;
|
||||
}
|
||||
.about {
|
||||
padding-top: 200px;
|
||||
padding-bottom: 200px;
|
||||
|
||||
padding-left: 5%;
|
||||
padding-right: 5%;
|
||||
|
||||
h1 span {
|
||||
text-decoration: underline;
|
||||
|
||||
font-size: 1.75em;
|
||||
font-weight: 600;
|
||||
|
||||
}
|
||||
|
||||
p {
|
||||
font-size: 1.1em;
|
||||
font-weight: 300;
|
||||
|
||||
padding-top: 10px;
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 1000px) {
|
||||
padding-top: 0px;
|
||||
padding-bottom: 25px;
|
||||
padding-left: 0px;
|
||||
padding-right: 0px;
|
||||
}
|
||||
|
||||
// if less than 550, set h1 to 1.5em
|
||||
@media only screen and (max-width: 550px) {
|
||||
h1 span {
|
||||
font-size: 1.3em;
|
||||
}
|
||||
}
|
||||
}
|
||||
.execs {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
|
||||
.exec {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
|
||||
padding-bottom: 25px;
|
||||
|
||||
h3 {
|
||||
margin: 0px;
|
||||
margin-bottom: 10px;
|
||||
|
||||
i {
|
||||
font-weight: 300;
|
||||
font-size: 0.9em;
|
||||
}
|
||||
}
|
||||
|
||||
p {
|
||||
margin: 0px;
|
||||
}
|
||||
|
||||
|
||||
.exec-pfp {
|
||||
// center image;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
img {
|
||||
|
||||
box-sizing: border-box;
|
||||
|
||||
margin-right: 25px;
|
||||
border-radius: 20px;
|
||||
|
||||
min-height: 175px;
|
||||
min-width: 175px;
|
||||
|
||||
max-width: 175px;
|
||||
max-height: 175px;
|
||||
|
||||
background-color: $col-bg-muted;
|
||||
|
||||
&:hover {
|
||||
transition: 0.2s ease-in-out;
|
||||
transform: scale(1.05);
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
// on not hover, transition back to normal
|
||||
&:not(:hover) {
|
||||
transition: 0.1s ease-in-out;
|
||||
transform: scale(1);
|
||||
border-radius: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
// if less than 800, hide exec-pfp
|
||||
@media only screen and (max-width: 800px) {
|
||||
.exec-pfp {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
a {
|
||||
font-weight: 300;
|
||||
}
|
||||
|
||||
code {
|
||||
padding-top: 1.5px;
|
||||
padding-bottom: 1.5px;
|
||||
padding-left: 3.5px;
|
||||
padding-right: 3.5px;
|
||||
|
||||
border-radius: 5px;
|
||||
|
||||
background-color: $col-bg-muted;
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,12 @@
|
|||
|
||||
|
||||
$size-header-h: 60px;
|
||||
$size-header-w: 100vw;
|
||||
|
||||
$size-footer-h: 60px;
|
||||
$size-footer-w: 100vw;
|
||||
|
||||
$size-main-h: calc(100vh - #{$size-header-h});
|
||||
$size-main-w: 100vw;
|
||||
|
||||
|
||||
Loading…
Reference in New Issue