@mixin font-size($size) {
font-size: $size; font-size: calculateRem($size);
} @mixin transition($argsā¦) {
-webkit-transition: $args; -moz-transition: $args; -ms-transition: $args; -o-transition: $args; transition: $args;
}
//******************************************************** // Variables //********************************************************
// Several accent colors, choose one or create your own! $accent-color: #3CA2A2; // original =) //$accent-color: #C38FD6; // velvet //$accent-color: #8FD6B3; // greenish //$accent-color: #35B4DE; // bluish //$accent-color: #D2E354; // yellowish //$accent-color: #52B54B; // green
$font-color: dddddd; $background-color: #292929; $post-panel-color: #444; $footer-background-color: #292c2f; $note-color: #87CEFA; $warning-color: ffff00; // use this or pick any from /css/pics/background folder or from transparenttextures.com $background-pattern: 'random-grey-variations.png';
//******************************************************** // Common styles //******************************************************** body {
padding-top: 80px; color: $font-color; background: $background-color url(pics/background/#{$background-pattern});
} .well {
background-color: $post-panel-color; box-shadow: 0 0 0 0, 0px 8px 16px rgba(0, 0, 0, 0.2); border: 0; border-radius: 6px;
} .main-page {
width: 75%;
}
h1 { font-size: 2em; } h2 { font-size: 1.5em; } h3 { font-size: 1.17em; } h4 { font-size: 1.12em; } h5 { font-size: .83em; } h6 { font-size: .75em; }
img {
display: inline-block; margin: 0 auto; max-width: 100%; max-height: 100%;
}
img + em {
display: block; margin-left: auto; margin-right: auto; text-align: center;
}
blockquote {
color: #bbb; font-size: 1em;
}
a {
color: $accent-color;
}
//******************************************************** // Social Links //******************************************************** ul.social-media {
text-align: center; padding: 0 0 10px 0; li { display: inline-block; } li > a { width: 45px; height: 45px; @include transition(color 0.2s); display: inline-block; color: white; &:hover { color: $accent-color; } }
}
//******************************************************** // Share //******************************************************** .share-bar{
text-align: right;
}
ul.share-buttons {
list-style: none; padding: 0; li { display: inline-block; .fa-facebook, .fa-twitter, .fa-google-plus, .fa-linkedin, .fa-envelope-o, .fa-pinterest { color: #ffffff } a { text-decoration: none; } -webkit-transition: -webkit-transform .4s; -moz-transition: -moz-transform .4s; -ms-transition: -ms-transform .4s; -o-transition: -o-transform .4s; transition: transform .4s; } // Square frame li.share-facebook .fa-square-o { color: #3B5998;} li.share-twitter .fa-square-o { color: #55acee;} li.share-google-plus .fa-square-o { color: #dd4b39;} li.share-linkedin .fa-square-o { color: #4875B4;} li.share-pinterest .fa-square-o { color: #BD081C;} li.share-envelope .fa-square-o { color: #3B5998;} // Circle frame li.share-facebook .fa-circle-thin { color: #3B5998;} li.share-twitter .fa-circle-thin { color: #55acee;} li.share-google-plus .fa-circle-thin { color: #dd4b39;} li.share-linkedin .fa-circle-thin { color: #4875B4;} li.share-pinterest .fa-circle-thin { color: #BD081C;} li.share-envelope .fa-circle-thin { color: #3B5998;} li:hover { -webkit-transform: scale(1.3,1.3); -moz-transform: scale(1.3,1.3); -ms-transform: scale(1.3,1.3); -o-transform: scale(1.3,1.3); transform: scale(1.3,1.3); }
}
//******************************************************** // Sidebar //******************************************************** .sidebar li {
margin-top: .7em; line-height: 1em;
} ul.sideBarTags {
list-style: none; li:before { content: '\f02b'; font-family: 'FontAwesome'; float: left; margin-left: -1.5em; }
}
//******************************************************** // Post //******************************************************** h2.post-title {
padding-top: 10px; text-align: left;
} div.post-meta {
border-width: 1px 0; border-color: #666666; border-style: solid; margin: 0 0 20px; ul { display: inline; padding-left: 0; float: right; } ul > li { display: inline; padding: 0 0 5px 20px; } .post-time { display: inline; }
} .post-footer {
height: 40px; display: table; width: 100%; position: relative; margin-top: 32px; text-align: center;
}
//******************************************************** // Note / Warning //******************************************************** .note {
position:relative; border: 0; padding-left: 30px;
} .note:before {
content: "\f06a"; font-size: 2em; font-family: FontAwesome; left: 0px; position:absolute; top: 0; color: $note-color;
} .warning:before {
content: "\f071"; color: $warning-color;
}
//******************************************************** // Header //******************************************************** nav a {
padding-top: 20px !important; padding-bottom: 20px !important; @include transition(color 0.31s); font-size: 18px; font-family: Ubuntu; -webkit-transition: all 0.7s ease; transition: all 0.7s ease;
} nav.navbar {
-webkit-transition: all 0.7s ease; transition: all 0.7s ease;
} nav.navbar.shrink {
min-height: 15px;
} .navbar-brand {
font-size: 30px; color: $accent-color;
} nav.shrink a {
padding-top: 10px !important; padding-bottom: 10px !important; font-size: 15px;
} nav.shrink .navbar-brand {
font-size: 25px; height: inherit;
} .navbar .navbar-nav {
display: inline-block; float: right;
} nav .navbar-toggle {
margin: 13px 15px 13px 0;
} nav.shrink .navbar-toggle {
padding: 4px 5px; margin: 8px 15px 8px 0;
}
//******************************************************** // Footer //******************************************************** .footer {
text-align: center;
}
.footer-distributed {
background-color: $footer-background-color; font: normal 16px sans-serif; padding: 20px 25px; margin-top: 80px; text-align: center; bottom: 0; left: 0; width: 100%; position: absolute;
}
//******************************************************** // Table of content (work in progress) //******************************************************** .toc {
background-color: #2c2c2c; margin-left: -19px; margin-right: -19px;
}
.box h3{
text-align:center; position:relative; top:80px;
} .box {
width:70%; height:200px; background:#FFF; margin:40px auto;
} .wrapper{
min-height: 100%; position: relative;
} .content{
padding-bottom: 250px;
}
//******************************************************** // Custom classes to apply to block elements, // more info: pavelmakhov.com/2015/12/images-in-jekyll //******************************************************** .key {
font-size: 1.0em; box-shadow: 1px 0 1px 0 #555, 0 1px 0 2px #888, 0 2px 0 2px #777; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; margin: 2px 3px; padding: 0px 5px;
} .center-image {
margin: 0 auto; display: block;
} .filename{
padding: 0px; margin: 0px; background-color: #292929; color: lightgrey; border-top-left-radius: 3px; border-top-right-radius: 3px; margin-bottom: 0px; padding-left: 1em; font-family: Menlo,Monaco,Consolas,"Courier New",monospace; border-left: 0px; bottom: -2px; position: relative; padding-bottom: 2px;
}
//********************************************************
@media (min-width: 1000px) {
.twoRow .navbar-collapse { clear: left; } .footer-distributed .footer { text-align: center; } .footer-distributed .footer { float: none; margin: 0 auto 20px; } .footer-distributed .footer { line-height: 1.8; }
}