mirrors/zed
1
0
Fork 0
mirror of https://github.com/zed-industries/zed.git synced 2025-01-24 11:01:54 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 12

add prose.css for manual prose styles

Browse source
This commit is contained in:
Nate 2021-09-17 12:33:10 -04:00
parent f4d0225b75
commit cb34321d69
8 changed files with 197 additions and 28 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

24
script/tailwind.config.js
View file

@ -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"
]

91
server/static/prose.css Normal file
View file

@ -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 */

9
server/static/prose.css.map Normal file
View file

@ -0,0 +1,9 @@
{
"version": 3,
"mappings": "AAIA,AAAA,OAAO,AAAA,MAAM;AACb,WAAW,CAAC;EACV,WAAW,EAAE,wPAGmD;EAChE,aAAa,EAAE,MAAM;EACrB,cAAc,EAAE,QAAQ;CA0EzB;;AAjFD,AASE,OATK,AAAA,MAAM,CASX,EAAE;AATJ,OAAO,AAAA,MAAM,CAUX,EAAE;AAVJ,OAAO,AAAA,MAAM,CAWX,EAAE;AAXJ,OAAO,AAAA,MAAM,CAYX,EAAE;AAXJ,WAAW,CAQT,EAAE;AARJ,WAAW,CAST,EAAE;AATJ,WAAW,CAUT,EAAE;AAVJ,WAAW,CAWT,EAAE,CAAC;EACD,MAAM,EAAE,aAAa;CACtB;;AAdH,AAqBE,OArBK,AAAA,MAAM,CAqBX,CAAC;AArBH,OAAO,AAAA,MAAM,CAsBX,CAAC;AArBH,WAAW,CAoBT,CAAC;AApBH,WAAW,CAqBT,CAAC,CAAC;EACA,KAAK,EAAE,IAAI;EACX,SAAS,EAAE,MAAM;EACjB,WAAW,EAAE,MAAM;CACpB;;AA1BH,AA4BE,OA5BK,AAAA,MAAM,CA4BX,CAAC,AAAA,IAAK,CAAA,GAAG;AA3BX,WAAW,CA2BT,CAAC,AAAA,IAAK,CAAA,GAAG,EAAE;EACT,eAAe,EAAE,SAAS;EAC1B,qBAAqB,EAAE,GAAG;CAC3B;;AA/BH,AAiCE,OAjCK,AAAA,MAAM,CAiCX,MAAM;AAhCR,WAAW,CAgCT,MAAM,CAAC;EACL,WAAW,EAAE,GAAG;CACjB;;AAnCH,AAqCE,OArCK,AAAA,MAAM,CAqCX,CAAC;AApCH,WAAW,CAoCT,CAAC,CAAC;EACA,UAAU,EAAE,MAAM;CACnB;;AAvCH,AAyCE,OAzCK,AAAA,MAAM,CAyCX,CAAC,AAAA,IAAK,CAAA,aAAa;AAxCrB,WAAW,CAwCT,CAAC,AAAA,IAAK,CAAA,aAAa,EAAE;EACnB,aAAa,EAAE,MAAM;CACtB;;AA3CH,AA6CE,OA7CK,AAAA,MAAM,CA6CX,GAAG,EA7CL,OAAO,AAAA,MAAM,CA6CN,GAAG;AA5CV,WAAW,CA4CT,GAAG;AA5CL,WAAW,CA4CJ,GAAG,CAAC;EACP,MAAM,EAAE,QAAQ;CACjB;;AA/CH,AAiDE,OAjDK,AAAA,MAAM,CAiDX,EAAE;AAhDJ,WAAW,CAgDT,EAAE,CAAC;EACD,WAAW,EAAE,MAAM;CACpB;;AAnDH,AAqDE,OArDK,AAAA,MAAM,CAqDX,EAAE,CAAC,EAAE;AApDP,WAAW,CAoDT,EAAE,CAAC,EAAE,CAAC;EACJ,eAAe,EAAE,IAAI;EACrB,mBAAmB,EAAE,OAAO;EAC5B,SAAS,EAAE,MAAM;CAIlB;;AA5DH,AAyDI,OAzDG,AAAA,MAAM,CAqDX,EAAE,CAAC,EAAE,AAIF,IAAK,CAAA,aAAa;AAxDvB,WAAW,CAoDT,EAAE,CAAC,EAAE,AAIF,IAAK,CAAA,aAAa,EAAE;EACnB,aAAa,EAAE,MAAM;CACtB;;AA3DL,AA8DE,OA9DK,AAAA,MAAM,CA8DX,GAAG;AA7DL,WAAW,CA6DT,GAAG,CAAC;EACF,gBAAgB,EAAE,yBAAyB;EAC3C,OAAO,EAAE,MAAM;CAChB;;AAjEH,AAmEE,OAnEK,AAAA,MAAM,CAmEX,IAAI;AAlEN,WAAW,CAkET,IAAI,CAAC;EACH,WAAW,EAAE,yRAIkB;EAC/B,SAAS,EAAE,OAAO;CACnB;;AA1EH,AA4EE,OA5EK,AAAA,MAAM,CA4EX,CAAC,CAAC,IAAI;AA5ER,OAAO,AAAA,MAAM,CA6EX,EAAE,CAAC,IAAI;AA5ET,WAAW,CA2ET,CAAC,CAAC,IAAI;AA3ER,WAAW,CA4ET,EAAE,CAAC,IAAI,CAAC;EACN,gBAAgB,EAAE,yBAAyB;EAC3C,OAAO,EAAE,cAAc;CACxB",
"sources": [
"prose.scss"
],
"names": [],
"file": "prose.css"
}

86
server/static/prose.scss Normal file
View file

@ -0,0 +1,86 @@
// Style prose by hand
// add .prose to any <article> 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;
}
}

2
server/styles.css
View file

@ -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;

2
server/templates/partials/layout.hbs
View file

@ -3,6 +3,8 @@
<head>
<link rel="icon" href="/static/images/favicon.png">
<link rel="stylesheet" href="/static/styles.css">
<link rel="stylesheet" href="/static/prose.css">
<title>Zed – a lightning fast, collaborative code editor written natively in Rust</title>
<script>

2
server/templates/tech.hbs
View file

@ -1,7 +1,7 @@
{{#> layout }}
<div class="container mx-auto max-w-screen-md p-10 pt-20">
<h1 class="text-white text-4xl font-display font-extralight mb-10">The Tech</h1>
<h1 class="text-white text-4xl font-display font-extralight mb-10">The Tech ~remove me~</h1>
<h2 class="font-display mt-10">Rust – wip</h2>
<p>wip</p>

7
server/templates/updates.hbs
View file

@ -3,11 +3,10 @@
<div class="max-w-screen-lg mx-auto text-main font-extralight p-20">
{{#if releases}}
<h1 class="text-white text-4xl font-display font-extralight mb-10">Updates</h1>
<h1 class="font-display font-extralight mb-10">Updates</h1>
{{#each releases}}
<article id="{{name}}" class="mb-20">
<h2 class="text-white font-display font-extralight">Zed {{name}}</h2>
<a class="underline mt-5 leading-7" href="/releases/{{tag_name}}/{{assets.0.name}}">Download</a>
<article id="{{name}}" class="prose">
<h2 class="font-display font-extralight">{{name}}&mdash;<a class="underline mt-5 leading-7" href="/releases/{{tag_name}}/{{assets.0.name}}">Download</a></h2>
<div class="mt-5">
{{{body}}}
</div>