awesome-wm-widgets/assets/css/style.scss

201 lines
2.5 KiB
SCSS

---
---
.icon-block {
padding: 0 15px;
}
.icon-block .material-icons {
font-size: inherit;
}
.topnav {
background-color: #222222;
border-top: 3px #3CA2A2 solid;
border-bottom: 1px #080808 solid;
.site-header {
padding: 50px 0;
}
}
#header {
font-size: 3em;
font-weight: bold;
a {
text-decoration: none;
color: #ffffff;
}
}
h1 {
font-size: 2em;
font-weight: bold;
}
h2 {
font-size: 1.5em;
}
h3 {
font-size: 1.17em;
}
h4 {
font-size: 1.12em;
}
h5 {
font-size: .83em;
}
h6 {
font-size: .75em;
}
body {
display: flex;
min-height: 100vh;
flex-direction: column;
}
main {
flex: 1 0 auto;
background-color: #393939;
color: white;
}
footer {
padding-top: 0 !important;
padding-bottom: 12px;
}
.sidenav {
background-color: #202020;
color: white;
li > a {
color: #8a9ba1;
}
li > a.subheader {
padding-left: 16px;
}
li {
border-left: 3px solid transparent;
}
li.active {
-moz-transition: border-color .5s ease;
-o-transition: border-color .5s ease;
-webkit-transition: border-color .5s ease;
transition: border-color .5s ease;
border-left: 3px solid teal;
> a {
color: white;
}
}
.sidenav-footer {
li {
line-height: normal;
padding: 4px 32px;
}
}
}
.widget {
transition: all 2s linear;
}
.footer-copyright {
.jekyll-icon {
height: 30px;
}
.materialcss-icon {
height: 22px;
padding: 0 4px;
}
.fa-spotify {
padding: 0 6px;
}
.cprght {
padding-top: 12px;
}
}
main {
}
header, main, footer {
padding-left: 300px;
}
@media only screen and (max-width: 992px) {
header, main, footer {
padding-left: 0;
}
}
#particles-js {
height: 193px;
width: 100%;
position: absolute;
top: 0;
left: 0;
}
.tab.active {
display: block;
}
.fade-in {
opacity: 1;
animation-name: fadeInOpacity;
animation-iteration-count: 1;
animation-timing-function: ease-in;
animation-duration: 0.4s;
}
@keyframes fadeInOpacity {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
// scrollbar
/* width */
::-webkit-scrollbar {
width: 16px;
}
/* Track */
::-webkit-scrollbar-track {
background: #343434;
}
/* Handle */
::-webkit-scrollbar-thumb {
background: #171717;
}
/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
background: #202020;
}
img {
max-width: 100%;
height: auto;
}
@font-face {
font-family: awesomewm-font;
src: url({{ '/assets/fonts/awesomewm-font.ttf' | relative_url }});
}