summaryrefslogtreecommitdiff
path: root/_includes/site.scss
diff options
context:
space:
mode:
Diffstat (limited to '_includes/site.scss')
-rw-r--r--_includes/site.scss311
1 files changed, 104 insertions, 207 deletions
diff --git a/_includes/site.scss b/_includes/site.scss
index c2a29db..eec856c 100644
--- a/_includes/site.scss
+++ b/_includes/site.scss
@@ -1,81 +1,81 @@
-$brand-color: #00819B;
-$muted-color: lighten(desaturate($brand-color, 100%), 15%);
-$base-color: #222;
-
-$base-font-size: 20px;
-$line-height: $base-font-size * 1.5;
-$serif: merriweather_light, serif;
+$monokai-royal-blue: #204a87;
+$monokai-dark-blue: #243955;
+$monokai-gray-0: #272822;
+$monokai-gray-1: #31322c;
+$monokai-gray-2: #3c3d37;
+$monokai-forest: #46830c;
+$monokai-gray-3: #49483e;
+$monokai-gray-4: #64645e;
+$monokai-blue: #66d9ef;
+$monokai-tan: #75715e;
+$monokai-red: #8b0807;
+$monokai-gray-5: #90908a;
+$monokai-lime: #a6e22e;
+$monokai-violet: #ae81ff;
+$monokai-yellow: #e6db74;
+$monokai-light: #f8f8f0;
+$monokai-magenta: #f92672;
+$monokai-orange: #fd971f;
+
+$base-font-size: 22px;
$monospace: Consolas, "Liberation Mono", Menlo, Courier, monospace !default;
-$sans: "Helvetica Neue", "Helvetica", "Arial", "Liberation Sans", sans-serif;
-
-$container-width: 900px;
+$container-width: 1200px;
-@import "fonts";
-@import "icons";
-
-* {
- margin: 0;
- padding: 0;
- color: $base-color;
- background-color: transparent;
- text-decoration: none;
- border: none;
- font-weight: normal;
- font-size: $base-font-size;
+@mixin container {
+ max-width: $container-width;
+ padding: 0 1rem;
+ margin-left: auto;
+ margin-right: auto;
}
-html {
- font-family: $serif;
+.muted {
+ color: $monokai-gray-5;
}
body {
- padding: $base-font-size;
- background-color: #fcfcfc;
-}
-
-main {
- max-width: $container-width;
- margin-left: auto;
- margin-right: auto;
+ font-family: $monospace;
+ background-color: $monokai-gray-0;
+ color: $monokai-light;
+ font-size: $base-font-size;
+ padding: 5rem 0 0 0;
+ margin: 0;
}
header {
+ position: fixed;
+ top: 0;
+ left: 0;
width: 100%;
- min-height: $base-font-size * 3;
- font-family: $monospace;
-
- a {
- padding: $base-font-size * 0.5;
- }
+ height: 5rem;
+ padding: 0;
+ margin: 0;
+ text-align: center;
+ background-color: $monokai-gray-0;
+ box-shadow: 0 1rem 1rem $monokai-gray-0;
}
footer {
- margin-top: $base-font-size * 2;
-}
-
-footer, footer * {
+ @extend .muted;
+ padding: 2rem;
text-align: center;
- font-size: $base-font-size * 0.8;
- color: $muted-color;
- font-family: $sans;
}
section {
- margin-bottom: $base-font-size * 4;
+ padding-left: 5rem;
}
-h1, h1 * {
- margin-top: $base-font-size;
- font-size: $base-font-size * 2;
+h1 {
+ @include container;
+ color: $monokai-orange;
+ font-size: 2rem;
font-weight: bold;
- font-family: $sans;
}
-h2, h2 * {
- margin-top: $base-font-size;
- font-size: $base-font-size * 1.5;
+h2 {
+ @include container;
+ color: $monokai-orange;
+ font-size: 1.5rem;
font-weight: bold;
- font-family: $sans;
}
table {
@@ -83,92 +83,85 @@ table {
}
td {
- padding: $base-font-size * 0.5;
+ padding: 0.5rem;
}
p {
- margin-top: $base-font-size;
- line-height: $line-height;
+ @include container;
+ line-height: 2rem;
}
ol, ul {
- margin: $base-font-size 0;
+ @include container;
}
li {
- margin-left: $base-font-size * 2;
- margin-right: $base-font-size * 2;
- padding: $base-font-size * 0.25;
+ margin-left: 2rem;
+ margin-right: 2rem;
+ padding: 1rem;
}
pre {
- margin: $base-font-size 0;
+ margin: 1rem 0;
}
-code {
- font-family: $monospace;
- font-size: 0.8em;
- color: $muted-color;
+kbd {
+ color: $monokai-lime;
}
-kbd {
- font-family: $monospace;
- font-size: $base-font-size * 0.7;
- color: $muted-color;
- border: 1px solid $muted-color;
- padding: 2px 4px;
- border-radius: 3px;
+code {
+ color: $monokai-gray-5;
+ background-color: $monokai-gray-1;
}
hr {
- border-top: 1px dotted $muted-color;
+ border: none;
margin-top: $base-font-size;
margin-bottom: $base-font-size;
-}
-
-a, a * {
- color: $brand-color !important;
- &:hover {
- color: darken($brand-color, 10%) !important;
+ text-align: center;
+ &:after {
+ @extend .muted;
+ content: '~ ~ ~';
}
}
-time {
- color: $muted-color;
-}
-
-.column {
- display: inline-block;
-}
-
-.left, .right {
+.d3container {
text-align: center;
- display: block;
}
-@media (min-width: $container-width) {
-.left {
- text-align: left;
- float: left;
+blockquote {
+ font-style: italic;
+ p {
+ box-sizing: border-box;
+ border-left: 1rem solid $monokai-gray-1;
+ padding: 0 1rem;
+ }
}
-.right {
- text-align: right;
- float: right;
-}
+a {
+ color: $monokai-blue;
+ text-decoration: none;
+ &:hover {
+ color: $monokai-magenta;
+ }
}
-.muted, .muted * {
- color: $muted-color;
+time {
+ @extend .muted;
}
-.sans, .sans * {
- font-family: $sans;
+aside {
+ @extend .muted;
}
.text-center {
text-align: center;
- margin: $base-font-size 0;
+}
+
+.flex-justify {
+ display: flex;
+ flex-wrap: wrap;
+ justify-content: space-between;
}
.home {
@@ -177,121 +170,25 @@ time {
left: 0;
width: 100%;
height: 100%;
- background: linear-gradient(0deg, darken($brand-color, 5%), darken($brand-color, 15%));
text-align: center;
-
pre {
margin-top: 2em;
- font-size: 18px;
display: inline-block;
- color: #fff;
text-align: left;
- line-height: 28px;
-
- a {
- color: #fff !important;
- border-bottom: 1px solid #ccc;
- &:hover {
- text-shadow: 0 0 2px #fff !important;
- }
- }
+ line-height: 2rem;
}
}
-svg text {
- font-family: $sans;
+.highlight {
+ margin: 0;
+ padding: 1rem;
+ background-color: $monokai-gray-1;
}
-$monokai-blue-light: #89BDFF;
-$monokai-gray: #595959;
-$monokai-gray-darker: #383830;
-$monokai-gray-darkest: #141411;
-$monokai-gray-lightest: #595959;
-$monokai-gray-light: #E6E6E6;
-$monokai-green: #A6E22A;
-$monokai-green-light: #A6E22E;
-$monokai-grey-dark: #272822;
-$monokai-magenta: #F92672;
-$monokai-purple: #AE81FF;
-$monokai-purple-light: #FD5FF1;
-$monokai-yellow: #E6DB74;
-$monokai-yellow-dark: #75715E;
-$monokai-yellow-light: #F8F8F2;
-
.highlight pre {
- background-color: $monokai-gray-darker;
- padding: $base-font-size * 0.5;
- overflow-x: scroll;
- code {
- color: #fff;
- }
+ @include container;
}
-.highlight * {
- font-size: $base-font-size * 0.8;
+.hl.string {
+ color: $monokai-yellow;
}
-
-.highlight pre code .hll { background-color: #49483e }
-.highlight pre code .c { color: #75715e } /* Comment */
-.highlight pre code .err { color: #960050; background-color: #1e0010 } /* Error */
-.highlight pre code .k { color: #66d9ef } /* Keyword */
-.highlight pre code .l { color: #ae81ff } /* Literal */
-.highlight pre code .n { color: #f8f8f2 } /* Name */
-.highlight pre code .o { color: #f92672 } /* Operator */
-.highlight pre code .p { color: #f8f8f2 } /* Punctuation */
-.highlight pre code .cm { color: #75715e } /* Comment.Multiline */
-.highlight pre code .cp { color: #75715e } /* Comment.Preproc */
-.highlight pre code .c1 { color: #75715e } /* Comment.Single */
-.highlight pre code .cs { color: #75715e } /* Comment.Special */
-.highlight pre code .ge { font-style: italic } /* Generic.Emph */
-.highlight pre code .gs { font-weight: bold } /* Generic.Strong */
-.highlight pre code .kc { color: #66d9ef } /* Keyword.Constant */
-.highlight pre code .kd { color: #66d9ef } /* Keyword.Declaration */
-.highlight pre code .kn { color: #f92672 } /* Keyword.Namespace */
-.highlight pre code .kp { color: #66d9ef } /* Keyword.Pseudo */
-.highlight pre code .kr { color: #66d9ef } /* Keyword.Reserved */
-.highlight pre code .kt { color: #66d9ef } /* Keyword.Type */
-.highlight pre code .ld { color: #e6db74 } /* Literal.Date */
-.highlight pre code .m { color: #ae81ff } /* Literal.Number */
-.highlight pre code .s { color: #e6db74 } /* Literal.String */
-.highlight pre code .na { color: #a6e22e } /* Name.Attribute */
-.highlight pre code .nb { color: #f8f8f2 } /* Name.Builtin */
-.highlight pre code .nc { color: #a6e22e } /* Name.Class */
-.highlight pre code .no { color: #66d9ef } /* Name.Constant */
-.highlight pre code .nd { color: #a6e22e } /* Name.Decorator */
-.highlight pre code .ni { color: #f8f8f2 } /* Name.Entity */
-.highlight pre code .ne { color: #a6e22e } /* Name.Exception */
-.highlight pre code .nf { color: #a6e22e } /* Name.Function */
-.highlight pre code .nl { color: #f8f8f2 } /* Name.Label */
-.highlight pre code .nn { color: #f8f8f2 } /* Name.Namespace */
-.highlight pre code .nx { color: #a6e22e } /* Name.Other */
-.highlight pre code .py { color: #f8f8f2 } /* Name.Property */
-.highlight pre code .nt { color: #f92672 } /* Name.Tag */
-.highlight pre code .nv { color: #f8f8f2 } /* Name.Variable */
-.highlight pre code .ow { color: #f92672 } /* Operator.Word */
-.highlight pre code .w { color: #f8f8f2 } /* Text.Whitespace */
-.highlight pre code .mf { color: #ae81ff } /* Literal.Number.Float */
-.highlight pre code .mh { color: #ae81ff } /* Literal.Number.Hex */
-.highlight pre code .mi { color: #ae81ff } /* Literal.Number.Integer */
-.highlight pre code .mo { color: #ae81ff } /* Literal.Number.Oct */
-.highlight pre code .sb { color: #e6db74 } /* Literal.String.Backtick */
-.highlight pre code .sc { color: #e6db74 } /* Literal.String.Char */
-.highlight pre code .sd { color: #e6db74 } /* Literal.String.Doc */
-.highlight pre code .s2 { color: #e6db74 } /* Literal.String.Double */
-.highlight pre code .se { color: #ae81ff } /* Literal.String.Escape */
-.highlight pre code .sh { color: #e6db74 } /* Literal.String.Heredoc */
-.highlight pre code .si { color: #e6db74 } /* Literal.String.Interpol */
-.highlight pre code .sx { color: #e6db74 } /* Literal.String.Other */
-.highlight pre code .sr { color: #e6db74 } /* Literal.String.Regex */
-.highlight pre code .s1 { color: #e6db74 } /* Literal.String.Single */
-.highlight pre code .ss { color: #e6db74 } /* Literal.String.Symbol */
-.highlight pre code .bp { color: #f8f8f2 } /* Name.Builtin.Pseudo */
-.highlight pre code .vc { color: #f8f8f2 } /* Name.Variable.Class */
-.highlight pre code .vg { color: #f8f8f2 } /* Name.Variable.Global */
-.highlight pre code .vi { color: #f8f8f2 } /* Name.Variable.Instance */
-.highlight pre code .il { color: #ae81ff } /* Literal.Number.Integer.Long */
-
-.highlight pre code .gh { } /* Generic Heading & Diff Header */
-.highlight pre code .gu { color: #75715e; } /* Generic.Subheading & Diff Unified/Comment? */
-.highlight pre code .gd { color: #f92672; } /* Generic.Deleted & Diff Deleted */
-.highlight pre code .gi { color: #a6e22e; } /* Generic.Inserted & Diff Inserted */
generated by cgit v1.2.3 (git 2.25.1) at 2024-07-02 18:24:38 +0000