Browse Source

refactor css to scss

pull/5/head
Cian Butler 2 years ago
parent
commit
8ff7d91f86
Signed by: butlerx GPG Key ID: B37CA765BAA89170
26 changed files with 819 additions and 1076 deletions
  1. +149
    -317
      .gitignore
  2. +8
    -0
      .prettierrc.js
  3. +24
    -0
      .sass-lint.yml
  4. +4
    -11
      assets/js/search.js
  5. +21
    -0
      assets/scss/404.scss
  6. +178
    -0
      assets/scss/article.scss
  7. +60
    -0
      assets/scss/articleList.scss
  8. +90
    -0
      assets/scss/code.scss
  9. +22
    -0
      assets/scss/colours.scss
  10. +16
    -0
      assets/scss/footer.scss
  11. +21
    -0
      assets/scss/header.scss
  12. +56
    -0
      assets/scss/homepage.scss
  13. +26
    -0
      assets/scss/main.scss
  14. +23
    -0
      assets/scss/nav.scss
  15. +18
    -0
      assets/scss/search.scss
  16. +19
    -0
      assets/scss/typography.scss
  17. +53
    -0
      assets/scss/variables.scss
  18. +3
    -3
      content/post/2019-02-18.md
  19. +2
    -2
      layouts/_default/index.json
  20. +3
    -1
      layouts/_default/search.html
  21. +2
    -0
      layouts/index.html
  22. +3
    -1
      layouts/partials/head.html
  23. +1
    -3
      layouts/partials/hero.html
  24. +17
    -0
      layouts/partials/paginator.html
  25. +0
    -717
      static/css/style.css
  26. +0
    -21
      static/img/base16-eighties.svg

+ 149
- 317
.gitignore View File

@@ -41,334 +41,166 @@ flycheck_*.el

# projectiles files
.projectile
projectile-bookmarks.eld

# directory configuration
.dir-locals.el

# saveplace
places
# network security
/network-security.data

# url cache
url/cache/

# cedet
ede-projects.el
### Hugo ###
# gitginore template for Hugo projects
# website: https://gohugo.io

# smex
smex-items
# generated files by hugo
/public/
/resources/_gen/

# company-statistics
company-statistics-cache.el
# executable may be added to repository
hugo.exe
hugo.darwin
hugo.linux

# anaconda-mode
anaconda-mode/
### Intellij ###
# Covers JetBrains IDEs: IntelliJ, RubyMine, PhpStorm, AppCode, PyCharm, CLion, Android Studio and WebStorm
# Reference: https://intellij-support.jetbrains.com/hc/en-us/articles/206544839

# User-specific stuff
.idea/**/workspace.xml
.idea/**/tasks.xml
.idea/**/usage.statistics.xml
.idea/**/dictionaries
.idea/**/shelf

# Generated files
.idea/**/contentModel.xml

# Sensitive or high-churn files
.idea/**/dataSources/
.idea/**/dataSources.ids
.idea/**/dataSources.local.xml
.idea/**/sqlDataSources.xml
.idea/**/dynamic.xml
.idea/**/uiDesigner.xml
.idea/**/dbnavigator.xml

# Gradle
.idea/**/gradle.xml
.idea/**/libraries

# Gradle and Maven with auto-import
# When using Gradle or Maven with auto-import, you should exclude module files,
# since they will be recreated, and may cause churn. Uncomment if using
# auto-import.
# .idea/modules.xml
# .idea/*.iml
# .idea/modules

# CMake
cmake-build-*/

# Mongo Explorer plugin
.idea/**/mongoSettings.xml

# File-based project format
*.iws

# IntelliJ
out/

# mpeltonen/sbt-idea plugin
.idea_modules/

# JIRA plugin
atlassian-ide-plugin.xml

# Cursive Clojure plugin
.idea/replstate.xml

# Crashlytics plugin (for Android Studio and IntelliJ)
com_crashlytics_export_strings.xml
crashlytics.properties
crashlytics-build.properties
fabric.properties

# Editor-based Rest Client
.idea/httpRequests

# Android studio 3.1+ serialized cache file
.idea/caches/build_file_checksums.ser

# JetBrains templates
**___jb_tmp___

### Intellij Patch ###
# Comment Reason: https://github.com/joeblau/gitignore.io/issues/186#issuecomment-215987721

# *.iml
# modules.xml
# .idea/misc.xml
# *.ipr

# Sonarlint plugin
.idea/sonarlint

### SublimeText ###
# Cache files for Sublime Text
*.tmlanguage.cache
*.tmPreferences.cache
*.stTheme.cache

# Workspace files are user-specific
*.sublime-workspace

# Project files should be checked into the repository, unless a significant
# proportion of contributors will probably not be using Sublime Text
# *.sublime-project

# SFTP configuration file
sftp-config.json

# Package control specific files
Package Control.last-run
Package Control.ca-list
Package Control.ca-bundle
Package Control.system-ca-bundle
Package Control.cache/
Package Control.ca-certs/
Package Control.merged-ca-bundle
Package Control.user-ca-bundle
oscrypto-ca-bundle.crt
bh_unicode_properties.cache

# Sublime-github package stores a github token in this file
# https://packagecontrol.io/packages/sublime-github
GitHub.sublime-settings

### Hugo ###
hugo.exe
/public/
### Vim ###
# swap
.sw[a-p]
.*.sw[a-p]
# session
# Swap
[._]*.s[a-v][a-z]
[._]*.sw[a-p]
[._]s[a-rt-v][a-z]
[._]ss[a-gi-z]
[._]sw[a-p]

# Session
Session.vim
# temporary

# Temporary
.netrwhist
# auto-generated tag files
# Auto-generated tag files
tags

### VisualStudio ###
## Ignore Visual Studio temporary files, build results, and
## files generated by popular Visual Studio add-ons.
##
## Get latest from https://github.com/github/gitignore/blob/master/VisualStudio.gitignore

# User-specific files
*.suo
*.user
*.userosscache
*.sln.docstates

# User-specific files (MonoDevelop/Xamarin Studio)
*.userprefs

# Build results
[Dd]ebug/
[Dd]ebugPublic/
[Rr]elease/
[Rr]eleases/
x64/
x86/
bld/
[Bb]in/
[Oo]bj/
[Ll]og/

# Visual Studio 2015 cache/options directory
.vs/
# Uncomment if you have tasks that create the project's static files in wwwroot
#wwwroot/

# MSTest test Results
[Tt]est[Rr]esult*/
[Bb]uild[Ll]og.*

# NUNIT
*.VisualState.xml
TestResult.xml

# Build Results of an ATL Project
[Dd]ebugPS/
[Rr]eleasePS/
dlldata.c

# .NET Core
project.lock.json
project.fragment.lock.json
artifacts/
**/Properties/launchSettings.json

*_i.c
*_p.c
*_i.h
*.ilk
*.meta
*.obj
*.pch
*.pdb
*.pgc
*.pgd
*.rsp
*.sbr
*.tlb
*.tli
*.tlh
*.tmp
*.tmp_proj
*.log
*.vspscc
*.vssscc
.builds
*.pidb
*.svclog
*.scc

# Chutzpah Test files
_Chutzpah*

# Visual C++ cache files
ipch/
*.aps
*.ncb
*.opendb
*.opensdf
*.sdf
*.cachefile
*.VC.db
*.VC.VC.opendb

# Visual Studio profiler
*.psess
*.vsp
*.vspx
*.sap

# TFS 2012 Local Workspace
$tf/

# Guidance Automation Toolkit
*.gpState

# ReSharper is a .NET coding add-in
_ReSharper*/
*.[Rr]e[Ss]harper
*.DotSettings.user

# JustCode is a .NET coding add-in
.JustCode

# TeamCity is a build add-in
_TeamCity*

# DotCover is a Code Coverage Tool
*.dotCover

# Visual Studio code coverage results
*.coverage
*.coveragexml

# NCrunch
_NCrunch_*
.*crunch*.local.xml
nCrunchTemp_*

# MightyMoose
*.mm.*
AutoTest.Net/

# Web workbench (sass)
.sass-cache/

# Installshield output folder
[Ee]xpress/

# DocProject is a documentation generator add-in
DocProject/buildhelp/
DocProject/Help/*.HxT
DocProject/Help/*.HxC
DocProject/Help/*.hhc
DocProject/Help/*.hhk
DocProject/Help/*.hhp
DocProject/Help/Html2
DocProject/Help/html

# Click-Once directory
publish/

# Publish Web Output
*.[Pp]ublish.xml
*.azurePubxml
# TODO: Uncomment the next line to ignore your web deploy settings.
# By default, sensitive information, such as encrypted password
# should be stored in the .pubxml.user file.
#*.pubxml
*.pubxml.user
*.publishproj

# Microsoft Azure Web App publish settings. Comment the next line if you want to
# checkin your Azure Web App publish settings, but sensitive information contained
# in these scripts will be unencrypted
PublishScripts/

# NuGet Packages
*.nupkg
# The packages folder can be ignored because of Package Restore
**/packages/*
# except build/, which is used as an MSBuild target.
!**/packages/build/
# Uncomment if necessary however generally it will be regenerated when needed
#!**/packages/repositories.config
# NuGet v3's project.json files produces more ignorable files
*.nuget.props
*.nuget.targets

# Microsoft Azure Build Output
csx/
*.build.csdef

# Microsoft Azure Emulator
ecf/
rcf/

# Windows Store app package directories and files
AppPackages/
BundleArtifacts/
Package.StoreAssociation.xml
_pkginfo.txt

# Visual Studio cache files
# files ending in .cache can be ignored
*.[Cc]ache
# but keep track of directories ending in .cache
!*.[Cc]ache/

# Others
ClientBin/
~$*
*.dbmdl
*.dbproj.schemaview
*.jfm
*.pfx
*.publishsettings
orleans.codegen.cs

# Since there are multiple workflows, uncomment next line to ignore bower_components
# (https://github.com/github/gitignore/pull/1529#issuecomment-104372622)
#bower_components/

# RIA/Silverlight projects
Generated_Code/

# Backup & report files from converting an old project file
# to a newer Visual Studio version. Backup files are not needed,
# because we have git ;-)
_UpgradeReport_Files/
Backup*/
UpgradeLog*.XML
UpgradeLog*.htm

# SQL Server files
*.mdf
*.ldf
*.ndf

# Business Intelligence projects
*.rdl.data
*.bim.layout
*.bim_*.settings

# Microsoft Fakes
FakesAssemblies/

# GhostDoc plugin setting file
*.GhostDoc.xml

# Node.js Tools for Visual Studio
.ntvs_analysis.dat
node_modules/

# Typescript v1 declaration files
typings/

# Visual Studio 6 build log
*.plg

# Visual Studio 6 workspace options file
*.opt

# Visual Studio 6 auto-generated workspace file (contains which files were open etc.)
*.vbw

# Visual Studio LightSwitch build output
**/*.HTMLClient/GeneratedArtifacts
**/*.DesktopClient/GeneratedArtifacts
**/*.DesktopClient/ModelManifest.xml
**/*.Server/GeneratedArtifacts
**/*.Server/ModelManifest.xml
_Pvt_Extensions

# Paket dependency manager
.paket/paket.exe
paket-files/

# FAKE - F# Make
.fake/

# JetBrains Rider
.idea/
*.sln.iml

# CodeRush
.cr/

# Python Tools for Visual Studio (PTVS)
__pycache__/
*.pyc

# Cake - Uncomment if you are using it
# tools/**
# !tools/packages.config

# Telerik's JustMock configuration file
*.jmconfig

# BizTalk build output
*.btp.cs
*.btm.cs
*.odx.cs
*.xsd.cs

### VisualStudio Patch ###
# By default, sensitive information, such as encrypted password
# should be stored in the .pubxml.user file.
# Persistent undo
[._]*.un~

### VisualStudioCode ###
.vscode/*
!.vscode/settings.json
!.vscode/tasks.json
!.vscode/launch.json
!.vscode/extensions.json

### VisualStudioCode Patch ###
# Ignore all local history of files
.history

+ 8
- 0
.prettierrc.js View File

@@ -0,0 +1,8 @@
module.exports = {
singleQuote: true,
trailingComma: 'all',
proseWrap: 'always',
printWidth: 80,
endOfLine: 'lf',
tabWidth: 2,
};

+ 24
- 0
.sass-lint.yml View File

@@ -0,0 +1,24 @@
---
options:
max-warnings: 100
files:
include: 'assets/**/*.s+(a|c)ss'
rules:
leading-zero: 0
no-url-domains: 0
no-url-protocols: 0
function-name-format:
- 2
- allow-leading-underscore: false
convention: camelcase
mixin-name-format:
- 2
- allow-leading-underscore: false
convention: camelcase
placeholder-name-format:
- 2
- allow-leading-underscore: false
convention: camelcase
nesting-depth:
- 2
- max-depth: 3

static/js/search.js → assets/js/search.js View File

@@ -39,7 +39,7 @@ function executeSearch(searchQuery) {

function populateResults(result) {
$.each(result, (key, value) => {
const contents = value.item.contents;
const { contents } = value.item;
let snippet = '';
const snippetHighlights = [];
if (fuseOptions.tokenize) {
@@ -49,18 +49,14 @@ function populateResults(result) {
if (mvalue.key === 'tags' || mvalue.key === 'categories') {
snippetHighlights.push(mvalue.value);
} else if (mvalue.key === 'contents') {
const start =
mvalue.indices[0][0] - summaryInclude > 0 ? mvalue.indices[0][0] - summaryInclude : 0;
const start = mvalue.indices[0][0] - summaryInclude > 0 ? mvalue.indices[0][0] - summaryInclude : 0;
const end =
mvalue.indices[0][1] + summaryInclude < contents.length
? mvalue.indices[0][1] + summaryInclude
: contents.length;
snippet += contents.substring(start, end);
snippetHighlights.push(
mvalue.value.substring(
mvalue.indices[0][0],
mvalue.indices[0][1] - mvalue.indices[0][0] + 1,
),
mvalue.value.substring(mvalue.indices[0][0], mvalue.indices[0][1] - mvalue.indices[0][0] + 1),
);
}
});
@@ -91,10 +87,7 @@ function populateResults(result) {
}

function param(name) {
return decodeURIComponent((location.search.split(`${name}=`)[1] || '').split('&')[0]).replace(
/\+/g,
' ',
);
return decodeURIComponent((location.search.split(`${name}=`)[1] || '').split('&')[0]).replace(/\+/g, ' ');
}

function render(templateString, data) {

+ 21
- 0
assets/scss/404.scss View File

@@ -0,0 +1,21 @@
.page-not-found {
h1 {
font-size: 5em;
text-align: center;
}

h2 {
@include margin($bottom: 4rem);
color: base('04');
font-size: 3em;
text-align: center;
}

@media (breakpoint-md) {
@each $level, $size in ('h1': 3em, 'h2': 2em) {
h#{$level} {
font-size: $size;
}
}
}
}

+ 178
- 0
assets/scss/article.scss View File

@@ -0,0 +1,178 @@
@import 'articleList';

@mixin highlight {
@include responsive;
@include margin($bottom: 1rem, $left: -8rem, $right: -8rem);
background-color: base('01');
box-sizing: border-box;
padding: 1em;
width: 52rem;
@media (breakpoint-md) {
@include margin($left: 0, $right: 0);
border-radius: 3px;
}
}

@mixin tableCell {
border-bottom: 1px solid base('04');
line-height: inherit;
padding: 0.25rem 1rem;
}

// Post List Layout
article {
&.single {
.meta {
font-size: 0.9em;
text-align: right;

.key {
color: base('03');
}

.val {
color: base('0e');

a {
color: base('0e');
}
}
}

h1 {
&.headline {
color: base('0a');
font-size: 3em;
margin-top: 0;
}
}

section {
@include articleLayout;

&.body {
@include padding($bottom: 3rem, $top: 4rem);
@each $prop,
$color
in (
'h1': base('0d'),
'h2': base('0b'),
'h3': base('09'),
'h4': base('08'),
'h5': base('02'),
'h6': base('03'),
'a': base('0f')
)
{
#{$prop} {
color: $color;
}
}
}
}

* {
max-width: 100%;
}

pre {
@include margin($bottom: 1rem, $top: 0);
border-radius: 3px;
overflow-x: auto;
padding: 2rem;
}

p {
code {
background: base('03');
border-radius: 3px;
color: base('07');
padding: 0.2em 0.5em;
}
}

div {
&.highlight {
@include highlight;
}
}

figure {
@include highlight;

img {
border-radius: 3px;
max-width: 100%;
width: 100%;
}

figcaption {
margin-top: 1rem;

h4 {
color: base('07');
font-style: italic;
font-weight: normal;
margin-top: 0;
text-align: center;
}
}
}

table {
border-collapse: separate;
border-spacing: 0;
max-width: 100%;
width: 100%;
}

tr {
&:last-child {
td {
border-bottom: 0;
}
}
}

th {
@include tableCell;
font-weight: bold;
text-align: left;
vertical-align: bottom;
}

td {
@include tableCell;
vertical-align: top;
}

blockquote {
@include margin($left: 2rem, $right: 3rem);
border-left: 5px solid base('0c');
padding-left: 1rem;
}

hr {
border: 0;
border-bottom: 1px solid base('04');
}

@media (breakpoint-md) {
.meta {
@include padding($left: 2rem, $right: 2rem);
}

h1 {
&.headline {
@include padding($left: 2rem, $right: 2rem);
}
}

section {
&.body {
@include padding($top: 2rem, $bottom: 1rem);
}
}
}
}
}

+ 60
- 0
assets/scss/articleList.scss View File

@@ -0,0 +1,60 @@
@mixin articleLayout {
background-color: base('07');
color: base('00');
padding: 1rem 8rem;

@media (breakpoint-md) {
@include padding($left: 2rem, $right: 2rem);
}
}

.article-list {
h1 {
&.list-title {
color: base('0a');
font-size: 3em;
}
}

article {
@include articleLayout;
@include padding($bottom: 4rem, $top: 4rem);
margin-bottom: 4rem;

h2 {
&.headline {
color: base('0d');
margin-top: 0;

a {
color: base('0d');
margin-top: 0;
}
}
}

.meta {
margin-bottom: 1rem;

.key {
color: base('03');
}

.val {
color: base('0e');

a {
color: base('0e');
}
}
}

section {
&.summary {
a {
color: base('0f');
}
}
}
}
}

+ 90
- 0
assets/scss/code.scss View File

@@ -0,0 +1,90 @@
pre {
background: base('00');
color: base('07');
}

.highlight {
.hll {
background-color: base('02');
}
@each $lang,
$base
in (
'bp': '07',
'c': '03',
'c1': '03',
'cm': '03',
'cp': '03',
'cs': '03',
'err': '08',
'gd': '08',
'gh': '07',
'gi': '0b',
'gp': '03',
'gu': '0c',
'il': '09',
'k': '0e',
'kc': '0e',
'kd': '0e',
'kn': '0c',
'kp': '0e',
'kr': '0e',
'kt': '0a',
'l': '09',
'ld': '0b',
'm': '09',
'mf': '09',
'mh': '09',
'mi': '09',
'mo': '09',
'n': '07',
'na': '0d',
'nb': '07',
'nc': '0a',
'nd': '0c',
'ne': '08',
'nf': '0d',
'ni': '07',
'nl': '07',
'nn': '0a',
'no': '08',
'nt': '0c',
'nv': '08',
'nx': '0d',
'o': '0c',
'ow': '0c',
'p': '07',
'py': '07',
's': '0b',
's1': '0b',
's2': '0b',
'sb': '0b',
'sc': '07',
'sd': '03',
'se': '09',
'sh': '0b',
'si': '09',
'sr': '0b',
'ss': '0b',
'sx': '0b',
'vc': '08',
'vg': '08',
'vi': '08',
'w': '07'
)
{
.#{$lang} {
color: base($base);
}
}

.ge {
font-style: italic;
}

@each $lang in gh, gp, gs, gu {
.#{$lang} {
font-weight: bold;
}
}
}

+ 22
- 0
assets/scss/colours.scss View File

@@ -0,0 +1,22 @@
@each $num, $color in $base {
.base#{$num} {
color: $color;
}
}

@function drawPalette($colors) {
$length: length($colors);
$color-stops: append((), nth($colors, 1), comma);
$stop-size: 100 / $length;

@for $i from 1 through $length {
$color: nth($colors, $i);

@if $i > 1 {
$color-stops: append($color-stops, $color $stop-size * ($i - 1) * 1%);
}

$color-stops: append($color-stops, $color $stop-size * $i * 1%);
}
@return linear-gradient(to right, $color-stops);
}

+ 16
- 0
assets/scss/footer.scss View File

@@ -0,0 +1,16 @@
footer {
@include pageBase;
@include margin($bottom: 1rem, $top: 2rem);
color: base('03');
font-size: 0.9em;
text-align: center;

a {
color: base('03');
text-decoration: none;
}

@media (breakpoint-md) {
@include margin($bottom: 0, $top: 0);
}
}

+ 21
- 0
assets/scss/header.scss View File

@@ -0,0 +1,21 @@
header {
@include pageBase;
@include margin($bottom: 2rem, $top: 1rem);

a {
&.path {
color: base('0d');
}
}

span {
&.caret {
color: base('07');
}
}

@media (breakpoint-md) {
@include padding($left: 2rem, $right: 2rem);
margin-top: 0;
}
}

+ 56
- 0
assets/scss/homepage.scss View File

@@ -0,0 +1,56 @@
@import 'colours';

.homepage {
@media (breakpoint-md) {
margin-bottom: 2rem;
}

h1 {
&.site-title {
color: base('0c');
font-size: 5em;
text-align: center;
@media (breakpoint-md) {
font-size: 3em;
}
}

&.headline {
color: base('0a');
font-size: 3em;
@media (breakpoint-md) {
@include padding($left: 2rem, $right: 2rem);
}
}
}

.hero-logo {
background: drawPalette(map-values($base));
height: 3em;
margin: 1em 0;
}

section {
&.categories,
&.tags {
@include padding($left: 2rem, $right: 2rem);
}
}

.category {
color: base('0e');

a {
color: base('0e');
}
}

.tag {
color: base('0e');
margin-right: 2em;

a {
color: base('0e');
}
}
}

+ 26
- 0
assets/scss/main.scss View File

@@ -0,0 +1,26 @@
@import 'variables', '404', 'article', 'code', 'footer', 'header', 'homepage',
'nav', 'search', 'typography';

body {
background-color: base('00');
color: base('07');
font-family: $fonts;
font-size: 100%;
line-height: 1.5;
margin: 0;
}

.container {
@include responsive;
@include margin($left: auto, $right: auto);
}

div {
&.right {
float: right;
}

&.clearfix {
overflow: auto;
}
}

+ 23
- 0
assets/scss/nav.scss View File

@@ -0,0 +1,23 @@
nav {
&.paginator {
text-align: center;

a {
color: base('0e');
}

.faded {
color: base('02');
}

.nav-left {
margin-left: auto;
margin-right: 1%;
}

.nav-right {
margin-left: 1%;
margin-right: auto;
}
}
}

+ 18
- 0
assets/scss/search.scss View File

@@ -0,0 +1,18 @@
.search {
display: flex;

h1 {
@include margin($top: inherit, $left: inherit);
}

&-box {
border: None;
border-radius: 2rem;
font-size: 1.5rem;
height: 3rem;
margin-top: 0.5rem;
padding-left: 1.5rem;
transition: background 0.55s ease;
width: 20rem;
}
}

+ 19
- 0
assets/scss/typography.scss View File

@@ -0,0 +1,19 @@
p {
margin-bottom: 1rem;
margin-top: 0;
}

@each $prop, $font-size in ('h1': 2rem, 'h2': 1.5rem, 'h3': 1.25rem, 'h4': 1rem, 'h5': 0.875rem, 'h6': 0.75rem) {
#{$prop} {
@include margin($bottom: 0.5em, $top: 1em);
font-size: $font-size;
font-weight: bold;
line-height: 1.25;
}
}

pre,
code {
font-family: inherit;
font-size: inherit;
}

+ 53
- 0
assets/scss/variables.scss View File

@@ -0,0 +1,53 @@
$fonts: 'Source Code Pro', monospace;
$max-width: 52em;

@custom-media breakpoint-md (max-width: $max-width);

$base: (
'00': #2d2d2d,
'01': #393939,
'02': #515151,
'03': #747369,
'04': #a09f93,
'05': #d3d0c8,
'06': #e8e6df,
'07': #f2f0ec,
'08': #f2777a,
'09': #f99157,
'0a': #fc6,
'0b': #9c9,
'0c': #6cc,
'0d': #69c,
'0e': #c9c,
'0f': #d27b53,
);

@function base($num) {
@return map-get($base, $num);
}

@mixin responsive {
max-width: $max-width;
@media (breakpoint-md) {
width: 100%;
}
}

@mixin padding($top: auto, $right: auto, $bottom: auto, $left: auto) {
padding-bottom: $bottom;
padding-left: $left;
padding-right: $right;
padding-top: $top;
}

@mixin margin($top: auto, $right: auto, $bottom: auto, $left: auto) {
margin-bottom: $bottom;
margin-left: $left;
margin-right: $right;
margin-top: $top;
}

@mixin pageBase {
@include padding($bottom: 1rem, $top: 1rem);
background-color: base('01');
}

+ 3
- 3
content/post/2019-02-18.md View File

@@ -50,7 +50,7 @@ From space.
Below you can see our MySQL Queries counter which clearly shows our 3-hour
restart hack. Where it flatlines is where the service was down.

<image src="/img/2019-02-18-metharme.webp" alt="Metharme stats">
{{< figure src="/img/2019-02-18-metharme.webp" title="Metharme stats" >}}

None of our graphs indicated any sort of hardware limitation to be the culprit,
and our only idea at this point was to (at least try) upgrade our instance.
@@ -84,7 +84,7 @@ as many defaults as possible in the new instance - such as the `SQL_MODE` which
controls what sort of error tolerance it provides. We only needed to set the
following things in the end:

```
```toml
[mysqld]
default_authentication_plugin=mysql_native_password
character_set_server=utf8mb3
@@ -145,7 +145,7 @@ instance was operating normally and it was safe to do so.
Metrics on the new instance have been deceptfully low, however. Here's a screenshot
of our metrics the day this post was made.

<image src="/img/2019-02-18-zeus.webp" alt="Zeus stats">
{{< figure src="/img/2019-02-18-zeus.webp" title="Zeus stats" >}}

As you can see, we're seeing a fraction of the traffic we had before, and things
are just as performant as they always were. This would


+ 2
- 2
layouts/_default/index.json View File

@@ -1,5 +1,5 @@
{{- $.Scratch.Add "index" slice -}}
{{- range .Site.RegularPages -}}
{{- $.Scratch.Add "index" (dict "title" .Title "tags" .Params.tags "categories" .Params.categories "contents" .Plain "permalink" .Permalink "author" .Params.author "dates" .Params.date) -}}
{{- range (where .Data.Pages "Section" "post") -}}
{{- $.Scratch.Add "index" (dict "title" .Title "tags" .Params.tags "categories" .Params.categories "contents" .Plain "permalink" .Permalink "author" .Params.author "dates" .Params.date) -}}
{{- end -}}
{{- $.Scratch.Get "index" | jsonify -}}

+ 3
- 1
layouts/_default/search.html View File

@@ -2,7 +2,9 @@
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fuse.js/3.2.0/fuse.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/mark.js/8.11.1/jquery.mark.min.js"></script>
<script src="{{ "js/search.js" | absURL }}"></script>
{{ $js := resources.Get "js/search.js" }}
{{ $secureJS := $js | resources.Minify | resources.Fingerprint "sha512" }}
<script type="text/javascript" src="{{ $secureJS.Permalink }}" integrity="{{ $secureJS.Data.Integrity }}"></script>
<main role="main" class="article-list">
<span class="search">
<h1 class="list-title">{{ .Title }}</h1>


+ 2
- 0
layouts/index.html View File

@@ -3,11 +3,13 @@
<main role="main" class="homepage">
{{ partial "hero.html" . }}
<h1 class="headline">Recent Posts</h1>
{{ $paginator := .Paginate (where .Data.Pages "Section" "post") (or .Site.Params.paginate 3) }}
<div class="article-list">
{{ range first 3 (where .Data.Pages "Section" "post") }}
{{ partial "article-list-item.html" . }}
{{ end }}
</div>
{{ partial "paginator.html" $paginator }}
{{ with .Site.Taxonomies.categories }}
<h1 class="headline">Categories</h1>
<section class="categories">


+ 3
- 1
layouts/partials/head.html View File

@@ -27,7 +27,9 @@
>
<meta property="og:url" content="{{ .Site.BaseURL }}">
<meta property="og:site_name" content="{{ .Site.Params.hero }}">
<link rel="stylesheet" href="{{ "css/style.css" | relURL }}" type="text/css">
{{ $options := (dict "targetPath" "style.css" "outputStyle" "compressed" "enableSourceMap" true) }}
{{ $style := resources.Get "scss/main.scss" | resources.ToCSS $options | resources.Fingerprint "sha512"}}
<link rel="stylesheet" href="{{ $style.Permalink }}" type="text/css"integrity="{{ $style.Data.Integrity }}" >
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Source+Code+Pro:400,700" type="text/css">
<link rel="alternate" href="{{ "index.xml" | relURL }}" type="application/rss+xml" title="{{ .Site.Title }}">
<link rel="shortcut icon" type="image/x-icon" href="{{ .Site.BaseURL }}favicon.ico">


+ 1
- 3
layouts/partials/hero.html View File

@@ -9,9 +9,7 @@
<span class="base05">]</span><span class="base05">#_</span>
</h1>

<div class="hero-logo">
<img src="{{ "img/base16-eighties.svg" | relURL }}">
</div>
<div class="hero-logo"></div>

<div style="text-align: center;">
{{- .Site.Params.message -}}


+ 17
- 0
layouts/partials/paginator.html View File

@@ -0,0 +1,17 @@
{{ if gt .TotalPages 1 }}
<nav class="paginator">
{{ if .HasPrev }}
<a class="nav-left" href="{{ .Prev.URL }}">&lt; Prev</a>
{{ else }}
<span class="nav-left faded">&lt; Prev</span>
{{ end }}

<span>{{ .PageNumber}} / {{ .TotalPages }}</span>

{{ if .HasNext }}
<a class="nav-right" href="{{ .Next.URL }}">Next &gt;</a>
{{ else }}
<span class="nav-right faded">Next &gt;</span>
{{ end }}
</nav>
{{ end }}

+ 0
- 717
static/css/style.css View File

@@ -1,717 +0,0 @@
/* Base16 Eighties Colorscheme by Chris Kempson (http://chriskempson.com) */

.base00 {
color: #2d2d2d;
}
.base01 {
color: #393939;
}
.base02 {
color: #515151;
}
.base03 {
color: #747369;
}
.base04 {
color: #a09f93;
}
.base05 {
color: #d3d0c8;
}
.base06 {
color: #e8e6df;
}
.base07 {
color: #f2f0ec;
}
.base08 {
color: #f2777a;
}
.base09 {
color: #f99157;
}
.base0a {
color: #ffcc66;
}
.base0b {
color: #99cc99;
}
.base0c {
color: #66cccc;
}
.base0d {
color: #6699cc;
}
.base0e {
color: #cc99cc;
}
.base0f {
color: #d27b53;
}

/* General Page Layout */

body {
margin: 0;
background-color: #2d2d2d;
color: #f2f0ec;
line-height: 1.5;
font-size: 100%;
font-family: 'Source Code Pro', monospace;
}

.container {
max-width: 52em;
margin-left: auto;
margin-right: auto;
}

div.right {
float: right;
}

div.clearfix {
overflow: auto;
}

@media (max-width: 52em) {
.container {
width: 100%;
}
}

.search {
display: flex;
justify-content: space-between;
}

.search.form {
margin-top: 1em;
margin-bottom: 0.5em;
font-size: 3em;
}
.search-box {
-moz-border-radius: 5px;
-moz-transition: background 0.55s ease;
-ms-transition: background 0.55s ease;
-o-transition: background 0.55s ease;
-webkit-border-radius: 5px;
-webkit-transition: background 0.55s ease;
border-radius: 5px;
border: none;
color: #262626;
font-size: 10pt;
height: 50px;
margin-top: 3em;
padding-left: 45px;
transition: background 0.55s ease;
width: 300px;
}

article.single section,
.article-list article {
background-color: #f2f0ec;
color: #2d2d2d;
padding-left: 8rem;
padding-right: 8rem;
padding-top: 1rem;
padding-bottom: 1rem;
}

@media (max-width: 52em) {
article.single section,
.article-list article {
padding-left: 2rem;
padding-right: 2rem;
}
}

header,
footer {
background-color: #393939;
padding-top: 1rem;
padding-bottom: 1rem;
}

header {
margin-top: 1rem;
margin-bottom: 2rem;
}

@media (max-width: 52em) {
header {
margin-top: 0;
padding-left: 2rem;
padding-right: 2rem;
}
}

footer {
margin-top: 2rem;
margin-bottom: 1rem;
text-align: center;
font-size: 0.9em;
color: #747369;
}

@media (max-width: 52em) {
footer {
margin-top: 0;
margin-bottom: 0;
}
}

/* Typography */

h1,
h2,
h3,
h4,
h5,
h6 {
font-weight: bold;
line-height: 1.25;
margin-top: 1em;
margin-bottom: 0.5em;
}

p {
margin-top: 0;
margin-bottom: 1rem;
}

h1 {
font-size: 2rem;
}
h2 {
font-size: 1.5rem;
}
h3 {
font-size: 1.25rem;
}
h4 {
font-size: 1rem;
}
h5 {
font-size: 0.875rem;
}
h6 {
font-size: 0.75rem;
}

pre,
code {
font-family: inherit;
font-size: inherit;
}

/* Header Layout */

header a.path {
color: #6699cc;
}

header span.caret {
color: #f2f0ec;
}

/* Footer Layout */

footer a {
color: #747369;
text-decoration: none;
}

/* 404 Page Layout */

.page-not-found h1 {
text-align: center;
font-size: 5em;
}

.page-not-found h2 {
text-align: center;
font-size: 3em;
color: #a09f93;
margin-bottom: 4rem;
}

@media (max-width: 52em) {
.page-not-found h1 {
font-size: 3em;
}

.page-not-found h2 {
font-size: 2em;
}
}

/* Homepage Layout */

@media (max-width: 52em) {
.homepage {
margin-bottom: 2rem;
}
}

.homepage h1.site-title {
text-align: center;
font-size: 5em;
color: #66cccc;
}

@media (max-width: 52em) {
.homepage h1.site-title {
font-size: 3em;
}
}

.homepage h1.headline {
font-size: 3em;
color: #ffcc66;
}

@media (max-width: 52em) {
.homepage h1.headline {
padding-left: 2rem;
padding-right: 2rem;
}
}

.homepage .hero-logo img {
width: 100%;
}

.homepage section.categories,
.homepage section.tags {
padding-left: 2rem;
padding-right: 2rem;
}

.homepage .category,
.homepage .category a,
.homepage .tag,
.homepage .tag a {
color: #cc99cc;
}

.homepage .tag {
margin-right: 2em;
}

/* Post List Layout */

.article-list h1.list-title {
font-size: 3em;
color: #ffcc66;
}

.article-list article {
padding-top: 4rem;
padding-bottom: 4rem;
margin-bottom: 4rem;
}

.article-list article h2.headline,
.article-list article h2.headline a {
margin-top: 0;
color: #6699cc;
}

.article-list article .meta {
margin-bottom: 1rem;
}

.article-list article .meta .key {
color: #747369;
}

.article-list article .meta .val,
.article-list article .meta .val a {
color: #cc99cc;
}

.article-list article section.summary a {
color: #d27b53;
}

/* Single Post Layout */

article.single .meta {
font-size: 0.9em;
text-align: right;
}

article.single .meta .key {
color: #747369;
}

article.single .meta .val,
article.single .meta .val a {
color: #cc99cc;
}

@media (max-width: 52em) {
article.single .meta {
padding-left: 2rem;
padding-right: 2rem;
}
}

article.single h1.headline {
margin-top: 0;
font-size: 3em;
color: #ffcc66;
}

@media (max-width: 52em) {
article.single h1.headline {
padding-left: 2rem;
padding-right: 2rem;
}
}

article.single section.body {
padding-top: 4rem;
padding-bottom: 3rem;
}

@media (max-width: 52em) {
article.single section.body {
padding-top: 2rem;
padding-bottom: 1rem;
}
}

/* Highlight Colors */

article.single section.body h1 {
color: #6699cc;
}
article.single section.body h2 {
color: #99cc99;
}
article.single section.body h3 {
color: #f99157;
}
article.single section.body h4 {
color: #f2777a;
}
article.single section.body h5 {
color: #515151;
}
article.single section.body h6 {
color: #747369;
}

article.single section.body a {
color: #d27b53;
}

/* Article Elements */

article.single * {
max-width: 100%;
}

article.single pre {
margin-top: 0;
margin-bottom: 1rem;
overflow-x: scroll;
border-radius: 3px;
padding: 2rem;
}

article.single p code {
padding: 0.2em 0.5em;
border-radius: 3px;
background: #747369;
color: #f2f0ec;
}

article.single figure,
article.single div.highlight {
box-sizing: border-box;
max-width: 52rem;
width: 52rem;
margin-left: -8rem;
margin-right: -8rem;
margin-bottom: 1rem;
padding: 1em;
background-color: #393939;
}

@media (max-width: 52em) {
article.single figure,
article.single div.highlight {
width: 100%;
margin-left: 0;
margin-right: 0;
border-radius: 3px;
}
}

article.single figure img {
max-width: 100%;
width: 100%;
border-radius: 3px;
}

article.single figure figcaption {
margin-top: 1rem;
}

article.single figure figcaption h4 {
margin-top: 0;
text-align: center;
font-style: italic;
font-weight: normal;
color: #f2f0ec;
}

article.single table {
border-collapse: separate;
border-spacing: 0;
max-width: 100%;
width: 100%;
}

article.single th,
article.single td {
padding: 0.25rem 1rem;
line-height: inherit;
border-bottom-width: 1px;
border-bottom-style: solid;
border-bottom-color: #a09f93;
}

article.single tr:last-child td {
border-bottom: 0;
}

article.single th {
text-align: left;
font-weight: bold;
vertical-align: bottom;
}

article.single td {
vertical-align: top;
}

article.single blockquote {
margin-left: 2rem;
margin-right: 3rem;
padding-left: 1rem;
border-left: 5px solid #66cccc;
}

article.single hr {
border: 0;
border-bottom-style: solid;
border-bottom-width: 1px;
border-bottom-color: #a09f93;
}

/* Pygments template by Jan T. Sott (https://github.com/idleberg) */

pre {
background: #2d2d2d;
color: #f2f0ec;
}

.highlight .hll {
background-color: #515151;
}
.highlight .c {
color: #747369;
} /* Comment */
.highlight .err {
color: #f2777a;
} /* Error */
.highlight .k {
color: #cc99cc;
} /* Keyword */
.highlight .l {
color: #f99157;
} /* Literal */
.highlight .n {
color: #f2f0ec;
} /* Name */
.highlight .o {
color: #66cccc;
} /* Operator */
.highlight .p {
color: #f2f0ec;
} /* Punctuation */
.highlight .cm {
color: #747369;
} /* Comment.Multiline */
.highlight .cp {
color: #747369;
} /* Comment.Preproc */
.highlight .c1 {
color: #747369;
} /* Comment.Single */
.highlight .cs {
color: #747369;
} /* Comment.Special */
.highlight .gd {
color: #f2777a;
} /* Generic.Deleted */
.highlight .ge {
font-style: italic;
} /* Generic.Emph */
.highlight .gh {
color: #f2f0ec;
font-weight: bold;
} /* Generic.Heading */
.highlight .gi {
color: #99cc99;
} /* Generic.Inserted */
.highlight .gp {
color: #747369;
font-weight: bold;
} /* Generic.Prompt */
.highlight .gs {
font-weight: bold;
} /* Generic.Strong */
.highlight .gu {
color: #66cccc;
font-weight: bold;
} /* Generic.Subheading */
.highlight .kc {
color: #cc99cc;
} /* Keyword.Constant */
.highlight .kd {
color: #cc99cc;
} /* Keyword.Declaration */
.highlight .kn {
color: #66cccc;
} /* Keyword.Namespace */
.highlight .kp {
color: #cc99cc;
} /* Keyword.Pseudo */
.highlight .kr {
color: #cc99cc;
} /* Keyword.Reserved */
.highlight .kt {
color: #ffcc66;
} /* Keyword.Type */
.highlight .ld {
color: #99cc99;
} /* Literal.Date */
.highlight .m {
color: #f99157;
} /* Literal.Number */
.highlight .s {
color: #99cc99;
} /* Literal.String */
.highlight .na {
color: #6699cc;
} /* Name.Attribute */
.highlight .nb {
color: #f2f0ec;
} /* Name.Builtin */
.highlight .nc {
color: #ffcc66;
} /* Name.Class */
.highlight .no {
color: #f2777a;
} /* Name.Constant */
.highlight .nd {
color: #66cccc;
} /* Name.Decorator */
.highlight .ni {
color: #f2f0ec;
} /* Name.Entity */
.highlight .ne {
color: #f2777a;
} /* Name.Exception */
.highlight .nf {
color: #6699cc;
} /* Name.Function */
.highlight .nl {
color: #f2f0ec;
} /* Name.Label */
.highlight .nn {
color: #ffcc66;
} /* Name.Namespace */
.highlight .nx {
color: #6699cc;
} /* Name.Other */
.highlight .py {
color: #f2f0ec;
} /* Name.Property */
.highlight .nt {
color: #66cccc;
} /* Name.Tag */
.highlight .nv {
color: #f2777a;
} /* Name.Variable */
.highlight .ow {
color: #66cccc;
} /* Operator.Word */
.highlight .w {
color: #f2f0ec;
} /* Text.Whitespace */
.highlight .mf {
color: #f99157;
} /* Literal.Number.Float */
.highlight .mh {
color: #f99157;
} /* Literal.Number.Hex */
.highlight .mi {
color: #f99157;
} /* Literal.Number.Integer */
.highlight .mo {
color: #f99157;
} /* Literal.Number.Oct */
.highlight .sb {
color: #99cc99;
} /* Literal.String.Backtick */
.highlight .sc {
color: #f2f0ec;
} /* Literal.String.Char */
.highlight .sd {
color: #747369;
} /* Literal.String.Doc */
.highlight .s2 {
color: #99cc99;
} /* Literal.String.Double */
.highlight .se {
color: #f99157;
} /* Literal.String.Escape */
.highlight .sh {
color: #99cc99;
} /* Literal.String.Heredoc */
.highlight .si {
color: #f99157;
} /* Literal.String.Interpol */
.highlight .sx {
color: #99cc99;
} /* Literal.String.Other */
.highlight .sr {
color: #99cc99;
} /* Literal.String.Regex */
.highlight .s1 {
color: #99cc99;
} /* Literal.String.Single */
.highlight .ss {
color: #99cc99;
} /* Literal.String.Symbol */
.highlight .bp {
color: #f2f0ec;
} /* Name.Builtin.Pseudo */
.highlight .vc {
color: #f2777a;
} /* Name.Variable.Class */
.highlight .vg {
color: #f2777a;
} /* Name.Variable.Global */
.highlight .vi {
color: #f2777a;
} /* Name.Variable.Instance */
.highlight .il {
color: #f99157;
}

+ 0
- 21
static/img/base16-eighties.svg View File

@@ -1,21 +0,0 @@
<svg width="800" height="50" xmlns="http://www.w3.org/2000/svg">
<g>
<title>Base16 Eighties</title>
<line id="base00" x1="025" y1="0" x2="025" y2="720" stroke-width="50" stroke="#2d2d2d" />
<line id="base01" x1="075" y1="0" x2="075" y2="720" stroke-width="50" stroke="#393939" />
<line id="base02" x1="125" y1="0" x2="125" y2="720" stroke-width="50" stroke="#515151" />
<line id="base03" x1="175" y1="0" x2="175" y2="720" stroke-width="50" stroke="#747369" />
<line id="base04" x1="225" y1="0" x2="225" y2="720" stroke-width="50" stroke="#a09f93" />
<line id="base05" x1="275" y1="0" x2="275" y2="720" stroke-width="50" stroke="#d3d0c8" />
<line id="base06" x1="325" y1="0" x2="325" y2="720" stroke-width="50" stroke="#e8e6df" />
<line id="base07" x1="375" y1="0" x2="375" y2="720" stroke-width="50" stroke="#f2f0ec" />
<line id="base08" x1="425" y1="0" x2="425" y2="720" stroke-width="50" stroke="#f2777a" />
<line id="base09" x1="475" y1="0" x2="475" y2="720" stroke-width="50" stroke="#f99157" />
<line id="base0A" x1="525" y1="0" x2="525" y2="720" stroke-width="50" stroke="#ffcc66" />
<line id="base0B" x1="575" y1="0" x2="575" y2="720" stroke-width="50" stroke="#99cc99" />
<line id="base0C" x1="625" y1="0" x2="625" y2="720" stroke-width="50" stroke="#66cccc" />
<line id="base0D" x1="675" y1="0" x2="675" y2="720" stroke-width="50" stroke="#6699cc" />
<line id="base0E" x1="725" y1="0" x2="725" y2="720" stroke-width="50" stroke="#cc99cc" />
<line id="base0F" x1="775" y1="0" x2="775" y2="720" stroke-width="50" stroke="#d27b53" />
</g>
</svg>

Loading…
Cancel
Save