yequari
/
yequari.com
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

second layout concept

This commit is contained in:
yequari 2023-09-12 23:46:30 -07:00
parent aaee901c53
commit 24e56fb85a
3 changed files with 46 additions and 23 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
themes/saturn/layouts/_default/baseof.html
View File

@ -5,11 +5,9 @@
<div class="big"> <div class="big">
{{- partial "sidebar.html" . -}} {{- partial "sidebar.html" . -}}
<div class="column"> <div class="column">
{{- partial "header.html" . -}}
<main> <main>
{{- block "main" . }}{{- end }} {{- block "main" . }}{{- end }}
</main> </main>
{{- partial "footer.html" . -}}
</div> </div>
</div> </div>
</body> </body>

15
themes/saturn/layouts/partials/sidebar.html
View File

@ -1,3 +1,17 @@
<div class="header-nav">
<header>
<a class="sitetitle" href="{{ .Site.BaseURL }}"><h1>{{ .Site.Title }}</h1></a>
<div id="quote">
<p id="subtitle">.</p>
</div>
<div id="social-links">
<ul class="social">
{{ range site.Menus.social }}
<li class="social"><a rel="me" href="{{ .URL }}">{{ .Name }}</a></li>
{{ end }}
</ul>
</div>
</header>
<nav> <nav>
<ul> <ul>
{{ range site.Menus.main }} {{ range site.Menus.main }}
@ -5,3 +19,4 @@
{{ end }} {{ end }}
</ul> </ul>
</nav> </nav>
</div>

38
themes/saturn/static/css/main.css
View File

@ -62,6 +62,9 @@ body {
color: var(--primary-text); color: var(--primary-text);
font-family: 'Krub', sans-serif; font-family: 'Krub', sans-serif;
scrollbar-width: none; scrollbar-width: none;
padding: 0;
margin: 0;
overscroll-behavior: none;
} }
body::-webkit-scrollbar { body::-webkit-scrollbar {
@ -74,6 +77,7 @@ h1,h2,h3,h4,h5,h6 {
} }
p { p {
height: fit-content;
line-height: 1.5; line-height: 1.5;
} }
@ -101,43 +105,49 @@ a.summary {
.big { .big {
display: flex; display: flex;
flex-direction: row; flex-direction: row;
margin: 0 auto;
padding-top: 100px;
width: 40rem;
} }
.column { .column {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: 10px; gap: 10px;
max-width: 1000px; margin: 0 auto;
margin: 10px auto; padding: 0;
min-height: 800px;
flex: 1; flex: 1;
} }
.header-nav {
width: 350px;
position: sticky;
top: 0px;
}
header { header {
display: flex; display: flex;
flex-flow: row wrap; flex-flow: row wrap;
flex-shrink: 0; flex-shrink: 0;
margin: 10px auto; position: sticky;
top: 0px;
height: 300px;
} }
header h1 { header h1 {
font-family: "Genesis", 'Courier New', Courier, monospace; font-family: "Genesis", 'Courier New', Courier, monospace;
font-size: 1.5rem; font-size: 1.5rem;
color: var(--pewter-blue); color: var(--pewter-blue);
width: 350px;
} }
header a.sitetitle { header a.sitetitle {
text-decoration: none; text-decoration: none;
} }
nav { nav {
flex: 0 0 100px; flex: 0 0 100px;
width: fit-content;
text-align: right; text-align: right;
padding-top: 100px; position: sticky;
top: 300px;
} }
nav ul { nav ul {
@ -169,7 +179,7 @@ main {
flex: 1; flex: 1;
display: flex; display: flex;
background-color: rgba(23,33,33,0.7); background-color: rgba(23,33,33,0.7);
padding: 0 25px; padding: 0 150px;
flex-flow: row wrap; flex-flow: row wrap;
/* gap: 20px; */ /* gap: 20px; */
z-index: 1; z-index: 1;
@ -230,16 +240,15 @@ li.page-item {
footer { footer {
display: flex;
flex-direction: column;
padding: 0 0 15px 0px; padding: 0 0 15px 0px;
text-align: center; text-align: center;
color: var(--secondary-text); color: var(--secondary-text);
border-top: 1px solid var(--secondary-text); border-top: 1px solid var(--secondary-text);
position: sticky;
top: 450px;
} }
footer div { footer div {
flex: 1;
} }
footer ul.social { footer ul.social {
@ -284,8 +293,9 @@ footer li.social a {
} }
.links-column { .links-column {
flex: 1 1 33%; flex: 1 1 300px;
overflow-wrap: break-word; overflow-wrap: break-word;
height: fit-content;
} }
.hover-links { .hover-links {