gaiety/gaiety-life
1
0
Fork 0
Code Activity

Styling changes, meta data etc

Browse source
This commit is contained in:
Joe Wroten 2019-06-22 13:34:12 -05:00
parent 3a4403c5a1
commit f18b9523af
7 changed files with 84 additions and 164 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

41
README.md
View file

@ -1,43 +1,8 @@
# Netlify CMS template for Gridsome # Gaiety Life (Blog)
[![Netlify Status](https://api.netlify.com/api/v1/badges/fe5ba527-ff57-40ca-997a-97d37ad0a652/deploy-status)](https://app.netlify.com/sites/goofy-haibt-818fd7/deploys) [![Netlify Status](https://api.netlify.com/api/v1/badges/fe5ba527-ff57-40ca-997a-97d37ad0a652/deploy-status)](https://app.netlify.com/sites/goofy-haibt-818fd7/deploys)
> A simple, hackable & minimalistic starter for Gridsome that uses Netlify CMS for content. > Web Engineer by day who pretends to be a dog. Dog by night who pretends to be a programmer.
## Features https://gaiety.life/
- Beautiful and simple design.
- Markdown for content.
- Tags support.
- Dark / Light toggle.
- CSS variables, SCSS & BEM for styling.
- 100, 100, 100, 100 score on Google Lighthouse.
- Uses same front-matter fields as Dev.to.
## Demo URL
https://netlifycms-gridsome.suits.at/
## Deploy to Netlify
[![Deploy to Netlify](https://www.netlify.com/img/deploy/button.svg)](https://app.netlify.com/start/deploy?repository=https://github.com/suits-at/netlifycms-gridsome)
### Enable Identity
Enable the netlify identity service at https://app.netlify.com/sites/YOUR-SITE/settings/identity. For exact instructions see https://www.netlify.com/docs/identity/. You might want to enable Git Gateway as well https://www.netlify.com/docs/git-gateway/.
### Edit content
Access `yourwebsite.com/admin`, e.g. `netfliycms-gridsome.netlify.com/admin` or locally this might be `localhost:3000/admin`.
## Install locally
### 1. Install Gridsome CLI tool if you don't have
`npm install --global @gridsome/cli`
### 2. Install this starter
1. `gridsome create my-gridsome-site https://github.com/suits-at/netlifycms-gridsome`
2. `cd my-gridsome-site` to open folder
3. `gridsome develop` to start local dev server at `http://localhost:8080`
4. Happy coding 🎉🙌

4
gridsome.config.js
View file

@ -5,8 +5,8 @@
// To restart press CTRL + C in terminal and run `gridsome develop` // To restart press CTRL + C in terminal and run `gridsome develop`
module.exports = { module.exports = {
siteName: 'Netlify CMS Gridsome starter template', siteName: 'Gaiety Life',
siteDescription: 'A simple, hackable & minimalistic starter for Gridsome that uses Netlify CMS for content.', siteDescription: '[They/Them/Their] Programming, art, design, and other queer things.',
plugins: [ plugins: [
{ {

41
package-lock.json generated
View file

@ -4318,8 +4318,7 @@
}, },
"ansi-regex": { "ansi-regex": {
"version": "2.1.1", "version": "2.1.1",
"bundled": true, "bundled": true
"optional": true
}, },
"aproba": { "aproba": {
"version": "1.2.0", "version": "1.2.0",
@ -4337,13 +4336,11 @@
}, },
"balanced-match": { "balanced-match": {
"version": "1.0.0", "version": "1.0.0",
"bundled": true, "bundled": true
"optional": true
}, },
"brace-expansion": { "brace-expansion": {
"version": "1.1.11", "version": "1.1.11",
"bundled": true, "bundled": true,
"optional": true,
"requires": { "requires": {
"balanced-match": "^1.0.0", "balanced-match": "^1.0.0",
"concat-map": "0.0.1" "concat-map": "0.0.1"
@ -4356,18 +4353,15 @@
}, },
"code-point-at": { "code-point-at": {
"version": "1.1.0", "version": "1.1.0",
"bundled": true, "bundled": true
"optional": true
}, },
"concat-map": { "concat-map": {
"version": "0.0.1", "version": "0.0.1",
"bundled": true, "bundled": true
"optional": true
}, },
"console-control-strings": { "console-control-strings": {
"version": "1.1.0", "version": "1.1.0",
"bundled": true, "bundled": true
"optional": true
}, },
"core-util-is": { "core-util-is": {
"version": "1.0.2", "version": "1.0.2",
@ -4470,8 +4464,7 @@
}, },
"inherits": { "inherits": {
"version": "2.0.3", "version": "2.0.3",
"bundled": true, "bundled": true
"optional": true
}, },
"ini": { "ini": {
"version": "1.3.5", "version": "1.3.5",
@ -4481,7 +4474,6 @@
"is-fullwidth-code-point": { "is-fullwidth-code-point": {
"version": "1.0.0", "version": "1.0.0",
"bundled": true, "bundled": true,
"optional": true,
"requires": { "requires": {
"number-is-nan": "^1.0.0" "number-is-nan": "^1.0.0"
} }
@ -4494,20 +4486,17 @@
"minimatch": { "minimatch": {
"version": "3.0.4", "version": "3.0.4",
"bundled": true, "bundled": true,
"optional": true,
"requires": { "requires": {
"brace-expansion": "^1.1.7" "brace-expansion": "^1.1.7"
} }
}, },
"minimist": { "minimist": {
"version": "0.0.8", "version": "0.0.8",
"bundled": true, "bundled": true
"optional": true
}, },
"minipass": { "minipass": {
"version": "2.3.5", "version": "2.3.5",
"bundled": true, "bundled": true,
"optional": true,
"requires": { "requires": {
"safe-buffer": "^5.1.2", "safe-buffer": "^5.1.2",
"yallist": "^3.0.0" "yallist": "^3.0.0"
@ -4524,7 +4513,6 @@
"mkdirp": { "mkdirp": {
"version": "0.5.1", "version": "0.5.1",
"bundled": true, "bundled": true,
"optional": true,
"requires": { "requires": {
"minimist": "0.0.8" "minimist": "0.0.8"
} }
@ -4597,8 +4585,7 @@
}, },
"number-is-nan": { "number-is-nan": {
"version": "1.0.1", "version": "1.0.1",
"bundled": true, "bundled": true
"optional": true
}, },
"object-assign": { "object-assign": {
"version": "4.1.1", "version": "4.1.1",
@ -4608,7 +4595,6 @@
"once": { "once": {
"version": "1.4.0", "version": "1.4.0",
"bundled": true, "bundled": true,
"optional": true,
"requires": { "requires": {
"wrappy": "1" "wrappy": "1"
} }
@ -4684,8 +4670,7 @@
}, },
"safe-buffer": { "safe-buffer": {
"version": "5.1.2", "version": "5.1.2",
"bundled": true, "bundled": true
"optional": true
}, },
"safer-buffer": { "safer-buffer": {
"version": "2.1.2", "version": "2.1.2",
@ -4715,7 +4700,6 @@
"string-width": { "string-width": {
"version": "1.0.2", "version": "1.0.2",
"bundled": true, "bundled": true,
"optional": true,
"requires": { "requires": {
"code-point-at": "^1.0.0", "code-point-at": "^1.0.0",
"is-fullwidth-code-point": "^1.0.0", "is-fullwidth-code-point": "^1.0.0",
@ -4733,7 +4717,6 @@
"strip-ansi": { "strip-ansi": {
"version": "3.0.1", "version": "3.0.1",
"bundled": true, "bundled": true,
"optional": true,
"requires": { "requires": {
"ansi-regex": "^2.0.0" "ansi-regex": "^2.0.0"
} }
@ -4772,13 +4755,11 @@
}, },
"wrappy": { "wrappy": {
"version": "1.0.2", "version": "1.0.2",
"bundled": true, "bundled": true
"optional": true
}, },
"yallist": { "yallist": {
"version": "3.0.3", "version": "3.0.3",
"bundled": true, "bundled": true
"optional": true
} }
} }
}, },

3
src/assets/style/_base.scss
View file

@ -1,4 +1,5 @@
// Default @import url(https://cdn.jsdelivr.net/gh/tonsky/FiraCode@1.206/distr/fira_code.css);
* { * {
box-sizing: border-box; box-sizing: border-box;
-webkit-font-smoothing: antialiased; -webkit-font-smoothing: antialiased;

111
src/assets/style/_code.scss
View file

@ -1,90 +1,69 @@
/* PrismJS 1.15.0
https://prismjs.com/download.html#themes=prism&languages=markup+css+clike+javascript */
/** /**
* prism.js default theme for JavaScript, CSS and HTML * Dracula Theme originally by Zeno Rocha [@zenorocha]
* Based on dabblet (http://dabblet.com) * https://draculatheme.com/
* @author Lea Verou *
* Ported for PrismJS by Albert Vallverdu [@byverdu]
*/ */
pre {
padding: calc(var(--space) / 2);
font-size: .85em;
background-color: var(--bg-code);
margin-bottom: 2em;
border: 1px solid var(--border-color);
border-radius: var(--radius);
}
code {
background-color: var(--bg-code);
border: 1px solid var(--border-color);
font-size: .85em;
padding: .2em .5em;
}
code[class*="language-"], code[class*="language-"],
pre[class*="language-"] { pre[class*="language-"] {
font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace; color: #f8f8f2;
background: none;
text-shadow: 0 1px rgba(0, 0, 0, 0.3);
font-family: 'Fira Code', monospace;
text-align: left; text-align: left;
white-space: pre; white-space: pre;
word-spacing: normal; word-spacing: normal;
word-break: normal; word-break: normal;
word-wrap: normal; word-wrap: normal;
line-height: 1.5; line-height: 1.5;
-moz-tab-size: 4; -moz-tab-size: 4;
-o-tab-size: 4; -o-tab-size: 4;
tab-size: 4; tab-size: 4;
-webkit-hyphens: none; -webkit-hyphens: none;
-moz-hyphens: none; -moz-hyphens: none;
-ms-hyphens: none; -ms-hyphens: none;
hyphens: none; hyphens: none; }
}
@media print {
code[class*="language-"],
pre[class*="language-"] {
text-shadow: none;
}
}
/* Code blocks */ /* Code blocks */
pre[class*="language-"] { pre[class*="language-"] {
padding: 1em;
margin: .5em 0;
overflow: auto; overflow: auto;
} border-radius: 0.3em; }
:not(pre) > code[class*="language-"],
pre[class*="language-"] {
background: #282a36; }
/* Inline code */ /* Inline code */
:not(pre) > code[class*="language-"] { :not(pre) > code[class*="language-"] {
border-radius: var(--radius); padding: .1em;
white-space: normal; border-radius: .3em;
} white-space: normal; }
.token.comment, .token.comment,
.token.prolog, .token.prolog,
.token.doctype, .token.doctype,
.token.cdata { .token.cdata {
color: slategray; color: #6272a4; }
}
.token.punctuation { .token.punctuation {
color: #999; color: #f8f8f2; }
}
.namespace { .namespace {
opacity: .7; opacity: .7; }
}
.token.property, .token.property,
.token.tag, .token.tag,
.token.boolean,
.token.number,
.token.constant, .token.constant,
.token.symbol, .token.symbol,
.token.deleted { .token.deleted {
color: #c71b7b; color: #ff79c6; }
}
.token.boolean,
.token.number {
color: #bd93f9; }
.token.selector, .token.selector,
.token.attr-name, .token.attr-name,
@ -92,43 +71,35 @@ pre[class*="language-"] {
.token.char, .token.char,
.token.builtin, .token.builtin,
.token.inserted { .token.inserted {
color: #690; color: #50fa7b; }
}
.token.operator, .token.operator,
.token.entity, .token.entity,
.token.url, .token.url,
.language-css .token.string, .language-css .token.string,
.style .token.string { .style .token.string,
color: #9a6e3a; .token.variable {
background: hsla(0, 0%, 100%, .5); color: #f8f8f2; }
}
.token.atrule, .token.atrule,
.token.attr-value, .token.attr-value,
.token.keyword {
color: #20a7e0;
}
.token.function, .token.function,
.token.class-name { .token.class-name {
color: #DD4A68; color: #f1fa8c; }
}
.token.keyword {
color: #8be9fd; }
.token.regex, .token.regex,
.token.important, .token.important {
.token.variable { color: #ffb86c; }
color: #e90;
}
.token.important, .token.important,
.token.bold { .token.bold {
font-weight: bold; font-weight: bold; }
}
.token.italic { .token.italic {
font-style: italic; font-style: italic; }
}
.token.entity { .token.entity {
cursor: help; cursor: help; }
}

10
src/assets/style/_variables.scss
View file

@ -5,12 +5,12 @@ html {
// Light default theme // Light default theme
body { body {
--bg-color: #F3F7F9; --bg-color: #f8f8f2;
--bg-content-color: #fff; --bg-content-color: #fff;
--bg-code: #fffbf3; --bg-code: #fffbf3;
--body-color: #444; --body-color: #444;
--title-color: #111; --title-color: #111;
--link-color: #6b17e6; --link-color: #ff79c6;
--border-color: rgba(0,0,0,.1);; --border-color: rgba(0,0,0,.1);;
--space: 3.5rem; --space: 3.5rem;
--content-width: 860px; --content-width: 860px;
@ -32,11 +32,11 @@ body {
// Override variables for Dark theme // Override variables for Dark theme
body[data-theme="dark"] { body[data-theme="dark"] {
--bg-color: #0D2538; --bg-color: #282a36;
--bg-content-color: #0f2d44; --bg-content-color: #44475a;
--bg-code: rgba(0,0,0,.3); --bg-code: rgba(0,0,0,.3);
--border-color: rgba(255,255,255,.1);; --border-color: rgba(255,255,255,.1);;
--body-color: #ced8de; --body-color: #ced8de;
--title-color: #fff; --title-color: #fff;
--link-color: #af9cef; --link-color: #ff79c6;
} }

8
src/components/Author.vue
View file

@ -6,12 +6,14 @@
</h1> </h1>
<p class="author__intro"> <p class="author__intro">
A simple, hackable & minimalistic starter for Gridsome that uses Netlify CMS for content. <em>They/Their</em><br />
<strong>Programming, art, design, and other queer things.</strong><br />
<small>Web Engineer by day who pretends to be a dog.<br />Dog by night who pretends to be a programmer.</small>
</p> </p>
<p class="author__links"> <p class="author__links">
<a href="//twitter.com/suits_at">Follow on Twitter</a> <a href="https://www.wroten.me">Portfolio</a>
<a href="https://github.com/suits-at/netlifycms-gridsome">GitHub</a> <a href="https://gitlab.com/gaiety">Gitlab</a>
</p> </p>
</div> </div>