Removing uv as package manager. Isues with using it on network volume.
This commit is contained in:
g_it
parent
c183070471
commit
71130424e3
GPG key ID:
A2B0A7C06A054627
347 changed files with 1271 additions and 1851 deletions
54
deploy/assets/css/_colours.css
Executable file
54
deploy/assets/css/_colours.css
Executable file
|
|
@ -0,0 +1,54 @@
|
|||
/*****************************
|
||||
* COLOURS
|
||||
*****************************/
|
||||
|
||||
:root {
|
||||
--background-colour: #FFF;
|
||||
--primary-colour: #323036;
|
||||
--secondary-colour: #EFE5DC;
|
||||
--tertiary-colour: #818589;
|
||||
--quarternary-colour: #FAF9F6;
|
||||
--transparent: transparent;
|
||||
}
|
||||
|
||||
/* Adjust Mkdocs colours */
|
||||
|
||||
:root {
|
||||
--md-primary-fg-color: var(--primary-colour);
|
||||
--md-primary-fg-color--light: var(--tertiary-colour);
|
||||
--md-primary-fg-color--dark: var(--primary-colour);
|
||||
--md-primary-bg-color: var(--background-colour);
|
||||
--md-footer-bg-color: var(--background-colour);
|
||||
--md-default-bg-color: var(--background-colour);
|
||||
}
|
||||
|
||||
[data-md-color-accent=custom] {
|
||||
--md-primary-fg-color: var(--primary-colour);
|
||||
--md-primary-fg-color--light: var(--tertiary-colour);
|
||||
--md-primary-fg-color--dark: var(--primary-colour);
|
||||
--md-accent-fg-color: var(--secondary-colour);
|
||||
}
|
||||
|
||||
/* Font colours */
|
||||
|
||||
.md-typeset {
|
||||
|
||||
p,
|
||||
h1,
|
||||
h2,
|
||||
h3 {
|
||||
color: var(--primary-color);
|
||||
}
|
||||
|
||||
figcaption,
|
||||
a,
|
||||
h4,
|
||||
h5,
|
||||
h6 {
|
||||
color: var(--tertiary-colour);
|
||||
}
|
||||
|
||||
a:hover {
|
||||
color: var(--secondary-color);
|
||||
}
|
||||
}
|
||||
47
deploy/assets/css/_faces.css
Executable file
47
deploy/assets/css/_faces.css
Executable file
|
|
@ -0,0 +1,47 @@
|
|||
/*****************************
|
||||
* FACES
|
||||
*****************************/
|
||||
|
||||
.faces {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
width: 80vw;
|
||||
height: 30vh;
|
||||
}
|
||||
|
||||
.face {
|
||||
width: 100%;
|
||||
height: 33.33vh;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
transition: all 0.5s ease;
|
||||
}
|
||||
|
||||
.face:hover {
|
||||
filter: invert(50%);
|
||||
}
|
||||
|
||||
.face img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: contain;
|
||||
opacity: 0;
|
||||
transform: scale(0.9);
|
||||
transition: all 2s ease-out forwards;
|
||||
}
|
||||
|
||||
.face.active img {
|
||||
animation: fadeIn 2s ease-out forwards;
|
||||
}
|
||||
|
||||
@keyframes fadeIn {
|
||||
0% {
|
||||
opacity: 0;
|
||||
transform: scale(0.9);
|
||||
}
|
||||
|
||||
100% {
|
||||
opacity: 1;
|
||||
transform: scale(1);
|
||||
}
|
||||
}
|
||||
202
deploy/assets/css/_fonts.css
Executable file
202
deploy/assets/css/_fonts.css
Executable file
|
|
@ -0,0 +1,202 @@
|
|||
/*****************************
|
||||
* FONTS
|
||||
*****************************/
|
||||
|
||||
@font-face {
|
||||
font-family: 'Libre Baskerville';
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
src: url('../fonts/libre-baskerville/LibreBaskerville-Regular.woff');
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'Libre Baskerville';
|
||||
font-weight: bold;
|
||||
font-style: normal;
|
||||
src: url('../fonts/libre-baskerville/LibreBaskerville-Bold.woff');
|
||||
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'Libre Baskerville';
|
||||
font-weight: normal;
|
||||
font-style: italic;
|
||||
src: url('../fonts/libre-baskerville/LibreBaskerville-Italic.woff');
|
||||
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'Lato';
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
src: url('../fonts/lato/Lato-Regular.ttf');
|
||||
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'Lato';
|
||||
font-weight: normal;
|
||||
font-style: italic;
|
||||
src: url('../fonts/lato/Lato-Italic.ttf');
|
||||
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'Lato';
|
||||
font-weight: bold;
|
||||
font-style: normal;
|
||||
src: url('../fonts/lato/Lato-Bold.woff2');
|
||||
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'Lato';
|
||||
font-weight: bold;
|
||||
font-style: italic;
|
||||
src: url('../fonts/lato/Lato-BoldItalic.woff2');
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'Lato';
|
||||
font-weight: light;
|
||||
font-style: normal;
|
||||
src: url('../fonts/lato/Lato-Regular.woff2');
|
||||
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'Lato';
|
||||
font-weight: light;
|
||||
font-style: italic;
|
||||
src: url('../fonts/lato/Lato-Italic.woff2');
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'Lato';
|
||||
font-weight: bolder;
|
||||
font-style: normal;
|
||||
src: url('../fonts/lato/Lato-Black.ttf');
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'Lato';
|
||||
font-weight: bolder;
|
||||
font-style: italic;
|
||||
src: url('../fonts/lato/Lato-BlackItalic.ttf');
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'Lato';
|
||||
font-weight: thin;
|
||||
font-style: normal;
|
||||
src: url('../fonts/lato/Lato-Light.ttf');
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'Lato';
|
||||
font-weight: thin;
|
||||
font-style: italic;
|
||||
src: url('../fonts/lato/Lato-ThinItalic.ttf');
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'DM Mono';
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
src: url('../fonts/dm-mono/DMMono-Regular.woff2');
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'DM Mono';
|
||||
font-weight: normal;
|
||||
font-style: italic;
|
||||
src: url('../fonts/dm-mono/DMMono-Italic.woff2');
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'DM Mono';
|
||||
font-weight: medium;
|
||||
font-style: italic;
|
||||
src: url('../fonts/dm-mono/DMMono-MediumItalic.woff2');
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'DM Mono';
|
||||
font-weight: medium;
|
||||
font-style: normal;
|
||||
src: url('../fonts/dm-mono/DMMono-Medium.woff2');
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'DM Mono';
|
||||
font-weight: light;
|
||||
font-style: normal;
|
||||
src: url('../fonts/dm-mono/DMMono-Light.woff2');
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'DM Mono';
|
||||
font-weight: light;
|
||||
font-style: italic;
|
||||
src: url('../fonts/dm-mono/DMMono-LightItalic.woff2');
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'Open Sans';
|
||||
font-weight: medium;
|
||||
font-style: normal;
|
||||
src: url('../fonts/open-sans/OpenSans-Medium.woff2');
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'DM Serif';
|
||||
font-weight: bolder;
|
||||
font-style: italic;
|
||||
src: url('../fonts/open-sans/OpenSans-ExtraBold.woff2');
|
||||
}
|
||||
|
||||
/* Variables */
|
||||
|
||||
:root {
|
||||
--primary-font: 'Libre Baskerville', serif;
|
||||
--secondary-font: 'Lato', sans-serif;
|
||||
--tertiary-font: 'DM Mono', monospace;
|
||||
--number-font: 'Open Sans', sans-serif;
|
||||
}
|
||||
|
||||
/* Typeset */
|
||||
|
||||
.md-typeset {
|
||||
p, li, ul {
|
||||
font-family: var(--primary-font);
|
||||
}
|
||||
|
||||
figcaption {
|
||||
font-family: var(--secondary-font);
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
h1,
|
||||
h2,
|
||||
h3 {
|
||||
font-family: var(--secondary-font);
|
||||
}
|
||||
|
||||
h4,
|
||||
h5,
|
||||
h6 {
|
||||
font-family: var(--secondary-font);
|
||||
}
|
||||
}
|
||||
|
||||
.md-typeset {
|
||||
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
h4,
|
||||
h5,
|
||||
h6 {
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
74
deploy/assets/css/_hero-text.css
Executable file
74
deploy/assets/css/_hero-text.css
Executable file
|
|
@ -0,0 +1,74 @@
|
|||
/*****************************
|
||||
* HERO TEXT
|
||||
*****************************/
|
||||
|
||||
.hero-text {
|
||||
flex: 1;
|
||||
min-width: fit-content;
|
||||
height: 50vh;
|
||||
display: inline-block;
|
||||
flex-direction: row;
|
||||
justify-content: center;
|
||||
padding: 5em;
|
||||
font-family: var(--primary-font);
|
||||
text-align: left;
|
||||
margin: var(--zero);
|
||||
|
||||
h2 {
|
||||
margin-bottom: 0.1em;
|
||||
overflow: hidden;
|
||||
border-right: .15em solid var(--tertiary-colour);
|
||||
white-space: nowrap;
|
||||
letter-spacing: .05em;
|
||||
animation:
|
||||
typing 5s steps(40, end) forwards 2s,
|
||||
blink-caret 0.75s step-end infinite;
|
||||
}
|
||||
|
||||
h4 {
|
||||
font-weight: normal;
|
||||
|
||||
&#hover-text {
|
||||
|
||||
opacity: 0;
|
||||
transition: opacity 0.5s ease-out;
|
||||
|
||||
&.fade-in {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
&.leave {
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.accent-divider {
|
||||
background-color: var(--secondary-colour);
|
||||
width: 100%;
|
||||
height: 10px;
|
||||
margin: 1em 0;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes typing {
|
||||
from {
|
||||
width: 0
|
||||
}
|
||||
|
||||
to {
|
||||
width: 100%
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes blink-caret {
|
||||
|
||||
from,
|
||||
to {
|
||||
border-color: transparent;
|
||||
}
|
||||
|
||||
50% {
|
||||
border-color: var(--tertiary-colour);
|
||||
}
|
||||
}
|
||||
30
deploy/assets/css/_index.css
Executable file
30
deploy/assets/css/_index.css
Executable file
|
|
@ -0,0 +1,30 @@
|
|||
/*****************************
|
||||
* INDEX
|
||||
* Styling for index pages.
|
||||
*****************************/
|
||||
|
||||
.md-content__inner,
|
||||
.md-main__inner,
|
||||
.md-grid,
|
||||
html,
|
||||
body,
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
max-width: none;
|
||||
}
|
||||
|
||||
article,
|
||||
.md-container {
|
||||
min-height: 100%;
|
||||
width: 100%;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
header,
|
||||
nav,
|
||||
.md-content .md-typeset h1 {
|
||||
display: none !important;
|
||||
}
|
||||
77
deploy/assets/css/_loader.css
Executable file
77
deploy/assets/css/_loader.css
Executable file
|
|
@ -0,0 +1,77 @@
|
|||
/*****************************
|
||||
* PAGE LOADER
|
||||
*****************************/
|
||||
|
||||
#loader {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
background-color: var(--secondary-colour);
|
||||
display: flex !important;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
z-index: 9999;
|
||||
transition: opacity 1s ease-out, transform 0.5s ease-out;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
#loader.fade-out {
|
||||
opacity: 0;
|
||||
transform: scale(1.1);
|
||||
}
|
||||
|
||||
#loader img {
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
|
||||
}
|
||||
|
||||
@keyframes spin {
|
||||
from {
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
|
||||
to {
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
|
||||
#loading-text {
|
||||
font-family: var(--secondary-font);
|
||||
font-size: 24px;
|
||||
color: black;
|
||||
animation: pulse 1s ease-in-out infinite;
|
||||
}
|
||||
|
||||
@keyframes pulse {
|
||||
0% {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
50% {
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
100% {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes fadeOut {
|
||||
from {
|
||||
opacity: 1;
|
||||
transform: scale(1);
|
||||
}
|
||||
|
||||
to {
|
||||
opacity: 0;
|
||||
transform: scale(1.1);
|
||||
}
|
||||
}
|
||||
|
||||
.fade-out {
|
||||
animation: fadeOut 1s ease-out forwards;
|
||||
}
|
||||
37
deploy/assets/css/_media-player.css
Executable file
37
deploy/assets/css/_media-player.css
Executable file
|
|
@ -0,0 +1,37 @@
|
|||
/*****************************
|
||||
* MEDIA PLAYER
|
||||
*****************************/
|
||||
|
||||
media-player {
|
||||
margin: 5px 0;
|
||||
|
||||
* {
|
||||
filter: none;
|
||||
}
|
||||
}
|
||||
|
||||
.light .vds-time,
|
||||
.vds-button {
|
||||
--default-color: #818589 !important;
|
||||
color: #818589 !important;
|
||||
}
|
||||
|
||||
.light .vds-audio-layout .vds-play-button,
|
||||
.vds-audio-layout.light .vds-play-button {
|
||||
--default-bg: transparent !important;
|
||||
}
|
||||
|
||||
.media-audio-layout {
|
||||
background-color: transparent !important;
|
||||
}
|
||||
|
||||
.vds-audio-layout.light {
|
||||
--default-bg: transparent !important;
|
||||
}
|
||||
|
||||
.vds-title {
|
||||
font-family: var(--secondary-font);
|
||||
font-size: 0.8em;
|
||||
font-weight: bold;
|
||||
color: #818589;
|
||||
}
|
||||
230
deploy/assets/css/_page-resume.css
Executable file
230
deploy/assets/css/_page-resume.css
Executable file
|
|
@ -0,0 +1,230 @@
|
|||
/*****************************
|
||||
* RESUMÉ
|
||||
*****************************/
|
||||
|
||||
/* Fade in content */
|
||||
.fade-in-up-section {
|
||||
opacity: 0;
|
||||
transform: translateY(20px);
|
||||
transition: opacity 2s ease-in-out, transform 2s ease-in-out;
|
||||
}
|
||||
|
||||
.fade-in-up-section.visible {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
|
||||
.fade-in-up-content {
|
||||
padding: 20px;
|
||||
border-radius: 5px;
|
||||
/* box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); */
|
||||
}
|
||||
|
||||
/* Career meta-information */
|
||||
.meta-icons {
|
||||
font-size: max(calc(var(--text-variable-size) + 3px), var(--text-min-size));
|
||||
font-family: var(--secondary-font);
|
||||
font-weight: 900;
|
||||
color: var(--tertiary-colour);
|
||||
text-align: left;
|
||||
display: flex;
|
||||
justify-content: left;
|
||||
gap: 25px;
|
||||
width: fit-content;
|
||||
margin: 0;
|
||||
|
||||
& .md-typeset .twemoji {
|
||||
height: max(calc(var(--text-variable-size) + 5px), var(--text-min-size));
|
||||
}
|
||||
|
||||
& svg {
|
||||
margin-right: 3px;
|
||||
}
|
||||
|
||||
a:hover {
|
||||
color: var(--secondary-colour);
|
||||
}
|
||||
}
|
||||
|
||||
/* Career timeline */
|
||||
.tabbed-labels {
|
||||
font-family: var(--number-font);
|
||||
font-weight: 900;
|
||||
margin-bottom: 0;
|
||||
|
||||
a:hover {
|
||||
color: var(--secondary-colour);
|
||||
}
|
||||
|
||||
label {
|
||||
font-size: max(calc(var(--text-variable-size) + 9px), calc(var(--text-min-size) + 3px)) !important;
|
||||
}
|
||||
|
||||
>label:nth-child(1) {
|
||||
margin-left: 4vw;
|
||||
}
|
||||
|
||||
>label:nth-child(2) {
|
||||
margin-left: 12vw;
|
||||
}
|
||||
|
||||
>label:nth-child(3) {
|
||||
margin-left: 24vw;
|
||||
}
|
||||
|
||||
>label:nth-child(4) {
|
||||
margin-left: 12vw;
|
||||
}
|
||||
|
||||
>label:nth-child(5) {
|
||||
margin-left: 10vw;
|
||||
}
|
||||
}
|
||||
|
||||
.tabbed-content {
|
||||
background-color: var(--quarternary-colour);
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
div.tabbed-block {
|
||||
padding: 1em 2.5em;
|
||||
}
|
||||
|
||||
/* Timeline content */
|
||||
.logo-and-title {
|
||||
display: inline-block;
|
||||
margin: 0;
|
||||
|
||||
img {
|
||||
height: max(15px, 0.5vh);
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
h6 {
|
||||
display: inline-block;
|
||||
margin-right: 5px;
|
||||
}
|
||||
}
|
||||
|
||||
div.tags {
|
||||
font-family: var(--primary-font);
|
||||
font-size: max(var(--text-variable-size), var(--text-min-size));
|
||||
font-style: italic;
|
||||
color: var(--tertiary-colour);
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.three-column {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
max-width: 1500px;
|
||||
padding: 0;
|
||||
width: 100%;
|
||||
|
||||
.column {
|
||||
justify-self: center;
|
||||
padding: 20px;
|
||||
text-align: left;
|
||||
|
||||
&:nth-child(1) {
|
||||
padding-left: 0;
|
||||
}
|
||||
|
||||
&:nth-child(2) {
|
||||
border-left: 1px solid var(--secondary-colour);
|
||||
border-right: 1px solid var(--secondary-colour);
|
||||
}
|
||||
|
||||
.content {
|
||||
h6 {
|
||||
font-size: max(calc(var(--text-variable-size) + 7px), calc(var(--text-min-size) + 2px));
|
||||
font-family: var(--secondary-font);
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
p.blurb {
|
||||
font-family: var(--primary-font);
|
||||
font-size: max(calc(var(--text-variable-size) + 5px), var(--text-min-size));
|
||||
margin-top: 25px;
|
||||
}
|
||||
|
||||
/* Portfolio */
|
||||
.grid.cards {
|
||||
|
||||
li {
|
||||
background-color: var(--quarternary-colour);
|
||||
border: none !important;
|
||||
border-radius: 5px !important;
|
||||
box-shadow: none !important;
|
||||
padding: 2em !important;
|
||||
margin: 2em !important;
|
||||
|
||||
|
||||
h6 {
|
||||
span {
|
||||
margin-right: 3px;
|
||||
}
|
||||
}
|
||||
|
||||
&:hover {
|
||||
box-shadow: none !important;
|
||||
border: none !important;
|
||||
transition: none !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.writing {
|
||||
padding: 4em;
|
||||
|
||||
h6 {
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
}
|
||||
|
||||
.two-column {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
max-width: 1500px;
|
||||
padding: 20px 20px 20px 0;
|
||||
width: 100%;
|
||||
margin: 10px auto;
|
||||
|
||||
.column {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
padding: 20px;
|
||||
text-align: left;
|
||||
|
||||
.content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* Contact */
|
||||
|
||||
div.contact-me {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
text-align: center;
|
||||
|
||||
div.button {
|
||||
font-size: 1.8em;
|
||||
color: var(--tertiary-colour);
|
||||
border: none;
|
||||
|
||||
&:hover {
|
||||
color: var(--secondary-colour);
|
||||
}
|
||||
}
|
||||
}
|
||||
74
deploy/assets/css/_size.css
Executable file
74
deploy/assets/css/_size.css
Executable file
|
|
@ -0,0 +1,74 @@
|
|||
/*****************************
|
||||
* SIZE
|
||||
*****************************/
|
||||
|
||||
/* Standard screen size is based on 1728x1117 screen. */
|
||||
:root {
|
||||
--text-min-size: 8px;
|
||||
--text-variable-size: 0.7vw;
|
||||
--full-width: 100vw;
|
||||
--half-width: 50vw;
|
||||
--third-width: 33.3vw;
|
||||
--quarter-width: 25vw;
|
||||
--fifth-width: 20vw;
|
||||
--full-height: 100vh;
|
||||
--half-height: 50vh;
|
||||
--third-height: 33.3vh;
|
||||
--quarter-height: 25vh;
|
||||
--fifth-height: 20vh;
|
||||
--horizontal-spacing: 0.3vw;
|
||||
--vertical-spacing: 0.45vh;
|
||||
}
|
||||
|
||||
/* Font sizes */
|
||||
.md-typeset {
|
||||
p {
|
||||
font-size: max(calc(var(--text-variable-size) + 3px), var(--text-min-size));
|
||||
}
|
||||
|
||||
figcaption {
|
||||
font-size: max(calc(var(--text-variable-size)), var(--text-min-size));
|
||||
}
|
||||
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
h4,
|
||||
h5,
|
||||
h6 {
|
||||
letter-spacing: normal;
|
||||
margin: 0 0 5px 0;
|
||||
}
|
||||
}
|
||||
|
||||
.md-typeset {
|
||||
h1 {
|
||||
font-size: max(calc(var(--text-variable-size) * 6), calc(var(--text-min-size) + 6px));
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: max(calc(var(--text-variable-size) * 4), calc(var(--text-min-size) + 5px));
|
||||
}
|
||||
|
||||
h3 {
|
||||
font-size: max(calc(var(--text-variable-size) * 3.5), calc(var(--text-min-size) + 4px));
|
||||
}
|
||||
|
||||
h4 {
|
||||
font-size: max(calc(var(--text-variable-size) * 2.8), calc(var(--text-min-size) + 3px));
|
||||
}
|
||||
|
||||
h5 {
|
||||
font-size: max(calc(var(--text-variable-size) * 2), calc(var(--text-min-size) + 2px));
|
||||
}
|
||||
|
||||
h6 {
|
||||
font-size: max(calc(var(--text-variable-size) + 8px), calc(var(--text-min-size) + 1px));
|
||||
}
|
||||
}
|
||||
|
||||
/* Default padding and margins */
|
||||
div {
|
||||
margin: calc(var(--vertical-spacing) * 2) 0;
|
||||
padding: calc(var(--vertical-spacing) * 2) 0;
|
||||
}
|
||||
180
deploy/assets/css/g.css
Executable file
180
deploy/assets/css/g.css
Executable file
|
|
@ -0,0 +1,180 @@
|
|||
@import url(_colours.css);
|
||||
@import url(_fonts.css);
|
||||
@import url(_size.css);
|
||||
@import url(_loader.css);
|
||||
@import url(_page-resume.css);
|
||||
@import url(_hero-text.css);
|
||||
@import url(_faces.css);
|
||||
@import url(_media-player.css);
|
||||
|
||||
|
||||
/*****************************
|
||||
* GENERAL RULES
|
||||
*****************************/
|
||||
|
||||
body {
|
||||
background: var(--background);
|
||||
min-height: 100vh;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
nav, .md-header {
|
||||
background-color: var(--transparent);
|
||||
}
|
||||
|
||||
a.md-header__button {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
.md-typeset a:hover {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.md-header--shadow {
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.md-header__topic:first-child {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* Change colour of search highlighting. */
|
||||
.md-search-result__link:focus,
|
||||
.md-search-result__link:hover {
|
||||
background-color: var(--transparent);
|
||||
}
|
||||
|
||||
.md-typeset mark {
|
||||
background-color: var(--transparent);
|
||||
}
|
||||
|
||||
/* This was creating an annoying space at the top. */
|
||||
article.md-content__inner.md-typeset:before,
|
||||
article.md-content__inner.md-typeset:after {
|
||||
content: none;
|
||||
}
|
||||
|
||||
.md-typeset figcaption {
|
||||
max-width: none;
|
||||
}
|
||||
|
||||
/* Hide the repo stuff */
|
||||
.md-source {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
/*****************************
|
||||
* BUTTON
|
||||
*****************************/
|
||||
|
||||
div.button {
|
||||
font-family: var(--secondary-font);
|
||||
border-bottom: 3px solid var(--secondary-colour);
|
||||
width: fit-content;
|
||||
padding-bottom: 3px;
|
||||
font-weight: bold;
|
||||
|
||||
&:hover {
|
||||
border-bottom: 3px solid white;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/*****************************
|
||||
* STATUS
|
||||
*****************************/
|
||||
|
||||
div.status-green {
|
||||
background-color: #007a5a;
|
||||
color: var(--background-colour);
|
||||
border-radius: 5px;
|
||||
padding: 5px 15px;
|
||||
text-transform: uppercase;
|
||||
font-family: var(--secondary-font);
|
||||
font-weight: 900;
|
||||
font-size: 0.8em;
|
||||
width: fit-content;
|
||||
margin: 0;
|
||||
letter-spacing: 0.3em;
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
/*****************************
|
||||
* TOOLTIP
|
||||
*****************************/
|
||||
|
||||
.md-annotation__index {
|
||||
overflow: inherit;
|
||||
vertical-align: inherit;
|
||||
}
|
||||
|
||||
.md-tooltip {
|
||||
box-shadow: none;
|
||||
border: 1px solid var(--secondary-colour);
|
||||
padding: 3px;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.md-tooltip__inner {
|
||||
font-family: var(--secondary-font);
|
||||
font-size: 0.8em;
|
||||
padding-top: 0;
|
||||
padding-bottom: 0;
|
||||
}
|
||||
|
||||
/*****************************
|
||||
* FOOTER
|
||||
*****************************/
|
||||
|
||||
div.footer {
|
||||
margin: 30px 5px 5px 0;
|
||||
padding-bottom: 0;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
|
||||
.version {
|
||||
transform: rotate(180deg);
|
||||
font-size: 8px;
|
||||
margin-left: 20px;
|
||||
writing-mode: vertical-rl;
|
||||
font-family: var(--secondary-font);
|
||||
}
|
||||
|
||||
.menu {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
gap: 3em;
|
||||
color: var(--primary-colour);
|
||||
margin-left: 2em;
|
||||
font-size: max(calc(var(--text-variable-size) * 2), calc(var(--text-min-size) + 2px));
|
||||
font-family: var(--primary-font);
|
||||
}
|
||||
}
|
||||
|
||||
/*****************************
|
||||
* RESPONSIVE
|
||||
*****************************/
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.faces {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
|
||||
.three-column {
|
||||
grid-template-columns: 1fr;
|
||||
|
||||
.column:nth-child(1) {
|
||||
padding-left: 20px;
|
||||
}
|
||||
|
||||
.column:nth-child(2) {
|
||||
border: none;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
213
deploy/assets/css/index.css
Executable file
213
deploy/assets/css/index.css
Executable file
|
|
@ -0,0 +1,213 @@
|
|||
@import url(_colours.css);
|
||||
@import url("https: //api.fonts.coollabs.io/css2?family=Lato:wght@300;400;700;900&family=Libre+Baskerville&family=DM+Mono:wght@400;500&display=swap");
|
||||
|
||||
header,
|
||||
nav,
|
||||
footer,
|
||||
.md-content .md-typeset h1 {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
article,
|
||||
.md-container {
|
||||
min-height: 100vh;
|
||||
width: 100%;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.md-content__inner,
|
||||
.md-main__inner,
|
||||
.md-grid,
|
||||
html,
|
||||
body,
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.md-grid {
|
||||
max-width: none;
|
||||
}
|
||||
|
||||
/* This was creating an annoying space at the top */
|
||||
article.md-content__inner.md-typeset:before,
|
||||
article.md-content__inner.md-typeset:after {
|
||||
content: none;
|
||||
}
|
||||
|
||||
body {
|
||||
min-height: 100vh;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
background-color: white;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.container {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.columns {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
width: 100%;
|
||||
height: 50vh;
|
||||
}
|
||||
|
||||
.top-row {
|
||||
flex: 1;
|
||||
min-width: 100vw;
|
||||
height: 50vh;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: center;
|
||||
padding: 5em;
|
||||
font-family: 'Libre Baskerville', serif;
|
||||
}
|
||||
|
||||
.top-row h2 {
|
||||
margin-bottom: 0.1em;
|
||||
font-size: 5vw;
|
||||
font-weight: 900;
|
||||
overflow: hidden;
|
||||
border-right: .15em solid #818589;
|
||||
white-space: nowrap;
|
||||
letter-spacing: .05em;
|
||||
animation:
|
||||
typing 5s steps(40, end) forwards 2s,
|
||||
blink-caret 0.75s step-end infinite;
|
||||
}
|
||||
|
||||
@keyframes typing {
|
||||
from {
|
||||
width: 0
|
||||
}
|
||||
|
||||
to {
|
||||
width: 100%
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes blink-caret {
|
||||
|
||||
from,
|
||||
to {
|
||||
border-color: transparent;
|
||||
}
|
||||
|
||||
50% {
|
||||
border-color: #818589;
|
||||
}
|
||||
}
|
||||
|
||||
.top-row p {
|
||||
font-size: 3vw;
|
||||
color: #818589;
|
||||
}
|
||||
|
||||
.top-row * {
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
/* Image Container Styling */
|
||||
.image-container {
|
||||
width: 100%;
|
||||
height: 33.33vh;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.image-container:hover {
|
||||
filter: invert(50%);
|
||||
}
|
||||
|
||||
.image-container img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: contain;
|
||||
}
|
||||
|
||||
/* Responsive Design */
|
||||
@media (max-width: 768px) {
|
||||
.columns {
|
||||
flex-direction: column;
|
||||
}
|
||||
}
|
||||
|
||||
#loader {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
background-color: #EFE5DC;
|
||||
display: flex !important;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
z-index: 9998;
|
||||
transition: opacity 1s ease-out, transform 0.5s ease-out;
|
||||
}
|
||||
|
||||
#loader.fade-out {
|
||||
opacity: 0;
|
||||
transform: scale(1.1);
|
||||
}
|
||||
|
||||
#loader img {
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
|
||||
}
|
||||
|
||||
@keyframes spin {
|
||||
from {
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
|
||||
to {
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
|
||||
#loading-text {
|
||||
font-family: Arial, sans-serif;
|
||||
font-size: 24px;
|
||||
color: black;
|
||||
/* Change text color if needed */
|
||||
animation: pulse 1s ease-in-out infinite;
|
||||
}
|
||||
|
||||
@keyframes pulse {
|
||||
0% {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
50% {
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
100% {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
/* Add fade-out animation */
|
||||
@keyframes fadeOut {
|
||||
from {
|
||||
opacity: 1;
|
||||
transform: scale(1);
|
||||
}
|
||||
|
||||
to {
|
||||
opacity: 0;
|
||||
transform: scale(1.1);
|
||||
}
|
||||
}
|
||||
|
||||
.fade-out {
|
||||
animation: fadeOut 1s ease-out forwards;
|
||||
}
|
||||
Loading…
Add table
Add a link
Reference in a new issue