arch/blog.gabrielsimmer.com
1
0
Fork 0
mirror of https://github.com/gmemstr/blog.gabrielsimmer.com.git synced 2024-09-16 18:41:11 +01:00
Code Issues Packages Projects Releases Wiki Activity

New layout

Browse source
This commit is contained in:
Gabriel Simmer 2023-07-21 09:52:33 +01:00
parent 5202632330
commit 337887ccd8
Signed by: arch
GPG key ID: C81B106D46C5B875
4 changed files with 28 additions and 332 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
config.toml
View file

@ -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

18
themes/gs/layouts/_default/single.html
View file

@ -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 }}

35
themes/gs/layouts/index.html
View file

@ -2,39 +2,36 @@
<div class="container">
<div class="row">
<div class="twelve columns">
<h1>{{ .Title | default .Site.Title }}</h1>
<nav><a href="/index.xml">rss</a></nav>
<h1>{{ .Title | default .Site.Title }}</h1>
<nav><a href="/index.xml">rss</a></nav>
</div>
</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>
<p><span>{{ .Date.Format "Jan 2, 2006" }}</span> - <a href="{{ .Permalink }}">{{ .Title }}</a>
</p>
</div>
<div>
{{ .Summary }}
</div>
</div>
{{ end }}
<div class="pagination">
{{ $paginator := .Paginator }}
{{ if gt $paginator.TotalPages 1 }}
<ul>
{{ if $paginator.HasNext }}
<div class="pagination">
{{ $paginator := .Paginator }}
{{ if gt $paginator.TotalPages 1 }}
<ul>
{{ if $paginator.HasNext }}
<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>
{{ end }}
</ul>
{{ end }}
</div>
{{ end }}
</ul>
{{ end }}
</div>
</div>
</div>
</div>

305
themes/gs/static/css/styles.css
View file

@ -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;
}