├── pages
    ├── index.js
    ├── _app.js
    └── posts
    │   └── goodcss.md
└── package.json


/pages/index.js:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import { Link } from 'react-router-dom'
3 | ddimport posts from '../posts'
4 | 
5 | export default () =>
6 |   <div>
7 |     <h1>Writing</h1>
8 |   </div>
9 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "mrmrs-writing",
 3 |   "version": "1.0.0",
 4 |   "description": "",
 5 |   "main": "index.js",
 6 |   "scripts": {
 7 |     "test": "echo \"Error: no test specified\" && exit 1",
 8 |     "dev": "x0 pages -o"
 9 |   },
10 |   "author": "",
11 |   "license": "ISC",
12 |   "dependencies": {
13 |     "@compositor/x0": "^5.1.0-2",
14 |     "emotion-theming": "^9.2.3",
15 |     "react-emotion": "^9.2.3",
16 |     "react-router-dom": "^4.3.1",
17 |     "rebass": "^2.0.0-7",
18 |     "styled-components": "^3.3.2",
19 |     "styled-system": "^2.3.1"
20 |   }
21 | }
22 | 


--------------------------------------------------------------------------------
/pages/_app.js:
--------------------------------------------------------------------------------
 1 | import React from 'react'
 2 | import { Link } from 'react-router-dom'
 3 | 
 4 | const Script = ({ src }) =>
 5 |   <script
 6 |     dangerouslySetInnerHTML={{
 7 |       __html: src
 8 |     }}
 9 |   />
10 | 
11 | export default ({ render }) =>
12 |   <React.Fragment>
13 |     <header>
14 |       Mrmrs Writing
15 |     </header>
16 |     <main>
17 |       {render()}
18 |     </main>
19 |     <footer>
20 |       <a href='https://mrmrs.cc'>
21 |         Made by Mrmrs
22 |       </a>
23 |     </footer>
24 |     <Script src={ga} />
25 |   </React.Fragment>
26 | 
27 | const ga = '(function(i,s,o,g,r,a,m){i["GoogleAnalyticsObject"]=r;i[r]=i[r]||function(){ (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o), m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m) })(window,document,"script","//www.google-analytics.com/analytics.js","ga"); ga("create", "UA-4603832-6", "auto"); ga("send", "pageview");'
28 | 


--------------------------------------------------------------------------------
/pages/posts/goodcss.md:
--------------------------------------------------------------------------------
 1 | ---
 2 | title: "Good CSS"
 3 | layout: alt
 4 | ---
 5 | <header class="pt4 pt5-ns ph3 f4 f3-ns center measure">
 6 |     <time class="f6 f5-ns tl db" datetime="{{page.date}}">{{page.date | date: "%d %B %Y"}}</time>
 7 |     <p class="lh-copy f4 f3-ns">
 8 |       Since I've started authoring css, I've been asking myself and other css developers the same question: <b>What is 'good css?'</b>
 9 |       After many years of writing, refactoring, and deleting css; this is a short list of things I believe to be true.
10 |     </p>
11 | </header>
12 | <div class="ph3 measure f4 f3-ns center pb5">
13 |   <h2 class="f3 fw9 mt5 mb3">
14 |     Good CSS...
15 |   </h2>
16 |   <ul class="f4 f3-ns list pl0 lh-copy mt0">
17 |     <li class="mb3">Doesn't break <b>any</b> functionality of plain html.</li>
18 |     <li class="mb3">Makes an interface more readable for <b>everyone</b> on any device.</li>
19 |     <li class="mb3">Enhances the usability and accessibility of an interface on all devices for all users.</li>
20 |     <li class="mb3">Allows you to quickly change a single interface without breaking other interfaces.</li>
21 |     <li class="mb3">Renders quickly in the browser.</li>
22 |     <li class="mb3">Runs at 60fps (no jank on window resize or during scrolling).</li>
23 |   </ul>
24 |   <h2 class="f3 fw9 mt5 mb3">
25 |     Good CSS is...
26 |   </h2>
27 |   <ul class="list pl0 lh-copy mt0">
28 |     <li class="mb3">Highly reusable - even across projects.</li>
29 |     <li class="mb3">Well documented.</li>
30 |     <li class="mb3">Easy to read and understand.</li>
31 |     <li class="mb3">ID free.</li>
32 |     <li class="mb3">Mobile-first.</li>
33 |     <li class="mb3">Easy to maintain.</li>
34 |     <li class="mb3">As small as possible.</li>
35 |     <li class="mb3">Unassuming.</li>
36 |   </ul>
37 | </div>
38 | 


--------------------------------------------------------------------------------