Add SCSS via Asset Pipeline (#65)

* Remove old files

* Add SCSS pipeline

* Add generated files

* Fix navigation HTML

* Fix media queries

* Remove RTL

* Fix styling for big screens

* Remove separator configs

* Fix menu dropdown

* Add working mobile menu

* Fix menu item heights

* Update README
This commit is contained in:
Luiz F. A. de Prá
2018-08-21 16:26:15 -03:00
committed by GitHub
parent 1d8e1935de
commit 934db8e964
22 changed files with 778 additions and 572 deletions

View File

@@ -16,10 +16,15 @@
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Fira+Mono:400,700">
<link rel="stylesheet" href="//cdn.rawgit.com/necolas/normalize.css/master/normalize.css">
<link rel="stylesheet" href="{{ "css/style.min.css" | absURL }}">
{{ if .Site.Params.rtl}}
<link rel="stylesheet" href="{{ "css/style-rtl.min.css" | absURL }}">
{{ if .Site.IsServer }}
{{ $cssOpts := (dict "targetPath" "css/coder.css" "enableSourceMap" true ) }}
{{ $styles := resources.Get "scss/coder.scss" | resources.ExecuteAsTemplate "style.coder.css" . | toCSS $cssOpts }}
<link rel="stylesheet" href="{{ $styles.Permalink }}" media="screen">
{{ else }}
{{ $cssOpts := (dict "targetPath" "css/coder.css" ) }}
{{ $styles := resources.Get "scss/coder.scss" | resources.ExecuteAsTemplate "style.coder.css" . | toCSS $cssOpts | minify | fingerprint }}
<link rel="stylesheet" href="{{ $styles.Permalink }}" integrity="{{ $styles.Data.Integrity }}" media="screen">
{{ end }}
{{ range .Site.Params.custom_css }}
@@ -37,7 +42,7 @@
{{ .Hugo.Generator }}
</head>
<body class="{{ if .Site.Params.rtl }}rtl{{ end }}">
<body>
<main class="wrapper">
{{ partial "header.html" . }}

View File

@@ -1,44 +1,35 @@
<nav class="navigation">
<section class="container">
<a class="navigation-title" href="{{ print "/" | absLangURL }}">
<a class="navigation-title" href="{{ .Site.BaseURL | absLangURL }}">
{{ .Site.Title }}
</a>
<input type="checkbox" id="menu-control"/>
<label class="menu-mobile {{ if $.Site.Params.rtl }} float-left {{ else }} float-right {{ end }}" for="menu-control">
<span class="btn-mobile {{ if $.Site.Params.rtl }} float-left {{ else }} float-right {{ end }}">&#9776;</span>
<ul class="navigation-list">
{{ with .Site.Menus.main}}
{{ range sort . }}
<li class="navigation-item {{ if $.Site.Params.itemscentered }} align-center {{ else }} {{ if $.Site.Params.rtl }} align-right {{ else }} align-left {{ end }} {{ end }}">
<a class="navigation-link" href="{{ .URL | absLangURL }}">{{ .Name }}</a>
</li>
{{ end }}
<input type="checkbox" id="menu-toggle" />
<label class="menu-button float-right" for="menu-toggle">&#9776;</label>
<ul class="navigation-list">
{{ with .Site.Menus.main}}
{{ range sort . }}
<li class="navigation-item">
<a class="navigation-link" href="{{ .URL | absLangURL }}">{{ .Name }}</a>
</li>
{{ end }}
{{ if .Site.IsMultiLingual }}
{{ $node := . }}
{{ .Scratch.Set "separator" true }}
{{ with .Site.Params.LangSeparator }}
<li class= "{{ if $.Site.Params.itemscentered }} mobile-menu-lang-separator-centered {{ else }} mobile-menu-lang-separator-full {{ end }}">
<hr />
</li>
{{ end }}
{{ range .Site.Home.AllTranslations }}
{{ if ne $.Site.Language .Language }}
{{ if $node.Scratch.Get "separator" }}
{{ with .Site.Params.LangSeparator }}
<li class="multilingual-separator">
<p>{{ . }}</p>
</li>
{{ end }}
{{ $node.Scratch.Set "separator" false }}
{{ end }}
<li class="navigation-item {{ if $.Site.Params.itemscentered }} align-center {{ else }} {{ if $.Site.Params.rtl }} align-right {{ else }} align-left {{ end }} {{ end }}">
<a href="{{ .Permalink }}">{{ .Language.LanguageName }}</a>
{{ end }}
{{ if .Site.IsMultiLingual }}
{{ $node := . }}
{{ .Scratch.Set "separator" true }}
{{ range .Site.Home.AllTranslations }}
{{ if ne $.Site.Language .Language }}
{{ if $node.Scratch.Get "separator" }}
<li class="navigation-item menu-separator">
<span>|</span>
</li>
{{ $node.Scratch.Set "separator" false }}
{{ end }}
<li class="navigation-item">
<a href="{{ .Permalink }}">{{ .Language.LanguageName }}</a>
</li>
{{ end }}
{{ end }}
</ul>
</label>
{{ end }}
</ul>
</section>
</nav>