fgixes to CSS and home page.
This commit is contained in:
g*
parent
0ac9709ec8
commit
8cc8917aa8
43 changed files with 1126 additions and 340 deletions
|
|
@ -1,22 +1,55 @@
|
|||
/* Change the colours of the root colour scheme */
|
||||
/*****************************
|
||||
* COLOURS
|
||||
*****************************/
|
||||
|
||||
:root {
|
||||
--background: #FAF9F6;
|
||||
--md-primary-fg-color: #323036;
|
||||
--md-primary-fg-color--light: #818589;
|
||||
--md-primary-fg-color--dark: #323036;
|
||||
--md-primary-bg-color: #FAF9F6;
|
||||
--md-footer-bg-color: transparent;
|
||||
--md-default-bg-color: #EFE5DC;
|
||||
--background-colour: #FFF;
|
||||
--primary-colour: #323036;
|
||||
--secondary-colour: #EFE5DC;
|
||||
--tertiary-colour: #818589;
|
||||
--quarternary-colour: #FAF9F6;
|
||||
}
|
||||
|
||||
[data-md-color-scheme=default] {
|
||||
--md-default-bg-color: #FAF9F6;
|
||||
/* 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);
|
||||
}
|
||||
|
||||
/* Edit the indigo accent colour scheme (no grey colour scheme) */
|
||||
[data-md-color-accent=indigo] {
|
||||
--md-primary-fg-color: #323036;
|
||||
--md-primary-fg-color--light: var(--md-primary-bg-color);
|
||||
--md-primary-fg-color--dark: var(--md-primary-fg-color--dark);
|
||||
--md-accent-fg-color: #323036;
|
||||
[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);
|
||||
}
|
||||
|
||||
h4,
|
||||
h5,
|
||||
h6 {
|
||||
color: var(--tertiary-colour);
|
||||
}
|
||||
|
||||
a {
|
||||
color: var(--tertiary-colour);
|
||||
}
|
||||
|
||||
a:hover {
|
||||
color: var(--primary-color);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
183
docs/src/stylesheets/_fonts.css
Normal file
183
docs/src/stylesheets/_fonts.css
Normal file
|
|
@ -0,0 +1,183 @@
|
|||
/*****************************
|
||||
* 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.ttf');
|
||||
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'Lato';
|
||||
font-weight: bold;
|
||||
font-style: italic;
|
||||
src: url('../fonts/lato/Lato-BoldItalic.ttf');
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'Lato';
|
||||
font-weight: light;
|
||||
font-style: normal;
|
||||
src: url('../fonts/lato/Lato-Light.ttf');
|
||||
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'Lato';
|
||||
font-weight: light;
|
||||
font-style: italic;
|
||||
src: url('../fonts/lato/Lato-LightItalic.ttf');
|
||||
}
|
||||
|
||||
@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.ttf');
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'DM Mono';
|
||||
font-weight: normal;
|
||||
font-style: italic;
|
||||
src: url('../fonts/dm-mono/DMMono-Italic.ttf');
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'DM Mono';
|
||||
font-weight: medium;
|
||||
font-style: italic;
|
||||
src: url('../fonts/dm-mono/DMMono-MediumItalic.ttf');
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'DM Mono';
|
||||
font-weight: medium;
|
||||
font-style: normal;
|
||||
src: url('../fonts/dm-mono/DMMono-Medium.ttf');
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'DM Mono';
|
||||
font-weight: light;
|
||||
font-style: normal;
|
||||
src: url('../fonts/dm-mono/DMMono-Light.ttf');
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'DM Mono';
|
||||
font-weight: light;
|
||||
font-style: italic;
|
||||
src: url('../fonts/dm-mono/DMMono-LightItalic.ttf');
|
||||
}
|
||||
|
||||
/* Variables */
|
||||
|
||||
:root {
|
||||
--primary-font: 'Libre Baskerville', serif;
|
||||
--secondary-font: 'Lato', sans-serif;
|
||||
--tertiary-font: 'DM Mono', monospace;
|
||||
}
|
||||
|
||||
/* 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: bold;
|
||||
}
|
||||
}
|
||||
|
||||
.md-typeset {
|
||||
|
||||
h1,
|
||||
h2,
|
||||
h3 {
|
||||
font-family: var(--primary-font);
|
||||
}
|
||||
|
||||
h4,
|
||||
h5,
|
||||
h6 {
|
||||
font-family: var(--secondary-font);
|
||||
}
|
||||
}
|
||||
30
docs/src/stylesheets/_index.css
Normal file
30
docs/src/stylesheets/_index.css
Normal 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;
|
||||
}
|
||||
|
||||
article,
|
||||
.md-container {
|
||||
min-height: 100%;
|
||||
width: 100%;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
header,
|
||||
nav,
|
||||
footer,
|
||||
.md-content .md-typeset h1 {
|
||||
display: none !important;
|
||||
}
|
||||
84
docs/src/stylesheets/_size.css
Normal file
84
docs/src/stylesheets/_size.css
Normal file
|
|
@ -0,0 +1,84 @@
|
|||
/*****************************
|
||||
* SIZE
|
||||
*****************************/
|
||||
|
||||
/* Standard screen size is based on 1728x1117 screen. */
|
||||
:root {
|
||||
--text-min-size: 8px;
|
||||
--text-variable-size: 0.7vw;
|
||||
--zero: 0;
|
||||
--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;
|
||||
--three-column: repeat(3, 1fr);
|
||||
--two-column: repeat(2, 1fr);
|
||||
--horizontal-spacing: 0.3vw;
|
||||
--vertical-spacing: 0.45vh;
|
||||
}
|
||||
|
||||
/* Font sizes */
|
||||
|
||||
.md-typeset {
|
||||
p {
|
||||
font-size: max(var(--text-variable-size), var(--text-min-size));
|
||||
}
|
||||
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
h4,
|
||||
h5,
|
||||
h6 {
|
||||
letter-spacing: normal;
|
||||
margin: var(--zero);
|
||||
}
|
||||
}
|
||||
|
||||
.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) * 6), calc(var(--text-min-size) + 5px));
|
||||
}
|
||||
|
||||
h3 {
|
||||
font-size: max(calc(var(--text-variable-size) * 4), calc(var(--text-min-size) + 4px));
|
||||
}
|
||||
|
||||
h4 {
|
||||
font-size: max(calc(var(--text-variable-size) * 3), 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) + 5px), 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;
|
||||
|
||||
&.no-spacing {
|
||||
margin: var(--zero);
|
||||
padding: var(--zero);
|
||||
}
|
||||
}
|
||||
|
||||
span {
|
||||
margin-left: var(--horizontal-spacing);
|
||||
}
|
||||
|
|
@ -1,118 +1,491 @@
|
|||
@import "_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");
|
||||
@import url(_colours.css);
|
||||
@import url(_fonts.css);
|
||||
@import url(_size.css);
|
||||
|
||||
/* Body background colour */
|
||||
/*****************************
|
||||
* GENERAL RULES
|
||||
*****************************/
|
||||
|
||||
body {
|
||||
background: transparent;
|
||||
background: var(--background);
|
||||
min-height: 100vh;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
/* Link colours */
|
||||
a {
|
||||
color: var(--md-primary-fg-color--light);
|
||||
.md-typeset a:hover {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
a:hover {
|
||||
color: var(--md-primary-fg-color--dark);
|
||||
text-decoration: none !important;
|
||||
}
|
||||
|
||||
/* Bold headings */
|
||||
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
h4,
|
||||
h5 {
|
||||
font-weight: bold !important;
|
||||
}
|
||||
|
||||
h1 {
|
||||
color: var(--md-primary-fg-color--dark) !important
|
||||
}
|
||||
|
||||
/* Paragraph font-size */
|
||||
.md-typeset {
|
||||
font-size: .7rem;
|
||||
}
|
||||
|
||||
/* Remove the shadow under the header */
|
||||
.md-header--shadow {
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
/* Make the logo in the header larger */
|
||||
.md-header__button.md-logo img,
|
||||
.md-header__button.md-logo svg {
|
||||
height: 2.5rem;
|
||||
}
|
||||
|
||||
/* Do not display the site title in the header */
|
||||
.md-header__topic:first-child {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* Use dark colour for the navigation links */
|
||||
.md-typeset a,
|
||||
.md-nav__item .md-nav__link--active {
|
||||
color: var(--md-primary-fg-color--dark);
|
||||
}
|
||||
|
||||
/* Underline links in text on hover an focus */
|
||||
.md-typeset a:focus,
|
||||
.md-typeset a:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
/* Change the colour of links on hover and focus */
|
||||
.md-nav__link:focus,
|
||||
.md-nav__link:hover,
|
||||
.md-typeset .headerlink:focus,
|
||||
.md-typeset .headerlink:hover,
|
||||
.md-typeset :target>.headerlink {
|
||||
color: var(--md-primary-bg-color);
|
||||
}
|
||||
|
||||
html .md-footer-meta.md-typeset a,
|
||||
.md-copyright__highlight {
|
||||
color: var(--md-primary-bg-color);
|
||||
}
|
||||
|
||||
html .md-footer-meta.md-typeset a:hover,
|
||||
html .md-footer-meta.md-typeset a:focus {
|
||||
color: var(--md-primary-fg-color--dark);
|
||||
}
|
||||
|
||||
/* Make the footer background white and the content dark */
|
||||
.md-footer,
|
||||
.md-footer-meta {
|
||||
background-color: var(--md-primary-fg-color);
|
||||
color: var(--md-primary-bg-color);
|
||||
}
|
||||
|
||||
/* Change colour of search highlighting */
|
||||
|
||||
/* Change colour of search highlighting. */
|
||||
.md-search-result__link:focus,
|
||||
.md-search-result__link:hover {
|
||||
background-color: #E6E6E6;
|
||||
background-color: var(--secondary-colour);
|
||||
}
|
||||
|
||||
.md-typeset mark {
|
||||
background-color: var(--md-accent-fg-color);
|
||||
background-color: var(--secondary-colour);
|
||||
}
|
||||
|
||||
/* Hide stars and forks in git section */
|
||||
li.md-source__fact.md-source__fact--stars,
|
||||
li.md-source__fact.md-source__fact--forks {
|
||||
display: none !important;
|
||||
/* 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;
|
||||
}
|
||||
|
||||
/* Fixing admonitions */
|
||||
/*****************************
|
||||
* HERO TEXT
|
||||
*****************************/
|
||||
|
||||
.admonition {
|
||||
border: none !important;
|
||||
.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#hover-text {
|
||||
font-weight: normal;
|
||||
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;
|
||||
}
|
||||
}
|
||||
|
||||
.admonition>p:nth-child(2) {
|
||||
background-color: white !important;
|
||||
@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);
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.faces {
|
||||
flex-direction: column;
|
||||
}
|
||||
}
|
||||
|
||||
/*****************************
|
||||
* 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;
|
||||
}
|
||||
|
||||
|
||||
/* */
|
||||
|
||||
.resume-icon-meta {
|
||||
font-size: max(1vw, 8px);
|
||||
color: var(--tertiary-colour);
|
||||
text-align: left;
|
||||
display: flex;
|
||||
justify-content: left;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
.resume-icon-meta>div,
|
||||
.resume-icon-meta>a {
|
||||
margin-right: 2em;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
font-family: var(--secondary-font);
|
||||
}
|
||||
|
||||
svg {
|
||||
width: 30px;
|
||||
height: auto;
|
||||
margin-right: 0.3rem;
|
||||
}
|
||||
|
||||
span {
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
.annotate {
|
||||
color: transparent;
|
||||
font-size: small;
|
||||
}
|
||||
|
||||
|
||||
.md-annotation:not([hidden]) {
|
||||
line-height: inherit;
|
||||
}
|
||||
|
||||
|
||||
.md-tooltip__inner {
|
||||
font-family: var(--secondary-font);
|
||||
}
|
||||
|
||||
.logo-and-title {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.logo-and-title img {
|
||||
height: max(12px, 0.5vh);
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
.logo-and-title h4 {
|
||||
display: inline-block;
|
||||
font-family: var(--secondary-font);
|
||||
margin-right: 5px;
|
||||
font-size: max(16px, inherit);
|
||||
}
|
||||
|
||||
.tabbed-labels {
|
||||
font-family: var(--secondary-font);
|
||||
}
|
||||
|
||||
.md-typeset .tabbed-labels>label {
|
||||
font-size: max(1.7vw, 8px);
|
||||
}
|
||||
|
||||
|
||||
.tabbed-content {
|
||||
background-color: #FAF9F6;
|
||||
}
|
||||
|
||||
div.tabbed-block {
|
||||
padding: 3em;
|
||||
}
|
||||
|
||||
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;
|
||||
}
|
||||
|
||||
.tabbed-labels>label:nth-child(1) {
|
||||
margin-left: 3vw;
|
||||
}
|
||||
|
||||
.tabbed-labels>label:nth-child(2) {
|
||||
margin-left: 18vw;
|
||||
}
|
||||
|
||||
.tabbed-labels>label:nth-child(3) {
|
||||
margin-left: 12vw;
|
||||
}
|
||||
|
||||
.tabbed-labels>label:nth-child(4) {
|
||||
margin-left: 21vw;
|
||||
}
|
||||
|
||||
.tabbed-labels>label:nth-child(5) {
|
||||
margin-left: 3vw;
|
||||
}
|
||||
|
||||
span.md-annotation__index {
|
||||
font-size: inherit;
|
||||
}
|
||||
|
||||
|
||||
div.tags {
|
||||
font-size: max(9px, 0.8em);
|
||||
font-style: italic;
|
||||
color: var(--tertiary-colour);
|
||||
}
|
||||
|
||||
.grid-3col-container {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
max-width: 1500px;
|
||||
padding: 20px 20px 20px 0;
|
||||
width: 100vw;
|
||||
}
|
||||
|
||||
/* Center content within columns */
|
||||
.grid-3col-item {
|
||||
justify-self: center;
|
||||
min-height: 150px;
|
||||
padding: 20px;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.grid-3col-item:nth-child(1) {
|
||||
padding-left: 0;
|
||||
}
|
||||
|
||||
.grid-3col-item:nth-child(2) {
|
||||
border-left: 1px solid var(--secondary-colour);
|
||||
border-right: 1px solid var(--secondary-colour);
|
||||
}
|
||||
|
||||
/* Responsive design */
|
||||
@media (max-width: 768px) {
|
||||
.grid-3col-container {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.grid-3col-item:nth-child(1) {
|
||||
padding-left: 20px;
|
||||
}
|
||||
|
||||
.grid-3col-item:nth-child(2) {
|
||||
border: none;
|
||||
}
|
||||
}
|
||||
|
||||
/* Optional: Add some styling to the content */
|
||||
.grid-3col-content {
|
||||
font-size: 1.2em;
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
p.blurb {
|
||||
margin: 20px 0;
|
||||
font-size: 1.5em;
|
||||
}
|
||||
|
||||
div.resume-footer {
|
||||
margin: 30px 0 10px 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);
|
||||
}
|
||||
|
||||
.resume-footer-menu {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
gap: 3em;
|
||||
color: var(--primary-colour);
|
||||
margin-left: 2em;
|
||||
}
|
||||
|
||||
|
||||
.resume-footer-menu .technical {}
|
||||
|
||||
span.visual {
|
||||
text-decoration: none;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
|
||||
|
||||
span.visual:hover {
|
||||
text-decoration: underline;
|
||||
text-underline-offset: 3px;
|
||||
text-decoration-thickness: 3px;
|
||||
text-decoration-color: var(--secondary-colour);
|
||||
transition: text-decoration 0.3s ease;
|
||||
}
|
||||
|
||||
.portfolio>.grid-3col-container {
|
||||
margin: 30px auto;
|
||||
border-bottom: 1px solid var(--secondary-colour);
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
max-width: 1500px;
|
||||
padding: 20px 20px 20px 0;
|
||||
width: 100vw;
|
||||
}
|
||||
|
||||
.portfolio>.grid-3col-item>.grid-3col-content {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
min-height: fit-content;
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
.portfolio .grid-3col-item:nth-child(2) {
|
||||
border: none;
|
||||
}
|
||||
|
||||
.portfolio h4 {
|
||||
font-size: 3em;
|
||||
color: var(--secondary-colour);
|
||||
/* text-transform: uppercase; */
|
||||
font-family: var(--secondary-font);
|
||||
text-align: center;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,213 +0,0 @@
|
|||
@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