kerberos-io/documentation
1
0
Fork 0
mirror of https://github.com/kerberos-io/documentation.git synced 2026-10-19 17:28:30 +00:00
Code Issues Packages Projects Releases Wiki Activity

typography tweaks, narrower content & add negative space

Browse Source
This commit is contained in:
Martin Allien
2021-04-23 16:02:42 +02:00
parent d37fad6fe5
commit fdd7acb5da
11 changed files with 499 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files
doczrc.js
+2
View File
@@ -14,6 +14,7 @@ export default {
colors: {
primary: '#943733',
secondary: '#772824',
//text: '#6D6666',
h5: {
color: '#943733',
},
@@ -32,6 +33,7 @@ export default {
dark: {
primary: '#AF79CE',
secondary: '#9F4DCE',
//text: '#D9D6D6',
header: {
bg: '#57356B',
button: {
src/gatsby-theme-docz/index.css
+22 -3
View File
@@ -50,8 +50,8 @@ p code {
}
h2 {
border-top: 1px solid #c3c3c3;
padding-top: 35px !important;
/*border-top: 1px solid #c3c3c3;*/
padding: 65px 0 12px !important;
}
h2::before {
@@ -59,6 +59,10 @@ h2::before {
color: #943733;
}
h3 {
padding: 45px 0 8px !important;
}
h3::before{
content: '';
display: inline-block;
@@ -72,6 +76,14 @@ h3::before{
margin-bottom: 3px;
}
h4 {
padding: 30px 0 8px !important;
}
h5 {
padding: 20px 0 4px !important;
}
.embed-container {
position: relative;
padding-bottom: 62.50%;
@@ -91,11 +103,18 @@ h3::before{
}
p > img {
margin: 25px 0 !important;
margin: 50px auto !important;
display: block;
}
/*
@media screen and (min-width: 700px) {
p > img {
max-width: 600px !important;
}
}
*/
hr {
margin: 70px 0 !important;
}
src/gatsby-theme-docz/theme/breakpoints.js
+14
View File
@@ -0,0 +1,14 @@
const em = px => `${px / 16}em`
const mountMedia = val => `@media screen and (max-width: ${em(val)})`
export const breakpoints = {
mobile: 630,
tablet: 920,
desktop: 1120,
}
export const media = {
mobile: mountMedia(breakpoints.mobile),
tablet: mountMedia(breakpoints.tablet),
desktop: mountMedia(breakpoints.desktop),
}
src/gatsby-theme-docz/theme/colors.js
+12
View File
@@ -0,0 +1,12 @@
export const white = '#FFFFFF'
export const grayUltraLight = '#FCFBFA'
export const grayExtraLight = '#F5F6F7'
export const grayLight = '#CED4DE'
export const gray = '#67788a'
export const grayDark = '#2D3747'
export const grayExtraDark = '#1D2330'
export const dark = '#13161F'
export const blueLight = '#e9f2fa'
export const blue = '#0B5FFF'
export const skyBlue = '#1FB6FF'
export const negative = '#EB4D4B'
src/gatsby-theme-docz/theme/global.js
+12
View File
@@ -0,0 +1,12 @@
export default {
body: {
margin: 0,
padding: 0,
},
'.icon-link': {
display: 'none',
},
'.with-overlay': {
overflow: 'hidden',
},
}
src/gatsby-theme-docz/theme/index.js
+57
View File
@@ -0,0 +1,57 @@
import moraga from 'typography-theme-moraga'
import { toTheme } from '@theme-ui/typography'
import { merge } from 'lodash/fp'
import * as modes from './modes'
import prism from './prism'
import styles from './styles'
moraga.headerWeight = 700
const typography = toTheme(moraga)
export default merge(typography, {
initialColorMode: 'light',
// Show errors above playground editor
showLiveError: true,
// Show preview of the code inside playground
showLivePreview: true,
// Show editor when a playground is rendered
showPlaygroundEditor: true,
// Show dark/light mode switch toggle in header
showDarkModeSwitch: true,
// Display edit this page button on every page
showMarkdownEditButton: true,
// Wrap the playground editor and preview in iframes to avoid style/script collisions
useScopingInPlayground: false,
colors: {
...modes.light,
modes: {
dark: modes.dark,
},
},
fonts: {
monospace: 'Inconsolata',
},
fontSizes: [12, 14, 16, 20, 24, 32, 48, 64],
fontWeights: {
body: 400,
heading: 700,
bold: 700,
},
lineHeights: {
body: 1.5,
heading: 1.125,
},
letterSpacings: {
body: 'normal',
caps: '0.2em',
},
space: [0, 4, 8, 16, 32, 48, 64, 80, 100],
radii: {
square: 0,
radius: 4,
rounded: 10,
},
styles,
prism,
})
src/gatsby-theme-docz/theme/modes.js
+97
View File
@@ -0,0 +1,97 @@
import * as colors from './colors'
import prismDark from './prism/dark'
import prismLight from './prism/light'
export const light = {
...colors,
primary: colors.blue,
text: colors.grayDark,
muted: colors.gray,
link: colors.blue,
background: colors.white,
border: colors.grayLight,
sidebar: {
bg: colors.white,
navGroup: colors.grayDark,
navLink: colors.grayDark,
navLinkActive: colors.blue,
tocLink: colors.gray,
tocLinkActive: colors.grayExtraDark,
},
header: {
bg: colors.grayExtraLight,
text: colors.grayDark,
border: colors.grayLight,
button: {
bg: colors.blue,
color: colors.white,
},
},
props: {
bg: colors.grayUltraLight,
text: colors.grayDark,
highlight: colors.blue,
defaultValue: colors.gray,
descriptionText: colors.grayDark,
descriptionBg: colors.white,
},
playground: {
bg: colors.white,
border: colors.grayLight,
},
blockquote: {
bg: colors.grayExtraLight,
border: colors.grayLight,
color: colors.gray,
},
prism: {
...prismLight,
},
}
export const dark = {
...colors,
primary: colors.skyBlue,
text: colors.grayExtraLight,
muted: colors.gray,
link: colors.skyBlue,
background: colors.grayExtraDark,
border: colors.grayDark,
sidebar: {
bg: colors.grayExtraDark,
navGroup: colors.gray,
navLink: colors.grayLight,
navLinkActive: colors.skyBlue,
tocLink: colors.gray,
tocLinkActive: colors.grayLight,
},
header: {
bg: colors.dark,
text: colors.grayLight,
border: colors.grayDark,
button: {
bg: colors.skyBlue,
color: colors.white,
},
},
props: {
bg: colors.dark,
text: colors.gray,
highlight: colors.skyBlue,
defaultValue: colors.grayDark,
descriptionText: colors.gray,
descriptionBg: colors.grayExtraDark,
},
playground: {
bg: colors.dark,
border: colors.grayDark,
},
blockquote: {
bg: colors.grayDark,
border: colors.gray,
color: colors.gray,
},
prism: {
...prismDark,
},
}
src/gatsby-theme-docz/theme/prism/dark.js
+106
View File
@@ -0,0 +1,106 @@
export default {
plain: {
fontFamily: 'Inconsolata',
color: '#d6deeb',
backgroundColor: '#13161F',
},
styles: [
{
types: ['changed'],
style: {
color: 'rgb(162, 191, 252)',
fontStyle: 'italic',
},
},
{
types: ['deleted'],
style: {
color: 'rgba(239, 83, 80, 0.56)',
fontStyle: 'italic',
},
},
{
types: ['inserted', 'attr-name'],
style: {
color: 'rgb(173, 219, 103)',
fontStyle: 'italic',
},
},
{
types: ['comment'],
style: {
color: 'rgb(99, 119, 119)',
fontStyle: 'italic',
},
},
{
types: ['string', 'url'],
style: {
color: 'rgb(173, 219, 103)',
},
},
{
types: ['variable'],
style: {
color: 'rgb(214, 222, 235)',
},
},
{
types: ['number'],
style: {
color: 'rgb(247, 140, 108)',
},
},
{
types: ['builtin', 'char', 'constant', 'function'],
style: {
color: 'rgb(130, 170, 255)',
},
},
{
// This was manually added after the auto-generation
// so that punctuations are not italicised
types: ['punctuation'],
style: {
color: 'rgb(199, 146, 234)',
},
},
{
types: ['selector', 'doctype'],
style: {
color: 'rgb(199, 146, 234)',
fontStyle: 'italic',
},
},
{
types: ['class-name'],
style: {
color: 'rgb(255, 203, 139)',
},
},
{
types: ['tag', 'operator', 'keyword'],
style: {
color: 'rgb(127, 219, 202)',
},
},
{
types: ['boolean'],
style: {
color: 'rgb(255, 88, 116)',
},
},
{
types: ['property'],
style: {
color: 'rgb(128, 203, 196)',
},
},
{
types: ['namespace'],
style: {
color: 'rgb(178, 204, 214)',
},
},
],
}
src/gatsby-theme-docz/theme/prism/index.js
+7
View File
@@ -0,0 +1,7 @@
import dark from './dark'
import light from './light'
export default {
dark,
light,
}
src/gatsby-theme-docz/theme/prism/light.js
+75
View File
@@ -0,0 +1,75 @@
export default {
plain: {
fontFamily: 'Inconsolata',
color: '#393A34',
backgroundColor: '#f6f8fa',
},
styles: [
{
types: ['comment', 'prolog', 'doctype', 'cdata'],
style: {
color: '#999988',
fontStyle: 'italic',
},
},
{
types: ['namespace'],
style: {
opacity: 0.7,
},
},
{
types: ['string', 'attr-value'],
style: {
color: '#e3116c',
},
},
{
types: ['punctuation', 'operator'],
style: {
color: '#393A34',
},
},
{
types: [
'entity',
'url',
'symbol',
'number',
'boolean',
'variable',
'constant',
'property',
'regex',
'inserted',
],
style: {
color: '#36acaa',
},
},
{
types: ['atrule', 'keyword', 'attr-name', 'selector'],
style: {
color: '#00a4db',
},
},
{
types: ['function', 'deleted', 'tag'],
style: {
color: '#d73a49',
},
},
{
types: ['function-variable'],
style: {
color: '#6f42c1',
},
},
{
types: ['tag', 'selector', 'keyword'],
style: {
color: '#00009f',
},
},
],
}
src/gatsby-theme-docz/theme/styles.js
+95
View File
@@ -0,0 +1,95 @@
const styles = {
Container: {
p: 4,
maxWidth: 920, // 1280
},
root: {
fontSize: 3,
color: 'text',
bg: 'background',
},
a: {
color: 'primary',
textDecoration: 'none',
'&:hover': {
color: 'secondary',
textDecoration: 'underline',
},
},
h1: {
fontSize: 6,
},
h2: {
fontSize: 5,
},
h3: {
fontSize: 4,
},
h4: {
fontSize: 3,
},
h5: {
fontSize: 2,
},
h6: {
fontSize: 1,
},
li: {
marginBottom: 1,
},
blockquote: {
my: 4,
mx: 0,
py: 3,
px: 4,
bg: 'blockquote.bg',
borderLeft: t => `5px solid ${t.colors.blockquote.border}`,
color: 'blockquote.color',
fontStyle: 'italic',
'> p': {
m: 0,
},
},
code: {
fontFamily: 'monospace',
},
inlineCode: {
fontFamily: 'monospace',
},
pre: {
my: 4,
p: 3,
variant: 'prism',
textAlign: 'left',
fontFamily: 'monospace',
borderRadius: 'radius',
},
table: {
width: '100%',
my: 4,
borderCollapse: 'separate',
borderSpacing: 0,
[['th', 'td']]: {
textAlign: 'left',
py: '4px',
pr: '4px',
pl: 0,
borderColor: 'muted',
borderBottomStyle: 'solid',
},
},
th: {
verticalAlign: 'bottom',
borderBottomWidth: '2px',
},
td: {
verticalAlign: 'top',
borderBottomWidth: '1px',
},
hr: {
border: 0,
borderBottom: t => `1px solid ${t.colors.border}`,
},
}
export default styles