old-techblog/assets/main.scss

147 lines
2.2 KiB
SCSS

---
---
$content-width: 750px;
$sidebar-width: 300px;
$on-xl: 1100px;
@import 'minima';
@import url('https://fonts.googleapis.com/css?family=Roboto:400,500,700|Archivo+Black|Tenor+Sans|Ubuntu+Mono');
html, body, div, p {
font-family: 'Tenor';
letter-spacing: -0.05px;
}
body {
font-size: 18px;
}
h1, h2, h3, h4, h5, h6 {
font-family: 'Archivo Black';
}
pre, code {
font-family: 'Ubuntu Mono';
background-color: #efefef;
}
a, a:active, a:visited {
color: #2d753a;
}
body > header.site-header {
background-color: #000;
border-bottom: none;
border-top: none;
box-shadow: 0px 5px 8px rgba(20, 20, 20, 0.5);
z-index: 1;
.site-title, .site-title:visited {
font-family: 'Roboto';
font-weight: 700;
color: #fff;
letter-spacing: 2px;
}
.site-nav {
z-index: 1;
.page-link, .page-link:visited {
font-family: 'Roboto';
font-weight: 500;
letter-spacing: 1px;
color: #fff;
@include media-query($on-palm) {
color: #000;
}
}
}
}
.page-content {
background: #f6f7f4;
padding-top: 0px;
}
.outer-wrapper {
box-shadow: 5px 2px 15px -4px rgba(0, 0, 0, 0.1);
min-height: 700px;
}
.inner-wrapper {
border-left: 1px solid #ccc;
}
.page-content > .wrapper {
padding-top: 30px;
background: #fff;
}
.post-list h3 a {
font-size: 30px;
}
.post-content p {
line-height: 2em;
}
img.profile {
width: 300px;
}
.sidebar {
line-height: 1.3em;
background: linear-gradient(#eeefed, #fff);
text-align: center;
overflow: auto;
img.me {
width: 140px;
border-radius: 180px;
display: block;
margin: 0px auto 30px auto;
}
a[href*=twitter] img {
width: 120px;
display: block;
margin: 25px auto;
}
p {
font-family: 'Roboto', sans-serif;
font-weight: 400;
font-size: 18px;
line-height: 1.5em;
letter-spacing: 0.06px;
strong {
font-weight: 500;
}
}
}
.share_buttons {
line-height: 1em;
padding: 30px 0px 20px 0px !important;
> p {
margin-bottom: 0px;
line-height: 1.5em;
}
> ul {
margin-left: 0px;
margin-bottom: 0px;
> li > a > div.button {
font-family: Roboto, Helvetica, Arial, sans-serif;
font-weight: 500;
}
}
}