From 337887ccd8b9fef3eb5670a1866c2bedf0f92296 Mon Sep 17 00:00:00 2001 From: Gabriel Simmer Date: Fri, 21 Jul 2023 09:52:33 +0100 Subject: [PATCH] New layout --- config.toml | 2 +- themes/gs/layouts/_default/single.html | 18 +- themes/gs/layouts/index.html | 35 ++- themes/gs/static/css/styles.css | 305 +------------------------ 4 files changed, 28 insertions(+), 332 deletions(-) diff --git a/config.toml b/config.toml index d23f9e7..1eb37b0 100644 --- a/config.toml +++ b/config.toml @@ -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 diff --git a/themes/gs/layouts/_default/single.html b/themes/gs/layouts/_default/single.html index c905b85..91024bb 100644 --- a/themes/gs/layouts/_default/single.html +++ b/themes/gs/layouts/_default/single.html @@ -5,27 +5,13 @@

{{ default .Site.Title }}

- -
-
+

{{- .Title -}}

- {{ with .Params.author }} -

- By - {{ if reflect.IsSlice . }} - {{ delimit . ", " | markdownify }} - {{else}} - {{ . | markdownify }} - {{ end }} - -

- {{ end }} {{- .Content -}}
rss
-
-
+ {{ end }} diff --git a/themes/gs/layouts/index.html b/themes/gs/layouts/index.html index 953130d..fd8ae9d 100644 --- a/themes/gs/layouts/index.html +++ b/themes/gs/layouts/index.html @@ -2,39 +2,36 @@
-

{{ .Title | default .Site.Title }}

- +

{{ .Title | default .Site.Title }}

+
-
+
{{- .Content -}} {{ range .Paginator.Pages }}
-

{{ .Title }}

- {{ .Date.Format "January 2, 2006" }} +

{{ .Date.Format "Jan 2, 2006" }} - {{ .Title }} +

-
- {{ .Summary }}
-
{{ end }} -
diff --git a/themes/gs/static/css/styles.css b/themes/gs/static/css/styles.css index ce8f27c..fa39b99 100644 --- a/themes/gs/static/css/styles.css +++ b/themes/gs/static/css/styles.css @@ -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; -} \ No newline at end of file