mirror of
https://github.com/gmemstr/blog.gabrielsimmer.com.git
synced 2024-09-18 19:31: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"
|
||||
theme = "gs"
|
||||
ignorefiles = [ "content/posts/exported/.*", "content/posts/drafts/.*" ]
|
||||
paginate = 5
|
||||
paginate = 1000
|
||||
[markup.goldmark.renderer]
|
||||
unsafe= true
|
||||
|
|
|
@ -5,27 +5,13 @@
|
|||
<h1>{{ default .Site.Title }}</h1>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<div class="eight columns article">
|
||||
<article>
|
||||
<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 }}>
|
||||
{{- .Date.Format "January 2, 2006" -}}
|
||||
</time>
|
||||
{{- .Content -}}
|
||||
<div><a href="/index.xml">rss</a></div>
|
||||
</div>
|
||||
</div>
|
||||
</article>
|
||||
{{ end }}
|
||||
|
||||
|
|
|
@ -8,16 +8,13 @@
|
|||
</div>
|
||||
|
||||
<div class="row">
|
||||
<div class="eight columns">
|
||||
<div class="article-list">
|
||||
{{- .Content -}}
|
||||
{{ range .Paginator.Pages }}
|
||||
<div class="post-summary">
|
||||
<div class="post-header">
|
||||
<h2><a href="{{ .Permalink }}">{{ .Title }}</a></h2>
|
||||
<span>{{ .Date.Format "January 2, 2006" }}</span>
|
||||
</div>
|
||||
<div>
|
||||
{{ .Summary }}
|
||||
<p><span>{{ .Date.Format "Jan 2, 2006" }}</span> - <a href="{{ .Permalink }}">{{ .Title }}</a>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
{{ end }}
|
||||
|
|
|
@ -17,60 +17,6 @@
|
|||
:root {
|
||||
--background-colour: #fff;
|
||||
--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 {
|
||||
|
@ -83,22 +29,6 @@
|
|||
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 {
|
||||
max-width: 100%;
|
||||
}
|
||||
|
@ -107,6 +37,11 @@ iframe {
|
|||
max-width: 100%;
|
||||
}
|
||||
|
||||
article, .article-list {
|
||||
max-width: 72ch;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
/* Base Styles
|
||||
–––––––––––––––––––––––––––––––––––––––––––––––––– */
|
||||
/* NOTE
|
||||
|
@ -125,10 +60,10 @@ html {
|
|||
-webkit-text-size-adjust: 100%;
|
||||
}
|
||||
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;
|
||||
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);
|
||||
background-color: var(--background-colour);
|
||||
margin: 20px 0;
|
||||
|
@ -138,114 +73,14 @@ body {
|
|||
:root {
|
||||
--background-colour: #202225;
|
||||
--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
|
||||
–––––––––––––––––––––––––––––––––––––––––––––––––– */
|
||||
h1, h2, h3, h4, h5, h6 {
|
||||
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; }
|
||||
h2 { font-size: 3.6rem; line-height: 1.25; }
|
||||
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; }
|
||||
}
|
||||
|
||||
p {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
|
||||
/* Links
|
||||
–––––––––––––––––––––––––––––––––––––––––––––––––– */
|
||||
a {
|
||||
|
@ -280,120 +110,3 @@ a {
|
|||
a:hover {
|
||||
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