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,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;
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue