Testing pre-push hook. Added some fonts.
This commit is contained in:
g_it
parent
1b3ef37a16
commit
3fb24e8037
GPG key ID:
A2B0A7C06A054627
94 changed files with 456 additions and 1525 deletions
|
|
@ -1,50 +1,50 @@
|
|||
@import url(_colours.css);
|
||||
|
||||
/*****************************
|
||||
* CHAPTER
|
||||
* Styling for chapter pages.
|
||||
*****************************/
|
||||
|
||||
/* Removing all padding, margins, etc. The content covers the entire viewing area */
|
||||
body,
|
||||
.md-content__inner,
|
||||
.md-main__inner,
|
||||
.md-grid,
|
||||
html,
|
||||
body,
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
.md-grid {
|
||||
box-sizing: border-box;
|
||||
max-width: none;
|
||||
}
|
||||
|
||||
article,
|
||||
.md-container {
|
||||
min-height: 100%;
|
||||
width: 100%;
|
||||
margin: 0;
|
||||
max-width: none;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
body {
|
||||
min-height: 100vh;
|
||||
align-items: center;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
background-color: white;
|
||||
min-height: 100%;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.container {
|
||||
article,
|
||||
.md-container,
|
||||
div.md-content {
|
||||
margin: 0;
|
||||
min-height: 100%;
|
||||
padding: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
header,
|
||||
.md-content .md-typeset h1 {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
article.md-content__inner.md-typeset:before,
|
||||
article.md-content__inner.md-typeset:after {
|
||||
content: none;
|
||||
}
|
||||
|
||||
/* Hide announcements bar on chapter pages */
|
||||
header,
|
||||
[data-md-component="skip"],
|
||||
[data-md-component="announce"],
|
||||
.md-content .md-typeset h1 {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
/* Hide the repo stuff */
|
||||
.md-source {
|
||||
display: none !important;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,54 +0,0 @@
|
|||
/*****************************
|
||||
* 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);
|
||||
}
|
||||
}
|
||||
|
|
@ -1,202 +0,0 @@
|
|||
/*****************************
|
||||
* 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;
|
||||
}
|
||||
}
|
||||
|
|
@ -1,37 +0,0 @@
|
|||
/*****************************
|
||||
* 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;
|
||||
}
|
||||
|
|
@ -1,230 +0,0 @@
|
|||
/*****************************
|
||||
* 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);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -1,74 +0,0 @@
|
|||
/*****************************
|
||||
* 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;
|
||||
}
|
||||
|
|
@ -1,165 +0,0 @@
|
|||
@import url(_colours.css);
|
||||
@import url(_fonts.css);
|
||||
@import url(_size.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: center;
|
||||
align-items: center;
|
||||
flex-direction: row;
|
||||
}
|
||||
|
||||
div.footer>*:not(:last-child)::after {
|
||||
content: " | ";
|
||||
margin: 0 8px;
|
||||
}
|
||||
|
||||
/*****************************
|
||||
* 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;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
|
@ -1,14 +1,10 @@
|
|||
@import url(_colours.css);
|
||||
@import url("theme.css");
|
||||
|
||||
/*****************************
|
||||
* HOME
|
||||
* INDEX
|
||||
* Styling for the homepage.
|
||||
*****************************/
|
||||
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.content {
|
||||
align-items: center;
|
||||
display: flex;
|
||||
|
|
@ -24,7 +20,6 @@
|
|||
.content ul {
|
||||
align-items: center;
|
||||
display: flex;
|
||||
font-size: 30px;
|
||||
height: 1.4em;
|
||||
justify-content: center;
|
||||
left: 50%;
|
||||
|
|
@ -40,17 +35,17 @@
|
|||
top: 20px;
|
||||
transform: translateX(-50%);
|
||||
width: 100%;
|
||||
z-index: 5;
|
||||
z-index: 0;
|
||||
}
|
||||
|
||||
.content ul li {
|
||||
align-items: center;
|
||||
box-sizing: border-box;
|
||||
display: flex;
|
||||
font-size: calc((min(100vw, 900px)) / 10);
|
||||
font-size: 15vw;
|
||||
inset: 0;
|
||||
justify-content: center;
|
||||
margin: 0;
|
||||
margin: 0 !important;
|
||||
padding: 0;
|
||||
pointer-events: auto;
|
||||
position: absolute;
|
||||
|
|
@ -59,20 +54,24 @@
|
|||
width: 100%;
|
||||
}
|
||||
|
||||
.content ul li:hover {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.content ul li a {
|
||||
text-decoration: none !important;
|
||||
}
|
||||
|
||||
.content ul li:nth-child(2) {
|
||||
font-family: var(--primary-font);
|
||||
font-family: var(--words-title) !important;
|
||||
}
|
||||
|
||||
.content ul li:nth-child(3) {
|
||||
font-family: var(--secondary-font);
|
||||
font-family: var(--visuals-title);
|
||||
}
|
||||
|
||||
.content ul li:nth-child(4) {
|
||||
font-family: var(--tertiary-font);
|
||||
font-family: var(--technical-title);
|
||||
}
|
||||
|
||||
.content .faces {
|
||||
|
|
@ -86,6 +85,16 @@
|
|||
width: 100%;
|
||||
}
|
||||
|
||||
.down-arrow {
|
||||
animation: flash 1s infinite;
|
||||
bottom: 20px;
|
||||
color: var(--tertiary-colour);
|
||||
font-size: 1rem;
|
||||
left: 50%;
|
||||
position: fixed;
|
||||
transform: translateX(-50%);
|
||||
}
|
||||
|
||||
.faces .slide {
|
||||
border-radius: 10px;
|
||||
left: 50%;
|
||||
|
|
@ -106,14 +115,27 @@
|
|||
width: 100%;
|
||||
}
|
||||
|
||||
.down-arrow {
|
||||
animation: flash 1s infinite;
|
||||
bottom: 20px;
|
||||
color: var(--secondary-colour);
|
||||
font-size: 2rem;
|
||||
left: 50%;
|
||||
position: fixed;
|
||||
transform: translateX(-50%);
|
||||
footer {
|
||||
background: repeating-linear-gradient(0deg, transparent, transparent 19px, rgba(75, 85, 99, 0.08) 19px, rgba(75, 85, 99, 0.08) 20px, transparent 20px, transparent 39px, rgba(75, 85, 99, 0.08) 39px, rgba(75, 85, 99, 0.08) 40px),
|
||||
repeating-linear-gradient(90deg, transparent, transparent 19px, rgba(75, 85, 99, 0.08) 19px, rgba(75, 85, 99, 0.08) 20px, transparent 20px, transparent 39px, rgba(75, 85, 99, 0.08) 39px, rgba(75, 85, 99, 0.08) 40px),
|
||||
radial-gradient(circle at 20px 20px, rgba(55, 65, 81, 0.12) 2px, transparent 2px),
|
||||
radial-gradient(circle at 40px 40px, rgba(55, 65, 81, 0.12) 2px, transparent 2px);
|
||||
font-family: var(--general-sans);
|
||||
}
|
||||
|
||||
.hero {
|
||||
align-items: center;
|
||||
display: flex;
|
||||
height: 100vh;
|
||||
justify-content: center;
|
||||
margin: 0;
|
||||
overflow: hidden;
|
||||
padding: 0;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.hidden {
|
||||
display: none;
|
||||
}
|
||||
|
||||
@keyframes flash {
|
||||
|
|
@ -127,14 +149,3 @@
|
|||
opacity: 0.5;
|
||||
}
|
||||
}
|
||||
|
||||
.hero {
|
||||
align-items: center;
|
||||
display: flex;
|
||||
height: 100vh;
|
||||
justify-content: center;
|
||||
margin: 0;
|
||||
overflow: hidden;
|
||||
padding: 0;
|
||||
width: 100%;
|
||||
}
|
||||
181
content/assets/css/theme.css
Executable file
181
content/assets/css/theme.css
Executable file
|
|
@ -0,0 +1,181 @@
|
|||
/*****************************
|
||||
* Theme
|
||||
* Base CSS file
|
||||
------------------------------
|
||||
* COLOURS
|
||||
*****************************/
|
||||
|
||||
/* Colour variables */
|
||||
:root {
|
||||
--background-colour: #FFF;
|
||||
--primary-colour: #323036;
|
||||
--quarternary-colour: #FAF9F6;
|
||||
--secondary-colour: #818589;
|
||||
--tertiary-colour: #E6E6E6;
|
||||
--transparent: transparent;
|
||||
}
|
||||
|
||||
/* Adjust Zensical colours */
|
||||
[data-md-color-accent=custom] {
|
||||
--md-default-bg-color: var(--background-colour);
|
||||
--md-footer-bg-color: var(--background-colour);
|
||||
--md-primary-bg-color: var(--background-colour);
|
||||
--md-primary-fg-color: var(--primary-colour);
|
||||
--md-primary-fg-color--dark: var(--primary-colour);
|
||||
--md-primary-fg-color--light: var(--tertiary-colour);
|
||||
}
|
||||
|
||||
/*****************************
|
||||
* FONTS
|
||||
*****************************/
|
||||
|
||||
/* General */
|
||||
@font-face {
|
||||
font-family: 'Source Code';
|
||||
font-style: normal;
|
||||
font-weight: 100 700;
|
||||
src: url('../fonts/source-code.ttf') format('truetype');
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'Source Sans';
|
||||
font-style: normal;
|
||||
font-weight: 100 700;
|
||||
src: url('../fonts/source-sans.ttf') format('truetype');
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'Source Serif';
|
||||
font-style: normal;
|
||||
font-weight: 100 700;
|
||||
src: url('../fonts/source-serif.ttf') format('truetype');
|
||||
}
|
||||
|
||||
/* Technical */
|
||||
@font-face {
|
||||
font-family: 'DM Mono';
|
||||
font-style: normal;
|
||||
font-weight: 100 700;
|
||||
src: url('../fonts/dm-mono.ttf') format('truetype');
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'DM Sans';
|
||||
font-style: normal;
|
||||
font-weight: 100 700;
|
||||
src: url('../fonts/dm-sans.ttf') format('truetype');
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'Tiny5';
|
||||
font-style: normal;
|
||||
font-weight: 900;
|
||||
src: url('../fonts/tiny5.ttf') format('truetype');
|
||||
}
|
||||
|
||||
/* Visual */
|
||||
@font-face {
|
||||
font-family: 'Plaster';
|
||||
font-style: normal;
|
||||
font-weight: 900;
|
||||
src: url('../fonts/plaster.ttf') format('truetype');
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'Rubik';
|
||||
font-style: normal;
|
||||
font-weight: 100 700;
|
||||
src: url('../fonts/rubik.ttf') format('truetype');
|
||||
}
|
||||
|
||||
/* Words */
|
||||
@font-face {
|
||||
font-family: 'EB Garamond';
|
||||
font-style: italic;
|
||||
font-weight: 100 700;
|
||||
src: url('../fonts/eb-garamond-italics.ttf') format('truetype');
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'EB Garamond';
|
||||
font-style: normal;
|
||||
font-weight: 100 700;
|
||||
src: url('../fonts/eb-garamond.ttf') format('truetype');
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'Playfair Display SC';
|
||||
font-style: normal;
|
||||
font-weight: 900;
|
||||
src: url('../fonts/playfair-display-sc.ttf') format('truetype');
|
||||
}
|
||||
|
||||
/* Variables */
|
||||
:root {
|
||||
--general-sans: 'Source Sans', sans-serif;
|
||||
--general-serif: 'Source Serif', serif;
|
||||
--general-code: 'Source Code', monospace;
|
||||
--technical-code: 'DM Mono', monospace;
|
||||
--technical-text: 'DM Sans', monospace;
|
||||
--technical-title: 'Tiny5', 'DM Mono', monospace;
|
||||
--visuals-text: 'Rubik', sans-serif;
|
||||
--visuals-title: 'Plaster', 'Rubik', sans-serif;
|
||||
--words-text: 'EB Garamond', serif;
|
||||
--words-title: 'Playfair Display SC', 'EB Garamond', serif;
|
||||
}
|
||||
|
||||
/* Colours and weights */
|
||||
.md-typeset {
|
||||
|
||||
a,
|
||||
figcaption {
|
||||
color: var(--secondary-colour);
|
||||
max-width: none;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
a:hover {
|
||||
color: var(--teriary-color);
|
||||
}
|
||||
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
h4,
|
||||
h5,
|
||||
h6 {
|
||||
color: var(--secondary-colour);
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
p {
|
||||
color: var(--primary-colour);
|
||||
}
|
||||
}
|
||||
|
||||
/*****************************
|
||||
* RULES
|
||||
*****************************/
|
||||
|
||||
body {
|
||||
align-items: center;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
min-height: 100vh;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
/* Footer */
|
||||
footer {
|
||||
align-items: center;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: center;
|
||||
margin-bottom: 5px;
|
||||
padding-bottom: 0;
|
||||
}
|
||||
|
||||
footer>*:not(:last-child)::after {
|
||||
content: " | ";
|
||||
margin: 0 8px;
|
||||
}
|
||||
Loading…
Add table
Add a link
Reference in a new issue