millironx/pages
1
0
Fork 0
Code Issues Pull requests Releases Packages Activity

feat/css-cleanup #2

Merged
millironx merged 41 commits from feat/css-cleanup into master 2024-12-02 02:51:14 +00:00
Conversation 0 Commits 41 Files changed 60 +130 -127
3 changed files with 130 additions and 127 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files
Showing only changes of commit 7657de8277 - Show all commits

67
assets/styles/millironx.css
View file

@ -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 */

29
layouts/_default/baseof.html
View file

@ -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>
&emsp; 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 }}

37
layouts/partials/sidebar.html
View file

@ -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>
&ensp;
<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>