Reafcatred the stylesheets and made fixes to the Resume page.
This commit is contained in:
g*
parent
8cc8917aa8
commit
7ddca3c39d
14 changed files with 366 additions and 329 deletions
|
|
@ -50,6 +50,6 @@
|
|||
}
|
||||
|
||||
a:hover {
|
||||
color: var(--primary-color);
|
||||
color: var(--secondary-color);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -141,12 +141,27 @@
|
|||
src: url('../fonts/dm-mono/DMMono-LightItalic.ttf');
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'Open Sans';
|
||||
font-weight: medium;
|
||||
font-style: normal;
|
||||
src: url('../fonts/open-sans/OpenSans-Medium.ttf');
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'DM Serif';
|
||||
font-weight: bolder;
|
||||
font-style: italic;
|
||||
src: url('../fonts/open-sans/OpenSans-ExtraBold.ttf');
|
||||
}
|
||||
|
||||
/* Variables */
|
||||
|
||||
:root {
|
||||
--primary-font: 'Libre Baskerville', serif;
|
||||
--secondary-font: 'Lato', sans-serif;
|
||||
--tertiary-font: 'DM Mono', monospace;
|
||||
--number-font: 'Open Sans', sans-serif;
|
||||
}
|
||||
|
||||
/* Typeset */
|
||||
|
|
@ -163,7 +178,7 @@
|
|||
h4,
|
||||
h5,
|
||||
h6 {
|
||||
font-weight: bold;
|
||||
font-weight: 900;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -12,6 +12,7 @@ body,
|
|||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
max-width: none;
|
||||
}
|
||||
|
||||
article,
|
||||
|
|
@ -24,7 +25,6 @@ article,
|
|||
|
||||
header,
|
||||
nav,
|
||||
footer,
|
||||
.md-content .md-typeset h1 {
|
||||
display: none !important;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -17,14 +17,11 @@
|
|||
--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));
|
||||
|
|
@ -68,17 +65,7 @@
|
|||
}
|
||||
|
||||
/* 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);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -70,17 +70,21 @@ article.md-content__inner.md-typeset:after {
|
|||
blink-caret 0.75s step-end infinite;
|
||||
}
|
||||
|
||||
h4#hover-text {
|
||||
h4 {
|
||||
font-weight: normal;
|
||||
opacity: 0;
|
||||
transition: opacity 0.5s ease-out;
|
||||
|
||||
&.fade-in {
|
||||
opacity: 1;
|
||||
}
|
||||
&#hover-text {
|
||||
|
||||
&.leave {
|
||||
opacity: 0;
|
||||
transition: opacity 0.5s ease-out;
|
||||
|
||||
&.fade-in {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
&.leave {
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -162,11 +166,7 @@ article.md-content__inner.md-typeset:after {
|
|||
}
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.faces {
|
||||
flex-direction: column;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/*****************************
|
||||
* PAGE LOADER
|
||||
|
|
@ -246,84 +246,183 @@ article.md-content__inner.md-typeset:after {
|
|||
animation: fadeOut 1s ease-out forwards;
|
||||
}
|
||||
|
||||
/*****************************
|
||||
* RESUMÉ
|
||||
*****************************/
|
||||
|
||||
/* */
|
||||
|
||||
.resume-icon-meta {
|
||||
font-size: max(1vw, 8px);
|
||||
/* 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: 0.5rem;
|
||||
}
|
||||
gap: 25px;
|
||||
width: fit-content;
|
||||
margin: 0;
|
||||
|
||||
.resume-icon-meta>div,
|
||||
.resume-icon-meta>a {
|
||||
margin-right: 2em;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
font-family: var(--secondary-font);
|
||||
}
|
||||
& .md-typeset .twemoji {
|
||||
height: max(calc(var(--text-variable-size) + 5px), var(--text-min-size));
|
||||
}
|
||||
|
||||
svg {
|
||||
width: 30px;
|
||||
height: auto;
|
||||
margin-right: 0.3rem;
|
||||
}
|
||||
& svg {
|
||||
margin-right: 3px;
|
||||
}
|
||||
|
||||
span {
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
.annotate {
|
||||
color: transparent;
|
||||
font-size: small;
|
||||
a:hover {
|
||||
color: var(--secondary-colour);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.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);
|
||||
}
|
||||
|
||||
/* Career timeline */
|
||||
.tabbed-labels {
|
||||
font-family: var(--secondary-font);
|
||||
}
|
||||
font-family: var(--number-font);
|
||||
font-weight: 900;
|
||||
margin-bottom: 0;
|
||||
|
||||
.md-typeset .tabbed-labels>label {
|
||||
font-size: max(1.7vw, 8px);
|
||||
}
|
||||
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: #FAF9F6;
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
div.tabbed-block {
|
||||
padding: 3em;
|
||||
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-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
|
||||
*****************************/
|
||||
|
||||
.two-column {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
max-width: 1500px;
|
||||
padding: 20px 20px 20px 0;
|
||||
width: 100%;
|
||||
margin: 30px auto;
|
||||
border-bottom: 1px solid var(--secondary-colour);
|
||||
|
||||
.column {
|
||||
justify-self: center;
|
||||
padding: 20px;
|
||||
text-align: left;
|
||||
|
||||
.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));
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/*****************************
|
||||
* STATUS
|
||||
*****************************/
|
||||
|
||||
div.status-green {
|
||||
background-color: #007a5a;
|
||||
color: var(--background-colour);
|
||||
|
|
@ -336,156 +435,80 @@ div.status-green {
|
|||
width: fit-content;
|
||||
margin: 0;
|
||||
letter-spacing: 0.3em;
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
.tabbed-labels>label:nth-child(1) {
|
||||
margin-left: 3vw;
|
||||
/*****************************
|
||||
* TOOLTIP
|
||||
*****************************/
|
||||
|
||||
.md-annotation__index {
|
||||
overflow: inherit;
|
||||
vertical-align: inherit;
|
||||
}
|
||||
|
||||
.tabbed-labels>label:nth-child(2) {
|
||||
margin-left: 18vw;
|
||||
.md-tooltip {
|
||||
box-shadow: none;
|
||||
border: 0.5px solid var(--secondary-colour);
|
||||
padding: 3px;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.tabbed-labels>label:nth-child(3) {
|
||||
margin-left: 12vw;
|
||||
.md-tooltip__inner {
|
||||
font-family: var(--secondary-font);
|
||||
font-size: 0.8em;
|
||||
padding-top: 0;
|
||||
padding-bottom: 0;
|
||||
}
|
||||
|
||||
.tabbed-labels>label:nth-child(4) {
|
||||
margin-left: 21vw;
|
||||
}
|
||||
/*****************************
|
||||
* FOOTER
|
||||
*****************************/
|
||||
|
||||
.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 {
|
||||
div.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);
|
||||
}
|
||||
|
||||
.menu {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
gap: 3em;
|
||||
color: var(--primary-colour);
|
||||
margin-left: 2em;
|
||||
font-size: max(calc(var(--text-variable-size) * 2), calc(var(--text-min-size) + 2px));
|
||||
}
|
||||
}
|
||||
|
||||
.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;
|
||||
/*****************************
|
||||
* 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;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue