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)
> 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
- 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.
https://gaiety.life/
## 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`
module.exports = {
siteName: 'Netlify CMS Gridsome starter template',
siteDescription: 'A simple, hackable & minimalistic starter for Gridsome that uses Netlify CMS for content.',
siteName: 'Gaiety Life',
siteDescription: '[They/Them/Their] Programming, art, design, and other queer things.',
plugins: [
{

41
package-lock.json generated
View file

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

5
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;
-webkit-font-smoothing: antialiased;
@ -25,4 +26,4 @@ a:not(.button) {
img {
max-width: 100%;
}
}

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

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

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

8
src/components/Author.vue
View file

@ -6,12 +6,14 @@
</h1>
<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 class="author__links">
<a href="//twitter.com/suits_at">Follow on Twitter</a>
<a href="https://github.com/suits-at/netlifycms-gridsome">GitHub</a>
<a href="https://www.wroten.me">Portfolio</a>
<a href="https://gitlab.com/gaiety">Gitlab</a>
</p>
</div>