| html { |
| scroll-behavior: smooth; |
| } |
| body { |
| margin: 0; |
| // color: $font-color; |
| font-family: $font-style; |
| // font-size: 1.1em; |
| // line-height: 1.6; |
| // -webkit-font-smoothing: antialiased; |
| } |
| h1, h2, h3, h4 { |
| font-weight: 600; |
| color: $heading-font-color; |
| font-family: $heading-font; |
| line-height: 1.5; |
| } |
| // h1 { |
| // color: $main; |
| // text-transform: uppercase; |
| // a, |
| // a:visited { |
| // text-decoration: none; |
| // color: $main; |
| // } |
| // } |
| // h2 { |
| // font-size: 2em; |
| // } |
| // a, |
| // a:visited { |
| // color: $link-color; |
| // text-decoration: underline; |
| // font-weight: bold; |
| // } |
| // a:hover { |
| // color: $link-hover-color; |
| // text-decoration: underline; |
| // } |
| // header { |
| // background: $header; |
| // padding: 0px 15px; |
| // text-align: center; |
| // margin: 50px 0 0; |
| // height: 50vh; |
| // display: flex; |
| // justify-content: center; |
| // align-items: center; |
| // } |
| // main { |
| // padding: 0 15px; |
| // max-width: $content-width; |
| // margin: 0 auto; |
| // } |
| // time { |
| // color: #898989; |
| // } |
| // .container { |
| // max-width: $content-width; |
| // margin: 0 auto; |
| // } |
| |
| h1.title { |
| text-align: center; |
| // color: $main; |
| text-transform: uppercase; |
| // font-weight: 800; |
| } |
| |
| a, |
| a:visited { |
| text-decoration: none; |
| 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 { |
| z-index: 1; |
| } |
| |
| ul.navbar-nav li.dropdown:hover > div.dropdown-menu { |
| display: block; |
| } |
| |
| |
| // SIDEBAR |
| .sidenav { |
| height: 100%; |
| width: 200px; |
| position: fixed; |
| // z-index: -1; |
| top: 20; |
| left: 0; |
| background-color: $base; |
| overflow-x: hidden; |
| padding-top: 20px; |
| 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: 210px; |
| padding-top: 30px; |
| width: auto; |
| } |
| |
| |
| // BUTTONS |
| .btn-outline-primary { |
| border-color: $main; |
| color: $main; |
| border-width: 2px; |
| } |
| .btn-outline-primary:hover, |
| .btn-outline-primary:active, |
| .btn-outline-primary:visited, |
| .btn-outline-primary:focus { |
| background-color: $main; |
| border-color: $main; |
| } |
| .btn-primary { |
| color: white !important; |
| background-color: $main; |
| border: none; |
| } |
| .btn-primary:hover, |
| .btn-primary:active, |
| // .btn-primary:visited, |
| .btn-primary:focus { |
| background-color: grey; |
| } |
| |
| // HEADER |
| header { |
| height: 350px; |
| background-color: $base; |
| text-align: center; |
| align-items: center; |
| h1 {padding-top: 20px;} |
| p { |
| padding: 12px; |
| color: $main; |
| font-size: large; |
| } |
| // BUTTONS |
| .btn-outline-primary { |
| margin: 10px; |
| } |
| } |
| |
| |
| // CARD |
| div.card { |
| width: 18rem; |
| min-height: 320px; |
| margin: auto; |
| margin-top: 5rem; |
| padding-top: 65px; |
| box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2); |
| transition: 0.3s; |
| border-radius: 5px; |
| |
| div.fav { |
| left: 6rem; |
| top: -2.8rem; |
| position: absolute; |
| 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; |
| color: $main; |
| font-weight: 600; |
| font-size: 1.4rem; |
| } |
| } |
| |
| div.card:hover { |
| box-shadow: 0 8px 12px 0 rgba(0,0,0,0.2); |
| } |
| |
| |
| // TABLE OF CONTENTS |
| ul#markdown-toc { |
| |
| } |
| |
| |
| // SCROLL TO TOP |
| 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; |
| } |
| |
| // /* Aside */ |
| // |
| // aside { |
| // position: fixed; |
| // top: 0; |
| // left: 0; |
| // background: #fff; |
| // width: 100%; |
| // z-index: 2; |
| // border-bottom: 1px solid lighten($light, 30%); |
| // box-shadow: 0px 1px 1px RGBA(4, 25, 54, .1); |
| // nav { |
| // float: left; |
| // max-width: 800px; |
| // margin: 0 auto; |
| // ul { |
| // margin: 0; |
| // padding: 0; |
| // list-style: none; |
| // li { |
| // float: left; |
| // position: relative; |
| // a { |
| // text-decoration: none; |
| // display: block; |
| // padding: 15px; |
| // font-family: 'Muli', sans-serif; |
| // line-height: 20px; |
| // margin-bottom: -1px; |
| // box-shadow: 0; |
| // &:hover, |
| // &:active { |
| // background: $header; |
| // text-decoration: none; |
| // color: $main; |
| // } |
| // } |
| // } |
| // } |
| // &:after { |
| // content: ''; |
| // display: table; |
| // clear: both; |
| // } |
| // } |
| // } |
| // footer { |
| // text-align: center; |
| // padding: 40px; |
| // } |