Partialy limit width

GDGToulouse · Apr 2, 2019 · 4eca09f · 4eca09f
1 parent e69f89c
commit 4eca09f
Show file tree

Hide file tree

Showing 5 changed files with 124 additions and 112 deletions.
diff --git a/layouts/partials/footer.html b/layouts/partials/footer.html
@@ -1,85 +1,87 @@
-<footer class="container">
+<footer>
+	<div class="bottom-content">
 
-	<div class="footer-header">
-		<div class="share">
-			<header>{{ i18n "footer_share" }}</header>
-			<ul class="social-list">
-				{{ range .Site.Data.footer.share }}
-				<li>
-					{{ $url := .URL | relLangURL }}
-					{{ partial "social-sharer.html" (dict "context" . "url" $url "name" .name) }}
+		<div class="footer-header">
+			<div class="share">
+				<header>{{ i18n "footer_share" }}</header>
+				<ul class="social-list">
+					{{ range .Site.Data.footer.share }}
+					<li>
+						{{ $url := .URL | relLangURL }}
+						{{ partial "social-sharer.html" (dict "context" . "url" $url "name" .name) }}
+						{{ end }}
+				</ul>
+			</div>
+			<div class="blog">
+				<header>
+					{{ i18n "footer_follow_blog" }} <a href="{{ "blog/" | relLangURL }}">{{ i18n "footer_follow_blog_blog" }}</a>
+				</header>
+			</div>
+			<div class="follow">
+				<header>{{ i18n "footer_follow_us" }}</header>
+				<ul class="social-list">
+					{{ range .Site.Data.footer.follow }}
+					<li>
+						<a href="{{ .url }}" class="social" rel="noreferrer" target="_blank">
+							{{ partial "icon.html" .name }}
+							{{ .name }}
+						</a>
+					</li>
 					{{ end }}
-			</ul>
-		</div>
-		<div class="blog">
-			<header>
-				{{ i18n "footer_follow_blog" }} <a href="{{ "blog/" | relLangURL }}">{{ i18n "footer_follow_blog_blog" }}</a>
-			</header>
-		</div>
-		<div class="follow">
-			<header>{{ i18n "footer_follow_us" }}</header>
-			<ul class="social-list">
-				{{ range .Site.Data.footer.follow }}
-				<li>
-					<a href="{{ .url }}" class="social" rel="noreferrer" target="_blank">
-						{{ partial "icon.html" .name }}
-						{{ .name }}
-					</a>
-				</li>
-				{{ end }}
-			</ul>
+				</ul>
+			</div>
+			<div class="email">
+				<a href="mailto:{{ .Site.Params.email }}">
+					{{ partial "icon.html" "email" }}
+					{{- .Site.Params.email -}}
+				</a>
+			</div>
 		</div>
-		<div class="email">
-			<a href="mailto:{{ .Site.Params.email }}">
-				{{ partial "icon.html" "email" }}
-				{{- .Site.Params.email -}}
-			</a>
-		</div>
-	</div>
 
-	<hr>
+		<hr>
 
-	<div class="footer-content">
-		{{ range .Site.Data.footer.content }}
-		<section>
-			<header>{{ i18n .title }}</header>
-			{{ if .links }}
-			<ul>
-				{{ range .links }}
-				<li>
-					<a href="{{ .url }}" {{ if .newTab }}target="_blank" rel="noopener" {{end}}>
-						{{ if .nameKey }}
-						{{ i18n .nameKey }}
-						{{ else }}
-						{{ .name }}
-						{{ end }}
-					</a>
-				</li>
+		<div class="footer-content">
+			{{ range .Site.Data.footer.content }}
+			<section>
+				<header>{{ i18n .title }}</header>
+				{{ if .links }}
+				<ul>
+					{{ range .links }}
+					<li>
+						<a href="{{ .url }}" {{ if .newTab }}target="_blank" rel="noopener" {{end}}>
+							{{ if .nameKey }}
+							{{ i18n .nameKey }}
+							{{ else }}
+							{{ .name }}
+							{{ end }}
+						</a>
+					</li>
+					{{ end }}
+				</ul>
 				{{ end }}
-			</ul>
+			</section>
 			{{ end }}
-		</section>
-		{{ end }}
-		{{ if .Site.Params.subscriptionUrl }}
-		<section class="subscribe">
-			<header>{{ i18n "newsletter" }}</header>
-			<p>{{ i18n "subscribe_notice" }}</p>
-			<a href="{{ .Site.Params.subscriptionUrl }}"
-			   class="btn" rel="noreferrer" target="_blank">
-				{{ partial "icon.html" "subscribe" }}
-				{{- i18n "subscribe_action" -}}
-			</a>
-		</section>
-		{{ end }}
-	</div>
+			{{ if .Site.Params.subscriptionUrl }}
+			<section class="subscribe">
+				<header>{{ i18n "newsletter" }}</header>
+				<p>{{ i18n "subscribe_notice" }}</p>
+				<a href="{{ .Site.Params.subscriptionUrl }}"
+				   class="btn" rel="noreferrer" target="_blank">
+					{{ partial "icon.html" "subscribe" }}
+					{{- i18n "subscribe_action" -}}
+				</a>
+			</section>
+			{{ end }}
+		</div>
 
-	<hr>
+		<hr>
 
-	<div class="footer-footer">
-		{{ if .Site.Params.logos.footer }}
-		<img src="{{ .Site.Params.logos.footer }}" alt="{{ .Site.Title }}">
-		{{ end }}
-		<div>{{ emojify .Site.Params.copyright }}</div>
-	</div>
+		<div class="footer-footer">
+			{{ if .Site.Params.logos.footer }}
+			<img src="{{ .Site.Params.logos.footer }}" alt="{{ .Site.Title }}">
+			{{ end }}
+			<div>{{ emojify .Site.Params.copyright }}</div>
+		</div>
 
-</footer>
+	</div>
+</footer>
diff --git a/layouts/partials/header.html b/layouts/partials/header.html
@@ -1,46 +1,48 @@
 <header>
+	<div class="top-content">
 
-	<div class="logo">
-		<a href="{{"/" | relLangURL}}">
+		<div class="logo">
+			<a href="{{"/" | relLangURL}}">
 			<img src="{{ .Site.Params.logos.header }}" alt="logo {{ .Site.Title }}">
-		</a>
-	</div>
+			</a>
+		</div>
 
-	<input type="checkbox" id="menu-burger" class="visually-hidden" aria-label="Menu"/>
+		<input type="checkbox" id="menu-burger" class="visually-hidden" aria-label="Menu"/>
 
-	<label for="menu-burger">
-		{{ partial "icon.html" "menu" }}
-		{{ partial "icon.html" "close" }}
-	</label>
+		<label for="menu-burger">
+			{{ partial "icon.html" "menu" }}
+			{{ partial "icon.html" "close" }}
+		</label>
 
-	<nav>
-		<ul class="menu">
-			{{- $currentPage := . -}}
-			{{ range .Site.Menus.main }}
-			<li class="{{ if $currentPage.IsMenuCurrent "main" . }}active{{ end }}" >
+		<nav>
+			<ul class="menu">
+				{{- $currentPage := . -}}
+				{{ range .Site.Menus.main }}
+				<li class="{{ if $currentPage.IsMenuCurrent "main" . }}active{{ end }}" >
 				{{ if (hasPrefix .URL "http") }}
-					<a class="external" rel="noreferrer" target="_blank" href="{{ .URL }}">{{ .Name }}</a>
+				<a class="external" rel="noreferrer" target="_blank" href="{{ .URL }}">{{ .Name }}</a>
 				{{ else }}
 				<a href="{{ .URL | relLangURL }}">{{ .Name }}</a>
 				{{ end }}
-			</li>
-			{{ end }}
-		</ul>
+				</li>
+				{{ end }}
+			</ul>
 
-		<ul class="languages">
-			{{ range .Translations }}
-			<li>
-				<a class="lang lang-{{ .Language.LanguageName }} {{ if eq .Language $.Site.Home.Language }}active{{ end }}"
-				   title="{{ .Language.LanguageName }}"
-				   href="{{ .RelPermalink }}"
-				   role="radio"
-				   aria-label="{{ i18n "language_switch" }} {{ .Language.LanguageName }}"
-				   aria-checked="{{ if eq .Language $.Site.Home.Language }}true{{ else }}false{{ end }}">
+			<ul class="languages">
+				{{ range .Translations }}
+				<li>
+					<a class="lang lang-{{ .Language.LanguageName }} {{ if eq .Language $.Site.Home.Language }}active{{ end }}"
+					   title="{{ .Language.LanguageName }}"
+					   href="{{ .RelPermalink }}"
+					   role="radio"
+					   aria-label="{{ i18n "language_switch" }} {{ .Language.LanguageName }}"
+					aria-checked="{{ if eq .Language $.Site.Home.Language }}true{{ else }}false{{ end }}">
 					{{- i18n "language_switch" }} {{ .Language.LanguageName -}}
-				</a>
-			</li>
-			{{ end }}
-		</ul>
-	</nav>
+					</a>
+				</li>
+				{{ end }}
+			</ul>
+		</nav>
 
+	</div>
 </header>
diff --git a/src/style/partials/_footer.scss b/src/style/partials/_footer.scss
@@ -3,6 +3,11 @@ body > footer {
   color: var(--base-secondary-text);
   font-weight: 200;
 
+  .bottom-content {
+    max-width: var(--theJdrSize);
+    margin: 0 auto;
+  }
+
   a:hover {
     text-decoration: underline;
   }

diff --git a/src/style/partials/_header.scss b/src/style/partials/_header.scss
@@ -4,10 +4,13 @@ body > header {
   top: 0;
   z-index: 100;
   width: 100vw;
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  padding: var(--space-2) var(--container-margin) var(--space-1) var(--container-margin);
+  .top-content {
+    max-width: var(--theJdrSize);
+    margin: 0 auto;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+  }
   box-shadow: 0 var(--space-1) var(--primary),
   0 var(--space-2) var(--space-1) var(--darken-3);
   background: var(--primary);

diff --git a/static/theme.css b/static/theme.css