benjaminramey/benramey.com-gatsby.js
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add styling and sass plugin

Browse Source
This commit is contained in:
Benjamin Ramey
2020-09-18 08:45:21 -05:00
parent bc4f834cae
commit 8de94aa769
18 changed files with 16881 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
gatsby-browser.js Normal file
View File

@@ -0,0 +1 @@
import "./src/styles/styles.scss";

2
gatsby-config.js
View File

@@ -6,5 +6,5 @@
module.exports = { module.exports = {
/* Your site config here */ /* Your site config here */
plugins: [], plugins: [`gatsby-plugin-sass`],
} }

16631
package-lock.json generated Normal file
View File

File diff suppressed because it is too large Load Diff

3
package.json
View File

@@ -15,10 +15,13 @@
}, },
"dependencies": { "dependencies": {
"gatsby": "^2.24.61", "gatsby": "^2.24.61",
"gatsby-plugin-sass": "^2.3.13",
"node-sass": "^4.14.1",
"react": "^16.12.0", "react": "^16.12.0",
"react-dom": "^16.12.0" "react-dom": "^16.12.0"
}, },
"devDependencies": { "devDependencies": {
"bootstrap": "^4.5.2",
"prettier": "2.1.1" "prettier": "2.1.1"
}, },
"repository": { "repository": {

21
src/components/header.js Normal file
View File

@@ -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>
);
}

11
src/components/layout.js Normal file
View File

@@ -0,0 +1,11 @@
import React from "react";
import Header from './header';
export default function Layout({ children }) {
return (
<body>
<Header />
{children}
</body>
);
}

9
src/pages/index.js
View File

@@ -1,5 +1,10 @@
import React from "react" import React from "react";
import Layout from "../components/layout"
export default function Home() { export default function Home() {
return <div>Hello world, Ben!</div> return (
<Layout>
<div>hello world!</div>
</Layout>
);
} }

16
src/styles/bootstrap-variables.scss vendored Normal file
View File

@@ -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%);

81
src/styles/rouge-base16-dark.scss Normal file
View File

@@ -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;
}

108
src/styles/styles.scss Normal file
View File

@@ -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;
}

0
src/styles/variables.scss Normal file
View File

1
static/CNAME Normal file
View File

@@ -0,0 +1 @@
www.benramey.com

BIN
static/android-chrome-192x192.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 40 KiB

BIN
static/android-chrome-512x512.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 198 KiB

BIN
static/apple-touch-icon.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 36 KiB

BIN
static/favicon-16x16.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 826 B

BIN
static/favicon-32x32.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.3 KiB

BIN
static/favicon.ico
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 2.7 KiB

After

Width:  |  Height:  |  Size: 15 KiB