Modernize site

8 years ago · aebc2d182a
13 changed files with 554 additions and 584 deletions
--- a/.gitignore
+++ b/.gitignore
@ -1 +1,2 @@
 _site/
+.sass-cache/
--- a/.gitmodules
+++ b/.gitmodules
@ -0,0 +1,6 @@
+[submodule "assets/fonts/league-spartan"]
+	path = assets/fonts/league-spartan
+	url = https://github.com/theleagueof/league-spartan.git
+[submodule "assets/fonts/sorts-mill-goudy"]
+	path = assets/fonts/sorts-mill-goudy
+	url = https://github.com/theleagueof/sorts-mill-goudy.git
--- a/_config.yml
+++ b/_config.yml
@ -1,2 +1,18 @@
-exclude: [README.md, LICENSE, Makefile]
+exclude:
+  - README.md
+  - Makefile
+  - LICENSE
+  - favicon.svg
+  - assets/fonts/league-spartan/*markdown
+  - assets/fonts/league-spartan/*.otf
+  - assets/fonts/sorts-mill-goudy/*.otf
+  - assets/fonts/sorts-mill-goudy/*.markdown
+  - assets/fonts/sorts-mill-goudy/OFLGoudyStMTT-Italic.ttf
+  - assets/fonts/sorts-mill-goudy/OFLGoudyStMTT.ttf
+  - assets/fonts/sorts-mill-goudy/images
+  - assets/fonts/sorts-mill-goudy/source
+include:
+  - _webfonts
 markdown: kramdown
+sass:
+    style: compressed
--- a/_layouts/base.html
+++ b/_layouts/base.html
@ -1,41 +1,19 @@
 <!doctype html>
 <html lang="en">
- <head>
-  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
-  <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <meta name="description" content="natronics.org">
-  <meta name="author" content="Nathan Bergey">
-  
-  {% capture lvl %}{{ page.url | append:'index.html' | split:'/' | size }}{% endcapture %}
-  {% capture relative %}{% for i in (3..lvl) %}../{% endfor %}{% endcapture %}
-  <link href='https://fonts.googleapis.com/css?family=Arvo:400,700|PT+Sans:400,700,400italic' rel='stylesheet' type='text/css'>
-  <link href="{{ relative }}resources/css/bootstrap.min.css" rel="stylesheet">
-  <link href="{{ relative }}resources/css/style.css" rel="stylesheet">
-  <title>{{ page.title }}</title>
-  
- </head>
- <body>
-  <div class="wrapper">
-   <div id="header">
-    <div class="container">
-     <h1>natronics.org</h1>
-    </div>
-   </div>
-   
-   <div id="content">
-    <div class="container">
-      {{ content }}
-    </div>
-   </div>
-   
-  </div>
-  <div id="footer">
-   <div class="container">
-    <a class="pull-right" href="#">Back to top</a>
-    <p>
-    made by natronics in the cold barren wasteland of Boulder, CO.
-    </p>
-   </div>
-  </div>
- </body>
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <meta name="description" content="natronics.org">
+    <link rel="stylesheet" href="/assets/style.css">
+    <title>{{ page.title }}</title>
+  </head>
+  <body>
+    <header>
+      <span class="title">natronics.org</span>
+    </header>
+    {{ content }}
+    <footer>
+      made in the vapid, generic boretown of Boulder, CO.
+    </footer>
+  </body>
 </html>
--- a/_layouts/page.html
+++ b/_layouts/page.html
@ -0,0 +1,6 @@
+---
+layout: base
+---
+<main id="page">
+  {{ content }}
+</main>
--- a/_sass/_normalize.scss
+++ b/_sass/_normalize.scss
@ -0,0 +1,424 @@
+/*! normalize.css v3.0.3 | MIT License | github.com/necolas/normalize.css */
+
+/**
+ * 1. Set default font family to sans-serif.
+ * 2. Prevent iOS and IE text size adjust after device orientation change,
+ *    without disabling user zoom.
+ */
+
+html {
+  font-family: sans-serif; /* 1 */
+  -ms-text-size-adjust: 100%; /* 2 */
+  -webkit-text-size-adjust: 100%; /* 2 */
+}
+
+/**
+ * Remove default margin.
+ */
+
+body {
+  margin: 0;
+}
+
+/* HTML5 display definitions
+   ========================================================================== */
+
+/**
+ * Correct `block` display not defined for any HTML5 element in IE 8/9.
+ * Correct `block` display not defined for `details` or `summary` in IE 10/11
+ * and Firefox.
+ * Correct `block` display not defined for `main` in IE 11.
+ */
+
+article,
+aside,
+details,
+figcaption,
+figure,
+footer,
+header,
+hgroup,
+main,
+menu,
+nav,
+section,
+summary {
+  display: block;
+}
+
+/**
+ * 1. Correct `inline-block` display not defined in IE 8/9.
+ * 2. Normalize vertical alignment of `progress` in Chrome, Firefox, and Opera.
+ */
+
+audio,
+canvas,
+progress,
+video {
+  display: inline-block; /* 1 */
+  vertical-align: baseline; /* 2 */
+}
+
+/**
+ * Prevent modern browsers from displaying `audio` without controls.
+ * Remove excess height in iOS 5 devices.
+ */
+
+audio:not([controls]) {
+  display: none;
+  height: 0;
+}
+
+/**
+ * Address `[hidden]` styling not present in IE 8/9/10.
+ * Hide the `template` element in IE 8/9/10/11, Safari, and Firefox < 22.
+ */
+
+[hidden],
+template {
+  display: none;
+}
+
+/* Links
+   ========================================================================== */
+
+/**
+ * Remove the gray background color from active links in IE 10.
+ */
+
+a {
+  background-color: transparent;
+}
+
+/**
+ * Improve readability of focused elements when they are also in an
+ * active/hover state.
+ */
+
+a:active,
+a:hover {
+  outline: 0;
+}
+
+/* Text-level semantics
+   ========================================================================== */
+
+/**
+ * Address styling not present in IE 8/9/10/11, Safari, and Chrome.
+ */
+
+abbr[title] {
+  border-bottom: 1px dotted;
+}
+
+/**
+ * Address style set to `bolder` in Firefox 4+, Safari, and Chrome.
+ */
+
+b,
+strong {
+  font-weight: bold;
+}
+
+/**
+ * Address styling not present in Safari and Chrome.
+ */
+
+dfn {
+  font-style: italic;
+}
+
+/**
+ * Address variable `h1` font-size and margin within `section` and `article`
+ * contexts in Firefox 4+, Safari, and Chrome.
+ */
+
+h1 {
+  font-size: 2em;
+  margin: 0.67em 0;
+}
+
+/**
+ * Address styling not present in IE 8/9.
+ */
+
+mark {
+  background: #ff0;
+  color: #000;
+}
+
+/**
+ * Address inconsistent and variable font size in all browsers.
+ */
+
+small {
+  font-size: 80%;
+}
+
+/**
+ * Prevent `sub` and `sup` affecting `line-height` in all browsers.
+ */
+
+sub,
+sup {
+  font-size: 75%;
+  line-height: 0;
+  position: relative;
+  vertical-align: baseline;
+}
+
+sup {
+  top: -0.5em;
+}
+
+sub {
+  bottom: -0.25em;
+}
+
+/* Embedded content
+   ========================================================================== */
+
+/**
+ * Remove border when inside `a` element in IE 8/9/10.
+ */
+
+img {
+  border: 0;
+}
+
+/**
+ * Correct overflow not hidden in IE 9/10/11.
+ */
+
+svg:not(:root) {
+  overflow: hidden;
+}
+
+/* Grouping content
+   ========================================================================== */
+
+/**
+ * Address margin not present in IE 8/9 and Safari.
+ */
+
+figure {
+  margin: 1em 40px;
+}
+
+/**
+ * Address differences between Firefox and other browsers.
+ */
+
+hr {
+  box-sizing: content-box;
+  height: 0;
+}
+
+/**
+ * Contain overflow in all browsers.
+ */
+
+pre {
+  overflow: auto;
+}
+
+/**
+ * Address odd `em`-unit font size rendering in all browsers.
+ */
+
+code,
+kbd,
+pre,
+samp {
+  font-family: monospace, monospace;
+  font-size: 1em;
+}
+
+/* Forms
+   ========================================================================== */
+
+/**
+ * Known limitation: by default, Chrome and Safari on OS X allow very limited
+ * styling of `select`, unless a `border` property is set.
+ */
+
+/**
+ * 1. Correct color not being inherited.
+ *    Known issue: affects color of disabled elements.
+ * 2. Correct font properties not being inherited.
+ * 3. Address margins set differently in Firefox 4+, Safari, and Chrome.
+ */
+
+button,
+input,
+optgroup,
+select,
+textarea {
+  color: inherit; /* 1 */
+  font: inherit; /* 2 */
+  margin: 0; /* 3 */
+}
+
+/**
+ * Address `overflow` set to `hidden` in IE 8/9/10/11.
+ */
+
+button {
+  overflow: visible;
+}
+
+/**
+ * Address inconsistent `text-transform` inheritance for `button` and `select`.
+ * All other form control elements do not inherit `text-transform` values.
+ * Correct `button` style inheritance in Firefox, IE 8/9/10/11, and Opera.
+ * Correct `select` style inheritance in Firefox.
+ */
+
+button,
+select {
+  text-transform: none;
+}
+
+/**
+ * 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio`
+ *    and `video` controls.
+ * 2. Correct inability to style clickable `input` types in iOS.
+ * 3. Improve usability and consistency of cursor style between image-type
+ *    `input` and others.
+ */
+
+button,
+html input[type="button"], /* 1 */
+input[type="reset"],
+input[type="submit"] {
+  -webkit-appearance: button; /* 2 */
+  cursor: pointer; /* 3 */
+}
+
+/**
+ * Re-set default cursor for disabled elements.
+ */
+
+button[disabled],
+html input[disabled] {
+  cursor: default;
+}
+
+/**
+ * Remove inner padding and border in Firefox 4+.
+ */
+
+button::-moz-focus-inner,
+input::-moz-focus-inner {
+  border: 0;
+  padding: 0;
+}
+
+/**
+ * Address Firefox 4+ setting `line-height` on `input` using `!important` in
+ * the UA stylesheet.
+ */
+
+input {
+  line-height: normal;
+}
+
+/**
+ * It's recommended that you don't attempt to style these elements.
+ * Firefox's implementation doesn't respect box-sizing, padding, or width.
+ *
+ * 1. Address box sizing set to `content-box` in IE 8/9/10.
+ * 2. Remove excess padding in IE 8/9/10.
+ */
+
+input[type="checkbox"],
+input[type="radio"] {
+  box-sizing: border-box; /* 1 */
+  padding: 0; /* 2 */
+}
+
+/**
+ * Fix the cursor style for Chrome's increment/decrement buttons. For certain
+ * `font-size` values of the `input`, it causes the cursor style of the
+ * decrement button to change from `default` to `text`.
+ */
+
+input[type="number"]::-webkit-inner-spin-button,
+input[type="number"]::-webkit-outer-spin-button {
+  height: auto;
+}
+
+/**
+ * 1. Address `appearance` set to `searchfield` in Safari and Chrome.
+ * 2. Address `box-sizing` set to `border-box` in Safari and Chrome.
+ */
+
+input[type="search"] {
+  -webkit-appearance: textfield; /* 1 */
+  box-sizing: content-box; /* 2 */
+}
+
+/**
+ * Remove inner padding and search cancel button in Safari and Chrome on OS X.
+ * Safari (but not Chrome) clips the cancel button when the search input has
+ * padding (and `textfield` appearance).
+ */
+
+input[type="search"]::-webkit-search-cancel-button,
+input[type="search"]::-webkit-search-decoration {
+  -webkit-appearance: none;
+}
+
+/**
+ * Define consistent border, margin, and padding.
+ */
+
+fieldset {
+  border: 1px solid #c0c0c0;
+  margin: 0 2px;
+  padding: 0.35em 0.625em 0.75em;
+}
+
+/**
+ * 1. Correct `color` not being inherited in IE 8/9/10/11.
+ * 2. Remove padding so people aren't caught out if they zero out fieldsets.
+ */
+
+legend {
+  border: 0; /* 1 */
+  padding: 0; /* 2 */
+}
+
+/**
+ * Remove default vertical scrollbar in IE 8/9/10/11.
+ */
+
+textarea {
+  overflow: auto;
+}
+
+/**
+ * Don't inherit the `font-weight` (applied by a rule above).
+ * NOTE: the default cannot safely be changed in Chrome and Safari on OS X.
+ */
+
+optgroup {
+  font-weight: bold;
+}
+
+/* Tables
+   ========================================================================== */
+
+/**
+ * Remove most spacing between table cells.
+ */
+
+table {
+  border-collapse: collapse;
+  border-spacing: 0;
+}
+
+td,
+th {
+  padding: 0;
+}
--- a/_sass/normalize
+++ b/_sass/normalize
@ -0,0 +1 @@
+Subproject commit 5daad010a2f19c12b89f317ba9d2c8e4573210d7
--- a/assets/fonts/league-spartan
+++ b/assets/fonts/league-spartan
@ -0,0 +1 @@
+Subproject commit c350408b07ca284b6c097b7194f2f14f428013f5
--- a/assets/fonts/sorts-mill-goudy
+++ b/assets/fonts/sorts-mill-goudy
@ -0,0 +1 @@
+Subproject commit 06072890c7b05f274215a24f17449655ccb2c8af
--- a/assets/style.sass
+++ b/assets/style.sass
@ -0,0 +1,79 @@
+---
+---
+
+$linkcolor: #3765D4
+$primary: #F18BD1
+
+@import _normalize
+@import /assets/fonts/league-spartan/_webfonts/stylesheet.css
+
+@font-face
+  font-family: 'Sorts Mill Goudy'
+  src: url('/assets/fonts/sorts-mill-goudy/webfonts/GoudyStM-webfont.eot')
+  src: url('/assets/fonts/sorts-mill-goudy/webfonts/GoudyStM-webfont.woff') format('woff'), url('/assets/fonts/sorts-mill-goudy/webfonts/GoudyStM-webfont.ttf') format('truetype'), url('/assets/fonts/sorts-mill-goudy//webfontsGoudyStM-webfont.svg') format('svg')
+  font-weight: 400
+  font-style: normal
+
+@font-face
+  font-family: 'Sorts Mill Goudy'
+  src: url('/assets/fonts/sorts-mill-goudy/webfonts/GoudyStM-Italic-webfont.eot')
+  src: url('/assets/fonts/sorts-mill-goudy/webfonts/GoudyStM-Italic-webfont.woff') format('woff'), url('/assets/fonts/sorts-mill-goudy/webfonts/GoudyStM-Italic-webfont.ttf') format('truetype'), url('/assets/fonts/sorts-mill-goudy//webfontsGoudyStM-Italic-webfont.svg') format('svg')
+  font-weight: 400
+  font-style: italic
+
+header
+  background: $primary
+  border-top: 3px solid darken($primary, 15%)
+  color: #fff
+
+header .title
+  display: block
+  padding: 2% 10% 2% 10%
+  font-family: 'League Spartan'
+  font-size: 1.6em
+
+#page
+  padding: 5% 10% 10% 10%
+  font-family: 'Sorts Mill Goudy'
+  font-size: 1.4em
+  line-height: 1.33em
+
+footer
+  padding: 3% 10% 1% 10%
+  font-family: 'Sorts Mill Goudy'
+  font-size: 0.9em
+  color: #999
+
+footer a, footer a:visited
+  color: #666
+
+a
+  color: $linkcolor
+  text-decoration: none
+
+a:hover
+  text-decoration: underline
+
+a:visited
+  color: darken($linkcolor, 14%)
+
+#page img
+  width: 100%
+
+h1, h2, h3, h4, h5, h6
+  font-family: 'League Spartan'
+
+h1
+  border-bottom: 2px solid #ddd
+  padding-bottom: 0.2em
+  margin-bottom: 1.2em
+
+@media (max-width: 500px)
+  header .title
+    padding: 1% 5% 1% 5%
+  #page
+    padding: 5%
+    text-align: justify
+    font-size: 1.2em
+  footer
+    padding: 3% 5% 1% 5%
--- a/index.markdown
+++ b/index.markdown
@ -1,5 +1,5 @@
 ---
-layout: base
+layout: page
 title: natronics.org
 ---

@ -10,4 +10,4 @@ figuratively and literally, it is a task to occupy the generations.
 And no matter how much progress one makes, there is always the thrill
 of just beginning.

-[GitLab server](https://git.natronics.org)
+[GitLab server](https://git.natronics.org/u/natronics)
--- a/resources/css/bootstrap.min.css
+++ b/resources/css/bootstrap.min.css
--- a/resources/css/style.css
+++ b/resources/css/style.css
@ -1,46 +0,0 @@
-/* Sticky CSS Footer */
-html, body, .wrapper { height: 100%; margin: 0; padding: 0; }
-body > .wrapper { height: auto; min-height: 100%; }
-#content { padding-top: 2.0em; padding-bottom: 250px; }
-#footer { clear: both; position: relative; z-index: 10; height: 150px; margin-top: -150px; padding-top: 20px;}
-
-#header {
-    background: #F18BD1;
-    border-top: 3px solid #CE57A9;
-    color: #fff;
-}
-
-#footer {
-    background: #f7f7f7;
-    border-top: 1px solid #eee;
-    font-size: 0.7em;
-    color: #666;
-}
-
-#log pre {
-    background: #f9f9f9;
-    font-size: 0.65em;
-}
-
-#log pre .time,
-#log pre .break {
-    color: #ccc;
-}
-
-.nick {
-    font-weight: bold;
-}
-
-.nick.a { color: #CE57A9; }
-.nick.b { color: #57CEC4; }
-.nick.c { color: #57CE57; }
-.nick.d { color: #CE8B57; }
-.nick.e { color: #A357CE; }
-.nick.f { color: #5787CE; }
-.nick.g { color: #C4CE57; }
-
-.nick.bot {
-    color: #6A57CE;
-    font-weight: normal;
-    font-style: italic;
-}