Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[FEATURE] Add responsive mobile nav #148

Open
wants to merge 9 commits into
base: release
Choose a base branch
from
Open

[FEATURE] Add responsive mobile nav #148

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
9 commits
Select commit Hold shift + click to select a range
4edd2af
config + html base changes
jerdog Sep 30, 2024
1aaf979
Merge branch 'release' into add-mobile-nav
jerdog Sep 30, 2024
e4e3cea
add netlify config + new env
jerdog Sep 30, 2024
23b9c43
reduce reloading the header and footer on each build
jerdog Sep 30, 2024
4c27bde
fix cache generation for each .Section
jerdog Sep 30, 2024
91cef7f
rollback of cache changes
jerdog Sep 30, 2024
ec66235
merge nav into header partial + add css
jerdog Oct 1, 2024
8046b03
update css for working hamburger nav
jerdog Oct 6, 2024
c743181
hide checkbox hack
jerdog Oct 6, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
125 changes: 124 additions & 1 deletion assets/css/main.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1327,7 +1327,7 @@ ul.portraits li p {
nav {
position: absolute;
top: 1.5rem;
right: 4.375rem;
/* right: 4.375rem; */
}

.data-list {
Expand Down Expand Up @@ -1501,3 +1501,126 @@ ul.portraits li p {
}

/* end @media (min-width: 1024px) */

/* begin responsive nav */

.float-right {
float: right;
}

.navigation {
height: 6rem;
width: 100%;

a {

&:hover,
&:focus {
color: var(--color-white);
}
}

.navigation-list {
float: right;
list-style: none;
margin-bottom: 0;
margin-top: 0;

@media only screen and (max-width: 768px) {
position: relative;
top: 2rem;
right: 0;
z-index: 5;
visibility: hidden;
opacity: 0;
padding: 0;
max-height: 0;
width: 100%;
background-color: var(--color-black);
border-top: solid 2px var(--color-black);
border-bottom: solid 2px var(--color-black);
transition: opacity 0.25s, max-height 0.15s linear;
}

.navigation-item {
float: left;
margin: 0;
position: relative;

@media only screen and (max-width: 768px) {
float: none !important;
text-align: center;

a,
span {
line-height: 5rem;
display: inline;
font-size: 1.7rem;
font-weight: 600;
}
}

a,
span {
margin-left: 1rem;
margin-right: 1rem;
}
}
}


#menu-toggle {
display: none;

@media only screen and (max-width: 768px) {
display: initial;
position: relative;
visibility: hidden;

&:checked+label>i {
color: var(--color-black);
}

&:checked+label+ul {
visibility: visible;
opacity: 1;
max-height: 100rem;
}

&:focus-visible+label {
outline-style: auto;
}
}
}

.menu-button {
display: none;
text-align: right;

@media only screen and (max-width: 768px) {
position: relative;
display: block;
font-size: 2.4rem;
font-weight: 400;
fill: var(--color-gold);
}

i {

&:hover,
&:focus {
color: var(--color-light-grey);
}
}
}

i {
color: var(--color-black);
cursor: pointer;

&:hover,
&:focus {
color: var(--color-black);
}
}
}
4 changes: 4 additions & 0 deletions config.toml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,10 @@ baseURL = "https://ethicalsource.dev"
languageCode = "en-us"
title = "Organization for Ethical Source"

[params]
description = "The Organization for Ethical Source is a global, multidisciplinary community devoted to centering justice, equity, and human rights in the practice of open source."
favicon = "/images/favicon.ico"

DefaultContentLanguage = "en"
hasCJKLanguage = true
EnableMissingTranslationPlaceholders = true
Expand Down
36 changes: 20 additions & 16 deletions layouts/_default/baseof.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,25 +9,31 @@
<!doctype html>
<html lang="{{ .Site.LanguageCode }}">
<head>
<meta charset="utf-8">
<title>{{ .Site.Title }} | {{ .Title }}</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>
{{/* If not home page, add use site title + page title */}}
{{ if ne page.IsHome true }}
{{ .Site.Title }} | {{ .Page.Title }}{{ else }}
{{ .Page.Title }}
{{ end }}
</title>

{{ if .Params.title }}
<meta property="og:title" content="{{ .Params.Title }}">
{{ else }}
<meta property="og:title" content="{{ .Site.Title }}">
{{ end }}
{{/* setup base meta tags */}}
<meta charset="utf-8" />
<meta name="description" content="{{ if .Params.Summary }}{{ .Params.Summary }}{{ else }}{{ .Site.Params.Description }}{{ end }}">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
{{/* setup opengraph meta tags - https://ogp.me/ */}}
<meta property="og:type" content="website">
<meta property="og:site_name" content="Organization for Ethical Source">
<meta property="og:locale" content="en_US">
<meta property="og:image" content="https://ethicalsource.dev/images/oes-logo-color.jpg">
<meta property-="og:title" content="{{ if ne page.IsHome true }}{{ .Site.Title }} | {{ .Page.Title }}{{ else }}{{ .Page.Title }}{{ end }}">
<meta property="og:url" content="{{ .Permalink }}">
{{ if .Params.Summary }}
<meta property="og:description" content="{{ .Params.Summary }}">
{{ else }}
<meta property="og:description" content="The Organization for Ethical Source is a global, multidisciplinary community devoted to centering justice, equity, and human rights in the practice of open source.">
{{ end }}
<meta property="og:description" content="{{ if .Params.Summary }}{{ .Params.Summary }}{{ else }}{{ .Site.Params.Description }}{{ end }}">

{{/* setup link tags for stylesheets and icons */}}
<link rel="stylesheet" href="{{ $css.RelPermalink }}" integrity="{{ $css.Data.Integrity }}">
<link rel="shortcut icon" type="image/x-icon" href="/images/favicon.ico">
<link rel="shortcut icon" type="image/x-icon" href="{{ .Site.Params.favicon }}" />
<link rel="icon" hreg="{{ .Site.Params.favicon }}">
</head>

<body{{ with .Section }} id="{{ . }}"{{ end }}>
Expand All @@ -38,8 +44,6 @@
{{ partial "footer" }}
</div>

{{ partial "navigation" . }}

<script src="{{ $mainJs.RelPermalink }}" integrity="{{ $mainJs.Data.Integrity }}"></script>
</body>
</html>
16 changes: 16 additions & 0 deletions layouts/partials/header.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,3 +12,19 @@ <h1>{{ .Params.Title }}</h1>
{{ end }}
</div>
</header>
<nav class="{{ $level }} navigation">
<input type="checkbox" id="menu-toggle" />
<label class="menu-button float-right" for="menu-toggle">
<svg viewBox="0 0 100 80">
<rect width="100" height="20"></rect>
<rect y="30" width="100" height="20"></rect>
<rect y="60" width="100" height="20"></rect>
</svg>
</label>
<ul class="navigation-list">
<li class="navigation-item"><a class="navigation-link" href="/what-we-do">What We Do</a></li>
<li class="navigation-item"><a class="navigation-link" href="/what-we-believe">What We Believe</a></li>
<li class="navigation-item"><a class="navigation-link" href="/who-we-are">Who We Are</a></li>
<li class="navigation-item"><a class="navigation-link" href="#navigation">More</a></li>
</ul>
</nav>
4 changes: 4 additions & 0 deletions netlify.toml
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,4 @@
[build]
[build.environment]
HUGO_VERSION = "0.135.0"
GO_VERSION = "1.23.1"