Organized the stylesheets,converted fonts to woff.
This commit is contained in:
g*
parent
7eba28d1a9
commit
fa2ec6c820
40 changed files with 631 additions and 660 deletions
15
docs/src/stylesheets/_button.css
Normal file
15
docs/src/stylesheets/_button.css
Normal file
|
|
@ -0,0 +1,15 @@
|
|||
/*****************************
|
||||
* 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;
|
||||
}
|
||||
}
|
||||
|
|
@ -40,16 +40,14 @@
|
|||
color: var(--primary-color);
|
||||
}
|
||||
|
||||
figcaption,
|
||||
a,
|
||||
h4,
|
||||
h5,
|
||||
h6 {
|
||||
color: var(--tertiary-colour);
|
||||
}
|
||||
|
||||
a {
|
||||
color: var(--tertiary-colour);
|
||||
}
|
||||
|
||||
a:hover {
|
||||
color: var(--secondary-color);
|
||||
}
|
||||
|
|
|
|||
47
docs/src/stylesheets/_faces.css
Normal file
47
docs/src/stylesheets/_faces.css
Normal 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);
|
||||
}
|
||||
}
|
||||
|
|
@ -29,7 +29,7 @@
|
|||
font-family: 'Lato';
|
||||
font-weight: bold;
|
||||
font-style: normal;
|
||||
src: url('../fonts/lato/Lato-Bold.ttf');
|
||||
src: url('../fonts/lato/Lato-Bold.woff2');
|
||||
|
||||
}
|
||||
|
||||
|
|
@ -37,14 +37,14 @@
|
|||
font-family: 'Lato';
|
||||
font-weight: bold;
|
||||
font-style: italic;
|
||||
src: url('../fonts/lato/Lato-BoldItalic.ttf');
|
||||
src: url('../fonts/lato/Lato-BoldItalic.woff2');
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'Lato';
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
src: url('../fonts/lato/Lato-Regular.ttf');
|
||||
src: url('../fonts/lato/Lato-Regular.woff2');
|
||||
|
||||
}
|
||||
|
||||
|
|
@ -52,7 +52,7 @@
|
|||
font-family: 'Lato';
|
||||
font-weight: normal;
|
||||
font-style: italic;
|
||||
src: url('../fonts/lato/Lato-Italic.ttf');
|
||||
src: url('../fonts/lato/Lato-Italic.woff2');
|
||||
|
||||
}
|
||||
|
||||
|
|
@ -60,56 +60,56 @@
|
|||
font-family: 'DM Mono';
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
src: url('../fonts/dm-mono/DMMono-Regular.ttf');
|
||||
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.ttf');
|
||||
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.ttf');
|
||||
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.ttf');
|
||||
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.ttf');
|
||||
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.ttf');
|
||||
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.ttf');
|
||||
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.ttf');
|
||||
src: url('../fonts/open-sans/OpenSans-ExtraBold.woff2');
|
||||
}
|
||||
|
||||
/* Variables */
|
||||
|
|
@ -123,23 +123,15 @@
|
|||
|
||||
/* Typeset */
|
||||
|
||||
.md-typeset p {
|
||||
font-size: max(var(--text-variable-size), var(--text-min-size));
|
||||
}
|
||||
|
||||
.md-typeset {
|
||||
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
h4,
|
||||
h5,
|
||||
h6 {
|
||||
font-weight: 900;
|
||||
p {
|
||||
font-family: var(--primary-font);
|
||||
}
|
||||
}
|
||||
|
||||
.md-typeset {
|
||||
figcaption {
|
||||
font-family: var(--secondary-font);
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
h1,
|
||||
h2,
|
||||
|
|
@ -153,3 +145,15 @@
|
|||
font-family: var(--secondary-font);
|
||||
}
|
||||
}
|
||||
|
||||
.md-typeset {
|
||||
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
h4,
|
||||
h5,
|
||||
h6 {
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
74
docs/src/stylesheets/_hero-text.css
Normal file
74
docs/src/stylesheets/_hero-text.css
Normal 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);
|
||||
}
|
||||
}
|
||||
77
docs/src/stylesheets/_loader.css
Normal file
77
docs/src/stylesheets/_loader.css
Normal 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
docs/src/stylesheets/_media-player.css
Normal file
37
docs/src/stylesheets/_media-player.css
Normal 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;
|
||||
}
|
||||
228
docs/src/stylesheets/_page-resume.css
Normal file
228
docs/src/stylesheets/_page-resume.css
Normal file
|
|
@ -0,0 +1,228 @@
|
|||
/*****************************
|
||||
* 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: 3vw;
|
||||
}
|
||||
|
||||
>label:nth-child(2) {
|
||||
margin-left: 18vw;
|
||||
}
|
||||
|
||||
>label:nth-child(3) {
|
||||
margin-left: 12vw;
|
||||
}
|
||||
|
||||
>label:nth-child(4) {
|
||||
margin-left: 21vw;
|
||||
}
|
||||
|
||||
>label:nth-child(5) {
|
||||
margin-left: 3vw;
|
||||
}
|
||||
}
|
||||
|
||||
.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;
|
||||
padding: 2em !important;
|
||||
margin: 2em !important;
|
||||
|
||||
h6 {
|
||||
span {
|
||||
margin-right: 3px;
|
||||
}
|
||||
}
|
||||
|
||||
&:hover {
|
||||
box-shadow: none !important;
|
||||
border: 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);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -6,7 +6,6 @@
|
|||
:root {
|
||||
--text-min-size: 8px;
|
||||
--text-variable-size: 0.7vw;
|
||||
--zero: 0;
|
||||
--full-width: 100vw;
|
||||
--half-width: 50vw;
|
||||
--third-width: 33.3vw;
|
||||
|
|
@ -24,7 +23,11 @@
|
|||
/* Font sizes */
|
||||
.md-typeset {
|
||||
p {
|
||||
font-size: max(var(--text-variable-size), var(--text-min-size));
|
||||
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,
|
||||
|
|
@ -34,7 +37,7 @@
|
|||
h5,
|
||||
h6 {
|
||||
letter-spacing: normal;
|
||||
margin: var(--zero);
|
||||
margin: 0 0 5px 0;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -60,7 +63,7 @@
|
|||
}
|
||||
|
||||
h6 {
|
||||
font-size: max(calc(var(--text-variable-size) + 5px), calc(var(--text-min-size) + 1px));
|
||||
font-size: max(calc(var(--text-variable-size) + 8px), calc(var(--text-min-size) + 1px));
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -1,6 +1,13 @@
|
|||
@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(_button.css);
|
||||
@import url(_media-player.css);
|
||||
|
||||
|
||||
/*****************************
|
||||
* GENERAL RULES
|
||||
|
|
@ -44,494 +51,9 @@ article.md-content__inner.md-typeset:after {
|
|||
}
|
||||
|
||||
.md-typeset figcaption {
|
||||
font-family: var(--secondary-font);
|
||||
color: var(--tertiary-colour);
|
||||
font-size: 0.8em;
|
||||
font-style: normal;
|
||||
max-width: none;
|
||||
}
|
||||
|
||||
.vds-title {
|
||||
font-family: var(--secondary-font);
|
||||
font-size: 0.8em;
|
||||
}
|
||||
|
||||
/*****************************
|
||||
* 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;
|
||||
}
|
||||
}
|
||||
|
||||
/*****************************
|
||||
* 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);
|
||||
}
|
||||
}
|
||||
|
||||
/*****************************
|
||||
* INDEX 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);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
/*****************************
|
||||
* 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;
|
||||
}
|
||||
|
||||
/*****************************
|
||||
* 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: 3vw;
|
||||
}
|
||||
|
||||
>label:nth-child(2) {
|
||||
margin-left: 18vw;
|
||||
}
|
||||
|
||||
>label:nth-child(3) {
|
||||
margin-left: 12vw;
|
||||
}
|
||||
|
||||
>label:nth-child(4) {
|
||||
margin-left: 21vw;
|
||||
}
|
||||
|
||||
>label:nth-child(5) {
|
||||
margin-left: 3vw;
|
||||
}
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
}
|
||||
|
||||
.tags {
|
||||
font-size: max(9px, 0.8em);
|
||||
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) + 5px), calc(var(--text-min-size) + 2px));
|
||||
color: var(--primary-colour);
|
||||
text-transform: uppercase;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
p {
|
||||
font-size: max(calc(var(--text-variable-size) + 3px), var(--text-min-size));
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
p.blurb {
|
||||
font-size: max(calc(var(--text-variable-size) + 3px), 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;
|
||||
padding: 2em !important;
|
||||
margin: 2em !important;
|
||||
|
||||
h6 {
|
||||
text-transform: initial !important;
|
||||
|
||||
span {
|
||||
margin-right: 3px;
|
||||
}
|
||||
}
|
||||
|
||||
&:hover {
|
||||
box-shadow: none !important;
|
||||
border: none !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.writing {
|
||||
padding: 4em;
|
||||
|
||||
h6 {
|
||||
font-size: max(calc(var(--text-variable-size) + 5px), calc(var(--text-min-size) + 2px));
|
||||
color: var(--primary-colour);
|
||||
text-transform: uppercase;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
p {
|
||||
font-size: max(calc(var(--text-variable-size) + 3px), var(--text-min-size));
|
||||
}
|
||||
}
|
||||
|
||||
.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%;
|
||||
|
||||
h6 {
|
||||
font-size: max(calc(var(--text-variable-size) + 5px), calc(var(--text-min-size) + 2px));
|
||||
color: var(--primary-colour);
|
||||
text-transform: uppercase;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
p {
|
||||
font-size: max(calc(var(--text-variable-size) + 3px), var(--text-min-size));
|
||||
}
|
||||
|
||||
div {
|
||||
font-family: var(--secondary-font);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* Contact */
|
||||
|
||||
div.contact-me {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
|
||||
div.button {
|
||||
font-size: 1.8em;
|
||||
text-transform: uppercase;
|
||||
font-weight: bold !important;
|
||||
color: var(--tertiary-colour);
|
||||
|
||||
&:hover {
|
||||
border-bottom: 3px solid var(--tertiary-colour);
|
||||
color: var(--secondary-colour);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/*****************************
|
||||
* STATUS
|
||||
*****************************/
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue