/* Theme Name: Sahithyen’s Blog Theme URI: blog.sahithyen.com Author: Sahithyen (sahtihyen@me.com) Author URI: sahithyen.com Description: A minimalistic theme for Sahithyen’s Blog Version: 1.0 Tags: black, blue, light, one-column */
/**
* * Imports *
**/ @import “skeleton”; @import “variables”;
/**
* * Main *
**/
// Typography body {
font-family: $body-font; font-size: $font-size; line-height: $line-height; color: $content-color;
} @each $heading, $size in $heading-sizes {
#{$heading} { font-family: $heading-font; font-size: $size; }
}
a {
color: $active-color; text-decoration: none;
}
a:hover {
color: $primary-color;
}
.dropcap {
color: $primary-color; margin-right: 0.05em;
}
/* General */ $top-bar-height: $top-bar-padding-top + ($font-size * $line-height) + $top-bar-padding-bottom + $top-bar-border-size + $search-input-border-size;
body {
padding-top: $top-bar-height + $top-bar-margin-bottom;
}
.wrapper {
min-height: 100%; position: relative;
}
.container {
max-width: $container-width; padding-bottom: 90px;
}
/* Loader */
.ball-scale-multiple, .loader {
width: $loader-text-width; height: $loader-animation-size + $loader-text-margin-top + ($font-size * $line-height);
}
.loader {
font-family: $active-font; margin: $loader-margin-top auto $loader-margin-bottom;
}
.ball-scale-multiple {
position: relative;
}
.ball-scale-multiple > div.ball {
background-color: $loader-animation-color; border-radius: 100%; animation-fill-mode: both; position: absolute; top: 0; left: ($loader-text-width / 2) - ($loader-animation-size / 2); opacity: 0; margin: 0; width: $loader-animation-size; height: $loader-animation-size; animation: ball-scale-multiple 1s 0s linear infinite;
}
.ball-scale-multiple > div.ball:nth-child(2) {
animation-delay: -0.4s;
}
.ball-scale-multiple > div.ball:nth-child(3) {
animation-delay: -0.2s;
}
.ball-scale-multiple > div.text {
position: absolute; top: $loader-animation-size + $loader-text-margin-top; left: 0; width: $loader-text-width; text-align: center;
} @keyframes ball-scale-multiple {
0% { transform: scale(0); opacity: 0; } 5% { opacity: 1; } 100% { transform: scale(1); opacity: 0; }
}
/* Top bar */
.top-bar {
font-family: $active-font; position: fixed; top: 0; left: 0; right: 0; background-color: $top-bar-color; z-index: 1000;
}
.top-bar-inner {
padding: $top-bar-padding-top $top-bar-padding-sides $top-bar-padding-bottom; margin: 0 $top-bar-margin-sides; border-bottom: $top-bar-border-size solid $top-bar-border-color;
}
.top-bar .item:first-child {
margin-left: 0;
}
.top-bar .item {
margin-left: $top-bar-item-margin;
}
.top-bar form {
margin: 0; padding: 0;
}
.top-bar input {
margin: 0; height: $font-size * $line-height; padding: 0; border: none; border-bottom: $search-input-border-size solid $active-color; border-radius: 0;
}
.top-bar input:focus {
border: none; border-bottom: $search-input-border-size solid $primary-color;
}
/* Articles */
.content-wrapper {
position: relative;
}
.content-info .category {
font-weight: bold;
} @media screen and (min-width: $content-info-left-min-size) {
.content-info { display: inline-block; position: absolute; left: -($content-info-width + $content-info-margin); width: $content-info-width; text-align: right; }
}
/* Archive */
.archive-entry-wrapper {
position: relative; min-height: 2 * $font-size * $line-height; margin-bottom: 25px;
}
.archive-info .category {
font-weight: bold;
} @media screen and (min-width: $content-info-left-min-size) {
.archive-info { display: inline-block; position: absolute; left: -($content-info-width + $content-info-margin); width: $content-info-width; text-align: right; }
}
/* Footer */
footer {
position: absolute; bottom: 0; left: 0; right: 0;
}
.footer-bar {
background-color: $footer-bar-color;
}
.footer-bar-inner {
margin: 0 $footer-bar-margin-sides; padding: $footer-bar-padding-top $footer-bar-padding-sides $footer-bar-padding-bottom; border-top: $footer-bar-border-size solid $footer-bar-border-color;
}