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

6
layouts/_default/list.html
View file

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

5
layouts/_default/single.html
View file

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

13
layouts/index.html
View file

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

8
layouts/partials/nav.html
View file

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

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>
</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" }}

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 {
--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);
}