full-sized width with inner container

adapt a few other sizes, paddings etc
author: max.mehl <max.mehl@fsfe.org> 2020-10-09 19:53:42 +0300
committer: Max Mehl <mail@mehl.mx> 2020-10-29 19:56:21 +0300
commit: e24303521317fe1227ffe8000f3fb07a6571f64c (patch)
tree: ca7dc3b0cc286a3f8edfe49b1a59e06ceb54b111
parent: f0e54330086108a7fedd19a4472bf9944e1015fb (diff)
5 files changed, 84 insertions, 64 deletions
diff --git a/assets/css/style.css b/assets/css/style.css
index 16d7f23..ba5f094 100644
--- a/assets/css/style.css
+++ b/assets/css/style.css
@@ -25,13 +25,6 @@ section {
 	display: block;
 }
 
-nav {
-  position: sticky;
-  position: -webkit-sticky;
-  top: 0;
-  z-index: 1;
-}
-
 :focus::-webkit-input-placeholder {
 	color: transparent;
 }
@@ -155,19 +148,20 @@ nav {
 
 /* Structure */
 html {
-	font-size: 100%;
+	font-size: 115%;
 	-ms-text-size-adjust: none;
 	-webkit-text-size-adjust: none;
 }
 
 body {
+	color: #1a1a1a;
 	margin: 0;
 	font-family: {{ $fontFamilyPrimary }};
 	font-size: 14px;
 	font-size: .875rem;
 	line-height: 1.6;
 	word-wrap: break-word;
-	background: #f7f7f7;
+	background: #F0F4F6;
 	-webkit-font-smoothing: antialiased;
 }
 
@@ -179,13 +173,12 @@ body {
 }
 
 .container--outer {
-	margin: 25px auto;
-	box-shadow: 0 0 10px rgba(50, 50, 50, .17);
+	/* margin: 25px auto;
+	box-shadow: 0 0 10px rgba(50, 50, 50, .17); */
 }
 
 .wrapper {
-	padding: 25px;
-	background: #fff;
+	padding: 25px 0;
 }
 
 .flex {
@@ -256,12 +249,6 @@ textarea {
 	background: {{ $highlightColor }};
 }
 
-/* Animation */
-.menu__item,
-.btn {
-	transition: background-color .25s ease-out;
-}
-
 /* Typography */
 h1,
 h2,
@@ -273,7 +260,7 @@ h6 {
 	margin: 0 0 1.25rem;
 	font-weight: 700;
 	line-height: 1.3;
-	color: #000;
+	color: {{ $highlightColor }};
 }
 
 h1 {
@@ -307,7 +294,7 @@ h6 {
 }
 
 a {
-	color: #000;
+	color: {{ $highlightColor }};
 	text-decoration: none;
 }
 
@@ -565,6 +552,15 @@ select {
 }
 
 /* Main menu */
+.menu {
+  position: sticky;
+  position: -webkit-sticky;
+  top: 0;
+  z-index: 1;
+	background: {{ $highlightColor }};
+	line-height: 1.5
+}
+
 .no-js .menu__btn {
 	display: none;
 }
@@ -615,7 +611,10 @@ button:not(:-moz-focusring):focus > .menu__btn-title {
 
 .menu__list {
 	list-style: none;
-	background: {{ $highlightColor }};
+}
+
+.menu__item {
+	padding: 0 .9375rem;
 }
 
 .menu__item:hover {
@@ -626,24 +625,45 @@ button:not(:-moz-focusring):focus > .menu__btn-title {
 	border: 0;
 }
 
-.menu__item--active {
-	/* background: {{ $highlightColor }}; */
+.menu__item:first-child {
+	padding-left: 0;
 }
 
 .menu__link {
 	display: block;
-	padding: 10px 15px;
-	padding: .625rem .9375rem;
+	padding: .625rem 0;
 	font-family: 'Merriweather', Georgia, serif;
 	font-size: 18px;
 	font-weight: 700;
 	color: #fff;
+	position: relative;
 }
 
 .menu__link:hover {
 	color: #fff;
 }
 
+.menu__link::after {
+	content: "";
+	width: 0;
+	height: 0;
+	visibility: hidden;
+	opacity: 0;
+	transition: visibility 0s, opacity .2s linear;
+	border: 6px solid transparent;
+	border-bottom-color: #ffffff;
+	position: absolute;
+	bottom: 0;
+	left: 50%;
+	margin-left: -6px;
+}
+
+.menu__item--active .menu__link::after,
+.menu__item:hover .menu__link::after {
+	visibility: visible;
+	opacity: 1;
+}
+
 .js .menu__list {
 	position: absolute;
 	z-index: 1;
diff --git a/layouts/_default/baseof.html b/layouts/_default/baseof.html
index 57cb286..37db06d 100644
--- a/layouts/_default/baseof.html
+++ b/layouts/_default/baseof.html
@@ -33,9 +33,8 @@
 	{{- end }}
 </head>
 <body class="body">
-	<div class="container container--outer">
 		{{ partial "header" . }}
-		<div class="wrapper flex">
+		<div class="container wrapper flex">
 			<div class="primary">
 			{{ block "main" . }}
 				{{ with .Content }}
@@ -48,7 +47,6 @@
 			{{ partial "sidebar.html" . }}
 		</div>
 		{{ partial "footer" . }}
-	</div>
 <script async defer src="{{ "js/menu.js" | relURL }}"></script>
 {{ range .Site.Params.customJS -}}
 <script src="{{ . | relURL }}"></script>
diff --git a/layouts/partials/header.html b/layouts/partials/header.html
index 8a2d494..33e0899 100644
--- a/layouts/partials/header.html
+++ b/layouts/partials/header.html
@@ -1,6 +1,4 @@
 <header class="header">
-	<div class="container header__container">
-		{{ partial "logo.html" . }}
-	</div>
+	{{ partial "logo.html" . }}
 </header>
 {{ partial "menu.html" . }}
diff --git a/layouts/partials/logo.html b/layouts/partials/logo.html
index bf7d668..b7566c2 100644
--- a/layouts/partials/logo.html
+++ b/layouts/partials/logo.html
@@ -7,18 +7,20 @@
 	{{- $logoMix := and $logoImage $logoTitle -}}
 
 	<div class="logo{{ with $logoMix }} logo--mixed{{ end }}">
-		<a class="logo__link" href="{{ "" | relLangURL }}"{{ with $logoTitle }} title="{{ . }}"{{ end }} rel="home">
-			{{ with $logoImage -}}
-				<div class="logo__item logo__imagebox">
-					<img class="logo__img" src="{{ . | relURL }}">
-				</div>
-			{{- end -}}
-			{{ with $logoTitle -}}
-				<div class="logo__item logo__text">
-					<div class="logo__title">{{ . }}</div>
-					{{ with $logoSubtitle }}<div class="logo__tagline">{{ . }}</div>{{ end }}
-				</div>
-			{{- end }}
-		</a>
+		<div class="container">
+			<a class="logo__link" href="{{ "" | relLangURL }}"{{ with $logoTitle }} title="{{ . }}"{{ end }} rel="home">
+				{{ with $logoImage -}}
+					<div class="logo__item logo__imagebox">
+						<img class="logo__img" src="{{ . | relURL }}">
+					</div>
+				{{- end -}}
+				{{ with $logoTitle -}}
+					<div class="logo__item logo__text">
+						<div class="logo__title">{{ . }}</div>
+						{{ with $logoSubtitle }}<div class="logo__tagline">{{ . }}</div>{{ end }}
+					</div>
+				{{- end }}
+			</a>
+		</div>
 	</div>
-{{- end }}
-\ No newline at end of file
+{{- end }}
diff --git a/layouts/partials/menu.html b/layouts/partials/menu.html
index dab4245..24cf4b5 100644
--- a/layouts/partials/menu.html
+++ b/layouts/partials/menu.html
@@ -1,23 +1,25 @@
 {{- if .Site.Menus.main }}
 <nav class="menu">
-	<button class="menu__btn" aria-haspopup="true" aria-expanded="false" tabindex="0">
-		<span class="menu__btn-title" tabindex="-1">{{ T "menu_label" }}</span>
-	</button>
-	<ul class="menu__list">
-		{{- $currentNode := . }}
-		{{- range .Site.Menus.main }}
-		{{- if .Name }}
-		<li class="menu__item{{ if or ($currentNode.IsMenuCurrent "main" .) ($currentNode.HasMenuCurrent "main" .) }} menu__item--active{{ end }}">
-			<a class="menu__link" href="{{ .URL }}">
-				{{ .Pre }}
-				<span class="menu__text">{{ .Name }}</span>
-				{{ .Post }}
-			</a>
-		</li>
-		{{- end }}
-		{{- end }}
-	</ul>
+	<div class="container">
+		<button class="menu__btn" aria-haspopup="true" aria-expanded="false" tabindex="0">
+			<span class="menu__btn-title" tabindex="-1">{{ T "menu_label" }}</span>
+		</button>
+		<ul class="menu__list">
+			{{- $currentNode := . }}
+			{{- range .Site.Menus.main }}
+			{{- if .Name }}
+			<li class="menu__item{{ if or ($currentNode.IsMenuCurrent "main" .) ($currentNode.HasMenuCurrent "main" .) }} menu__item--active{{ end }}">
+				<a class="menu__link" href="{{ .URL }}">
+					{{ .Pre }}
+					<span class="menu__text">{{ .Name }}</span>
+					{{ .Post }}
+				</a>
+			</li>
+			{{- end }}
+			{{- end }}
+		</ul>
+	</div>
 </nav>
 {{ else -}}
 <div class="divider"></div>
-{{- end }}
-\ No newline at end of file
+{{- end }}
author	max.mehl <max.mehl@fsfe.org>	2020-10-09 19:53:42 +0300
committer	Max Mehl <mail@mehl.mx>	2020-10-29 19:56:21 +0300
commit	e24303521317fe1227ffe8000f3fb07a6571f64c (patch)
tree	ca7dc3b0cc286a3f8edfe49b1a59e06ceb54b111
parent	f0e54330086108a7fedd19a4472bf9944e1015fb (diff)