diff --git a/script/tailwind.config.js b/script/tailwind.config.js index ea230fcc0a1d518fc6e76869886a6898bd613163..adc439d6125b08317e5d2735b9da1194a1b6ca99 100644 --- a/script/tailwind.config.js +++ b/script/tailwind.config.js @@ -18,31 +18,13 @@ module.exports = { ], }, extend: { - typography: (theme) => ({ - DEFAULT: { - css: { - h1: { - fontFamily: theme("fontFamily.display").join(", ") - }, - h2: { - fontFamily: theme("fontFamily.display").join(", ") - }, - h3: { - fontFamily: theme("fontFamily.display").join(", ") - }, - h4: { - fontFamily: theme("fontFamily.display").join(", ") - } - } - } - }) - } + + }, }, + variants: { }, - plugins: [ - require('@tailwindcss/typography'), - ], + purge: [ "../server/templates/**/*.hbs" ] diff --git a/server/static/prose.css b/server/static/prose.css new file mode 100644 index 0000000000000000000000000000000000000000..10c3dadf0fe5b9befb3182969c184e94d27e8206 --- /dev/null +++ b/server/static/prose.css @@ -0,0 +1,91 @@ +article.prose, +.type-prose { + font-family: "Spectral", "Constantia", "Lucida Bright", "Lucidabright", "Lucida Serif", "Lucida", "DejaVu Serif", "Bitstream Vera Serif", "Liberation Serif", "Georgia", "serif", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji", serif; + margin-bottom: 2.5rem; + letter-spacing: -0.05rem; +} + +article.prose h1, +article.prose h2, +article.prose h3, +article.prose h4, +.type-prose h1, +.type-prose h2, +.type-prose h3, +.type-prose h4 { + margin: 3rem 0 1rem 0; +} + +article.prose p, +article.prose a, +.type-prose p, +.type-prose a { + color: #ddd; + font-size: 1.3rem; + line-height: 2.1rem; +} + +article.prose a:not(img), +.type-prose a:not(img) { + text-decoration: underline; + text-underline-offset: 4px; +} + +article.prose strong, +.type-prose strong { + font-weight: 600; +} + +article.prose i, +.type-prose i { + font-style: italic; +} + +article.prose p:not(:last-of-type), +.type-prose p:not(:last-of-type) { + margin-bottom: 1.5rem; +} + +article.prose img, article.prose pre, +.type-prose img, +.type-prose pre { + margin: 1.5rem 0; +} + +article.prose ul, +.type-prose ul { + margin-left: 1.5rem; +} + +article.prose ul li, +.type-prose ul li { + list-style-type: disc; + list-style-position: outside; + font-size: 1.3rem; +} + +article.prose ul li:not(:last-of-type), +.type-prose ul li:not(:last-of-type) { + margin-bottom: 0.2rem; +} + +article.prose pre, +.type-prose pre { + background-color: rgba(255, 255, 255, 0.15); + padding: 0.8rem; +} + +article.prose code, +.type-prose code { + font-family: "JetBrains Mono", "Andale Mono WT", "Andale Mono", "Lucida Console", "Lucida Sans Typewriter", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", "Liberation Mono", "Nimbus Mono L", "Courier New", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji", monospace; + font-size: 0.96rem; +} + +article.prose p code, +article.prose li code, +.type-prose p code, +.type-prose li code { + background-color: rgba(255, 255, 255, 0.15); + padding: 0.2rem 0.4rem; +} +/*# sourceMappingURL=prose.css.map */ \ No newline at end of file diff --git a/server/static/prose.css.map b/server/static/prose.css.map new file mode 100644 index 0000000000000000000000000000000000000000..65412576c23066b8457fce87d3297bcaa271edff --- /dev/null +++ b/server/static/prose.css.map @@ -0,0 +1,9 @@ +{ + "version": 3, + "mappings": "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", + "sources": [ + "prose.scss" + ], + "names": [], + "file": "prose.css" +} \ No newline at end of file diff --git a/server/static/prose.scss b/server/static/prose.scss new file mode 100644 index 0000000000000000000000000000000000000000..430e4437bb36701d6f651e1cb9a47369fbab8b88 --- /dev/null +++ b/server/static/prose.scss @@ -0,0 +1,86 @@ +// Style prose by hand +// add .prose to any
to activate prose styles +// or .type-prose to any element + +article.prose, +.type-prose { + font-family: "Spectral", "Constantia", "Lucida Bright", "Lucidabright", + "Lucida Serif", "Lucida", "DejaVu Serif", "Bitstream Vera Serif", + "Liberation Serif", "Georgia", "serif", "Apple Color Emoji", + "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji", serif; + margin-bottom: 2.5rem; + letter-spacing: -0.05rem; + + h1, + h2, + h3, + h4 { + margin: 3rem 0 1rem 0; + } + + p, + li { + // max-width: 90%; + } + + p, + a { + color: #ddd; + font-size: 1.3rem; + line-height: 2.1rem; + } + + a:not(img) { + text-decoration: underline; + text-underline-offset: 4px; + } + + strong { + font-weight: 600; + } + + i { + font-style: italic; + } + + p:not(:last-of-type) { + margin-bottom: 1.5rem; + } + + img, pre { + margin: 1.5rem 0; + } + + ul { + margin-left: 1.5rem; + } + + ul li { + list-style-type: disc; + list-style-position: outside; + font-size: 1.3rem; + &:not(:last-of-type) { + margin-bottom: 0.2rem; + } + } + + pre { + background-color: rgba(255, 255, 255, 0.15); + padding: 0.8rem; + } + + code { + font-family: "JetBrains Mono", "Andale Mono WT", "Andale Mono", + "Lucida Console", "Lucida Sans Typewriter", "DejaVu Sans Mono", + "Bitstream Vera Sans Mono", "Liberation Mono", "Nimbus Mono L", + "Courier New", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", + "Noto Color Emoji", monospace; + font-size: 0.96rem; + } + + p code, + li code { + background-color: rgba(255, 255, 255, 0.15); + padding: 0.2rem 0.4rem; + } +} diff --git a/server/styles.css b/server/styles.css index c642745715d54a537feabe7a9c1466e0ed06db27..1a583e69d358606c488b937aa5120bbaa62032e3 100644 --- a/server/styles.css +++ b/server/styles.css @@ -1,7 +1,7 @@ /* This file is compiled to /assets/styles/tailwind.css via script/tailwind */ @import url('https://fonts.googleapis.com/css2?family=Spectral:ital,wght@0,200;0,300;1,200;1,300&display=swap'); -@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:ital,wght@0,100;0,300;1,100;1,300&display=swap'); +@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:ital,wght@0,100;0,300;0,600;1,100;1,300;1,600&display=swap'); @tailwind base; @tailwind components; diff --git a/server/templates/partials/layout.hbs b/server/templates/partials/layout.hbs index 0081e51d0136b9926a259edb443a42b18cad01ba..8bb387022d121b3ac8e220167e95d1a7bdfe910c 100644 --- a/server/templates/partials/layout.hbs +++ b/server/templates/partials/layout.hbs @@ -3,6 +3,8 @@ + + Zed – a lightning fast, collaborative code editor written natively in Rust