ianhitchman/tiptap
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

add some styling

Browse Source
This commit is contained in:
Philipp Kühn
2020-04-17 23:18:18 +02:00
parent 4f68026f7f
commit 7a17adcc84
43 changed files with 217 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
docs/src/layouts/App/base.scss
View File

@@ -55,6 +55,11 @@ body {
outline: none;
}
ul,
ol {
list-style: none;
}
a {
color: inherit;
transition: color 0.2s $ease, background-color 0.2s $ease;

170
docs/src/layouts/App/fonts.scss Normal file
View File

@@ -0,0 +1,170 @@
// @font-face {
// font-family: 'Inter';
// font-style: normal;
// font-weight: 100;
//
// src: url("~@/assets/fonts/Inter-Thin-BETA.woff2") format("woff2"),
// url("~@/assets/fonts/Inter-Thin-BETA.woff") format("woff"),
// ;
// }
// @font-face {
// font-family: 'Inter';
// font-style: italic;
// font-weight: 100;
//
// src: url("~@/assets/fonts/Inter-ThinItalic-BETA.woff2") format("woff2"),
// url("~@/assets/fonts/Inter-ThinItalic-BETA.woff") format("woff"),
// ;
// }
// @font-face {
// font-family: 'Inter';
// font-style: normal;
// font-weight: 200;
//
// src: url("~@/assets/fonts/Inter-ExtraLight-BETA.woff2") format("woff2"),
// url("~@/assets/fonts/Inter-ExtraLight-BETA.woff") format("woff"),
// ;
// }
// @font-face {
// font-family: 'Inter';
// font-style: italic;
// font-weight: 200;
//
// src: url("~@/assets/fonts/Inter-ExtraLightItalic-BETA.woff2") format("woff2"),
// url("~@/assets/fonts/Inter-ExtraLightItalic-BETA.woff") format("woff"),
// ;
// }
// @font-face {
// font-family: 'Inter';
// font-style: normal;
// font-weight: 300;
//
// src: url("~@/assets/fonts/Inter-Light-BETA.woff2") format("woff2"),
// url("~@/assets/fonts/Inter-Light-BETA.woff") format("woff"),
// ;
// }
// @font-face {
// font-family: 'Inter';
// font-style: italic;
// font-weight: 300;
//
// src: url("~@/assets/fonts/Inter-LightItalic-BETA.woff2") format("woff2"),
// url("~@/assets/fonts/Inter-LightItalic-BETA.woff") format("woff"),
// ;
// }
@font-face {
font-family: 'Inter';
font-style: normal;
font-weight: 400;
src:
url("~@/assets/fonts/Inter-Regular.woff2") format("woff2"),
url("~@/assets/fonts/Inter-Regular.woff") format("woff"),
;
}
@font-face {
font-family: 'Inter';
font-style: italic;
font-weight: 400;
src:
url("~@/assets/fonts/Inter-Italic.woff2") format("woff2"),
url("~@/assets/fonts/Inter-Italic.woff") format("woff"),
;
}
@font-face {
font-family: 'Inter';
font-style: normal;
font-weight: 500;
src:
url("~@/assets/fonts/Inter-Medium.woff2") format("woff2"),
url("~@/assets/fonts/Inter-Medium.woff") format("woff"),
;
}
@font-face {
font-family: 'Inter';
font-style: italic;
font-weight: 500;
src:
url("~@/assets/fonts/Inter-MediumItalic.woff2") format("woff2"),
url("~@/assets/fonts/Inter-MediumItalic.woff") format("woff"),
;
}
@font-face {
font-family: 'Inter';
font-style: normal;
font-weight: 600;
src:
url("~@/assets/fonts/Inter-SemiBold.woff2") format("woff2"),
url("~@/assets/fonts/Inter-SemiBold.woff") format("woff"),
;
}
@font-face {
font-family: 'Inter';
font-style: italic;
font-weight: 600;
src:
url("~@/assets/fonts/Inter-SemiBoldItalic.woff2") format("woff2"),
url("~@/assets/fonts/Inter-SemiBoldItalic.woff") format("woff"),
;
}
@font-face {
font-family: 'Inter';
font-style: normal;
font-weight: 700;
src:
url("~@/assets/fonts/Inter-Bold.woff2") format("woff2"),
url("~@/assets/fonts/Inter-Bold.woff") format("woff"),
;
}
@font-face {
font-family: 'Inter';
font-style: italic;
font-weight: 700;
src:
url("~@/assets/fonts/Inter-BoldItalic.woff2") format("woff2"),
url("~@/assets/fonts/Inter-BoldItalic.woff") format("woff"),
;
}
// @font-face {
// font-family: 'Inter';
// font-style: normal;
// font-weight: 800;
//
// src: url("~@/assets/fonts/Inter-ExtraBold.woff2") format("woff2"),
// url("~@/assets/fonts/Inter-ExtraBold.woff") format("woff"),
// ;
// }
// @font-face {
// font-family: 'Inter';
// font-style: italic;
// font-weight: 800;
//
// src: url("~@/assets/fonts/Inter-ExtraBoldItalic.woff2") format("woff2"),
// url("~@/assets/fonts/Inter-ExtraBoldItalic.woff") format("woff"),
// ;
// }
@font-face {
font-family: 'Inter';
font-style: normal;
font-weight: 900;
src: url("~@/assets/fonts/Inter-Black.woff2") format("woff2"),
url("~@/assets/fonts/Inter-Black.woff") format("woff"),
;
}
// @font-face {
// font-family: 'Inter';
// font-style: italic;
// font-weight: 900;
//
// src: url("~@/assets/fonts/Inter-BlackItalic.woff2") format("woff2"),
// url("~@/assets/fonts/Inter-BlackItalic.woff") format("woff"),
// ;
// }

19
docs/src/layouts/App/index.vue
View File

@@ -2,20 +2,22 @@
<div class="app">
<header class="app__header">
<div class="app__inner">
<strong>
<g-link to="/">{{ $static.metadata.siteName }}</g-link>
</strong>
<g-link class="app__logo" to="/">
{{ $static.metadata.siteName }}
</g-link>
</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>
<ul>
<li v-for="edge in $static.allPost.edges" :key="edge.node.id">
<g-link class="app__link" :to="edge.node.path">
{{ edge.node.title }}
</g-link>
</li>
</ul>
</aside>
<main class="app__main">
<slot/>
@@ -43,5 +45,6 @@ query {
}
</static-query>
<style lang="scss" src="./fonts.scss"></style>
<style lang="scss" src="./base.scss" />
<style lang="scss" src="./style.scss" scoped />

24
docs/src/layouts/App/style.scss
View File

@@ -3,6 +3,27 @@
flex-direction: column;
min-height: 100%;
&__logo {
font-weight: 700;
font-size: 1.4rem;
}
&__link {
display: block;
padding: 0.1rem 0.5rem;
border-radius: 5px;
font-weight: 500;
color: rgba($colorBlack, 0.7);
margin-bottom: 0.2rem;
margin-left: -0.5rem;
&.active,
&:hover {
color: $colorBlack;
background-color: rgba($colorBlack, 0.05);
}
}
&__header {
flex: 0 0 auto;
padding: 2rem 0;
@@ -19,6 +40,7 @@
&__sidebar {
flex: 0 0 auto;
width: 18rem;
padding-right: 3rem;
}
&__main {
@@ -29,6 +51,6 @@
&__inner {
max-width: 62rem;
margin: 0 auto;
padding: 0 1rem;
padding: 0 2rem;
}
}