simplified main menu, (maybe?) fixed preloading of css
This commit is contained in:
Vrifox
parent
836892e08e
commit
8c242b4aa5
GPG key ID:
D40098E5B60B2197
8 changed files with 39 additions and 173 deletions
|
|
@ -1,117 +1,28 @@
|
||||||
nav {
|
header.main {
|
||||||
background: $bg60;
|
|
||||||
overflow-x: auto;
|
|
||||||
overflow-y: hidden;
|
|
||||||
position: sticky;
|
|
||||||
top: 0;
|
|
||||||
white-space: nowrap;
|
|
||||||
z-index: 20;
|
|
||||||
.container {
|
|
||||||
align-items: center;
|
align-items: center;
|
||||||
display: flex;
|
display: flex;
|
||||||
height: 64px;
|
flex-wrap: wrap;
|
||||||
.website-name {
|
margin: 0 auto;
|
||||||
a {
|
max-width: 1140px;
|
||||||
color: $white;
|
min-height: 64px;
|
||||||
display: block;
|
|
||||||
padding: 20px 30px;
|
|
||||||
text-decoration: none;
|
|
||||||
transition: background .2s;
|
|
||||||
&:hover {
|
|
||||||
background: $bg50;
|
|
||||||
}
|
|
||||||
&.active {
|
|
||||||
border-bottom: 2px solid $white-dark;
|
|
||||||
border-top: 2px solid transparent;
|
|
||||||
padding: 16px 30px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.seperator {
|
|
||||||
cursor: default;
|
|
||||||
display: block;
|
|
||||||
padding: 20px;
|
|
||||||
}
|
|
||||||
.website-mainmenu {
|
|
||||||
ul {
|
|
||||||
display: flex;
|
|
||||||
margin: 0;
|
|
||||||
padding: 0;
|
|
||||||
li {
|
|
||||||
list-style-type: none;
|
|
||||||
&.active a {
|
|
||||||
border-bottom: 2px solid $white-dark;
|
|
||||||
border-top: 4px solid transparent;
|
|
||||||
padding: 16px 30px;
|
|
||||||
}
|
|
||||||
a {
|
|
||||||
color: $white;
|
|
||||||
display: block;
|
|
||||||
text-decoration: none;
|
|
||||||
transition: background .2s;
|
|
||||||
padding: 20px 30px;
|
|
||||||
&:hover {
|
|
||||||
background: $bg50;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.website-externallinks {
|
|
||||||
margin-left: auto;
|
|
||||||
ul {
|
|
||||||
display: flex;
|
|
||||||
margin: 0;
|
|
||||||
padding: 0;
|
|
||||||
li {
|
|
||||||
list-style-type: none;
|
|
||||||
a {
|
|
||||||
color: $white;
|
|
||||||
display: block;
|
|
||||||
text-decoration: none;
|
|
||||||
transition: background .2s;
|
|
||||||
padding: 20px 30px;
|
|
||||||
&:hover {
|
|
||||||
background: $bg50;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.seperator {
|
|
||||||
display: block;
|
|
||||||
padding: 20px 10px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@media (max-width: 1140px) {
|
|
||||||
nav {
|
|
||||||
.container {
|
|
||||||
margin: 0;
|
|
||||||
width: 100%;
|
width: 100%;
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@media (max-width: 800px) {
|
|
||||||
nav {
|
|
||||||
.container {
|
|
||||||
.website-externallinks {
|
|
||||||
ul {
|
|
||||||
li {
|
|
||||||
a {
|
a {
|
||||||
background: $bg50;
|
color: $white;
|
||||||
color: $white-dark;
|
padding: 17.6px 15px;
|
||||||
|
text-decoration: none;
|
||||||
|
text-underline-offset: 6px;
|
||||||
|
margin: 0 15px;
|
||||||
&:hover {
|
&:hover {
|
||||||
background: $bg40;
|
text-decoration: underline;
|
||||||
}
|
|
||||||
}
|
|
||||||
.seperator {
|
|
||||||
display: block;
|
|
||||||
padding: 20px 10px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
h1 {
|
||||||
|
display: flex;
|
||||||
|
font-size: 16px;
|
||||||
|
margin: 0;
|
||||||
}
|
}
|
||||||
|
nav {
|
||||||
|
display: flex;
|
||||||
|
flex-wrap: wrap;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -7,16 +7,6 @@
|
||||||
.section.header {
|
.section.header {
|
||||||
background: $bg60;
|
background: $bg60;
|
||||||
@include a-underlined;
|
@include a-underlined;
|
||||||
&::before {
|
|
||||||
background: linear-gradient(0deg, transparent, #3c3c5a);
|
|
||||||
content: "";
|
|
||||||
display: block;
|
|
||||||
height: 32px;
|
|
||||||
margin-top: -32px;
|
|
||||||
position: sticky;
|
|
||||||
top: 64px;
|
|
||||||
width: 100%;
|
|
||||||
}
|
|
||||||
header {
|
header {
|
||||||
margin: 60px auto;
|
margin: 60px auto;
|
||||||
max-width: 600px;
|
max-width: 600px;
|
||||||
|
|
|
||||||
|
|
@ -1,7 +1,7 @@
|
||||||
{{- define "stylesheet" -}}
|
{{- define "stylesheet" -}}
|
||||||
{{- $scss := resources.Get "/_default/list.scss" -}}
|
{{- $scss := resources.Get "/_default/list.scss" -}}
|
||||||
{{- $style := $scss | resources.ToCSS -}}
|
{{- $style := $scss | resources.ToCSS -}}
|
||||||
<link rel="stylesheet" href="{{ $style.Permalink }}" type="text/css" media="screen" rel="preload" />
|
<link rel="preload stylesheet" as="style" href="{{ $style.Permalink }}" type="text/css" media="screen" />
|
||||||
{{- end -}}
|
{{- end -}}
|
||||||
|
|
||||||
{{- define "main" }}
|
{{- define "main" }}
|
||||||
|
|
|
||||||
|
|
@ -1,7 +1,7 @@
|
||||||
{{- define "stylesheet" -}}
|
{{- define "stylesheet" -}}
|
||||||
{{- $scss := resources.Get "/_default/single.scss" -}}
|
{{- $scss := resources.Get "/_default/single.scss" -}}
|
||||||
{{- $style := $scss | resources.ToCSS -}}
|
{{- $style := $scss | resources.ToCSS -}}
|
||||||
<link rel="stylesheet" href="{{ $style.Permalink }}" type="text/css" media="screen" rel="preload" />
|
<link rel="preload stylesheet" as="style" href="{{ $style.Permalink }}" type="text/css" media="screen" />
|
||||||
{{- end -}}
|
{{- end -}}
|
||||||
|
|
||||||
{{- define "main" -}}
|
{{- define "main" -}}
|
||||||
|
|
|
||||||
|
|
@ -1,5 +1,5 @@
|
||||||
{{ define "stylesheet" }}{{ $sass := resources.Get "/errorpages.scss" }}{{ $style := $sass | resources.ToCSS }}
|
{{ define "stylesheet" }}{{ $sass := resources.Get "/errorpages.scss" }}{{ $style := $sass | resources.ToCSS }}
|
||||||
<link rel="stylesheet" href="{{ $style.Permalink }}" type="text/css" media="screen" rel="preload" />
|
<link rel="preload stylesheet" as="style" href="{{ $style.Permalink }}" type="text/css" media="screen" />
|
||||||
{{ end }}
|
{{ end }}
|
||||||
|
|
||||||
{{ define "main" }}
|
{{ define "main" }}
|
||||||
|
|
|
||||||
|
|
@ -1,5 +1,5 @@
|
||||||
{{ define "stylesheet" }}{{ $sass := resources.Get "/errorpages.scss" }}{{ $style := $sass | resources.ToCSS }}
|
{{ define "stylesheet" }}{{ $sass := resources.Get "/errorpages.scss" }}{{ $style := $sass | resources.ToCSS }}
|
||||||
<link rel="stylesheet" href="{{ $style.Permalink }}" type="text/css" media="screen" rel="preload" />
|
<link rel="preload stylesheet" as="style" href="{{ $style.Permalink }}" type="text/css" media="screen" />
|
||||||
{{ end }}
|
{{ end }}
|
||||||
|
|
||||||
{{ define "main" }}
|
{{ define "main" }}
|
||||||
|
|
|
||||||
|
|
@ -1,7 +1,7 @@
|
||||||
{{- define "stylesheet" -}}
|
{{- define "stylesheet" -}}
|
||||||
{{- $scss := resources.Get "/index.scss" -}}
|
{{- $scss := resources.Get "/index.scss" -}}
|
||||||
{{- $style := $scss | resources.ToCSS -}}
|
{{- $style := $scss | resources.ToCSS -}}
|
||||||
<link rel="stylesheet" href="{{ $style.Permalink }}" type="text/css" media="screen" />
|
<link rel="preload stylesheet" as="style" href="{{ $style.Permalink }}" type="text/css" media="screen" />
|
||||||
{{- end -}}
|
{{- end -}}
|
||||||
|
|
||||||
{{- define "main" -}}
|
{{- define "main" -}}
|
||||||
|
|
|
||||||
|
|
@ -1,46 +1,11 @@
|
||||||
{{ $currentPage := . }}
|
{{- $currentPage := . -}}
|
||||||
<nav>
|
<header class="main">
|
||||||
<div class="container">
|
|
||||||
<section class="website-name">
|
|
||||||
{{- range .Site.Menus.name }}
|
{{- range .Site.Menus.name }}
|
||||||
{{- if $currentPage.IsMenuCurrent "name" . }}
|
<h1><a href="{{ .URL }}">{{ .Name }}</a></h1>
|
||||||
<a href="{{ .URL }}" class="active">{{ .Name }}</a>
|
{{- end }}
|
||||||
{{- else }}
|
<nav>
|
||||||
|
{{- range .Site.Menus.main }}
|
||||||
<a href="{{ .URL }}">{{ .Name }}</a>
|
<a href="{{ .URL }}">{{ .Name }}</a>
|
||||||
{{- end }}
|
{{- end }}
|
||||||
{{- end }}
|
|
||||||
</section>
|
|
||||||
<span class="seperator">/</span>
|
|
||||||
<section class="website-mainmenu">
|
|
||||||
<ul>
|
|
||||||
{{- range .Site.Menus.main -}}
|
|
||||||
{{ if or ($currentPage.IsMenuCurrent "main" .) ($currentPage.HasMenuCurrent "main" .) -}}
|
|
||||||
<li class="active">
|
|
||||||
<a href="{{ .URL }}">
|
|
||||||
<span>{{ .Name }}</span>
|
|
||||||
</a>
|
|
||||||
</li>
|
|
||||||
{{- else }}
|
|
||||||
<li>
|
|
||||||
<a href="{{ .URL }}">
|
|
||||||
<span>{{ .Name }}</span>
|
|
||||||
</a>
|
|
||||||
</li>
|
|
||||||
{{- end }}
|
|
||||||
{{- end }}
|
|
||||||
</ul>
|
|
||||||
</section>
|
|
||||||
<section class="website-externallinks">
|
|
||||||
<ul>
|
|
||||||
{{- range .Site.Menus.externallinks }}
|
|
||||||
<li>
|
|
||||||
<a title="{{ .URL }}" href="{{ .URL }}">
|
|
||||||
{{- .Pre }}
|
|
||||||
<span>{{ .Name }}</span>
|
|
||||||
</a>
|
|
||||||
</li>
|
|
||||||
{{- end }}
|
|
||||||
</ul>
|
|
||||||
</section>
|
|
||||||
</div>
|
|
||||||
</nav>
|
</nav>
|
||||||
|
</header>
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue