gabriel/valor
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

not totally pleased with it, but css grid works

Browse source
This commit is contained in:
Gabriel 2024-04-12 20:51:07 -04:00
parent d004ebec25
commit a8db6d0fcc
11 changed files with 135 additions and 66 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
layouts/404.html
View file

@ -2,15 +2,17 @@
<html> <html>
{{partial "head" .}} {{partial "head" .}}
<body> <body>
{{partial "spritesheet" .}}
{{partial "header" .}} {{partial "header" .}}
<main> <main>
<article> <article>
<h1>Can't find what you're looking for.</h1> <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> If this is a mistake, please <a href="mailto:{{.Site.Params.email}}?subject=404s">let me know</a>
{{end}}
</article> </article>
</main> </main>
<div class="spacer"></div> <div class="spacer"></div>
{{partial "footer" .}} {{partial "footer" .}}
{{partial "spritesheet" .}}
</body> </body>
</html> </html>

6
layouts/_default/list.html
View file

@ -2,19 +2,15 @@
<html> <html>
{{partial "head" .}} {{partial "head" .}}
<body> <body>
{{partial "spritesheet" .}}
{{partial "header" .}} {{partial "header" .}}
<main>
{{ if .Content}}
<article>{{.Content}}</article> <article>{{.Content}}</article>
{{end}}
<div class="posts"> <div class="posts">
{{range .Pages}} {{range .Pages}}
{{partial "post" .}} {{partial "post" .}}
{{end}} {{end}}
</div> </div>
</main> </main>
{{partial "footer" .}} {{partial "footer" .}}
{{partial "spritesheet" .}}
</body> </body>
</html> </html>

5
layouts/_default/single.html
View file

@ -2,9 +2,7 @@
<html> <html>
{{partial "head" .}} {{partial "head" .}}
<body> <body>
{{partial "spritesheet" .}}
{{partial "header" .}} {{partial "header" .}}
<main>
{{ if .Content}} {{ if .Content}}
<article>{{.Content}}</article> <article>{{.Content}}</article>
{{end}} {{end}}
@ -19,8 +17,7 @@
</svg><span>{{.LinkTitle}}</span></a> </svg><span>{{.LinkTitle}}</span></a>
{{end}} {{end}}
</div> </div>
</main>
<div class="spacer"></div>
{{partial "footer" .}} {{partial "footer" .}}
{{partial "spritesheet" .}}
</body> </body>
</html> </html>

13
layouts/index.html
View file

@ -3,13 +3,16 @@
{{partial "head" .}} {{partial "head" .}}
<body> <body>
{{partial "spritesheet" .}} {{partial "header" .}}
<main> <main>
{{ if .Content}} {{partial "header" .}}
<article>{{.Content}}</article> {{partial "side1" .}}
{{end}} <section id="content">
</main> {{.Content}}
</section>
{{partial "side2" .}}
{{partial "footer" .}} {{partial "footer" .}}
</main>
{{partial "spritesheet" .}}
</body> </body>
</html> </html>

8
layouts/partials/nav.html
View file

@ -3,9 +3,7 @@
<h3>{{.Title}}</h3> <h3>{{.Title}}</h3>
</a> </a>
{{end}} {{end}}
<a href="{{.Site.BaseURL}}/tags"> <a href="{{.Site.BaseURL}}/index.xml">
<h3>Browse by Tags</h3></a> <h3>RSS</h3>
</a>
</nav> </nav>
<a href="{{.Site.BaseURL}}/index.xml">
<h3>RSS</h3>
</a>

16
layouts/partials/post-link.html Normal file
View file

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

4
layouts/partials/post.html
View file

@ -3,7 +3,9 @@
<h2>{{.Title}}</h2> <h2>{{.Title}}</h2>
</a> </a>
<p>{{if .Date}}<strong>{{.Date | time.Format "Jan 02 2006"}}</strong>{{end}}</p> <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" }} {{ if .GetTerms "tags" }}
<div class="post-tags"> <div class="post-tags">
{{range .GetTerms "tags" }} {{range .GetTerms "tags" }}

4
layouts/partials/side1.html Normal file
View file

@ -0,0 +1,4 @@
<aside id="side1">
<h2>This is the Left sidebar</h2>
{{shortcode "reclaim-cyberspace"}}
</aside>

4
layouts/partials/side2.html Normal file
View file

@ -0,0 +1,4 @@
<aside id="side2">
<h2> This is the second sidebar</h2>
<p>Ayy lmao</p>
</aside>

5
layouts/partials/sidebar.html Normal file
View file

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

132
static/css/theme.css
View file

@ -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 { body {
--theme-color-primary: rgb(255, 255, 255); --color-primary: rgb(255, 255, 255);
--theme-color-secondary: black; --color-secondary: black;
--theme-accent: #09448c; --color-accent: #09448c;
color: var(--theme-color-secondary); color: var(--color-secondary);
background-color: var(--theme-color-primary); background-color: var(--color-primary);
margin: 0; margin: 0;
width: 100vw; width: 100vw;
display: flex; font-size: var(--font-size);
align-items: flex-start; overflow-x:hidden;
flex-direction: row; display:flex;
justify-content: space-evenly; flex-direction: column;
font-size: 18px; align-items: center;
} }
@media screen and (prefers-color-scheme:dark) { @media screen and (prefers-color-scheme:dark) {
body { body {
--theme-color-primary: rgb(0, 0, 0); --color-primary: rgb(0, 0, 0);
--theme-color-secondary: white; --color-secondary: white;
--theme-accent: #1291e5; --color-accent: #1291e5;
--accent-alternate:#51320d;
} }
} }
@ -25,31 +36,63 @@ header,
footer { footer {
font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif; font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
font-size: 16px; font-size: 16px;
min-width: min-content; width:100%;
width: 20vw;
margin: 0; margin: 0;
display: flex; display: flex;
flex-direction: column; flex-direction: row;
align-items: center; align-items: center;
justify-content: flex-start; justify-content: center;
flex-wrap: nowrap; flex-wrap: nowrap;
padding: 15px; padding: 15px;
text-align: center; text-align: center;
} }
main { main {
display: flex; display:grid;
flex-direction: column; grid-template-areas:
align-items: center; "header header header"
width: 60vw; "side1 content side2"
max-width: 60vw; "footer footer footer";
padding-left: 1rem; grid-template-columns: 1fr 3fr 1fr;
padding-right: 1rem; 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 { nav {
display: flex; display: flex;
flex-direction: column; flex-direction: row;
align-items: center; align-items: center;
text-align: center; text-align: center;
} }
@ -70,15 +113,12 @@ nav a {
} }
header, header,
footer { footer {
width: 100vw;
max-width: unset;
min-height: unset;
margin: 0; margin: 0;
display: flex; display: flex;
flex-direction: row; flex-direction: row;
flex-wrap: wrap; flex-wrap: wrap;
align-items: center; align-items: center;
justify-content: space-around; justify-content: center;
padding: 5px; padding: 5px;
} }
nav { nav {
@ -97,14 +137,14 @@ nav a {
} }
svg { svg {
stroke: var(--theme-accent); stroke: var(--color-accent);
fill: var(--theme-accent); fill: var(--color-accent);
} }
a, a,
a:visited, a:visited,
a:hover { a:hover {
color: var(--theme-accent); color: var(--color-accent);
} }
img, img,
@ -188,7 +228,7 @@ iframe {
} }
.tag-link:hover { .tag-link:hover {
color: var(--theme-color-secondary) color: var(--color-secondary)
} }
.icon { .icon {
@ -209,8 +249,10 @@ article {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
width: 60rem; padding-left:1rem;
max-width: 100%; padding-right:1rem;
max-width: 60rem;
width: 100%;
font-size: 20px; font-size: 20px;
font-family: Verdana, Geneva, Tahoma, sans-serif; font-family: Verdana, Geneva, Tahoma, sans-serif;
} }
@ -224,8 +266,7 @@ article table,
article ul, article ul,
article ol, article ol,
article h3, article h3,
article h4, article h4 {
article h2 {
width: 100%; width: 100%;
text-align: left; text-align: left;
} }
@ -267,7 +308,8 @@ article .highlight pre {
padding: 25px; padding: 25px;
border-radius: 25px; border-radius: 25px;
font-size: 18px; font-size: 18px;
width:100%; width:32rem;
} }
.post>* {} .post>* {}
@ -311,7 +353,7 @@ h3 {
} }
hr { hr {
color: var(--theme-accent); color: var(--color-accent);
width: 100%; width: 100%;
margin: 0; margin: 0;
margin-top: 1rem; margin-top: 1rem;
@ -320,14 +362,14 @@ hr {
} }
blockquote { blockquote {
border-left: 5px solid var(--theme-accent); border-left: 5px solid var(--color-accent);
padding-left: 15px; padding-left: 15px;
width: 80%; width: 80%;
} }
code { code {
font-family: monospace; font-family: monospace;
color: var(--theme-accent); color: var(--color-accent);
white-space: break-spaces; white-space: break-spaces;
word-wrap: normal; word-wrap: normal;
} }
@ -345,7 +387,7 @@ button {
border-radius: 10px; border-radius: 10px;
font-weight: bolder; font-weight: bolder;
font-size: unset; font-size: unset;
background-color: var(--theme-accent); background-color: var(--color-accent);
color: var(--theme-color-secondary); color: var(--color-secondary);
border-color: var(--theme-accent); border-color: var(--color-accent);
} }