summaryrefslogtreecommitdiff
path: root/_includes/site.scss
diff options
context:
space:
mode:
authorBen Burwell <ben@benburwell.com>2017-09-13 22:32:24 -0400
committerBen Burwell <ben@benburwell.com>2017-09-13 22:32:24 -0400
commit98b321857b6837ef7deb49a0376cedef06135ab4 (patch)
tree91c23a0497c143d170da4cbd31cd197f847bde81 /_includes/site.scss
parent4f6350caf4c65debc65a80225ea27999d151d3fa (diff)
Redesign
Diffstat (limited to '_includes/site.scss')
-rw-r--r--_includes/site.scss154
1 files changed, 55 insertions, 99 deletions
diff --git a/_includes/site.scss b/_includes/site.scss
index c9760d8..f82396f 100644
--- a/_includes/site.scss
+++ b/_includes/site.scss
@@ -1,20 +1,21 @@
-$background-color: #091f2e;
-$base-text-color: #33859E;
-$muted-text-color: #245361;
-$light-gray: #ddd;
-$heading-color: #d26937;
-$link-color: #c23127;
-$emphasis-color: #99d1ce;
-
-$base-font-size: 20px;
+$background-color: #fafafa;
+$base-text-color: #1A364F;
+$muted-text-color: #687876;
+$light-gray: #9CA395;
+$heading-color: #9E1814;
+$link-color: #2A7F89;
+
+$unit: 9px;
$monospace: monospace;
-$container-width: 1200px;
+$serif: Palatino, 'Palatino Linotype', 'Palatino LT STD', 'Book Antiqua', 'Georgia', serif;
+
+$container-width: $unit * 100;
+$header-height: $unit * 5;
+$font-size: $unit * 2;
+$date-column-width: 200px;
@mixin container {
max-width: $container-width;
- padding: 0 1rem;
- margin-left: auto;
- margin-right: auto;
}
.muted {
@@ -24,30 +25,19 @@ $container-width: 1200px;
body {
font-family: $monospace;
color: $base-text-color;
- font-size: $base-font-size;
- padding: 5rem 0 0 0;
+ font-size: $font-size;
+ padding: $font-size;
margin: 0;
background-color: $background-color;
}
header {
- position: fixed;
- top: 0;
- left: 0;
- width: 100%;
- height: 5rem;
- padding: 0;
- margin: 0;
- text-align: center;
- background-color: $background-color;
- z-index: 10;
- //border-bottom: 1px solid $light-gray;
+ @include container;
+ text-align: center;
a.nav-up {
- display: block;
color: $base-text-color;
- padding: 1rem;
- font-size: 1.5rem;
+ font-size: 3 * $unit;
font-weight: bold;
&:hover,
@@ -59,7 +49,7 @@ header {
footer {
@extend .muted;
- padding: 2rem;
+ padding: $unit;
text-align: center;
}
@@ -75,21 +65,11 @@ h2 {
}
h1 {
- font-size: 2rem;
-}
-
-h1::before {
- display: inline;
- content: '# ';
+ font-size: 4 * $unit;
}
h2 {
- font-size: 1.5rem;
-}
-
-h2::before {
- display: inline;
- content: '## ';
+ font-size: 2 * $unit;
}
table {
@@ -97,47 +77,50 @@ table {
}
td {
- padding: 0.5rem;
+ padding: $unit;
}
p {
@include container;
- line-height: 3rem;
- margin-bottom: 3rem;
+ line-height: 1.5;
+ margin-bottom: $unit;
+ font-family: $serif;
}
ol, ul {
@include container;
+ font-family: $serif;
}
li {
- margin-left: 4rem;
- margin-right: 2rem;
- padding: 1rem;
+ margin-left: 4 * $unit;
+ margin-right: 2 * $unit;
+ padding: $unit;
}
pre {
font-family: $monospace;
overflow: auto;
- margin: 1rem 0;
+ margin: $unit 0;
}
kbd {
- color: $emphasis-color;
+ font-family: $monospace;
}
code {
- color: $emphasis-color;
+ font-family: $monospace;
}
hr {
border: none;
- margin-top: $base-font-size;
- margin-bottom: $base-font-size;
+ margin: $unit 0;
text-align: center;
+ width: $container-width;
+
&:after {
@extend .muted;
- content: '##';
+ content: '~~~';
}
}
@@ -149,7 +132,7 @@ blockquote {
font-style: italic;
p {
box-sizing: border-box;
- padding: 0 3rem;
+ padding: 0 3 * $unit;
}
}
@@ -160,7 +143,6 @@ a {
&:hover,
&:focus {
color: $link-color;
- border-bottom-color: $link-color;
outline: none;
}
}
@@ -172,17 +154,8 @@ time {
aside {
@extend .muted;
@include container;
- &:before {
- display: block;
- content: '/*';
- }
- &:after {
- display: block;
- white-space: pre;
- content: ' */';
- }
&>* {
- margin-left: 1rem;
+ margin-left: 2 * $unit;
}
a {
color: $muted-text-color;
@@ -190,35 +163,31 @@ aside {
}
.text-center {
+ @include container;
text-align: center;
}
-.flex-justify {
- display: flex;
- flex-wrap: wrap;
- justify-content: space-between;
+.post {
+ @include container;
+ margin: 1em;
+ font-family: $serif;
+ clear: both;
}
-.home {
- position: absolute;
- top: 0;
- left: 0;
- width: 100%;
- height: 100%;
- text-align: center;
- pre {
- margin-top: 2rem;
- display: inline-block;
- text-align: left;
- line-height: 2rem;
- overflow: auto;
- }
+.post-date {
+ text-align: right;
+ width: $date-column-width;
+ float: left;
+}
+
+.post-title {
+ padding-left: $date-column-width + 2 * $unit;
}
.highlight {
margin: 0;
- padding: 0 2rem;
- font-size: 1rem;
+ padding: 0 $unit;
+ font-size: 2 * $unit;
}
.highlight pre {
@@ -233,16 +202,3 @@ aside {
content: '';
}
-.highlight {
- .s {
- color: #2aa889;
- }
-
- .nt {
- color: #edb443;
- }
-
- .na {
- color: $muted-text-color;
- }
-}