// bootstrap @import url(maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css); // google fonts @import url('fonts.googleapis.com/css2?family=Raleway:wght@400;600&display=swap'); @import url('fonts.googleapis.com/css2?family=Roboto&display=swap'); // social media buttons @import url('cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css');
$xs-breakpoint: 480px; $sm-breakpoint: 768px;
/***** FONTS *****/ $font-size-base: 1.6rem; $font-size-jumbo: 4.2rem; $icon-size: 4.2rem; $icon-width: 4.2rem;
$font-family: 'Raleway', sans-serif; $font-family-secondary: 'Roboto', sans-serif;
/***** COLORS *****/ $background-color: ffffff; $background-color-dark: #0e171c; $text-color: #000000; $text-color-dark: ffffff; $text-accent-color: {{ site.accent_color | default: â#0070c0â }}; $text-accent-color-dark: {{ site.accent_color_dark | default: â#039cfdâ }};
/***** MARKDOWN INJECTABLE CLASSES *****/ .accent-color { // usage: {: .accent-color}
color: $text-accent-color; a { color:inherit }
}
.jumbo-font { // usage: {: .jumbo-font}
font-size: $font-size-jumbo;
}
.secondary-font { // usage: {: .secondary-font}
font-family: $font-family-secondary;
}
/***** MARKDOWN STYLE OVERRIDES *****/ h1, h2, h3, h4, h5, h6 {
margin-top: 0.2em; margin-bottom: 0.2em; line-height: 1.2em;
}
p {
font-size: $font-size-base; margin-top: 0.2em; margin-bottom: 0.2em;
}
ul, ol {
margin-top: 0.2em; margin-bottom: 0.2em; padding: 0;
}
li {
font-size: $font-size-base; margin-bottom: 0.2em;
}
a:hover {
text-decoration: none; opacity: 0.85;
}
img {
margin-top: 0.4em; margin-bottom: 0.4em; width: 32rem; max-width: 100%; max-height: 100%;
}
table {
table-layout: fixed; width: 100%;
}
td, th {
font-size: $font-size-base; margin-top: 0.2em; margin-bottom: 0.2em; padding: 0.4em 0;
}
/***** PAGE STYLING *****/ html {
height: 100%; scroll-behavior: smooth;
}
body {
display: flex; flex-direction: column; max-width: 100rem; min-height: 100%; margin: auto; padding: 7rem 10rem; // top-bottom left-right background-color: $background-color; color: $text-color; font-family: $font-family; font-size: $font-size-base;
}
nav {
text-align: right; .nav-item { color: inherit; font-weight: bold; margin: 0.4rem; } .nav-item:hover { color: $text-accent-color; text-decoration: none; }
}
main {
flex-grow: 1; .intro { padding: 10em 1rem; } .section { padding-bottom: 4rem; .section-title { padding: 1rem; } .section-content { padding: 1rem; padding-bottom: 2rem; } }
}
footer {
align-self: end; width: 100%; text-align: right;
}
.fa {
color: inherit; margin: 0.6em; margin-left: 0; font-size: $icon-size; width: $icon-width; text-align: center; text-decoration: none;
}
.fa:hover {
color: $text-accent-color; text-decoration: none;
}
/***** DARK MODE *****/ .dark-mode {
background-color: $background-color-dark; color: $text-color-dark; .accent-color { color: $text-accent-color-dark; } .fa:hover { color: $text-accent-color-dark; } .nav-item:hover { color: $text-accent-color-dark; }
}
/***** PAGE STYLING (MOBILE) *****/ @media only screen and (max-width : $xs-breakpoint) {
body { padding: 7rem 2rem; } .nav-bar { .nav-item { display: block; margin: 1em 0em; } }
}