From a8db6d0fccb6caf938476ea729047f87267f9d73 Mon Sep 17 00:00:00 2001
From: Gabriel <gabriel@libresolutions.network>
Date: Fri, 12 Apr 2024 20:51:07 -0400
Subject: [PATCH] not totally pleased with it, but css grid works
---
layouts/404.html | 4 +-
layouts/_default/list.html | 6 +-
layouts/_default/single.html | 5 +-
layouts/index.html | 13 ++--
layouts/partials/nav.html | 8 +-
layouts/partials/post-link.html | 16 ++++
layouts/partials/post.html | 4 +-
layouts/partials/side1.html | 4 +
layouts/partials/side2.html | 4 +
layouts/partials/sidebar.html | 5 ++
static/css/theme.css | 132 +++++++++++++++++++++-----------
11 files changed, 135 insertions(+), 66 deletions(-)
create mode 100644 layouts/partials/post-link.html
create mode 100644 layouts/partials/side1.html
create mode 100644 layouts/partials/side2.html
create mode 100644 layouts/partials/sidebar.html
diff --git a/layouts/404.html b/layouts/404.html
index cc5dfb0..3c85c92 100644
--- a/layouts/404.html
+++ b/layouts/404.html
@@ -2,15 +2,17 @@
<html>
{{partial "head" .}}
<body>
- {{partial "spritesheet" .}}
{{partial "header" .}}
<main>
<article>
<h1>Can't find what you're looking for.</h1>
+ {{if .Site.Params.email}}
If this is a mistake, please <a href="mailto:{{.Site.Params.email}}?subject=404s">let me know</a>
+ {{end}}
</article>
</main>
<div class="spacer"></div>
{{partial "footer" .}}
+ {{partial "spritesheet" .}}
</body>
</html>
\ No newline at end of file
diff --git a/layouts/_default/list.html b/layouts/_default/list.html
index 229b2b2..3a51025 100644
--- a/layouts/_default/list.html
+++ b/layouts/_default/list.html
@@ -2,19 +2,15 @@
<html>
{{partial "head" .}}
<body>
- {{partial "spritesheet" .}}
{{partial "header" .}}
- <main>
- {{ if .Content}}
<article>{{.Content}}</article>
- {{end}}
<div class="posts">
{{range .Pages}}
{{partial "post" .}}
{{end}}
</div>
</main>
-
{{partial "footer" .}}
+ {{partial "spritesheet" .}}
</body>
</html>
\ No newline at end of file
diff --git a/layouts/_default/single.html b/layouts/_default/single.html
index eaa0df2..9173a00 100644
--- a/layouts/_default/single.html
+++ b/layouts/_default/single.html
@@ -2,9 +2,7 @@
<html>
{{partial "head" .}}
<body>
- {{partial "spritesheet" .}}
{{partial "header" .}}
- <main>
{{ if .Content}}
<article>{{.Content}}</article>
{{end}}
@@ -19,8 +17,7 @@
</svg><span>{{.LinkTitle}}</span></a>
{{end}}
</div>
- </main>
- <div class="spacer"></div>
{{partial "footer" .}}
+ {{partial "spritesheet" .}}
</body>
</html>
\ No newline at end of file
diff --git a/layouts/index.html b/layouts/index.html
index c45fda6..19f4df0 100644
--- a/layouts/index.html
+++ b/layouts/index.html
@@ -3,13 +3,16 @@
{{partial "head" .}}
<body>
- {{partial "spritesheet" .}} {{partial "header" .}}
<main>
- {{ if .Content}}
- <article>{{.Content}}</article>
- {{end}}
- </main>
+ {{partial "header" .}}
+ {{partial "side1" .}}
+ <section id="content">
+ {{.Content}}
+ </section>
+ {{partial "side2" .}}
{{partial "footer" .}}
+ </main>
+ {{partial "spritesheet" .}}
</body>
</html>
\ No newline at end of file
diff --git a/layouts/partials/nav.html b/layouts/partials/nav.html
index 419949a..bef2c48 100644
--- a/layouts/partials/nav.html
+++ b/layouts/partials/nav.html
@@ -3,9 +3,7 @@
<h3>{{.Title}}</h3>
</a>
{{end}}
-<a href="{{.Site.BaseURL}}/tags">
- <h3>Browse by Tags</h3></a>
+ <a href="{{.Site.BaseURL}}/index.xml">
+ <h3>RSS</h3>
+ </a>
</nav>
-<a href="{{.Site.BaseURL}}/index.xml">
- <h3>RSS</h3>
-</a>
diff --git a/layouts/partials/post-link.html b/layouts/partials/post-link.html
new file mode 100644
index 0000000..2b93ad6
--- /dev/null
+++ b/layouts/partials/post-link.html
@@ -0,0 +1,16 @@
+<div class="post">
+ <a href="{{.Permalink}}">
+ <h2>{{.Title}}</h2>
+ </a>
+ <p>{{if .Date}}<strong>{{.Date | time.Format "Jan 02 2006"}}</strong>{{end}}</p>
+ <p style="text-align: left;">{{.Summary}}</p>
+ {{ if .GetTerms "tags" }}
+ <div class="post-tags">
+ {{range .GetTerms "tags" }}
+ <a href="{{.Permalink}}" class="tag"><svg class='icon'>
+ <use href="#tag"></use>
+ </svg><span>{{.LinkTitle}}</span></a>
+ {{end}}
+ </div>
+ {{end}}
+</div>
\ No newline at end of file
diff --git a/layouts/partials/post.html b/layouts/partials/post.html
index d6a176a..25b1cc5 100644
--- a/layouts/partials/post.html
+++ b/layouts/partials/post.html
@@ -3,7 +3,9 @@
<h2>{{.Title}}</h2>
</a>
<p>{{if .Date}}<strong>{{.Date | time.Format "Jan 02 2006"}}</strong>{{end}}</p>
- <p style="text-align: left;">{{.Summary}}</p>
+ {{ if .Params.description}}
+ <p>{{.Params.description}}</p>
+ {{end}}
{{ if .GetTerms "tags" }}
<div class="post-tags">
{{range .GetTerms "tags" }}
diff --git a/layouts/partials/side1.html b/layouts/partials/side1.html
new file mode 100644
index 0000000..c23d27a
--- /dev/null
+++ b/layouts/partials/side1.html
@@ -0,0 +1,4 @@
+<aside id="side1">
+ <h2>This is the Left sidebar</h2>
+ {{shortcode "reclaim-cyberspace"}}
+</aside>
\ No newline at end of file
diff --git a/layouts/partials/side2.html b/layouts/partials/side2.html
new file mode 100644
index 0000000..e753bd6
--- /dev/null
+++ b/layouts/partials/side2.html
@@ -0,0 +1,4 @@
+<aside id="side2">
+ <h2> This is the second sidebar</h2>
+ <p>Ayy lmao</p>
+</aside>
\ No newline at end of file
diff --git a/layouts/partials/sidebar.html b/layouts/partials/sidebar.html
new file mode 100644
index 0000000..21cf472
--- /dev/null
+++ b/layouts/partials/sidebar.html
@@ -0,0 +1,5 @@
+<aside>
+ <h1>This is the sidebar</h1>
+
+<p>You can make your own changes by creating a new one in /layouts/partials/sidebar.html</p>
+</aside>
\ No newline at end of file
diff --git a/static/css/theme.css b/static/css/theme.css
index de5d71f..11dc933 100644
--- a/static/css/theme.css
+++ b/static/css/theme.css
@@ -1,23 +1,34 @@
+html{
+ --color-primary: white;
+ --color-secondary: black;
+ --color-accent:#09448c;
+ --accent-alternate:#ffd336;
+ --font-family:sans-serif;
+ --font-size:18px;
+ --font-alternate:code;
+}
+
body {
- --theme-color-primary: rgb(255, 255, 255);
- --theme-color-secondary: black;
- --theme-accent: #09448c;
- color: var(--theme-color-secondary);
- background-color: var(--theme-color-primary);
+ --color-primary: rgb(255, 255, 255);
+ --color-secondary: black;
+ --color-accent: #09448c;
+ color: var(--color-secondary);
+ background-color: var(--color-primary);
margin: 0;
width: 100vw;
- display: flex;
- align-items: flex-start;
- flex-direction: row;
- justify-content: space-evenly;
- font-size: 18px;
+ font-size: var(--font-size);
+ overflow-x:hidden;
+ display:flex;
+ flex-direction: column;
+ align-items: center;
}
@media screen and (prefers-color-scheme:dark) {
body {
- --theme-color-primary: rgb(0, 0, 0);
- --theme-color-secondary: white;
- --theme-accent: #1291e5;
+ --color-primary: rgb(0, 0, 0);
+ --color-secondary: white;
+ --color-accent: #1291e5;
+ --accent-alternate:#51320d;
}
}
@@ -25,31 +36,63 @@ header,
footer {
font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
font-size: 16px;
- min-width: min-content;
- width: 20vw;
+ width:100%;
margin: 0;
display: flex;
- flex-direction: column;
+ flex-direction: row;
align-items: center;
- justify-content: flex-start;
+ justify-content: center;
flex-wrap: nowrap;
padding: 15px;
text-align: center;
}
main {
- display: flex;
- flex-direction: column;
- align-items: center;
- width: 60vw;
- max-width: 60vw;
- padding-left: 1rem;
- padding-right: 1rem;
+ display:grid;
+ grid-template-areas:
+ "header header header"
+ "side1 content side2"
+ "footer footer footer";
+ grid-template-columns: 1fr 3fr 1fr;
+ grid-template-rows: 20% 60% 20%;
+ max-width:100vw;
+ justify-items: center;
+ gap:20px;
+}
+header{
+ grid-area: header;
+}
+#content {
+ grid-area: content;
+}
+#side1{grid-area: side1;}
+#side2{grid-area: side2;}
+footer{grid-area: footer;}
+@media screen and (orientation:portrait) {
+ main {
+ display:grid;
+ grid-template-areas:
+ "header"
+ "content"
+ "side1"
+ "side2"
+ "footer";
+ grid-template-columns: 1fr;
+ grid-template-rows: auto;
+ }
+ header{
+ grid-area: header;
+ }
+ #content {
+ grid-area: content;
+ }
+ #side1{grid-area: side1;}
+ #side2{grid-area: side2;}
+ footer{grid-area: footer;}
}
-
nav {
display: flex;
- flex-direction: column;
+ flex-direction: row;
align-items: center;
text-align: center;
}
@@ -70,15 +113,12 @@ nav a {
}
header,
footer {
- width: 100vw;
- max-width: unset;
- min-height: unset;
margin: 0;
display: flex;
flex-direction: row;
flex-wrap: wrap;
align-items: center;
- justify-content: space-around;
+ justify-content: center;
padding: 5px;
}
nav {
@@ -97,14 +137,14 @@ nav a {
}
svg {
- stroke: var(--theme-accent);
- fill: var(--theme-accent);
+ stroke: var(--color-accent);
+ fill: var(--color-accent);
}
a,
a:visited,
a:hover {
- color: var(--theme-accent);
+ color: var(--color-accent);
}
img,
@@ -188,7 +228,7 @@ iframe {
}
.tag-link:hover {
- color: var(--theme-color-secondary)
+ color: var(--color-secondary)
}
.icon {
@@ -209,8 +249,10 @@ article {
display: flex;
flex-direction: column;
align-items: center;
- width: 60rem;
- max-width: 100%;
+ padding-left:1rem;
+ padding-right:1rem;
+ max-width: 60rem;
+ width: 100%;
font-size: 20px;
font-family: Verdana, Geneva, Tahoma, sans-serif;
}
@@ -224,8 +266,7 @@ article table,
article ul,
article ol,
article h3,
-article h4,
-article h2 {
+article h4 {
width: 100%;
text-align: left;
}
@@ -267,7 +308,8 @@ article .highlight pre {
padding: 25px;
border-radius: 25px;
font-size: 18px;
- width:100%;
+ width:32rem;
+
}
.post>* {}
@@ -311,7 +353,7 @@ h3 {
}
hr {
- color: var(--theme-accent);
+ color: var(--color-accent);
width: 100%;
margin: 0;
margin-top: 1rem;
@@ -320,14 +362,14 @@ hr {
}
blockquote {
- border-left: 5px solid var(--theme-accent);
+ border-left: 5px solid var(--color-accent);
padding-left: 15px;
width: 80%;
}
code {
font-family: monospace;
- color: var(--theme-accent);
+ color: var(--color-accent);
white-space: break-spaces;
word-wrap: normal;
}
@@ -345,7 +387,7 @@ button {
border-radius: 10px;
font-weight: bolder;
font-size: unset;
- background-color: var(--theme-accent);
- color: var(--theme-color-secondary);
- border-color: var(--theme-accent);
+ background-color: var(--color-accent);
+ color: var(--color-secondary);
+ border-color: var(--color-accent);
}
\ No newline at end of file