@import 'utils'; @import 'design';
@mixin nav($navSize) {
.nav { @include width-fit-content('min-width'); width: 25%; &-button { @include transition('border .25s ease-in-out'); padding: 12px 25px; border: 1px solid transparent; text-decoration: none; display: block; font-size: 21px; &-wrapper { display: inline-flex; width: calc(100%/#{$navSize} - 3px); justify-content: center; } &:visited, &:active { color: $reality-black; } &:hover { color: $reality-blue; } &.active { border: 1px solid $reality-black; } } }
}
// TODO: Make this dynamic with # of sections @include nav(3);
// Element Defaults html {
background-color: white; /* Hide scrollbar for IE and Edge */ -ms-overflow-style: none; /* Hide scrollbar for Firefox */ scrollbar-width: none; /* Firefox 64 */ /* Hide scrollbar for Chrome, Safari and Opera */ &::-webkit-scrollbar { display: none; }
}
h1 {
font-weight: normal; font-size: 36px
}
p, ul {
margin: 0
}
a {
color: $reality-black; text-decoration: none; &:hover { color: $reality-blue; }
}
.about p {
margin-left: 15px;
}
.container {
padding: 20px 15px; margin-right: auto; margin-left: auto;
}
.main {
@include transition('top .5s ease-in-out'); font-family: 'Quicksand', sans-serif; position: relative;
}
.content {
@include transition('height .5s ease-in-out, padding .5s ease-in-out'); padding: 0 10px; height: 0; width: 60%; margin: 0 auto; font-size: 18px; &-block { @include transition('height .5s ease-in-out, opacity .3s ease-in-out'); opacity: 0; position: relative; padding: 0 10px; &.hidden { display: none; visibility: hidden; } }
}
.name {
text-align: center; margin: 0; a:hover { color: $reality-black; }
}
a.home:hover {
color: $reality-blue;
}
.post {
padding-bottom: 40px; &-title { margin: 0; } &-list { list-style-type: none; padding: 20px 35px; } &.archive { padding-bottom: 20px; } &-meta { clear: both; .right-align { float: right; } } &-content { padding: 30px 0; p { padding: 10px 20px; } ul { padding: 10px 55px; } li { padding: 5px 0; } a { color: $reality-blue-dark; font-weight: bold; &:hover { color: $reality-blue; } } }
}