Add styling and sass plugin

2020-09-18 08:45:21 -05:00
parent bc4f834cae
commit 8de94aa769
18 changed files with 16881 additions and 3 deletions
--- a/gatsby-browser.js
+++ b/gatsby-browser.js
@@ -0,0 +1 @@
+import "./src/styles/styles.scss";
--- a/gatsby-config.js
+++ b/gatsby-config.js
@@ -6,5 +6,5 @@

 module.exports = {
  /* Your site config here */
-  plugins: [],
+  plugins: [`gatsby-plugin-sass`],
 }
--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/package.json
@@ -15,10 +15,13 @@
  },
  "dependencies": {
    "gatsby": "^2.24.61",
+    "gatsby-plugin-sass": "^2.3.13",
+    "node-sass": "^4.14.1",
    "react": "^16.12.0",
    "react-dom": "^16.12.0"
  },
  "devDependencies": {
+    "bootstrap": "^4.5.2",
    "prettier": "2.1.1"
  },
  "repository": {
--- a/src/components/header.js
+++ b/src/components/header.js
@@ -0,0 +1,21 @@
+import React from "react";
+
+export default function Header() {
+    return (
+        <header>
+            <div class="container">
+                <div class="d-flex justify-content-between align-item-center">
+                    <a href="site.baseurl/" class="d-flex justify-content-start align-items-center mr-2" title="Home">
+                        <img src="https://en.gravatar.com/userimage/738990/32d8e61848233a67f5e02dcc43be0ff8.jpeg"
+                            alt="Gravatar" />
+                        <span class="ml-2">site.title</span>
+                    </a>
+                    <div class="d-none d-sm-flex flex-column justify-content-around ml-2">
+                        <small>site.tagline</small>
+                    </div>
+                </div>
+            </div>
+        </header>
+    );
+  }
+
--- a/src/components/layout.js
+++ b/src/components/layout.js
@@ -0,0 +1,11 @@
+import React from "react";
+import Header from './header';
+
+export default function Layout({ children }) {
+  return (
+      <body>
+          <Header />
+          {children}
+      </body>
+  );
+}
--- a/src/pages/index.js
+++ b/src/pages/index.js
@@ -1,5 +1,10 @@
-import React from "react"
+import React from "react";
+import Layout from "../components/layout"

 export default function Home() {
-  return <div>Hello world, Ben!</div>
+  return (
+    <Layout>
+      <div>hello world!</div>
+    </Layout>
+  );
 }
--- a/src/styles/bootstrap-variables.scss
+++ b/src/styles/bootstrap-variables.scss
@@ -0,0 +1,16 @@
+$body-bg: #26282d;
+$body-color: #93979e;
+
+$link-color: lighten($body-color, 50%);
+
+$font-size-base:              1rem;
+$h1-font-size:                $font-size-base * 2;
+$h2-font-size:                $font-size-base * 1.75;
+$h3-font-size:                $font-size-base * 1.5;
+$h4-font-size:                $font-size-base * 1.25;
+$h5-font-size:                $font-size-base * 1.15;
+$h6-font-size:                $font-size-base;
+
+$pre-color: $body-color;
+
+$border-color: lighten($body-bg, 20%);
--- a/src/styles/rouge-base16-dark.scss
+++ b/src/styles/rouge-base16-dark.scss
@@ -0,0 +1,81 @@
+/*
+   generated by rouge http://rouge.jneen.net/
+   original base16 by Chris Kempson (https://github.com/chriskempson/base16)
+*/
+
+.highlight table td { padding: 5px; }
+.highlight table pre { margin: 0; }
+.highlight, .highlight .w {
+  color: #d0d0d0;
+}
+.highlight .err {
+  color: #151515;
+  background-color: #ac4142;
+}
+.highlight .c, .highlight .cd, .highlight .cm, .highlight .c1, .highlight .cs {
+  color: #888;
+}
+.highlight .cp {
+  color: #f4bf75;
+}
+.highlight .nt {
+  color: #f4bf75;
+}
+.highlight .o, .highlight .ow {
+  color: #d0d0d0;
+}
+.highlight .p, .highlight .pi {
+  color: #d0d0d0;
+}
+.highlight .gi {
+  color: #90a959;
+}
+.highlight .gd {
+  color: #ac4142;
+}
+.highlight .gh {
+  color: #6a9fb5;
+  font-weight: bold;
+}
+.highlight .k, .highlight .kn, .highlight .kp, .highlight .kr, .highlight .kv {
+  color: #aa759f;
+}
+.highlight .kc {
+  color: #d28445;
+}
+.highlight .kt {
+  color: #d28445;
+}
+.highlight .kd {
+  color: #d28445;
+}
+.highlight .s, .highlight .sb, .highlight .sc, .highlight .sd, .highlight .s2, .highlight .sh, .highlight .sx, .highlight .s1 {
+  color: #90a959;
+}
+.highlight .sr {
+  color: #75b5aa;
+}
+.highlight .si {
+  color: #8f5536;
+}
+.highlight .se {
+  color: #8f5536;
+}
+.highlight .nn {
+  color: #f4bf75;
+}
+.highlight .nc {
+  color: #f4bf75;
+}
+.highlight .no {
+  color: #f4bf75;
+}
+.highlight .na {
+  color: #6a9fb5;
+}
+.highlight .m, .highlight .mf, .highlight .mh, .highlight .mi, .highlight .il, .highlight .mo, .highlight .mb, .highlight .mx {
+  color: #90a959;
+}
+.highlight .ss {
+  color: #90a959;
+}
--- a/src/styles/styles.scss
+++ b/src/styles/styles.scss
@@ -0,0 +1,108 @@
+@import "bootstrap-variables";
+@import "bootstrap/scss/bootstrap";
+@import "variables";
+@import "rouge-base16-dark";
+
+h1 {
+    color: lighten($body-color, 35%);
+}
+
+h2,
+h3,
+h4,
+h5,
+h6 {
+    color: lighten($body-color, 25%);
+}
+
+h1,
+h2,
+h3 {
+    a {
+        color: inherit;
+    }
+}
+
+header {
+    padding: 10px 0;
+    margin-top: 20px;
+    background-color: lighten($body-bg, 10%);
+    border-width: 1px 0;
+    border-style: solid;
+    border-color: $border-color;
+
+    img {
+        @include border-radius(50%);
+        width: 40px;
+        height: 40px;
+    }
+    small {
+        vertical-align: middle;
+    }
+}
+
+nav.main {
+    margin-bottom: 20px;
+
+    a {
+        display: block;
+        padding: 5px;
+        margin: 0 10px;
+        text-transform: lowercase;
+    }
+}
+
+nav.pagination {
+    a, span {
+        display: block;
+        margin: 0 20px;
+    }
+}
+
+section {
+    margin: 40px 0;
+}
+
+article {
+    div.post-info {
+        nav {
+            display: flex;
+            justify-content: start;
+        }
+        time, nav a {
+            display: block;
+            margin: 10px 20px 10px 0;
+        }
+        nav span {
+            display: block;
+            margin: 10px 5px;
+        }
+    }
+}
+
+figure.highlight {
+    @include border-radius();
+    padding: 10px;
+    border: 1px solid $border-color;
+    background-color: lighten($body-bg, 5%);
+    color: lighten($body-color, 5%);
+
+    pre {
+        margin-bottom: 0;
+    }
+}
+
+blockquote {
+    @include border-radius();
+    padding: 10px 20px;
+    background-color: lighten($body-bg, 5%);
+    color: lighten($body-color, 5%);
+
+    p {
+        margin: 0;
+    }
+}
+
+section.comments {
+    min-height: 500px;
+}
--- a/src/styles/variables.scss
+++ b/src/styles/variables.scss
--- a/static/CNAME
+++ b/static/CNAME
@@ -0,0 +1 @@
+www.benramey.com
--- a/static/android-chrome-192x192.png
+++ b/static/android-chrome-192x192.png
--- a/static/android-chrome-512x512.png
+++ b/static/android-chrome-512x512.png
--- a/static/apple-touch-icon.png
+++ b/static/apple-touch-icon.png
--- a/static/favicon-16x16.png
+++ b/static/favicon-16x16.png
--- a/static/favicon-32x32.png
+++ b/static/favicon-32x32.png
--- a/static/favicon.ico
+++ b/static/favicon.ico