diff --git a/config.toml b/config.toml
index fa78039..afcf545 100644
--- a/config.toml
+++ b/config.toml
@@ -1,5 +1,5 @@
# The URL the site will be built for
-base_url = "http://192.168.1.143:1025"
+base_url = "https://elfsternberg.com/notes"
# Whether to automatically compile all Sass files in the sass directory
compile_sass = true
diff --git a/content/docs/zola/_index.md b/content/docs/zola/_index.md
index 17105b8..7919769 100644
--- a/content/docs/zola/_index.md
+++ b/content/docs/zola/_index.md
@@ -18,8 +18,11 @@ collection and a collection of HTML templates. The templating language is called
## Running Zola
-- `zola init` - Starts a new Zola project. Not for the faint of heart.
-- `zola serve` - Starts a localhost webserver to serve your content for demo
+Zola is a single binary.
+
+- `zola init` - Starts a new Zola project. Creates the structure described in
+ the next section, especially if you enable sass.
+- `zola serve` - Starts a localhost webserver to serve your content for demo.
- `zola build` - Builds a Zola project into a collection of static HTML.
## Project layout
@@ -176,6 +179,8 @@ And an example of this macro (again, in the `header.html` file) would look like
{ title }
{% endmacro %}
+
+
```
diff --git a/sass/design/_breakpoints.scss b/sass/design/_breakpoints.scss
new file mode 100644
index 0000000..ba2ef2b
--- /dev/null
+++ b/sass/design/_breakpoints.scss
@@ -0,0 +1,18 @@
+$breakpoints:
+ 540px 576px,
+ 720px 768px,
+ 960px 992px,
+ 1140px 1200px,
+ 1320px 1400px;
+
+.container {
+ min-width: 320px;
+
+ @each $max, $bp in $breakpoints {
+ @media (min-width: $bp) {
+ max-width: $max;
+ }
+ }
+}
+
+
diff --git a/sass/design/_normalize.css b/sass/design/_normalize.css
new file mode 100644
index 0000000..3344d63
--- /dev/null
+++ b/sass/design/_normalize.css
@@ -0,0 +1,428 @@
+/* normalize.css v4.0.0 | MIT License | github.com/necolas/normalize.css */
+html {
+ font-family: sans-serif;
+ -ms-text-size-adjust: 100%;
+ -webkit-text-size-adjust: 100%;
+}
+
+body {
+ margin: 0;
+}
+
+article,
+aside,
+details,
+figcaption,
+figure,
+footer,
+header,
+main,
+menu,
+nav,
+section,
+summary {
+ display: block;
+}
+
+audio,
+canvas,
+progress,
+video {
+ display: inline-block;
+}
+
+audio:not([controls]) {
+ display: none;
+ height: 0;
+}
+
+progress {
+ vertical-align: baseline;
+}
+
+template,
+[hidden] {
+ display: none;
+}
+a:active,
+a:hover {
+ outline-width: 0;
+}
+
+abbr[title] {
+ border-bottom: none;
+ text-decoration: underline;
+ text-decoration: underline dotted;
+}
+
+b,
+strong {
+ font-weight: inherit;
+}
+
+b,
+strong {
+ font-weight: bolder;
+}
+
+dfn {
+ font-style: italic;
+}
+
+h1 {
+ font-size: 2em;
+ margin: 0.67em 0;
+}
+
+mark {
+
+}
+
+small {
+ font-size: 80%;
+}
+
+sub,
+sup {
+ font-size: 75%;
+ line-height: 0;
+ position: relative;
+ vertical-align: baseline;
+}
+
+sub {
+ bottom: -0.25em;
+}
+
+sup {
+ top: -0.5em;
+}
+
+img {
+ border-style: none;
+}
+
+svg:not(:root) {
+ overflow: hidden;
+}
+
+code,
+kbd,
+pre,
+samp {
+ font-family: monospace, monospace;
+ font-size: 1em;
+}
+
+figure {
+ margin: 1em 40px;
+}
+
+hr {
+ -webkit-box-sizing: content-box;
+ box-sizing: content-box;
+ height: 0;
+ overflow: visible;
+}
+
+button,
+input,
+select,
+textarea {
+ font: inherit;
+}
+
+optgroup {
+ font-weight: bold;
+}
+
+button,
+input,
+select {
+ overflow: visible;
+}
+
+button,
+input,
+select,
+textarea {
+ margin: 0;
+}
+
+button,
+select {
+ text-transform: none;
+}
+
+button,
+[type="button"],
+[type="reset"],
+[type="submit"] {
+ cursor: pointer;
+}
+
+[disabled] {
+ cursor: default;
+}
+
+button,
+html [type="button"],
+[type="reset"],
+[type="submit"] {
+ -webkit-appearance: button;
+}
+
+button::-moz-focus-inner,
+input::-moz-focus-inner {
+ border: 0;
+ padding: 0;
+}
+
+button:-moz-focusring,
+input:-moz-focusring {
+ outline: 1px dotted ButtonText;
+}
+
+fieldset {
+ border: 1px solid #c0c0c0;
+ margin: 0 2px;
+ padding: 0.35em 0.625em 0.75em;
+}
+
+legend {
+ -webkit-box-sizing: border-box;
+ box-sizing: border-box;
+ color: inherit;
+ display: table;
+ max-width: 100%;
+ padding: 0;
+ white-space: normal;
+}
+
+textarea {
+ overflow: auto;
+}
+
+[type="checkbox"],
+[type="radio"] {
+ -webkit-box-sizing: border-box;
+ box-sizing: border-box;
+ padding: 0;
+}
+
+[type="number"]::-webkit-inner-spin-button,
+[type="number"]::-webkit-outer-spin-button {
+ height: auto;
+}
+
+[type="search"] {
+ -webkit-appearance: textfield;
+}
+
+[type="search"]::-webkit-search-cancel-button,
+[type="search"]::-webkit-search-decoration {
+ -webkit-appearance: none;
+}
+
+html {
+ -webkit-box-sizing: border-box;
+ box-sizing: border-box;
+}
+
+*,
+*::before,
+*::after {
+ -webkit-box-sizing: inherit;
+ box-sizing: inherit;
+}
+
+@-ms-viewport {
+ width: device-width;
+}
+
+
+
+[tabindex="-1"]:focus {
+ outline: none !important;
+}
+
+h1, h2, h3, h4, h5, h6 {
+ margin-top: 0;
+ margin-bottom: .5rem;
+}
+
+p {
+ margin-top: 0;
+ margin-bottom: 1rem;
+}
+
+abbr[title],
+abbr[data-original-title] {
+ cursor: help;
+ border-bottom: 1px dotted #818a91;
+}
+
+address {
+ margin-bottom: 1rem;
+ font-style: normal;
+ line-height: inherit;
+}
+
+ol,
+ul,
+dl {
+ margin-top: 0;
+ margin-bottom: 1rem;
+}
+
+ol ol,
+ul ul,
+ol ul,
+ul ol {
+ margin-bottom: 0;
+}
+
+dt {
+ font-weight: bold;
+}
+
+dd {
+ margin-bottom: .5rem;
+ margin-left: 0;
+}
+
+blockquote {
+ margin: 0 0 1rem;
+}
+
+a {
+ text-decoration: none;
+}
+
+a:focus, a:hover {
+ text-decoration: underline;
+}
+
+a:focus {
+ outline: none;
+}
+
+a:not([href]):not([tabindex]) {
+ color: inherit;
+ text-decoration: none;
+}
+
+a:not([href]):not([tabindex]):focus, a:not([href]):not([tabindex]):hover {
+ color: inherit;
+ text-decoration: none;
+}
+
+a:not([href]):not([tabindex]):focus {
+ outline: none;
+}
+
+pre {
+ margin-top: 0;
+ margin-bottom: 1rem;
+ overflow: auto;
+}
+
+figure {
+ margin: 0 0 1rem;
+}
+
+img {
+ vertical-align: middle;
+}
+
+[role="button"] {
+ cursor: pointer;
+}
+
+a,
+area,
+button,
+[role="button"],
+input,
+label,
+select,
+summary,
+textarea {
+ -ms-touch-action: manipulation;
+ touch-action: manipulation;
+}
+
+table {
+ border-collapse: collapse;
+ background-color: transparent;
+}
+
+caption {
+ padding-top: 0.75rem;
+ padding-bottom: 0.75rem;
+ color: #818a91;
+ text-align: left;
+ caption-side: bottom;
+}
+
+th {
+ text-align: left;
+}
+
+label {
+ display: inline-block;
+ margin-bottom: .5rem;
+}
+
+button:focus {
+ outline: none;
+}
+
+input,
+button,
+select,
+textarea {
+ margin: 0;
+ line-height: inherit;
+ border-radius: 0;
+}
+
+input[type="radio"]:disabled,
+input[type="checkbox"]:disabled {
+ cursor: not-allowed;
+}
+
+input[type="date"],
+input[type="time"],
+input[type="datetime-local"],
+input[type="month"] {
+ -webkit-appearance: listbox;
+}
+
+textarea {
+ resize: vertical;
+}
+
+fieldset {
+ min-width: 0;
+ padding: 0;
+ margin: 0;
+ border: 0;
+}
+
+legend {
+ display: block;
+ width: 100%;
+ padding: 0;
+ margin-bottom: .5rem;
+ font-size: 1.5rem;
+ line-height: inherit;
+}
+
+input[type="search"] {
+ -webkit-appearance: none;
+}
+
+output {
+ display: inline-block;
+}
diff --git a/sass/main.scss b/sass/main.scss
index e0aa0c6..5bc7231 100644
--- a/sass/main.scss
+++ b/sass/main.scss
@@ -18,14 +18,9 @@ header.header {
}
.container {
- width: 100%;
- padding-right: 1.5rem;
- padding-left: 1.5rem;
+ padding-right: calc(clamp(0.5rem, -0.7rem + 5.3333vw, 2.5rem));
+ padding-left: calc(clamp(0.5rem, -0.7rem + 5.3333vw, 2.5rem));
margin-right: auto;
margin-left: auto;
}
-.navbar .container {
- display: flex;
- align-items: flex-start;
-}