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 {
|
||||
background: $bg60;
|
||||
overflow-x: auto;
|
||||
overflow-y: hidden;
|
||||
position: sticky;
|
||||
top: 0;
|
||||
white-space: nowrap;
|
||||
z-index: 20;
|
||||
.container {
|
||||
header.main {
|
||||
align-items: center;
|
||||
display: flex;
|
||||
height: 64px;
|
||||
.website-name {
|
||||
a {
|
||||
color: $white;
|
||||
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;
|
||||
flex-wrap: wrap;
|
||||
margin: 0 auto;
|
||||
max-width: 1140px;
|
||||
min-height: 64px;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
@media (max-width: 800px) {
|
||||
nav {
|
||||
.container {
|
||||
.website-externallinks {
|
||||
ul {
|
||||
li {
|
||||
a {
|
||||
background: $bg50;
|
||||
color: $white-dark;
|
||||
color: $white;
|
||||
padding: 17.6px 15px;
|
||||
text-decoration: none;
|
||||
text-underline-offset: 6px;
|
||||
margin: 0 15px;
|
||||
&:hover {
|
||||
background: $bg40;
|
||||
}
|
||||
}
|
||||
.seperator {
|
||||
display: block;
|
||||
padding: 20px 10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
text-decoration: underline;
|
||||
}
|
||||
}
|
||||
h1 {
|
||||
display: flex;
|
||||
font-size: 16px;
|
||||
margin: 0;
|
||||
}
|
||||
nav {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -7,16 +7,6 @@
|
|||
.section.header {
|
||||
background: $bg60;
|
||||
@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 {
|
||||
margin: 60px auto;
|
||||
max-width: 600px;
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
{{- define "stylesheet" -}}
|
||||
{{- $scss := resources.Get "/_default/list.scss" -}}
|
||||
{{- $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 -}}
|
||||
|
||||
{{- define "main" }}
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
{{- define "stylesheet" -}}
|
||||
{{- $scss := resources.Get "/_default/single.scss" -}}
|
||||
{{- $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 -}}
|
||||
|
||||
{{- define "main" -}}
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
{{ 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 }}
|
||||
|
||||
{{ define "main" }}
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
{{ 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 }}
|
||||
|
||||
{{ define "main" }}
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
{{- define "stylesheet" -}}
|
||||
{{- $scss := resources.Get "/index.scss" -}}
|
||||
{{- $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 -}}
|
||||
|
||||
{{- define "main" -}}
|
||||
|
|
|
|||
|
|
@ -1,46 +1,11 @@
|
|||
{{ $currentPage := . }}
|
||||
<nav>
|
||||
<div class="container">
|
||||
<section class="website-name">
|
||||
{{- $currentPage := . -}}
|
||||
<header class="main">
|
||||
{{- range .Site.Menus.name }}
|
||||
{{- if $currentPage.IsMenuCurrent "name" . }}
|
||||
<a href="{{ .URL }}" class="active">{{ .Name }}</a>
|
||||
{{- else }}
|
||||
<h1><a href="{{ .URL }}">{{ .Name }}</a></h1>
|
||||
{{- end }}
|
||||
<nav>
|
||||
{{- range .Site.Menus.main }}
|
||||
<a href="{{ .URL }}">{{ .Name }}</a>
|
||||
{{- 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>
|
||||
</header>
|
||||
|
|
|
|||
Loading…
Reference in a new issue