-
{ &, &:before, &:after {
box-sizing: border-box;
}
}
html, body {
width: 100%; height: 100%;
}
.clearfix {
&:before { content: " "; display: table; } &:after { content: " "; display: table; clear: both; } *zoom: 1;
}
body {
// background-color: $base-background-color; background: rgb(221,211,211); background: linear-gradient(160deg, rgba(221,211,211,1) 0%, rgba(224,224,255,1) 45%, rgba(169,218,228,1) 100%); background-attachment: fixed;
}
footer, article {
margin: 4em auto;
}
hr {
border-top: none; border-bottom: 2px solid lighten($light-gray-color, 7%); width: 100%; margin: $small-spacing 0;
}
article {
background-color: white; box-shadow: 0px 0px 0px 20px white;
}
.container {
padding: $base-spacing; margin-left: auto; margin-right: auto; max-width: 800px; font-weight: normal;
}
.pull-left {
float: left;
}
.pull-right {
float: right;
}
.link {
color: $blue-color; padding-bottom: .05em; border-bottom: 2px solid transparent; transition: border 300ms linear; //@include transition(border 300ms linear); &:hover, &:focus, &:active { border-bottom: 2px solid $blue-color; }
}
header {
text-align: left; padding: 0.6em;
}
header, footer {
text-transform: uppercase;
}
.site-title {
font-size: inherit; padding: 0 2em; background-color: $accent-color; //background: $accent-color ; min-height: 128px; position: relative; p { padding-bottom: 0.5em; }
}
.site-title h1 {
display: inline-block; font-size: 4.85em; background-color: transparent; line-height: 1em; padding: 0.27em 0 0.1em; padding-right: 70px; margin: 0; position: relative; z-index: 1000;
}
.site-title h1:hover, nav a:hover {
transform: scale(1) rotate(0deg) translate(0px, 0px) skew(-15deg, 0deg); font-style: normal;
}
.site-title .site-logo {
width: 120px; top: 0px; right: 0px; position: absolute; z-index: 500;
}
.site-title > span {
color: black; display: inline-block; padding-bottom: 1.5em; text-transform: none;
} .site-title > span:empty {
display: none;
} nav ul {
margin-top: 0.6em;
} nav li {
display: inline-block; background-color: $accent-color; margin-bottom: 0.6em;
} nav a, nav input {
display: inline-block; padding: 0.4em 0.6em; background-color: transparent;
}
.intro {
position: relative; .back { position: absolute; width: 100%; height: 100%; background-color: white; opacity: 50%; filter: blur(4px); z-index: 10; } .author-name { display: inline-block; padding: 0 .2em; background: lighten($light-gray-color, 15%) } a { @extend .link; } .container { padding-bottom: 10px; position: relative; z-index: 100; }
}
.logo {
float: left; margin: 0 0 1em 0; cursor: pointer; letter-spacing: 0.8px; font-size: 20px; line-height: 28px; font-weight: 300; span { font-weight: 700; }
}
// SVG Icons a svg, .icon svg {
height: 1em; fill: $blue-color;
}
.icon {
vertical-align: middle;
}
.category-title {
margin: 1em 0 0.5em 0; &:first-child { margin-top: 0; }
}
.post-item {
margin-bottom: 0.2em; display: block; a { color: $action-color; } .article-title { display: inline-block; width: 85%; //border-bottom: 1px dashed lighten($light-gray-color, 10%); } .date-label { //border: 1px solid lighten($light-gray-color, 10%); padding: 0 0.2em; margin-left: 1em; margin-top: 2px; @extend .pull-right; }
}
.post-meta {
color: $medium-gray-color; text-transform: uppercase; display: inline-block; letter-spacing: 1px; // Solution adapted from https://github.com/thoughtbot/bourbon/blob/v4-stable/app/assets/stylesheets/functions/_px-to-rem.scss font-size: 14px / 16px * 1em; margin-bottom: 1px;
}
.post-title {
margin-top: 0; margin-bottom: 1em; color: $dark-gray-color;
}
.post-link, .post a, .page a {
@extend .link;
}
.post {
@extend .clearfix;
}
.pagination {
padding: 2em; li, a, span { display: inline-block; vertical-align: middle; } a, span { font-size: 12px / 16px * 1em; padding: .5em; } .prev, .next { @extend .link; }
}
.share {
border-top: 0.2em dashed lighten($light-gray-color, 13%); padding-top: $base-spacing * 0.3; margin-top: $base-spacing * 1; p { margin: 0 5em; font-size: 14px / 16px * 1em; color: $medium-gray-color; }
}
.disqus {
background-color: lighten($light-gray-color, 16%); padding: $base-spacing 0; hr { margin: $base-spacing 0; }
}
.site-footer {
@extend .clearfix; background-color: $accent-color; padding: $base-spacing 0; a { @extend .link; } small { display: block; font-size: 12px / 16px * 1em; color: darken($medium-gray-color, 10%); } .block { display: block; }
}
.video-container {
position:relative; padding-bottom:56.25%; padding-top:30px; height:0; overflow:hidden; iframe, object, embed { position:absolute; top:0; left:0; width:100%; height:100%; }
}
.divider {
border-top: 0.2em solid lighten($light-gray-color, 13%); margin-bottom: $base-spacing * 2; margin-top: $base-spacing * 2;
}
.tags-list a{
margin-right:0.5em; opacity:0.75; white-space:nowrap; text-decoration:none
} .tags-list a .tag-count{
background:#268bd2; border-radius:1000px; color:rgba(255,255,255,0.8); font-size:0.75em; margin-left:0.25em; padding-left:0.6em; padding-right:0.6em
} .tags-list a:hover{
opacity:1;
}
.post-tags {
padding-top: $base-spacing * 0.5;
} .post-tags a {
text-decoration: none;
}
@keyframes posts-for-tag-fade-in{
from{ opacity:0 } to{ opacity:1 }
} .posts-for-tag:not(:target) {
display:none
} // .posts-for-tag{ // display:none // } .posts-for-tag:target {
animation:posts-for-tag-fade-in 0.6s ease-in-out; display:block
}
// This applies from 0px to 600px @media (max-width: 600px) {
.date-label { float: left !important; border: 0 !important; margin-left: -2px !important; margin-top: 2px; margin-right: 1em; } .post-item { padding: 0 0.5em; } .article-title { border-bottom: none !important; } .post-link { &:hover, &:focus, &:active { border-bottom: 2px solid transparent; color: $blue-color; } }
}