cybrespace
/
pinafore
1
0
Fork 1
Code Issues Pull Requests Releases Wiki Activity

add fixed header

This commit is contained in:
Nolan Lawson 2018-01-10 22:17:15 -08:00
parent 3bba43ea17
commit e1d8419b11
3 changed files with 15 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
assets/global.css
View File

@ -7,12 +7,19 @@ body {
background: white; background: white;
} }
#svelte {
display: flex;
flex-direction: column;
}
main { main {
overflow-x: hidden;
overflow-y: auto;
position: relative; position: relative;
max-width: 800px; max-width: 800px;
padding: 15px 15px; padding: 15px 15px;
box-sizing: border-box; box-sizing: border-box;
margin: 0 auto; margin: 75px auto;
} }
h1, h2, h3, h4, h5, h6 { h1, h2, h3, h4, h5, h6 {

1
routes/_components/Layout.html
View File

@ -3,7 +3,6 @@
<main> <main>
<slot></slot> <slot></slot>
</main> </main>
<script> <script>
import Nav from './Nav.html'; import Nav from './Nav.html';

8
routes/_components/Nav.html
View File

@ -40,7 +40,13 @@
<style> <style>
nav { nav {
border-bottom: 1px solid rgba(0, 0, 0, 0.1); border-bottom: 1px solid rgba(0, 0, 0, 0.1);
background: royalblue; background: royalblue;
position: fixed;
left: 0;
right: 0;
top: 0;
z-index: 10;
will-change: transform; /* avoids "repaints on scroll" for fixed position header */
} }
ul { ul {