@import url(fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,400,300,700); @import url(fonts.googleapis.com/css?family=Montserrat); @import url(fonts.googleapis.com/css?family=Anonymous+Pro:400,700);
/* Colours */ $twitter: #6dabda; $linkedin: #2b77b1; $xing: #006567; $google-plus: c95644; $facebook: #365899; $github: f6c2a4; $stack-overflow: c98b3b; $instagram: cd486b; $reddit: cee3f8; $rss: eea33a;
$darker: #21211E; $dark: #2D2D29; $medium: #3B3B35; $light-medium: #969696; $dark-blue: #215A6D; $light-blue: #3CA2A2; $green: #92C7A3; $light: #DFECE6; $white: #FFFFFF; $dark-purple: #300030; $medium-purple: #480048; $regular-purple: #601848; $red: #C04848; $orange: #F07241;
/* Responsive sizes */ $screen-sm-min: 768px; $screen-md-min: 992px; $screen-lg-min: 1200px;
/* Globals */
html {
height: 100%; overflow-x: hidden;
}
body {
font-family: 'Open Sans', sans-serif; font-weight: 300; background-color: $dark; color: $white; font-size: 16px; height: 100%; width: 100%
}
a, a:active {
color: $light-blue; text-decoration: none;
}
a:hover {
color: $dark-blue; text-decoration: none;
}
ul {
list-style-type: none;
}
.navbar, .nav {
background-color: $dark-blue; .navbar-toggle { margin-top: 10px; padding-top: 0px; padding-bottom: 20px; } li { a, a:active { color: $white; } a:hover { color: $dark-blue; text-decoration: none; } }
}
.clearfix:after {
content: " "; display: block; height: 0; clear: both;
}
.header {
font-size: 32px; text-align: center; margin-top: 20px; margin-left: -0%; width: 100%; @media (min-width: $screen-sm-min) { font-size: 62px; margin-left: -10%; width: 120%; }
}
.menu-button {
color: $white; font-size: 24px; position: fixed; top: 10px; left: 20px; cursor: pointer; line-height: 1em; padding: 10px; background-color: $dark; z-index: 100; @media (min-width: $screen-sm-min) { top: 20px; left: 40px; }
}
.content-panel {
background-color: $medium; padding-top: 20px; padding-bottom: 20px; padding-left: 30px; padding-right: 30px; margin-top: 20px; box-shadow: 0px 0px 0px 0px, 0px 6px 12px rgba(0, 0, 0, 0.2); border-bottom: 5px solid $light-blue;
}
my-menu {
p { margin-bottom: 5px; } a, a:active { color: $white; } a:hover { color: $light-blue; } .pages { .fa { margin-right: 10px; } }
}
.links {
margin-top: 50px; text-align: center; i { padding-left: 5px; padding-right: 5px; @media (min-width: $screen-sm-min) { padding-left: 10px; padding-right: 10px; } } .fa { -webkit-transition: 0.3s; -moz-transition: 0.3s; transition: 0.3s; } .fa-twitter:hover { color: $twitter; } .fa-linkedin:hover { color: $linkedin; } .fa-xing:hover { color: $xing; } .fa-google-plus:hover { color: $google-plus; } .fa-facebook:hover { color: $facebook; } .fa-github-alt:hover { color: $github; } .fa-stack-overflow:hover { color: $stack-overflow; } .fa-instagram:hover { color: $instagram; } .fa-reddit-alien:hover { color: $reddit; } .fa-rss:hover { color: $rss; }
}
/* Index */
.index {
height: 100%; max-height: 100%; width: 100%; padding: 0px; @media (min-width: $screen-sm-min) { width: 700px; max-width:700px; } .header { margin-top: 10px; margin-left: 0%; margin-bottom: 0px; font-size: 32px; width: 100%; @media (min-width: $screen-lg-min) { margin-left: -10%; width: 120%; } } .categories { font-size: 22px; } .content-panel:nth-of-type(1) { border-bottom: 10px solid $light-blue; } .author-header { font-family: 'Montserrat', sans-serif; color: $light-blue; margin-top: 0px; padding-top: 15px; font-size: 30px; @media (min-width: $screen-sm-min) { font-size: 52px; margin-top: 0px; } @media (min-width: $screen-md-min) { font-size: 60px; margin-top: -20px; } } .row { height: 100%; max-height: 100%; margin-top: 60px; margin-left: 0px; margin-right: 0px; } .gravatar { width: 100%; margin-top: -80px; text-align: center; } .author-text { text-align: center; margin-top: 30px; b { font-size: 32px; } } .links { font-size: 2em; } .articles { text-align: center; font-size: 20px; h2 { margin-bottom: 30px; color: $light-blue; font-size: 26px; } ul { padding: 0px; li { margin-bottom: 20px; font-size: 24px; a:hover { color: $light-medium; } small { font-size: 14px; margin-top: -10px; padding-top: 0px; color: $light-medium; } } li:nth-last-of-type(1) { small { font-size: 16px; } } } a, a:active { color: $white; white-space: nowrap; } a:hover { color: $light-blue; } } .copyright { margin-top: 50px; text-align: center; } .links { a, a:active { color: #FFFFFF; } } .menu { margin-top: 250px; margin-bottom: 20px; font-size: 20px; position: absolute; bottom: 0px; a, a:active { color: #FFFFFF; } a:hover { color: $light-blue; } ul { margin-bottom: 30px; padding-left: 10px; ul { padding-left: 50px; list-style: none; margin-left: 0; text-indent: -0.6em; } } }
}
.all-posts {
margin-left: 0px; margin-right: 0px; @media (min-width: $screen-sm-min) { #search-container { padding-top: 75px; padding-bottom: 150px; } } @media (min-width: $screen-md-min) { margin-left: -15px; margin-right: -15px; #search-container { padding-bottom: 300px; } } #search-input { position:relative; width: 100%; padding:6px 15px 6px 30px; margin: 2px; margin-top: 50px; color:$dark; background-color:$white; border:1px solid #adc5cf; border-radius:15px; -moz-border-radius:15px; -webkit-border-radius:15px; } #search-input:focus { border: none; } .content-panel { padding-left: 10px; padding-right: 10px; @media (min-width: $screen-md-min) { padding-left: 30px; padding-right: 30px; } }
}
.single {
height:100%; max-height: 100%; h1, h2, h3, h4, h5, h6 { font-family: 'Montserrat', sans-serif; margin-bottom: 10px; } h2 { font-size: 36px; } h3 { font-size: 28px; } p { margin-bottom: 10px; @media (min-width: $screen-sm-min) { margin-bottom: 40px; } } .menu { background-color: $dark-blue; a, a:active { color: $white; } a:hover { color: $light-blue; } h4 { margin-top: 20px; } .share { margin-top: 20px; h4 { margin-bottom: 10px; } } .home { margin-top: 10px; font-size: 16px; a { color: $white; } } .related { ul { padding: 0px; } li { margin-bottom: 10px; } } } .article { width: 100%; margin-left: 0%; padding: 0px; @media (min-width: $screen-sm-min) { width: 90%; margin-left: 5%; } @media (min-width: $screen-md-min) { width: 70%; margin-left: 15%; } @media (min-width: $screen-lg-min) { width: 50%; margin-left: 25%; } .thumb { margin-top: 20px; margin-bottom: 0px; text-align: center; img { height: 50px; @media (min-width: $screen-sm-min) { height: 70px; } } } .author { font-size: 20px; text-align: center; margin-bottom: 0px; } .read-time { font-size: 16px; text-align: center; margin-bottom: 10px; font-weight: 400; @media (min-width: $screen-sm-min) { margin-bottom: 40px; } } .content { font-size: 18px; line-height: 170%; padding-left: 15px; padding-right: 15px; padding-top: 10px; padding-bottom: 10px; @media (min-width: $screen-sm-min) { font-size: 24px; padding-left: 30px; padding-right: 30px; padding-top: 40px; padding-bottom: 20px; } .series { margin-bottom: 50px; } img { max-width: 100%; padding: 10px; display: block; margin-left: auto; margin-right: auto } ul { list-style-type: disc; } ol { list-style-type: decimal; } blockquote { position: relative; width: 100%; margin-left: -15px; padding-right: 10px; background-color: $darker; color: white; box-sizing: content-box; border: none; font-size: 28px; @media (min-width: $screen-sm-min) { margin-left: -30px; padding-left: 45px; padding-right: 15px; } p { margin: 0; padding: 15px; z-index: 0; } :before { font-family: "Times New Roman"; color: $light-medium; content: "“"; position: absolute; top: 15px; left: 15px; font-size: 65px; font-weight: bold; } } .alignright { float: right; } .aligncenter { display: block; margin: 5px auto 5px auto; } figure.highlight, div.highlighter-rouge { width: 100%; margin-left: -15px; padding-right: 10px; box-sizing: content-box; @media (min-width: $screen-sm-min) { margin-left: -30px; padding-right: 60px; } pre { width: 100%; font-family: 'Anonymous Pro'; background-color: $darker; color: $white; font-size: 12px; border: none; padding-left: 15px; padding-top: 20px; padding-bottom: 20px; padding-right: 15px; box-sizing: content-box; border-radius: 0; margin-bottom: 10px; margin-top: 10px; @media (min-width: $screen-sm-min) { padding-left: 50px; padding-right: 10px; margin-bottom: 40px; font-size: 15px; } } } p, ul, ol { code { font-family: 'Anonymous Pro'; font-size: 15px; background-color: $darker; color: $white; padding: 0.5em; vertical-align: middle; } } .tags { margin-top: 10px; margin-bottom: 10px; text-align: center; a, a:active { color: $white; } a:hover { color: $light-blue; } } .share { margin-top: 20px; margin-bottom: 10px; text-align: center; } } .feedback { text-align: center; .fa-heart { color: $red; } } .comments { } }
}
.related {
margin-top: 50px; text-align: center; .related-header { margin-top: -30px; margin-bottom: 20px; a { color: $white; font-size: 18px; width: auto; padding: 10px 20px; background-color: $darker; box-shadow: 0px 0px 0px 0px, 0px 6px 12px rgba(0, 0, 0, 0.2); } a:hover { color: $dark-blue; } } .title { padding-top:20px; font-size: 24px; margin-bottom: 20px; @media (min-width: $screen-sm-min) { font-size: 36px; } a { color: $white; } a:hover { color: $light; } } p { margin-bottom: 0px; } .previous-next { width: 50%; a { color: $white; } a:hover { color: $light; } } .next { float: right; text-align: right; } .previous { float: left; text-align: left; } .date { color: $light-medium; }
}
.search-hr {
width: 700px; border-color: $light-medium;
}
.error {
.error-text { margin-top: 30px; a { color: $light-blue; } } .links { font-size: 1em; }
}
.footer {
width: 100%; margin-left: 0%; .fa-heart { color: $red; } @media (min-width: $screen-sm-min) { width: 90%; margin-left: 5%; } @media (min-width: $screen-md-min) { width: 80%; margin-left: 10%; } @media (min-width: $screen-lg-min) { width: 70%; margin-left: 15%; } div { color: $light-medium; text-align: center; margin-top: 20px; margin-bottom: 20px; }
}
.btn-categories {
background-color: $light-blue; border-color: $light-blue; color: $white; &:hover { background-color: $dark-blue; border-color: $dark-blue; color: $white; } &:active { background-color: $dark-blue; border-color: $dark-blue; color: $white; } &:focus { background-color: $dark-blue; border-color: $dark-blue; color: $white; }
}
.dropdown-menu {
background-color: $light-blue; color: $white; > li > a { background-color: $light-blue; color: $white; &:hover { background-color: $dark-blue; color: $white; } }
}
table{
margin: 0 auto; border-collapse: collapse; border-spacing: 0; border:2px solid $darker;;
}
th{
padding: 2px; border:2px solid $darker;;
}
td{
padding: 2px; border:1px solid $dark-blue;;
}