blob: 591052a3b2c50307b4013415e814d39eb1b91d95 [file] [log] [blame]
html {
scroll-behavior: smooth;
position: relative;
min-height: 100%;
}
body {
margin: 0;
margin-bottom: 350px;
font-family: $font-style;
}
@media (max-width: 576px) {
body {margin-bottom: 600px;}
}
h1, h2, h3, h4 {
font-weight: 600;
color: $heading-font-color;
font-family: $heading-font;
line-height: 1.5;
}
h1.title {
text-align: center;
// color: $main;
text-transform: uppercase;
}
a, a:hover {
color: $main;
}
/**** CODE BLOCK ****/
pre code {
color: white !important;
background-color: black;
// border: 2px solid grey;
display: block;
padding: 20px;
overflow-x: scroll;
}
/**** NAVBAR ****/
.navbar {
.navbar-brand {
padding: 0 !important;
}
}
ul.navbar-nav li.dropdown:hover > div.dropdown-menu {
display: block;
}
/**** BUTTONS ****/
.btn-outline-primary {
border-color: $main;
color: $main;
border-width: 2px;
border-radius: 5px;
}
.btn-outline-primary:hover,
.btn-outline-primary:active,
.btn-outline-primary:visited,
.btn-outline-primary:focus {
background-color: $main;
border-color: $main;
cursor: pointer;
}
.btn-primary {
color: white !important;
background-color: $main;
border: none;
transition: 0.5s;
}
.btn-primary:hover,
.btn-primary:active,
// .btn-primary:visited,
.btn-primary:focus {
background-color: #006a7c;
border-color: #006a7c;
}
/**** SIDEBAR ****/
.sidenav-top {
width: $sidenav-width;
height: 130px;
background-color: $base;
position: fixed;
top: 0px;
text-align: center;
div.search {
margin-top: 20px;
input {
width: 88%;
padding: 3px;
padding-right: 25px;
}
button {
color: $main;
background-color: transparent;
border: none;
cursor: pointer;
padding: 0px;
position: absolute;
right: 10px;
margin: 3px 10px;
}
}
div.sidenav-brand {
height: 71px;
padding-top: 8px;
padding-bottom: 8px;
padding-left: 16px;
text-align: left;
}
}
.sidenav {
height: calc(100vh - 130px);
top: 130px;
width: $sidenav-width;
position: fixed;
// z-index: -1;
left: 0;
background-color: $base;
overflow-x: hidden;
padding-bottom: 25px;
a {
text-decoration: none;
color: $main;
display: block;
}
a.item {
// top right bottom left
padding: 10px 8px 5px 15px;
font-size: large;
font-weight: 600;
}
a.subitem {
padding: 4px 8px 5px 30px;
font-size: normal;
}
a.active {
font-weight: 600;
}
}
div#doc-container {
margin-left: $sidenav-width;
padding: 30px 35px;
width: auto;
div.edit {
text-align: right;
}
img {width:80%;}
}
div.navbuttons {
// margin: 0 50px;
text-align: center;
button {
margin: 10px;
}
}
/**** HEADER ****/
header {
min-height: 350px;
background-color: $base;
text-align: center;
align-items: center;
box-shadow: 0 0 8px 0 rgba(0,0,0,0.2);
a {
text-decoration: underline;
}
h1 {padding-top: 20px;}
p {
padding: 12px;
color: $main;
font-size: large;
width: 60%;
margin: auto;
}
// BUTTONS
.btn-outline-primary {
margin: 10px;
}
.btn-primary {
border: 2px $main solid;
margin: 10px;
}
a:hover {
color: white;
text-decoration: none;
}
}
/**** CARD ****/
div.card {
width: 18rem;
min-height: 320px;
margin: auto;
margin-top: 5rem;
box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
transition: 0.3s;
border-radius: 5px;
div.fav {
margin: -2.8rem auto;
background-color: white;
padding: 0px 18px;
border-radius: 50px;
border: 1px solid lightgrey;
font-size: 70px;
box-shadow: 0 2px 3px 0 rgba(0,0,0,0.2);
// text-align: center;
}
h5.card-title {
text-transform: uppercase;
margin-top: 2.8rem;
color: $main;
font-weight: 600;
font-size: 1.4rem;
}
img {
max-width: 200px;
max-height: 200px;
display: block;
margin: auto;
}
}
div.card:hover {
box-shadow: 0 8px 12px 0 rgba(0,0,0,0.2);
}
div.card-body {
text-align: center;
}
div.toc {
margin-right: 280px;
h1 {
margin-top: 100px;
font-size: 28px;
}
h2 {
font-size: 25px;
}
h3 {
font-size: 22px;
}
}
/**** TABLE OF CONTENTS ****/
ul#markdown-toc {
position: absolute;
right: 20px;
border: 2px grey solid;
border-radius: 15px;
width: 280px;
padding: 5px 12px;
line-height: 30px;
list-style-type: none;
li {
list-style-type: none;
border-bottom: 1px grey solid;
ul {
padding-left: 25px !important;
li {border: none;}
}
}
}
@media (max-width: 800px) {
ul#markdown-toc {
position: static;
}
div.toc {
margin-right: 0px;
}
}
/**** SCROLL TO TOP BUTTON ****/
button#myBtn {
display: none;
position: fixed;
bottom: 20px;
right: 30px;
z-index: 99;
font-size: 20px;
border: none;
outline: none;
background-color: lightgrey;
color: white;
cursor: pointer;
padding: 4px 8px;
border-radius: 5px;
transition: 1s;
}
#myBtn:hover {
background-color: $main;
}
/**** SEARCH PAGE ****/
div.search {
text-align: center;
label {
font-size: 24px;
color: $main;
}
input#search-box {
border: none;
border-bottom: 1px solid lightgrey;
outline: none;
margin-left: 8px;
padding: 3px;
padding-left: 10px;
font-size: large;
width: 300px;
}
button {
padding: 4px 8px;
margin-left: 10px;
font-size: normal;
}
}
ul#search-results {
list-style-type: none;
a {
text-decoration-color: black;
}
}
/**** BLOG FORMATTING ****/
div.post {
img {width: 80%;}
iframe {width: 100%;}
}
div.blog img{
display: none;
}
div#posts {
margin-right: 180px;
}
div#contribute {
position:fixed;
right: 30px;
// border: 2px $base solid;
// border-radius: 15px;
width: 180px;
// padding: 5px 12px;
// background-color: $base;
h5 {font-weight: 400;}
hr {margin-top: 8px;}
}
@media (max-width: 800px) {
div#contribute {
position: static;
}
div.toc {
margin-right: 0px;
}
}
/**** FOOTER ****/
footer {
min-height: 250px;
width: 100%;
// margin-top: 100px;
padding-top: 40px;
position: absolute;
bottom: 0;
background-color: $base;
box-shadow: 0 0 5px 0 rgba(0,0,0,0.2);
color: grey;
p {
line-height: 15px;
}
}
@media (max-width: 576px) {
body {margin-bottom: 575}
}
/***** SPECIAL THINGS ****/
div.sponsor-ask {
text-align: center;
font-size: larger;
margin-top: 2rem;
}