@import 'ext/fonts'; @import 'ext/normalize'; @import 'begin'; @import 'syntax';
$linkColor: #999; $mobileW: 768px; $smallMobileW: 480px; $bigScreenW: 1600px; $leftWidth: 220px;
$gray: #999; $lightGray: eee;
*,:before,:after {
box-sizing: border-box;
}
body {
font-family: 'Nunito Sans', sans-serif; @include fluidType(16px, 19px); line-height: 1.55em; margin: 0; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
}
a {
color: $linkColor; text-decoration: none; transition: border-bottom 0.4s; &:hover { border-bottom: 0.5px solid $linkColor; }
}
h1, h2, h3 {
line-height: 1.2em;
}
h1 {
@include fluidType(36px, 48px);
}
h2 {
font-weight: bold; @include fluidType(28px, 32px);
}
h4 {
font-weight: normal; @include fluidType(18px, 20px);
}
figcaption {
font-size: 10pt; line-height: 1.5em; margin-top: -1em;
}
header {
// background-size: cover; padding: 120px 0; color: #fff; overflow: hidden; h2 { font-weight: normal; margin-top: 5px; } h1 { margin: 0; } .social { overflow: hidden; list-style-type: none; padding: 0; margin-top: 0; li { color: #fff; float: left; i { &:first-child::before { margin-left: 0; } @include fluidType(26px, 34px); transition: color .3s; &:hover { color: $gray; } } } }
}
.clearfix {
clear: both;
}
// // Basic Container Class // .container {
margin:0 150px; max-width: 720px; div.highlighter-rouge { right: 150px; } @media screen and (max-width: $mobileWidth) { margin:0 15px; div.highlighter-rouge { right: 15px; } div.highlight { padding: 30px 15px; } } @media screen and (max-width: $tabWidth) and (min-width: $mobileWidth){ margin:0 40px; div.highlighter-rouge { right: 40px; } div.highlight { padding: 30px 40px; } } @media screen and (max-width: $desktopWidth) and (min-width: $tabWidth){ margin:0 80px; div.highlighter-rouge { right: 80px; } div.highlight { padding: 30px 80px; } } @media screen and (min-width: $desktopWidth) and (max-width: 1280px) { margin:0 100px; div.highlighter-rouge { right: 100px; } div.highlight { padding: 30px 100px; } }
}
.post-title {
color: #222; transition: color .3s ease; margin: .1em 0; &:hover { color: $gray; border-bottom: 0; }
}
.post-description {
font-weight: normal; color: #ddd; margin-top:.5em; margin-bottom: 1.3em;
}
.post-date {
color: $gray; .icon-calendar { margin-right: 6px; }
}
.post-tags {
list-style-type: none; padding: 0; li { float: left; padding: 10px 20px; background-color: $lightGray; color: #000; margin: 5px; border-radius: 2px; @include fluidType(15px, 17px); &:first-child { margin-left: 0; } }
}
.posts {
list-style-type: none; padding: 0; >li { margin-bottom: 30px; padding-bottom: 20px; &:not(:last-child) { border-bottom: 1px solid $lightGray; } }
}
.posts, .post-container {
margin-top: 40px;
}
.post-meta {
display: flex; justify-content: space-between; align-items: center; a:hover { border-bottom: none; }
}
.post-container {
img { margin: 20px 0; }
}
.navbar {
display: flex; position: absolute; top: 0; right: 5vw; a { color: inherit; } ul { list-style-type: none; li { // background-color: #ff9f1c; border: 1px solid #fff; float: left; // margin: 5px; &:not(:first-child){ border-left: 0; } padding: 10px 25px; // border-radius: 4px; @include fluidType(15px, 17px); transition: background-color .3s ease-in; &:hover { background-color: rgba(#fff, 0.15); cursor: pointer; } &.active { background-color: rgba(#fff, 0.15); } } }
}