| 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; |
| } |
| } |
| |
| /**** Testing status ****/ |
| div.testing-status { |
| overflow: auto; |
| width: 60%; |
| margin: auto; |
| text-align: center; |
| .testing-title { |
| float: left; |
| padding-top: 1em; |
| } |
| .testing-info { |
| overflow: hidden; |
| ul { |
| list-style: 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; |
| } |
