1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071 |
- <template>
- <div class="layout">
- <header class="header">
- <strong>
- <g-link to="/">{{ $static.metaData.siteName }}</g-link>
- </strong>
- <nav class="nav">
- <g-link class="nav__link" to="/">Home</g-link>
- <g-link class="nav__link" to="/article">Article</g-link>
- </nav>
- </header>
- <main>
- <slot/>
- </main>
- <footer>
- <p class="home-links">
- <a href="https://gridsome.org/docs" target="_blank" rel="noopener">Gridsome Docs</a>
- <a href="https://github.com/gridsome/gridsome" target="_blank" rel="noopener">GitHub</a>
- </p>
- </footer>
- </div>
- </template>
- <static-query>
- query {
- metaData {
- siteName
- }
- }
- </static-query>
- <style>
- html,body{
- height:100%;
- }
- body {
- font-family: "Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
- margin:0;
- padding:0;
- line-height: 1.5;
- display:flex;
- flex-direction:column;
- justify-content:flex-start;
- align-items:center;
- }
- .layout {
- max-width: 760px;
- padding-left: 20px;
- padding-right: 20px;
- height:100%;
- display:flex;
- flex-direction:column;
- }
- main{
- height:100%;
- }
- .header {
- display: flex;
- justify-content: space-between;
- align-items: center;
- margin-bottom: 20px;
- height: 80px;
- }
- .nav__link {
- margin-left: 20px;
- }
- </style>
|