refactor: Change site layout
This commit is contained in:
parent
17987d1455
commit
7657de8277
GPG key ID:
B7044A3432851F64
3 changed files with 130 additions and 127 deletions
|
|
@ -26,15 +26,6 @@
|
||||||
--font-family-slab-serif: Rockwell, "Rockwell Nova", "Roboto Slab",
|
--font-family-slab-serif: Rockwell, "Rockwell Nova", "Roboto Slab",
|
||||||
"DejaVu Serif", "Sitka Small", serif;
|
"DejaVu Serif", "Sitka Small", serif;
|
||||||
--font-family-system-ui: system-ui, sans-serif;
|
--font-family-system-ui: system-ui, sans-serif;
|
||||||
|
|
||||||
/*
|
|
||||||
Breakpoint
|
|
||||||
*/
|
|
||||||
@property --responsive-breakpoint {
|
|
||||||
syntax: "<length>";
|
|
||||||
inherits: false;
|
|
||||||
initial-value: 768px;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
/*
|
/*
|
||||||
|
|
@ -45,3 +36,61 @@ html {
|
||||||
background-color: light-dark(var(--brown-swiss-gray), var(--eclipse-gray));
|
background-color: light-dark(var(--brown-swiss-gray), var(--eclipse-gray));
|
||||||
font-family: var(--font-family-slab-serif);
|
font-family: var(--font-family-slab-serif);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
header {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-evenly;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
nav {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
overflow: scroll;
|
||||||
|
padding-bottom: 1rem;
|
||||||
|
position: sticky;
|
||||||
|
top: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
/*
|
||||||
|
Container-type helper classes
|
||||||
|
*/
|
||||||
|
.row {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
/*
|
||||||
|
Desktop screen size adjustments
|
||||||
|
*/
|
||||||
|
@media (min-width: 768px) {
|
||||||
|
/*
|
||||||
|
Default element styles
|
||||||
|
*/
|
||||||
|
nav {
|
||||||
|
flex-direction: column;
|
||||||
|
padding-right: 1rem;
|
||||||
|
padding-bottom: 0;
|
||||||
|
|
||||||
|
/*
|
||||||
|
Workaround for Chrome always showing scrollbar even when scrolling not needed
|
||||||
|
*/
|
||||||
|
-ms-overflow-style: none;
|
||||||
|
scrollbar-width: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
/*
|
||||||
|
Continued Chrome workaround
|
||||||
|
*/
|
||||||
|
nav::-webkit-scrollbar {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
/*
|
||||||
|
Container-type helper classes
|
||||||
|
*/
|
||||||
|
.row {
|
||||||
|
flex-direction: row;
|
||||||
|
}
|
||||||
|
} /* end @media */
|
||||||
|
|
|
||||||
|
|
@ -17,37 +17,27 @@
|
||||||
|
|
||||||
|
|
||||||
<body>
|
<body>
|
||||||
<div class="container-fluid">
|
<header>
|
||||||
<div class="row wrapper min-vh-100 flex-column flex-sm-row">
|
|
||||||
{{ partial "sidebar" . }}
|
|
||||||
<main class="col bg-faded py-3 gx-0">
|
|
||||||
<div class="container">
|
|
||||||
<header class="d-none d-sm-none d-md-block text-center">
|
|
||||||
<h1 class="font-serif font-small-caps">
|
|
||||||
<object data="{{ $millironx.RelPermalink }}">
|
<object data="{{ $millironx.RelPermalink }}">
|
||||||
<img src="{{ $millironx.RelPermalink }}" alt="Milliron X" />
|
<img src="{{ $millironx.RelPermalink }}" alt="Milliron X" />
|
||||||
</object>
|
</object>
|
||||||
  Milliron X
|
<h1 class="font-small-caps">Milliron X</h1>
|
||||||
</h1>
|
|
||||||
</header>
|
</header>
|
||||||
</div>
|
<div class="row">
|
||||||
|
{{ partial "sidebar" . }}
|
||||||
|
<main>
|
||||||
{{ block "main" . }}
|
{{ block "main" . }}
|
||||||
<section class="container-fluid list-main">
|
|
||||||
<div class="container px-5">
|
|
||||||
{{ .Content }}
|
{{ .Content }}
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
{{ end }}
|
{{ end }}
|
||||||
|
</main>
|
||||||
|
</div>
|
||||||
<footer class="fixed-bottom">
|
<footer class="fixed-bottom">
|
||||||
<div class="container-fluid footer-contents">
|
<div class="container-fluid footer-contents">
|
||||||
<div class="row justify-content-between">
|
<div class="row justify-content-between">
|
||||||
<div class="col-3 align-self-center">
|
<div class="col-3 align-self-center">
|
||||||
{{ $brandedbull := resources.Get "graphics/brandedbull.svg" }}
|
{{ $brandedbull := resources.Get "graphics/brandedbull.svg" }}
|
||||||
{{ $brandedbullsmall := $brandedbull | resources.Minify }}
|
{{ $brandedbullsmall := $brandedbull | resources.Minify }}
|
||||||
<img
|
<img src="{{ $brandedbullsmall.RelPermalink }}" height="95rem" />
|
||||||
src="{{ $brandedbullsmall.RelPermalink }}"
|
|
||||||
height="95rem"
|
|
||||||
/>
|
|
||||||
</div>
|
</div>
|
||||||
<div class="col-3 align-self-center">
|
<div class="col-3 align-self-center">
|
||||||
<div
|
<div
|
||||||
|
|
@ -93,9 +83,6 @@
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</footer>
|
</footer>
|
||||||
</main>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Font Awesome -->
|
<!-- Font Awesome -->
|
||||||
{{ $fontawesome := resources.Get "scripts/fa-icons.js" | js.Build "js/fontawesome.js" | minify }}
|
{{ $fontawesome := resources.Get "scripts/fa-icons.js" | js.Build "js/fontawesome.js" | minify }}
|
||||||
|
|
|
||||||
|
|
@ -1,48 +1,15 @@
|
||||||
{{ $millironx := resources.Get "graphics/millironx.svg" }}
|
{{ $millironx := resources.Get "graphics/millironx.svg" }}
|
||||||
{{ $currentPage := . }}
|
{{ $currentPage := . }}
|
||||||
<aside class="col-12 col-md-3 p-0 bg-dark flex-shrink-1">
|
<aside class="col-12 col-md-3 p-0 bg-dark flex-shrink-1">
|
||||||
<nav
|
<nav>
|
||||||
class="navbar navbar-expand-md navbar-dark bg-dark align-items-start flex-md-column flex-row"
|
|
||||||
>
|
|
||||||
<div class="container-fluid">
|
|
||||||
<a class="navbar-brand d-block d-md-none" href="#">
|
|
||||||
<object
|
|
||||||
class="d-inline-block align-text-top"
|
|
||||||
width="80"
|
|
||||||
height="24"
|
|
||||||
style="filter: invert(100%)"
|
|
||||||
data="{{ $millironx.RelPermalink }}"
|
|
||||||
>
|
|
||||||
<img src="{{ $millironx.RelPermalink }}" alt="Milliron X" />
|
|
||||||
</object>
|
|
||||||
 
|
|
||||||
<span class="font-small-caps font-serif">Milliron X</span>
|
|
||||||
</a>
|
|
||||||
<a
|
|
||||||
href
|
|
||||||
class="navbar-toggler"
|
|
||||||
data-bs-toggle="collapse"
|
|
||||||
data-bs-target=".sidebar"
|
|
||||||
>
|
|
||||||
<span class="navbar-toggler-icon"></span>
|
|
||||||
</a>
|
|
||||||
<div class="collapse navbar-collapse sidebar">
|
|
||||||
<ul class="flex-column navbar-nav w-100 justify-content-between">
|
|
||||||
{{ range .Site.Menus.main }}
|
{{ range .Site.Menus.main }}
|
||||||
<li class="nav-item">
|
|
||||||
<a
|
<a
|
||||||
class="nav-link pl-0 {{ if $currentPage.IsMenuCurrent "main" . }}
|
class="{{ if $currentPage.IsMenuCurrent "main" . }}active{{ end }}"
|
||||||
active
|
|
||||||
{{ end }}"
|
|
||||||
href="{{ .URL }}"
|
href="{{ .URL }}"
|
||||||
>
|
>
|
||||||
<i class="{{ .Params.prefix }} {{ .Params.icon }} fa-fw"></i>
|
<i class="{{ .Params.prefix }} {{ .Params.icon }} fa-fw"></i>
|
||||||
{{ .Name }}
|
{{ .Name }}
|
||||||
</a>
|
</a>
|
||||||
</li>
|
|
||||||
{{ end }}
|
{{ end }}
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</nav>
|
</nav>
|
||||||
</aside>
|
</aside>
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue