@import “variables”; @import “navbar”; @import “syntax”; @import “cards”; @import “tags”; @import “author”; @import “post”;
body {
background-color: var(--main-background-color); display: flex; min-height: 100vh; flex-direction: column; .highlighter-rouge { color: #000; }
}
nav {
background-color: var(--main-color);
}
theme-toggle {
&.dark { background-color: #fff; mask: url(../img/icons/sun.svg) no-repeat; -webkit-mask: url(../img/icons/sun.svg) no-repeat; &:hover { background-color: #212121; } } &.light { background-color: #000; mask: url(../img/icons/moon.svg) no-repeat; -webkit-mask: url(../img/icons/moon.svg) no-repeat; &:hover { background-color: #9e9e9e; } } cursor: pointer; right: 30px; top: 75px; position: absolute; display: inline-block; width: 35px; height: 35px; -webkit-mask-size: contain; mask-size: contain; -webkit-mask-position: center; mask-position: center;
}
main {
flex: 1 0 auto;
}
.adjust-index{
z-index:0 !important;
}
p {
line-height: 2.0rem; font-size: 1.25rem; letter-spacing: 0.1rem; font-weight: 300;
}
@media only screen and (max-width : 992px) {
.parallax-container .section { position: absolute; top: 40%; } #index-banner .section { top: 10%; }
}
@media only screen and (max-width : 600px) {
#index-banner .section { top: 0; } .post-title { font-size: 35px; } .author-img { width: 50%; padding-bottom: 5px; } .author-info { text-align: center; } #theme-toggle { top: 12px; z-index: 1000; }
}
@media screen and (max-width : 1250px ){
.blog-posts { width: 75%; } #theme-toggle { z-index: 1; }
}
@media screen and (max-width : 768px ){
.container-main { width: 98%; } .blog-posts { width: 90%; } #top-bar { padding-top: 0px; height: 150px; } #theme-toggle { position: fixed; top: 12px; z-index: 1000; }
}
@media screen and (max-width : 425px ){
#theme-toggle { top: 12px; }
}
footer.page-footer {
margin: 0; padding-top: 0px; background-color: var(--main-color); .footer-copyright { background-color: var(--main-color); } .container { color: var(--ligther-main-color); }
}
html, html {
--text-color: #{$textColor}; --main-color: #{$mainColor}; --card-color: #{$cardColor}; --main-background-color: #{$background}; --light-main-color: #{$lightMainColor}; --ligther-main-color: #{$lighterMainColor}; --main-text-color: #{$textColor}; --secondary-color: #{$secondaryColor};
}
html {
--text-color: #{$darkTextColor}; --main-color: #{$darkMainColor}; --card-color: #{$darkCardColor}; --main-background-color: #{$darkBackground}; --light-main-color: #{$darkLightMainColor}; --ligther-main-color: #{$darkLighterMainColor}; --main-text-color: #{$darkTextColor}; --secondary-color: #{$darkSecondaryColor};
}
@media (prefers-color-scheme: dark) {
html, html[data-theme="dark"] { --text-color: #{$darkTextColor}; --main-color: #{$darkMainColor}; --card-color: #{$darkCardColor}; --main-background-color: #{$darkBackground}; --light-main-color: #{$darkLightMainColor}; --ligther-main-color: #{$darkLighterMainColor}; --main-text-color: #{$darkTextColor}; --secondary-color: #{$darkSecondaryColor}; } html[data-theme="light"] { --text-color: #{$textColor}; --main-color: #{$mainColor}; --card-color: #{$cardColor}; --main-background-color: #{$background}; --light-main-color: #{$lightMainColor}; --ligther-main-color: #{$lighterMainColor}; --main-text-color: #{$textColor}; --secondary-color: #{$secondaryColor}; }
}
html, html *, html *:before, html *:after {
transition: color 1s; transition: background-color 1s;
}