180 lines
3.4 KiB
CSS
Executable file
180 lines
3.4 KiB
CSS
Executable file
@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(_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: 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));
|
|
font-family: var(--primary-font);
|
|
}
|
|
}
|
|
|
|
/*****************************
|
|
* 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;
|
|
}
|
|
}
|
|
|
|
}
|