styles: add footer and header

This commit is contained in:
SerKo 2022-05-09 18:25:13 +08:00
parent 138ec84d17
commit 88c9777c62
4 changed files with 47 additions and 40 deletions

View File

@ -3,46 +3,13 @@
{{- partial "head.html" . -}}
<body class="bg:fade-90@dark font:fade-16@dark">
<nav class="w:full h:90 fixed bg:fade-90/.95@dark bg:white z:1000">
<div class="
h:full
w:full
max-w:1200
mx:auto
px:32
d:flex
align-items:center
">
<div>
<a href="/" class="mr-3 font:extralight">Holy</a>
</div>
<div class="ml:auto">
{{ $currentPage := . }}
{{ $active := "" }}
{{ range .Site.Menus.main }}
{{ if or ($currentPage.IsMenuCurrent "main" .) ($currentPage.HasMenuCurrent "main" .) }}
{{ $active = "active" }}
{{ end }}
<a class="
font:semibold
font:fade-70
font:fade-10:hover
font:fade-30.active
px:8
transition:150ms;ease-in
{{ $active }}
" href="{{ .URL }}" title="{{ .Title }}">
{{- .Name -}}
</a>
{{ end }}
</div>
{{ partial "header.html" . -}}
<div class="d:flex flex:column@<=sm pt:90 px:32 jc:center gap:44">
{{- block "side" . }}{{- end }}
<div class="max-w:700 box:content-box">
{{- block "main" . }}{{- end }}
{{- partial "footer.html" . -}}
</div>
</nav>
<div class="pt:90 px:32 max-w:700 box:content-box mx:auto">
{{- block "main" . }}{{- end }}
{{- partial "footer.html" . -}}
</div>
</body>

View File

@ -1,5 +1,5 @@
{{ define "main" }}
<article class="box:border-box py:64 w:full">
<article class="box:border-box pt:32">
<header class="mb:32">
<div class="font:40 font:extrabold">{{ .Title }}</div>
<div class="mt:16 f:fade-64">

View File

@ -0,0 +1,4 @@
<footer class="py:32">
<div class="f:fade-30 f:14 mb:8">{{ .Site.Params.copyright }}</div>
<div class="f:fade-60 f:12">Theme <a class="f:bold" href="https://github.com/serkodev/holy" _target="_blank">Holy</a></div>
</footer>

View File

@ -0,0 +1,36 @@
<nav class="w:full h:90 fixed bg:fade-90/.95@dark bg:white z:1000">
<div class="
h:full
w:full
max-w:1200
mx:auto
px:32
d:flex
align-items:center
">
<div>
<a href="/" class="mr-3 font:extralight">{{ .Site.Title }}</a>
</div>
<div class="ml:auto">
{{ $currentPage := . }}
{{ $active := "" }}
{{ range .Site.Menus.main }}
{{ if or ($currentPage.IsMenuCurrent "main" .) ($currentPage.HasMenuCurrent "main" .) }}
{{ $active = "active" }}
{{ end }}
<a class="
font:semibold
font:fade-70
font:fade-10:hover
font:fade-30.active
px:8
transition:150ms;ease-in
{{ $active }}
" href="{{ .URL }}" title="{{ .Title }}">
{{- .Name -}}
</a>
{{ end }}
</div>
</div>
</nav>