second layout concept
This commit is contained in:
parent
aaee901c53
commit
24e56fb85a
|
@ -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>
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -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 {
|
||||
|
|
Loading…
Reference in New Issue