mirror of
https://github.com/gmemstr/blog.gabrielsimmer.com.git
synced 2024-09-19 11:41:10 +01:00
New layout
This commit is contained in:
parent
5202632330
commit
337887ccd8
|
@ -3,6 +3,6 @@ languageCode = "en-us"
|
||||||
title = "Gabriel's Blog"
|
title = "Gabriel's Blog"
|
||||||
theme = "gs"
|
theme = "gs"
|
||||||
ignorefiles = [ "content/posts/exported/.*", "content/posts/drafts/.*" ]
|
ignorefiles = [ "content/posts/exported/.*", "content/posts/drafts/.*" ]
|
||||||
paginate = 5
|
paginate = 1000
|
||||||
[markup.goldmark.renderer]
|
[markup.goldmark.renderer]
|
||||||
unsafe= true
|
unsafe= true
|
||||||
|
|
|
@ -5,27 +5,13 @@
|
||||||
<h1>{{ default .Site.Title }}</h1>
|
<h1>{{ default .Site.Title }}</h1>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
<article>
|
||||||
<div class="row">
|
|
||||||
<div class="eight columns article">
|
|
||||||
<h2>{{- .Title -}}</h2>
|
<h2>{{- .Title -}}</h2>
|
||||||
{{ with .Params.author }}
|
|
||||||
<p>
|
|
||||||
By <strong>
|
|
||||||
{{ if reflect.IsSlice . }}
|
|
||||||
{{ delimit . ", " | markdownify }}
|
|
||||||
{{else}}
|
|
||||||
{{ . | markdownify }}
|
|
||||||
{{ end }}
|
|
||||||
</strong>
|
|
||||||
</p>
|
|
||||||
{{ end }}
|
|
||||||
<time {{ printf `datetime="%s"` (.Date.Format "2006-01-02T15:04:05Z07:00") | safeHTMLAttr }}>
|
<time {{ printf `datetime="%s"` (.Date.Format "2006-01-02T15:04:05Z07:00") | safeHTMLAttr }}>
|
||||||
{{- .Date.Format "January 2, 2006" -}}
|
{{- .Date.Format "January 2, 2006" -}}
|
||||||
</time>
|
</time>
|
||||||
{{- .Content -}}
|
{{- .Content -}}
|
||||||
<div><a href="/index.xml">rss</a></div>
|
<div><a href="/index.xml">rss</a></div>
|
||||||
</div>
|
</article>
|
||||||
</div>
|
|
||||||
{{ end }}
|
{{ end }}
|
||||||
|
|
||||||
|
|
|
@ -2,39 +2,36 @@
|
||||||
<div class="container">
|
<div class="container">
|
||||||
<div class="row">
|
<div class="row">
|
||||||
<div class="twelve columns">
|
<div class="twelve columns">
|
||||||
<h1>{{ .Title | default .Site.Title }}</h1>
|
<h1>{{ .Title | default .Site.Title }}</h1>
|
||||||
<nav><a href="/index.xml">rss</a></nav>
|
<nav><a href="/index.xml">rss</a></nav>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="row">
|
<div class="row">
|
||||||
<div class="eight columns">
|
<div class="article-list">
|
||||||
{{- .Content -}}
|
{{- .Content -}}
|
||||||
{{ range .Paginator.Pages }}
|
{{ range .Paginator.Pages }}
|
||||||
<div class="post-summary">
|
<div class="post-summary">
|
||||||
<div class="post-header">
|
<div class="post-header">
|
||||||
<h2><a href="{{ .Permalink }}">{{ .Title }}</a></h2>
|
<p><span>{{ .Date.Format "Jan 2, 2006" }}</span> - <a href="{{ .Permalink }}">{{ .Title }}</a>
|
||||||
<span>{{ .Date.Format "January 2, 2006" }}</span>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
<div>
|
|
||||||
{{ .Summary }}
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
|
||||||
{{ end }}
|
{{ end }}
|
||||||
<div class="pagination">
|
<div class="pagination">
|
||||||
{{ $paginator := .Paginator }}
|
{{ $paginator := .Paginator }}
|
||||||
{{ if gt $paginator.TotalPages 1 }}
|
{{ if gt $paginator.TotalPages 1 }}
|
||||||
<ul>
|
<ul>
|
||||||
{{ if $paginator.HasNext }}
|
{{ if $paginator.HasNext }}
|
||||||
<li><a href="{{ $paginator.Next.URL }}">Older</a></li>
|
<li><a href="{{ $paginator.Next.URL }}">Older</a></li>
|
||||||
{{ end }}
|
{{ end }}
|
||||||
|
|
||||||
{{ if $paginator.HasPrev }}
|
{{ if $paginator.HasPrev }}
|
||||||
<li><a href="{{ $paginator.Prev.URL }}">Newer</a></li>
|
<li><a href="{{ $paginator.Prev.URL }}">Newer</a></li>
|
||||||
{{ end }}
|
{{ end }}
|
||||||
</ul>
|
</ul>
|
||||||
{{ end }}
|
{{ end }}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
@ -17,60 +17,6 @@
|
||||||
:root {
|
:root {
|
||||||
--background-colour: #fff;
|
--background-colour: #fff;
|
||||||
--text-colour: #222;
|
--text-colour: #222;
|
||||||
--php: rgb(136, 146, 191);
|
|
||||||
--javascript: #83CD29;
|
|
||||||
--go: #00ADD8;
|
|
||||||
--flutter: #02569B;
|
|
||||||
--clojure: #62B132;
|
|
||||||
--rust: #DEA584;
|
|
||||||
--python: #4584B6;
|
|
||||||
}
|
|
||||||
|
|
||||||
.pill {
|
|
||||||
border: 1px solid var(--text-colour);
|
|
||||||
font-size: 55%;
|
|
||||||
padding: 0 10px;
|
|
||||||
vertical-align: middle;
|
|
||||||
border-radius: 5px;
|
|
||||||
font-weight: bold;
|
|
||||||
background-color: var(--text-colour);
|
|
||||||
color: var(--background-colour);
|
|
||||||
}
|
|
||||||
|
|
||||||
.php {
|
|
||||||
background-color: var(--php);
|
|
||||||
border-color: var(--php);
|
|
||||||
color: var(--background-colour);
|
|
||||||
}
|
|
||||||
.javascript {
|
|
||||||
background-color: var(--javascript);
|
|
||||||
border-color: var(--javascript);
|
|
||||||
color: var(--background-colour);
|
|
||||||
}
|
|
||||||
.go {
|
|
||||||
background-color: var(--go);
|
|
||||||
border-color: var(--go);
|
|
||||||
color: var(--background-colour);
|
|
||||||
}
|
|
||||||
.flutter {
|
|
||||||
background-color: var(--flutter);
|
|
||||||
border-color: var(--flutter);
|
|
||||||
color: var(--background-colour);
|
|
||||||
}
|
|
||||||
.clojure {
|
|
||||||
background-color: var(--clojure);
|
|
||||||
border-color: var(--clojure);
|
|
||||||
color: var(--background-colour);
|
|
||||||
}
|
|
||||||
.rust {
|
|
||||||
background-color: var(--rust);
|
|
||||||
border-color: var(--rust);
|
|
||||||
color: var(--background-colour);
|
|
||||||
}
|
|
||||||
.python {
|
|
||||||
background-color: var(--python);
|
|
||||||
border-color: var(--python);
|
|
||||||
color: var(--background-colour);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.pagination {
|
.pagination {
|
||||||
|
@ -83,22 +29,6 @@
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
}
|
}
|
||||||
|
|
||||||
.post-summary {
|
|
||||||
margin-bottom: 50px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.post-header {
|
|
||||||
margin-bottom: 2rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.post-header > h2 {
|
|
||||||
margin-bottom: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.article {
|
|
||||||
padding-bottom: 100px;
|
|
||||||
}
|
|
||||||
|
|
||||||
img {
|
img {
|
||||||
max-width: 100%;
|
max-width: 100%;
|
||||||
}
|
}
|
||||||
|
@ -107,6 +37,11 @@ iframe {
|
||||||
max-width: 100%;
|
max-width: 100%;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
article, .article-list {
|
||||||
|
max-width: 72ch;
|
||||||
|
margin: 0 auto;
|
||||||
|
}
|
||||||
|
|
||||||
/* Base Styles
|
/* Base Styles
|
||||||
–––––––––––––––––––––––––––––––––––––––––––––––––– */
|
–––––––––––––––––––––––––––––––––––––––––––––––––– */
|
||||||
/* NOTE
|
/* NOTE
|
||||||
|
@ -125,10 +60,10 @@ html {
|
||||||
-webkit-text-size-adjust: 100%;
|
-webkit-text-size-adjust: 100%;
|
||||||
}
|
}
|
||||||
body {
|
body {
|
||||||
font-size: 1.6em; /* currently ems cause chrome bug misinterpreting rems on body element */
|
font-size: 1.8em; /* currently ems cause chrome bug misinterpreting rems on body element */
|
||||||
line-height: 1.6;
|
line-height: 1.6;
|
||||||
font-weight: 400;
|
font-weight: 400;
|
||||||
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
|
font-family: -apple-system,BlinkMacSystemFont,avenir next,avenir,segoe ui,helvetica neue,helvetica,Cantarell,Ubuntu,roboto,noto,arial,sans-serif;
|
||||||
color: var(--text-colour);
|
color: var(--text-colour);
|
||||||
background-color: var(--background-colour);
|
background-color: var(--background-colour);
|
||||||
margin: 20px 0;
|
margin: 20px 0;
|
||||||
|
@ -138,114 +73,14 @@ body {
|
||||||
:root {
|
:root {
|
||||||
--background-colour: #202225;
|
--background-colour: #202225;
|
||||||
--text-colour: #dcddde;
|
--text-colour: #dcddde;
|
||||||
--flutter: #0175C2;
|
|
||||||
--python: #FFDE57;
|
|
||||||
}
|
|
||||||
.pill {
|
|
||||||
border: 1px solid var(--text-colour);
|
|
||||||
background-color: var(--background-colour);
|
|
||||||
color: var(--text-colour);
|
|
||||||
}
|
|
||||||
.php {
|
|
||||||
background-color: var(--background-colour);
|
|
||||||
border-color: var(--php);
|
|
||||||
color: var(--php);
|
|
||||||
}
|
|
||||||
.javascript {
|
|
||||||
background-color: var(--background-colour);
|
|
||||||
border-color: var(--javascript);
|
|
||||||
color: var(--javascript);
|
|
||||||
}
|
|
||||||
.go {
|
|
||||||
background-color: var(--background-colour);
|
|
||||||
border-color: var(--go);
|
|
||||||
color: var(--go);
|
|
||||||
}
|
|
||||||
.flutter {
|
|
||||||
background-color: var(--background-colour);
|
|
||||||
border-color: var(--go);
|
|
||||||
color: var(--go);
|
|
||||||
}
|
|
||||||
.clojure {
|
|
||||||
background-color: var(--background-colour);
|
|
||||||
border-color: var(--clojure);
|
|
||||||
color: var(--clojure);
|
|
||||||
}
|
|
||||||
.rust {
|
|
||||||
background-color: var(--background-colour);
|
|
||||||
border-color: var(--rust);
|
|
||||||
color: var(--rust);
|
|
||||||
}
|
|
||||||
.python {
|
|
||||||
background-color: var(--background-colour);
|
|
||||||
border-color: var(--python);
|
|
||||||
color: var(--python);
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Grid
|
|
||||||
–––––––––––––––––––––––––––––––––––––––––––––––––– */
|
|
||||||
.container {
|
|
||||||
position: relative;
|
|
||||||
width: 100%;
|
|
||||||
max-width: 960px;
|
|
||||||
margin: 0 auto;
|
|
||||||
padding: 0 20px;
|
|
||||||
box-sizing: border-box; }
|
|
||||||
.column,
|
|
||||||
.columns {
|
|
||||||
width: 100%;
|
|
||||||
float: left;
|
|
||||||
box-sizing: border-box; }
|
|
||||||
|
|
||||||
/* For devices larger than 400px */
|
|
||||||
@media (min-width: 400px) {
|
|
||||||
.container {
|
|
||||||
width: 85%;
|
|
||||||
padding: 0;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
/* For devices larger than 550px */
|
|
||||||
@media (min-width: 550px) {
|
|
||||||
.container {
|
|
||||||
width: 80%;
|
|
||||||
}
|
|
||||||
.column,
|
|
||||||
.columns {
|
|
||||||
margin-left: 4%;
|
|
||||||
}
|
|
||||||
.column:first-child,
|
|
||||||
.columns:first-child {
|
|
||||||
margin-left: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.one.column,
|
|
||||||
.one.columns { width: 4.66666666667%; }
|
|
||||||
.two.columns { width: 13.3333333333%; }
|
|
||||||
.three.columns { width: 22%; }
|
|
||||||
.four.columns { width: 30.6666666667%; }
|
|
||||||
.five.columns { width: 39.3333333333%; }
|
|
||||||
.six.columns { width: 48%; }
|
|
||||||
.seven.columns { width: 56.6666666667%; }
|
|
||||||
.eight.columns { width: 65.3333333333%; }
|
|
||||||
.nine.columns { width: 74.0%; }
|
|
||||||
.ten.columns { width: 82.6666666667%; }
|
|
||||||
.eleven.columns { width: 91.3333333333%; }
|
|
||||||
.twelve.columns { width: 100%; margin-left: 0; }
|
|
||||||
|
|
||||||
.one-third.column { width: 30.6666666667%; }
|
|
||||||
.two-thirds.column { width: 65.3333333333%; }
|
|
||||||
|
|
||||||
.one-half.column { width: 48%; }
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Typography
|
/* Typography
|
||||||
–––––––––––––––––––––––––––––––––––––––––––––––––– */
|
–––––––––––––––––––––––––––––––––––––––––––––––––– */
|
||||||
h1, h2, h3, h4, h5, h6 {
|
h1, h2, h3, h4, h5, h6 {
|
||||||
margin-top: 0;
|
margin-top: 0;
|
||||||
margin-bottom: 2rem;
|
font-weight: 300;
|
||||||
font-weight: 300; }
|
margin-bottom: 0; }
|
||||||
h1 { font-size: 4.0rem; line-height: 1.2; font-weight: 500; }
|
h1 { font-size: 4.0rem; line-height: 1.2; font-weight: 500; }
|
||||||
h2 { font-size: 3.6rem; line-height: 1.25; }
|
h2 { font-size: 3.6rem; line-height: 1.25; }
|
||||||
h3 { font-size: 3.0rem; line-height: 1.3; font-weight: 500; }
|
h3 { font-size: 3.0rem; line-height: 1.3; font-weight: 500; }
|
||||||
|
@ -267,11 +102,6 @@ h6 { font-size: 1.5rem; line-height: 1.6; }
|
||||||
h6 { font-size: 1.5rem; }
|
h6 { font-size: 1.5rem; }
|
||||||
}
|
}
|
||||||
|
|
||||||
p {
|
|
||||||
margin-top: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
/* Links
|
/* Links
|
||||||
–––––––––––––––––––––––––––––––––––––––––––––––––– */
|
–––––––––––––––––––––––––––––––––––––––––––––––––– */
|
||||||
a {
|
a {
|
||||||
|
@ -280,120 +110,3 @@ a {
|
||||||
a:hover {
|
a:hover {
|
||||||
color: #0FA0CE;
|
color: #0FA0CE;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
/* Buttons
|
|
||||||
–––––––––––––––––––––––––––––––––––––––––––––––––– */
|
|
||||||
.button,
|
|
||||||
button,
|
|
||||||
input[type="submit"],
|
|
||||||
input[type="reset"],
|
|
||||||
input[type="button"] {
|
|
||||||
display: inline-block;
|
|
||||||
height: 38px;
|
|
||||||
padding: 0 30px;
|
|
||||||
color: #555;
|
|
||||||
text-align: center;
|
|
||||||
font-size: 11px;
|
|
||||||
font-weight: 600;
|
|
||||||
line-height: 38px;
|
|
||||||
text-transform: uppercase;
|
|
||||||
text-decoration: none;
|
|
||||||
white-space: nowrap;
|
|
||||||
background-color: transparent;
|
|
||||||
border-radius: 4px;
|
|
||||||
border: 1px solid #bbb;
|
|
||||||
cursor: pointer;
|
|
||||||
box-sizing: border-box; }
|
|
||||||
.button:hover,
|
|
||||||
button:hover,
|
|
||||||
input[type="submit"]:hover,
|
|
||||||
input[type="reset"]:hover,
|
|
||||||
input[type="button"]:hover,
|
|
||||||
.button:focus,
|
|
||||||
button:focus,
|
|
||||||
input[type="submit"]:focus,
|
|
||||||
input[type="reset"]:focus,
|
|
||||||
input[type="button"]:focus {
|
|
||||||
color: #333;
|
|
||||||
border-color: #888;
|
|
||||||
outline: 0; }
|
|
||||||
.button.button-primary,
|
|
||||||
button.button-primary,
|
|
||||||
input[type="submit"].button-primary,
|
|
||||||
input[type="reset"].button-primary,
|
|
||||||
input[type="button"].button-primary {
|
|
||||||
color: #FFF;
|
|
||||||
background-color: #33C3F0;
|
|
||||||
border-color: #33C3F0; }
|
|
||||||
.button.button-primary:hover,
|
|
||||||
button.button-primary:hover,
|
|
||||||
input[type="submit"].button-primary:hover,
|
|
||||||
input[type="reset"].button-primary:hover,
|
|
||||||
input[type="button"].button-primary:hover,
|
|
||||||
.button.button-primary:focus,
|
|
||||||
button.button-primary:focus,
|
|
||||||
input[type="submit"].button-primary:focus,
|
|
||||||
input[type="reset"].button-primary:focus,
|
|
||||||
input[type="button"].button-primary:focus {
|
|
||||||
color: #FFF;
|
|
||||||
background-color: #1EAEDB;
|
|
||||||
border-color: #1EAEDB; }
|
|
||||||
|
|
||||||
/* Spacing
|
|
||||||
–––––––––––––––––––––––––––––––––––––––––––––––––– */
|
|
||||||
button,
|
|
||||||
.button {
|
|
||||||
margin-bottom: 1rem; }
|
|
||||||
input,
|
|
||||||
textarea,
|
|
||||||
select,
|
|
||||||
fieldset {
|
|
||||||
margin-bottom: 1.5rem; }
|
|
||||||
pre,
|
|
||||||
blockquote,
|
|
||||||
dl,
|
|
||||||
figure,
|
|
||||||
table,
|
|
||||||
p,
|
|
||||||
ul,
|
|
||||||
ol,
|
|
||||||
form {
|
|
||||||
margin-bottom: 2.5rem; }
|
|
||||||
|
|
||||||
|
|
||||||
/* Utilities
|
|
||||||
–––––––––––––––––––––––––––––––––––––––––––––––––– */
|
|
||||||
.u-full-width {
|
|
||||||
width: 100%;
|
|
||||||
box-sizing: border-box; }
|
|
||||||
.u-max-full-width {
|
|
||||||
max-width: 100%;
|
|
||||||
box-sizing: border-box; }
|
|
||||||
.u-pull-right {
|
|
||||||
float: right; }
|
|
||||||
.u-pull-left {
|
|
||||||
float: left; }
|
|
||||||
|
|
||||||
|
|
||||||
/* Misc
|
|
||||||
–––––––––––––––––––––––––––––––––––––––––––––––––– */
|
|
||||||
hr {
|
|
||||||
margin-top: 3rem;
|
|
||||||
margin-bottom: 3.5rem;
|
|
||||||
border-width: 0;
|
|
||||||
border-top: 1px solid var(--text-colour);
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
/* Clearing
|
|
||||||
–––––––––––––––––––––––––––––––––––––––––––––––––– */
|
|
||||||
|
|
||||||
/* Self Clearing Goodness */
|
|
||||||
.container:after,
|
|
||||||
.row:after,
|
|
||||||
.u-cf {
|
|
||||||
content: "";
|
|
||||||
display: table;
|
|
||||||
clear: both;
|
|
||||||
}
|
|
Loading…
Reference in a new issue