Fancy nav, plus craiyon logo!
This commit is contained in:
parent
89b96f623d
commit
108119a351
|
|
@ -4,5 +4,32 @@ extra_html_headers: >
|
|||
<link rel="stylesheet" href="{{ site.baseurl }}/normalize.css">
|
||||
<link rel="stylesheet" href="{{ site.baseurl }}/preserves.css">
|
||||
---
|
||||
<h1>{{ page.title }}</h1>
|
||||
{{ content }}
|
||||
<nav>
|
||||
<div class="left">
|
||||
<h1>
|
||||
<a href="{{ site.baseurl }}/">
|
||||
<span class="icon">
|
||||
<img src="{{ site.baseurl }}/logo-64x64.png">
|
||||
</span>
|
||||
</a>
|
||||
</h1>
|
||||
</div>
|
||||
<div class="middle">
|
||||
<ul>
|
||||
<li><a href="{{site.baseurl}}/preserves.html">Core</a>
|
||||
<li><a href="{{site.baseurl}}/preserves-schema.html">Schema</a>
|
||||
<li><a href="{{site.baseurl}}/preserves-path.html">Path</a>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="right">
|
||||
<a href="https://gitlab.com/preserves/preserves">
|
||||
<span class="icon">
|
||||
<img src="{{ site.baseurl }}/gitlab-logo-500.svg" alt="Gitlab logo">
|
||||
</span>
|
||||
</a>
|
||||
</div>
|
||||
</nav>
|
||||
<main>
|
||||
<h1>{{ page.title }}</h1>
|
||||
{{ content }}
|
||||
</main>
|
||||
|
|
|
|||
|
|
@ -4,6 +4,8 @@ extra_html_headers: |
|
|||
<link rel="canonical" href="{{ site.baseurl }}{{ page.redirect_target }}">
|
||||
<meta http-equiv="Refresh" content="0; URL={{ site.baseurl }}{{ page.redirect_target }}">
|
||||
---
|
||||
<h1>Redirecting</h1>
|
||||
<main>
|
||||
<h1>Redirecting</h1>
|
||||
|
||||
<p>Redirecting you to <a href="{{ site.baseurl }}{{ page.redirect_target }}">{{ page.redirect_target }}</a>.</p>
|
||||
<p>Redirecting you to <a href="{{ site.baseurl }}{{ page.redirect_target }}">{{ page.redirect_target }}</a>.</p>
|
||||
</main>
|
||||
|
|
|
|||
|
|
@ -3,6 +3,10 @@
|
|||
<head>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
|
||||
<title>{% unless page.no_site_title %}{{ site.title }}: {% endunless %}{{ page.title }}</title>
|
||||
|
||||
<link href="{{ site.baseurl }}/logo-64x64.png" rel="icon" />
|
||||
<link href="{{ site.baseurl }}/logo-256x256.png" rel="shortcut icon" />
|
||||
|
||||
<meta name="author" content="Tony Garnock-Jones">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">{{
|
||||
page.extra_html_headers | liquify }}{{
|
||||
|
|
|
|||
Binary file not shown.
|
After Width: | Height: | Size: 506 KiB |
|
|
@ -0,0 +1 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 990 380"><defs><style>.cls-1{fill:#e24329;}.cls-2{fill:#fc6d26;}.cls-3{fill:#fca326;}.cls-4{fill:#fff;}</style></defs><g id="LOGO"><path class="cls-1" d="M302,174.37l-.21-.56-21.2-55.3a5.5,5.5,0,0,0-2.18-2.63,5.6,5.6,0,0,0-8.41,3.2l-14.31,43.81H197.74l-14.31-43.81a5.61,5.61,0,0,0-8.41-3.2,5.5,5.5,0,0,0-2.18,2.63l-21.19,55.31-.22.55a39.36,39.36,0,0,0,13.06,45.49l.08.06.18.14L197,244.23l16,12.09,9.72,7.35a6.57,6.57,0,0,0,7.92,0l9.72-7.35,16-12.09,32.48-24.31.09-.07A39.36,39.36,0,0,0,302,174.37Z"/><path class="cls-2" d="M302,174.37l-.21-.56a71.5,71.5,0,0,0-28.5,12.82l-46.55,35.2,29.64,22.4,32.48-24.31.09-.07A39.36,39.36,0,0,0,302,174.37Z"/><path class="cls-3" d="M197,244.23l16,12.09,9.72,7.35a6.57,6.57,0,0,0,7.92,0l9.72-7.35,16-12.09-29.64-22.4Z"/><path class="cls-2" d="M180.14,186.63a71.44,71.44,0,0,0-28.49-12.81l-.22.55a39.36,39.36,0,0,0,13.06,45.49l.08.06.18.14L197,244.23l29.66-22.4Z"/><path class="cls-4" d="M428.92,171.51H451.7c-3.8-24.22-24.77-41.09-52.06-41.09-32.29,0-56.52,23.74-56.52,63.5,0,39.05,23.14,63.27,57.18,63.27,30.55,0,52.42-19.65,52.42-51.46V190.91H402.65v17.47h28.44c-.36,17.6-12.11,28.74-30.67,28.74-20.66,0-34.82-15.48-34.82-43.44,0-27.78,14.4-43.2,34.34-43.2C414.82,150.48,425,158.43,428.92,171.51Z"/><path class="cls-4" d="M467.78,255.5h21.81V163H467.78Zm11-107.2c6.93,0,12.59-5.31,12.59-11.81s-5.66-11.87-12.59-11.87-12.65,5.3-12.65,11.87S471.75,148.3,478.74,148.3Z"/><path class="cls-4" d="M554.9,163H536.64V140.78H514.83V163H501.7v16.87h13.13v51.46c-.12,17.41,12.54,26,28.92,25.49a44.29,44.29,0,0,0,12.84-2.17l-3.68-17.06a26.57,26.57,0,0,1-6.38.85c-5.49,0-9.89-1.93-9.89-10.73V179.82H554.9Z"/><path class="cls-4" d="M571.78,255.5h76.7V236.76H594.14V132.1H571.78Z"/><path class="cls-4" d="M690.26,257.37c14.52,0,23.19-6.81,27.17-14.58h.72V255.5h21V193.56c0-24.46-19.94-31.81-37.6-31.81-19.46,0-34.4,8.67-39.22,25.54l20.37,2.9c2.16-6.33,8.31-11.75,19-11.75,10.13,0,15.67,5.18,15.67,14.28v.36c0,6.26-6.57,6.57-22.9,8.31-17.95,1.93-35.12,7.29-35.12,28.14C659.29,247.73,672.6,257.37,690.26,257.37Zm7.17-16c-9.1,0-15.61-4.16-15.61-12.17,0-8.38,7.29-11.87,17-13.26,5.73-.78,17.18-2.23,20-4.51v10.9C718.88,232.6,710.56,241.34,697.43,241.34Z"/><path class="cls-4" d="M755.21,255.5h21.45V240.92h1.26c3.44,6.75,10.61,16.21,26.52,16.21,21.81,0,38.14-17.3,38.14-47.78,0-30.85-16.81-47.6-38.2-47.6-16.33,0-23.14,9.82-26.46,16.51H777V132.1H755.21Zm21.39-46.27c0-18,7.71-29.59,21.75-29.59,14.52,0,22,12.35,22,29.59s-7.59,30-22,30C784.43,239.23,776.6,227.18,776.6,209.23Z"/></g></svg>
|
||||
|
After Width: | Height: | Size: 2.5 KiB |
|
|
@ -0,0 +1 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 380 380"><defs><style>.cls-1{fill:#e24329;}.cls-2{fill:#fc6d26;}.cls-3{fill:#fca326;}</style></defs><g id="LOGO"><path class="cls-1" d="M282.83,170.73l-.27-.69-26.14-68.22a6.81,6.81,0,0,0-2.69-3.24,7,7,0,0,0-8,.43,7,7,0,0,0-2.32,3.52l-17.65,54H154.29l-17.65-54A6.86,6.86,0,0,0,134.32,99a7,7,0,0,0-8-.43,6.87,6.87,0,0,0-2.69,3.24L97.44,170l-.26.69a48.54,48.54,0,0,0,16.1,56.1l.09.07.24.17,39.82,29.82,19.7,14.91,12,9.06a8.07,8.07,0,0,0,9.76,0l12-9.06,19.7-14.91,40.06-30,.1-.08A48.56,48.56,0,0,0,282.83,170.73Z"/><path class="cls-2" d="M282.83,170.73l-.27-.69a88.3,88.3,0,0,0-35.15,15.8L190,229.25c19.55,14.79,36.57,27.64,36.57,27.64l40.06-30,.1-.08A48.56,48.56,0,0,0,282.83,170.73Z"/><path class="cls-3" d="M153.43,256.89l19.7,14.91,12,9.06a8.07,8.07,0,0,0,9.76,0l12-9.06,19.7-14.91S209.55,244,190,229.25C170.45,244,153.43,256.89,153.43,256.89Z"/><path class="cls-2" d="M132.58,185.84A88.19,88.19,0,0,0,97.44,170l-.26.69a48.54,48.54,0,0,0,16.1,56.1l.09.07.24.17,39.82,29.82s17-12.85,36.57-27.64Z"/></g></svg>
|
||||
|
After Width: | Height: | Size: 1.0 KiB |
|
|
@ -0,0 +1 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 380 380"><defs><style>.cls-1{fill:#fff;}</style></defs><g id="LOGO"><path class="cls-1" d="M282.83,170.73l-.27-.69-26.14-68.22a6.81,6.81,0,0,0-2.69-3.24,7,7,0,0,0-8,.43,7,7,0,0,0-2.32,3.52l-17.65,54H154.29l-17.65-54A6.86,6.86,0,0,0,134.32,99a7,7,0,0,0-8-.43,6.87,6.87,0,0,0-2.69,3.24L97.44,170l-.26.69a48.54,48.54,0,0,0,16.1,56.1l.09.07.24.17,39.82,29.82,19.7,14.91,12,9.06a8.07,8.07,0,0,0,9.76,0l12-9.06,19.7-14.91,40.06-30,.1-.08A48.56,48.56,0,0,0,282.83,170.73Z"/></g></svg>
|
||||
|
After Width: | Height: | Size: 530 B |
Binary file not shown.
|
After Width: | Height: | Size: 60 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 6.8 KiB |
|
|
@ -6,14 +6,87 @@ body {
|
|||
font-family: var(--serif-font);
|
||||
box-sizing: border-box;
|
||||
line-height: 1.414;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
body > nav {
|
||||
display: flex;
|
||||
background: #4a8fa3; /* #385c87; */
|
||||
color: white;
|
||||
flex-flow: row nowrap;
|
||||
box-shadow: 0 0 0.2rem #0000001a, 0 0.2rem 0.4rem #00000033;
|
||||
padding: 0;
|
||||
position: sticky;
|
||||
right: 0;
|
||||
top: 0;
|
||||
z-index: 4;
|
||||
}
|
||||
body > nav > div {
|
||||
display: flex;
|
||||
flex-flow: row nowrap;
|
||||
font-size: 1.2rem;
|
||||
line-height: 2rem;
|
||||
margin: 0;
|
||||
padding: 1rem;
|
||||
}
|
||||
body > nav > div * {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
nav div {
|
||||
flex-grow: 1;
|
||||
}
|
||||
nav div.middle {
|
||||
justify-content: flex-end;
|
||||
flex-grow: 0;
|
||||
flex-basis: 40em;
|
||||
}
|
||||
@media screen and (max-width: 420px) {
|
||||
nav div.middle {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
nav div.right {
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
body > nav > * h1 {
|
||||
font-size: 1.4rem;
|
||||
font-weight: normal;
|
||||
color: white;
|
||||
}
|
||||
body > nav > * a {
|
||||
color: inherit;
|
||||
text-decoration: none;
|
||||
}
|
||||
body > nav span.icon > img {
|
||||
display: inline-block;
|
||||
min-height: 48px;
|
||||
max-height: 48px;
|
||||
margin: -1.2rem 0;
|
||||
line-height: 0;
|
||||
}
|
||||
body > nav ul {
|
||||
display: flex;
|
||||
margin: 0 -0.5rem;
|
||||
}
|
||||
body > nav ul > li {
|
||||
display: block;
|
||||
padding: 0 0.5rem;
|
||||
}
|
||||
@media screen and (max-width: 768px) { .md, .lg, .xl { display: none; } }
|
||||
@media screen and (max-width: 992px) { .lg, .xl { display: none; } }
|
||||
@media screen and (max-width: 1200px) { .xl { display: none; } }
|
||||
@media screen {
|
||||
body { padding-top: 2rem; max-width: 40em; margin: auto; font-size: 120%; }
|
||||
main { padding-top: 2rem; max-width: 40em; margin: auto; font-size: 120%; }
|
||||
hr { display: none; }
|
||||
}
|
||||
@media print {
|
||||
@page { size: letter; margin: 4rem 0rem 4.333rem 0rem; }
|
||||
body { margin-left: 4.5rem; margin-right: 4.5rem; font-size: 10.5pt; }
|
||||
body > nav { display: none; }
|
||||
main { margin-left: 4.5rem; margin-right: 4.5rem; font-size: 10.5pt; }
|
||||
h1, h2 { page-break-before: always; margin-top: 0; }
|
||||
hr+* { page-break-before: always; margin-top: 0; }
|
||||
hr { display: none; }
|
||||
|
|
@ -29,7 +102,7 @@ p, ul, table {
|
|||
margin: 1em 0;
|
||||
}
|
||||
|
||||
body {
|
||||
main {
|
||||
counter-set: section 0 subsection 0 appendix 0;
|
||||
}
|
||||
h2:before, h3:before {
|
||||
|
|
@ -47,7 +120,7 @@ h2:before, h3:before {
|
|||
}
|
||||
|
||||
@media screen and (max-width: 53.33em) {
|
||||
body {
|
||||
main {
|
||||
margin-left: 2.33em;
|
||||
margin-right: 0.5em;
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue