expand_less
body {
font-family: 'Roboto Mono', monospace;
font-family: 'Roboto Condensed', sans-serif;
font-family: 'Nova Mono', monospace;
font-family: 'Abel', sans-serif;
font-family: 'Markazi Text', serif;
font-family: 'Slabo 27px', serif;
font-family: 'Roboto', sans-serif;
font-family: 'Noto Sans', sans-serif;
}
.margin-fix {
margin-top: 95px; //margin fix for conainter as there is fixed navbar
}
/* Background */
.code-bg {
background-image: url(/files/~34336/247958-original.png);
background-position: 0px;
}
.fancy-bg-gradient {
background-color: rgba(249, 248, 252, 0.97);
// background-color: rgba(37, 37, 37, 0.62);
// background-image: linear-gradient(to right, rgba(67, 67, 67, 0.7803921568627451) 0%, rgba(0, 0, 0, 0.8) 100%);
}
/* Nav bar */
.nav-logo svg {
max-height: 50px;
max-width: 50px;
}
.account-info #logging {
display: flex;
}
/*
LOGO
note: class names for cards starts with svg-card-1 (to 4),
use this class to apply different colours instead of all odd cards.
*/
[id^='svg-card-'] { // animals
fill: $primary;
}
[id^='svg-card-'] use{ // all cards
fill: $primary;
}
[id^='svg-card-']:nth-child(even) use { // even cards
fill: $white;$blue;
}
/*
main content svg
note: remove the colour selectors if we want to use the same colour as main
*/
.homepage-main-content svg {
max-height: 150px;
max-width: 150px;
[id^='svg-card-'] { // animals
fill: #878787;
}
[id^='svg-card-'] use{ // all cards
fill: #b5b5b5;
}
[id^='svg-card-']:nth-child(even) use { // even cards
fill: $white;
}
}
/* Image shadows */
.drop-image-shadow-lg img {
box-shadow: $box-shadow-lg !important;
}
//floatingCards
@keyframes floatLikeCloud {
0% {
// box-shadow: 0 5px 15px 0px rgba(0,0,0,0.6);
transform: translatey(0px);
}
50% {
// box-shadow: 0 25px 15px 0px rgba(0,0,0,0.2);
transform: translatey(-20px);
}
100% {
// box-shadow: 0 5px 15px 0px rgba(0,0,0,0.6);
transform: translatey(0px);
}
}
.floatingCard {
width: 150px;
height: 150px;
box-sizing: border-box;
overflow: hidden;
transform: translatey(0px);
animation: floatLikeCloud 6s ease-in-out infinite;
img { width: 100%; height: auto; }
}