feat/css-cleanup #2
3 changed files with 130 additions and 127 deletions
|
|
@ -26,15 +26,6 @@
|
|||
--font-family-slab-serif: Rockwell, "Rockwell Nova", "Roboto Slab",
|
||||
"DejaVu Serif", "Sitka Small", 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));
|
||||
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>
|
||||
<div class="container-fluid">
|
||||
<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">
|
||||
<header>
|
||||
<object data="{{ $millironx.RelPermalink }}">
|
||||
<img src="{{ $millironx.RelPermalink }}" alt="Milliron X" />
|
||||
</object>
|
||||
  Milliron X
|
||||
</h1>
|
||||
<h1 class="font-small-caps">Milliron X</h1>
|
||||
</header>
|
||||
</div>
|
||||
<div class="row">
|
||||
{{ partial "sidebar" . }}
|
||||
<main>
|
||||
{{ block "main" . }}
|
||||
<section class="container-fluid list-main">
|
||||
<div class="container px-5">
|
||||
{{ .Content }}
|
||||
</div>
|
||||
</section>
|
||||
{{ end }}
|
||||
</main>
|
||||
</div>
|
||||
<footer class="fixed-bottom">
|
||||
<div class="container-fluid footer-contents">
|
||||
<div class="row justify-content-between">
|
||||
<div class="col-3 align-self-center">
|
||||
{{ $brandedbull := resources.Get "graphics/brandedbull.svg" }}
|
||||
{{ $brandedbullsmall := $brandedbull | resources.Minify }}
|
||||
<img
|
||||
src="{{ $brandedbullsmall.RelPermalink }}"
|
||||
height="95rem"
|
||||
/>
|
||||
<img src="{{ $brandedbullsmall.RelPermalink }}" height="95rem" />
|
||||
</div>
|
||||
<div class="col-3 align-self-center">
|
||||
<div
|
||||
|
|
@ -93,9 +83,6 @@
|
|||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
</main>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Font Awesome -->
|
||||
{{ $fontawesome := resources.Get "scripts/fa-icons.js" | js.Build "js/fontawesome.js" | minify }}
|
||||
|
|
|
|||
|
|
@ -1,48 +1,15 @@
|
|||
{{ $millironx := resources.Get "graphics/millironx.svg" }}
|
||||
{{ $currentPage := . }}
|
||||
<aside class="col-12 col-md-3 p-0 bg-dark flex-shrink-1">
|
||||
<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">
|
||||
<nav>
|
||||
{{ range .Site.Menus.main }}
|
||||
<li class="nav-item">
|
||||
<a
|
||||
class="nav-link pl-0 {{ if $currentPage.IsMenuCurrent "main" . }}
|
||||
active
|
||||
{{ end }}"
|
||||
class="{{ if $currentPage.IsMenuCurrent "main" . }}active{{ end }}"
|
||||
href="{{ .URL }}"
|
||||
>
|
||||
<i class="{{ .Params.prefix }} {{ .Params.icon }} fa-fw"></i>
|
||||
{{ .Name }}
|
||||
</a>
|
||||
</li>
|
||||
{{ end }}
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
</aside>
|
||||
|
|
|
|||
Loading…
Reference in a new issue