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

View File

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

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>
<ul>
{{ range site.Menus.main }}
@ -5,3 +19,4 @@
{{ end }}
</ul>
</nav>
</div>

View File

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