improve basic styling
This commit is contained in:
Philipp Kühn
71
docs/src/layouts/App/base.scss
Normal file
71
docs/src/layouts/App/base.scss
Normal file
@@ -0,0 +1,71 @@
|
||||
*,
|
||||
*::before,
|
||||
*::after {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
box-sizing: border-box;
|
||||
box-shadow: none;
|
||||
outline: none;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar {
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-track {
|
||||
border: 4px solid transparent;
|
||||
background-clip: padding-box;
|
||||
border-radius: 8px;
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb {
|
||||
border: 4px solid rgba(0, 0, 0, 0);
|
||||
background-clip: padding-box;
|
||||
border-radius: 8px;
|
||||
background-color: $colorBlack;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-button {
|
||||
display: none;
|
||||
width: 0;
|
||||
height: 0;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-corner {
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
html {
|
||||
scroll-behavior: smooth;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: 'Inter', sans-serif;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
line-height: 1.7;
|
||||
background-color: $colorLightGrey;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
*:focus {
|
||||
outline: none;
|
||||
}
|
||||
|
||||
a {
|
||||
color: inherit;
|
||||
transition: color 0.2s $ease, background-color 0.2s $ease;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
p {
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.is-active {
|
||||
background: black;
|
||||
color: white;
|
||||
}
|
||||
47
docs/src/layouts/App/index.vue
Normal file
47
docs/src/layouts/App/index.vue
Normal file
@@ -0,0 +1,47 @@
|
||||
<template>
|
||||
<div class="app">
|
||||
<header class="app__header">
|
||||
<div class="app__inner">
|
||||
<strong>
|
||||
<g-link to="/">{{ $static.metadata.siteName }}</g-link>
|
||||
</strong>
|
||||
</div>
|
||||
</header>
|
||||
<div class="app__content">
|
||||
<div class="app__inner">
|
||||
<div class="app__content-inner">
|
||||
<aside class="app__sidebar">
|
||||
<div v-for="edge in $static.allPost.edges" :key="edge.node.id">
|
||||
<g-link :to="edge.node.path">
|
||||
{{ edge.node.title }}
|
||||
</g-link>
|
||||
</div>
|
||||
</aside>
|
||||
<main class="app__main">
|
||||
<slot/>
|
||||
</main>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<static-query>
|
||||
query {
|
||||
metadata {
|
||||
siteName
|
||||
}
|
||||
allPost {
|
||||
edges {
|
||||
node {
|
||||
id
|
||||
title
|
||||
path
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</static-query>
|
||||
|
||||
<style lang="scss" src="./base.scss" />
|
||||
<style lang="scss" src="./style.scss" scoped />
|
||||
34
docs/src/layouts/App/style.scss
Normal file
34
docs/src/layouts/App/style.scss
Normal file
@@ -0,0 +1,34 @@
|
||||
.app {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
min-height: 100%;
|
||||
|
||||
&__header {
|
||||
flex: 0 0 auto;
|
||||
padding: 2rem 0;
|
||||
}
|
||||
|
||||
&__content {
|
||||
flex: 1 1 auto;
|
||||
}
|
||||
|
||||
&__content-inner {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
&__sidebar {
|
||||
flex: 0 0 auto;
|
||||
width: 18rem;
|
||||
}
|
||||
|
||||
&__main {
|
||||
flex: 1 1 auto;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
&__inner {
|
||||
max-width: 62rem;
|
||||
margin: 0 auto;
|
||||
padding: 0 1rem;
|
||||
}
|
||||
}
|
||||
@@ -1,60 +0,0 @@
|
||||
<template>
|
||||
<div class="layout">
|
||||
<header class="header">
|
||||
<strong>
|
||||
<g-link to="/">{{ $static.metadata.siteName }}</g-link>
|
||||
</strong>
|
||||
</header>
|
||||
<slot/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<static-query>
|
||||
query {
|
||||
metadata {
|
||||
siteName
|
||||
}
|
||||
}
|
||||
</static-query>
|
||||
|
||||
<style lang="scss">
|
||||
body {
|
||||
font-family: 'Inter', -apple-system,system-ui,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
|
||||
margin:0;
|
||||
padding:0;
|
||||
line-height: 1.5;
|
||||
background-color: $colorLightGrey;
|
||||
}
|
||||
|
||||
.layout {
|
||||
max-width: 760px;
|
||||
margin: 0 auto;
|
||||
padding-left: 20px;
|
||||
padding-right: 20px;
|
||||
}
|
||||
|
||||
.header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 20px;
|
||||
height: 80px;
|
||||
}
|
||||
|
||||
.nav__link {
|
||||
margin-left: 20px;
|
||||
}
|
||||
|
||||
*:focus {
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.is-active {
|
||||
background: black;
|
||||
color: white;
|
||||
}
|
||||
|
||||
// :not(pre) > code[class*="language-"], pre[class*="language-"] {
|
||||
// background-color: $colorBlack;
|
||||
// }
|
||||
</style>
|
||||
@@ -1,13 +1,13 @@
|
||||
import Prism from 'prismjs'
|
||||
import 'prismjs/themes/prism-coy.css'
|
||||
import 'prismjs/components/prism-jsx.js'
|
||||
import DefaultLayout from '~/layouts/Default.vue'
|
||||
import App from '~/layouts/App'
|
||||
import Demo from '~/components/Demo'
|
||||
import Tab from '~/components/Tab'
|
||||
import ReactRenderer from '~/components/ReactRenderer'
|
||||
|
||||
export default function (Vue, { router, head, isClient }) {
|
||||
Vue.component('Layout', DefaultLayout)
|
||||
Vue.component('Layout', App)
|
||||
Vue.component('Demo', Demo)
|
||||
Vue.component('Tab', Tab)
|
||||
Vue.component('ReactRenderer', ReactRenderer)
|
||||
|
||||
@@ -1,25 +1,5 @@
|
||||
<template>
|
||||
<Layout>
|
||||
|
||||
<div v-for="edge in $static.allPost.edges" :key="edge.node.id">
|
||||
<g-link :to="edge.node.path">
|
||||
{{ edge.node.title }}
|
||||
</g-link>
|
||||
</div>
|
||||
|
||||
Hi there! 👋
|
||||
</Layout>
|
||||
</template>
|
||||
|
||||
<static-query>
|
||||
query {
|
||||
allPost {
|
||||
edges {
|
||||
node {
|
||||
id
|
||||
title
|
||||
path
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</static-query>
|
||||
@@ -1,3 +1,38 @@
|
||||
$colorWhite: #FFF;
|
||||
$colorLightGrey: #F8F8F8;
|
||||
$colorBlack: #000;
|
||||
|
||||
/* Default Equations */
|
||||
$linear: cubic-bezier(0.250, 0.250, 0.750, 0.750);
|
||||
$ease: cubic-bezier(0.250, 0.100, 0.250, 1.000);
|
||||
$easeIn: cubic-bezier(0.420, 0.000, 1.000, 1.000);
|
||||
$easeOut: cubic-bezier(0.000, 0.000, 0.580, 1.000);
|
||||
$easeInOut: cubic-bezier(0.420, 0.000, 0.580, 1.000);
|
||||
|
||||
/* Penner Equations (approximated) originally created by @robpenner */
|
||||
$easeInQuad: cubic-bezier(0.550, 0.085, 0.680, 0.530);
|
||||
$easeInCubic: cubic-bezier(0.550, 0.055, 0.675, 0.190);
|
||||
$easeInQuart: cubic-bezier(0.895, 0.030, 0.685, 0.220);
|
||||
$easeInQuint: cubic-bezier(0.755, 0.050, 0.855, 0.060);
|
||||
$easeInSine: cubic-bezier(0.470, 0.000, 0.745, 0.715);
|
||||
$easeInExpo: cubic-bezier(0.950, 0.050, 0.795, 0.035);
|
||||
$easeInCirc: cubic-bezier(0.600, 0.040, 0.980, 0.335);
|
||||
$easeInBack: cubic-bezier(0.600, -0.280, 0.735, 0.045);
|
||||
|
||||
$easeOutQuad: cubic-bezier(0.250, 0.460, 0.450, 0.940);
|
||||
$easeOutCubic: cubic-bezier(0.215, 0.610, 0.355, 1.000);
|
||||
$easeOutQuart: cubic-bezier(0.165, 0.840, 0.440, 1.000);
|
||||
$easeOutQuint: cubic-bezier(0.230, 1.000, 0.320, 1.000);
|
||||
$easeOutSine: cubic-bezier(0.390, 0.575, 0.565, 1.000);
|
||||
$easeOutExpo: cubic-bezier(0.190, 1.000, 0.220, 1.000);
|
||||
$easeOutCirc: cubic-bezier(0.075, 0.820, 0.165, 1.000);
|
||||
$easeOutBack: cubic-bezier(0.175, 0.885, 0.320, 1.275);
|
||||
|
||||
$easeInOutQuad: cubic-bezier(0.455, 0.030, 0.515, 0.955);
|
||||
$easeInOutCubic: cubic-bezier(0.645, 0.045, 0.355, 1.000);
|
||||
$easeInOutQuart: cubic-bezier(0.770, 0.000, 0.175, 1.000);
|
||||
$easeInOutQuint: cubic-bezier(0.860, 0.000, 0.070, 1.000);
|
||||
$easeInOutSine: cubic-bezier(0.445, 0.050, 0.550, 0.950);
|
||||
$easeInOutExpo: cubic-bezier(1.000, 0.000, 0.000, 1.000);
|
||||
$easeInOutCirc: cubic-bezier(0.785, 0.135, 0.150, 0.860);
|
||||
$easeInOutBack: cubic-bezier(0.680, -0.550, 0.265, 1.550);
|
||||
Reference in New Issue
Block a user