a {
color: $primary;
&:hover {
@extend .grey-text, .text-lighten-3;
transition: color 0.5s;
text-decoration: none;
}
&.colour-invert {
h1.page-title {
font-weight: 300;
font-size: 4rem;
margin-top: 1rem;
.header-image-spacer {
height: 1rem;
.header-image {
height: calc(40vh - #{$navbar-height});
@media #{$medium-and-down} {
height: calc(60vh - #{$navbar-height});
// Fix darkreader weirdness
.parallax {
position: initial;
width: 100%;
height: 100%;
.page-list {
.card {
background-color: transparent;
box-shadow: none;
.card + .card {
margin-top: 2rem;
.card-image {
max-width: 25% !important;
margin: auto 0;
@media #{$small-and-down} {
display: initial;
max-width: initial !important;