Skip to content

Commit 5fc4024

Browse files
yordisyordis
committed
add markdown styles
1 parent dc9982c commit 5fc4024

File tree

7 files changed

+1179
-16
lines changed

7 files changed

+1179
-16
lines changed

‎assets/styles.css

-3
This file was deleted.

‎assets/styles.sss

+256
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,256 @@
1+
@tailwind base;
2+
@tailwind components;
3+
4+
.markdown {
5+
@apply text-gray-700;
6+
@apply leading-relaxed;
7+
8+
> *:first-child {
9+
@apply mt-0;
10+
}
11+
12+
> * + * {
13+
@apply mt-6;
14+
}
15+
16+
> ul > * + *,
17+
> ol > * + * {
18+
@apply mt-4;
19+
}
20+
21+
.subnav,
22+
.subnav& {
23+
@apply flex;
24+
@apply mt-6;
25+
@apply mb-6;
26+
@apply pb-2;
27+
@apply border-b-2;
28+
@apply border-gray-300;
29+
30+
.subnav-link,
31+
.subnav-link& {
32+
@apply mr-6;
33+
@apply leading-none;
34+
@apply text-gray-900;
35+
@apply text-sm;
36+
}
37+
}
38+
39+
> h2::before,
40+
> h3::before,
41+
> .heading::before {
42+
display: block;
43+
height: 6rem;
44+
margin-top: -6rem;
45+
visibility: hidden;
46+
content: '';
47+
}
48+
49+
> hr {
50+
@apply border-t-0 border-r-0 border-l-0 border-b-2 border-gray-200 my-16;
51+
}
52+
53+
> a,
54+
> p a,
55+
> ul li a,
56+
> ol li a,
57+
a& {
58+
@apply text-blue-500 underline font-medium;
59+
&:hover {
60+
@apply text-blue-700;
61+
}
62+
strong {
63+
@apply text-blue-500;
64+
}
65+
code {
66+
@apply underline text-blue-500;
67+
}
68+
}
69+
70+
> p strong,
71+
> ul strong {
72+
@apply font-semibold;
73+
@apply text-gray-800;
74+
}
75+
76+
> p code,
77+
> ul li *:not(pre) code,
78+
> ul li > code,
79+
> ol li *:not(pre) code,
80+
> ol li > code,
81+
p& code& {
82+
@apply inline-block;
83+
@apply bg-gray-100;
84+
@apply rounded-sm;
85+
@apply text-sm;
86+
@apply px-1;
87+
@apply leading-none;
88+
@apply whitespace-no-wrap;
89+
@apply text-purple-600;
90+
@apply font-mono;
91+
@apply align-baseline;
92+
font-weight: 400;
93+
}
94+
95+
> p strong code,
96+
> ul li strong code,
97+
> ol li strong code {
98+
font-weight: 600;
99+
}
100+
101+
> pre,
102+
pre& {
103+
@apply font-mono;
104+
@apply rounded-lg;
105+
font-weight: 400;
106+
scrollbar-width: none;
107+
&::-webkit-scrollbar {
108+
display: none;
109+
}
110+
}
111+
112+
> blockquote,
113+
blockquote& {
114+
@apply italic;
115+
@apply text-gray-900;
116+
@apply text-sm;
117+
}
118+
119+
> h1,
120+
h1& {
121+
@apply mb-1;
122+
@apply leading-none;
123+
@apply text-gray-900;
124+
@apply font-medium;
125+
@apply text-3xl;
126+
}
127+
128+
> h2,
129+
h2& {
130+
@apply mt-16;
131+
@apply mb-4;
132+
@apply text-gray-900;
133+
@apply leading-none;
134+
@apply font-normal;
135+
@apply text-2xl;
136+
}
137+
138+
> h2 + h3 {
139+
@apply mt-6;
140+
}
141+
142+
> h3,
143+
h3& {
144+
@apply mt-12 -mb-3;
145+
@apply text-gray-900;
146+
@apply leading-tight;
147+
@apply font-medium;
148+
@apply text-xl;
149+
}
150+
151+
> h4,
152+
h4& {
153+
@apply mt-12;
154+
@apply mb-0;
155+
@apply text-gray-900;
156+
@apply leading-snug;
157+
@apply font-medium;
158+
@apply text-lg;
159+
}
160+
161+
> h1 + p {
162+
@apply mt-8;
163+
}
164+
165+
> h1 > code,
166+
> h2 > code,
167+
> h3 > code,
168+
> h4 > code {
169+
@apply text-purple-600;
170+
@apply font-mono;
171+
}
172+
173+
> h3 > code {
174+
@apply text-lg px-1 bg-gray-100;
175+
}
176+
177+
> h4 > code {
178+
@apply text-base px-1 bg-gray-100;
179+
}
180+
181+
> p,
182+
p&,
183+
> blockquote > p {
184+
@apply text-base;
185+
@apply mt-6;
186+
}
187+
188+
> ul:not(.list-none) {
189+
@apply pl-0 list-none;
190+
li {
191+
@apply relative pl-5;
192+
&::before {
193+
@apply absolute left-0 text-gray-400 inline-block mr-3;
194+
content: '\2022';
195+
}
196+
}
197+
}
198+
199+
> ol {
200+
@apply list-none;
201+
counter-reset: item;
202+
> li {
203+
@apply relative pl-10;
204+
}
205+
> li::before {
206+
@apply absolute top-0 left-0 mt-px;
207+
@apply flex items-center justify-center;
208+
@apply h-6 w-6 bg-gray-300 rounded-full;
209+
@apply text-gray-700 text-xs font-bold;
210+
content: counter(item);
211+
counter-increment: item;
212+
}
213+
}
214+
215+
> :not(pre):not(h1):not(h2):not(h3):not(h4) > code,
216+
> ul code,
217+
> ol code {
218+
@apply bg-gray-100;
219+
@apply text-sm;
220+
@apply leading-normal;
221+
}
222+
223+
> pre,
224+
pre&,
225+
> ul li pre,
226+
> ol li pre {
227+
@apply flex p-0 bg-gray-800;
228+
@apply text-sm leading-normal;
229+
}
230+
231+
> pre code,
232+
pre code&,
233+
> ul li pre code,
234+
> ol li pre code {
235+
@apply p-4;
236+
}
237+
238+
> table {
239+
@apply w-full text-left;
240+
241+
th {
242+
@apply text-sm font-semibold text-gray-700 p-2 bg-gray-100;
243+
}
244+
td {
245+
@apply p-2 border-t border-gray-200 text-sm;
246+
code {
247+
@apply bg-gray-100 px-1 font-mono text-xs text-purple-700 align-baseline;
248+
}
249+
&:first-child {
250+
@apply border-gray-300;
251+
}
252+
}
253+
}
254+
}
255+
256+
@tailwind utilities;

‎layouts/_default/single.html

+2-2
Original file line numberDiff line numberDiff line change
@@ -7,11 +7,11 @@ <h1 class="title">{{ .Title }}</h1>
77
class="draft-label">DRAFT</span> {{ end }}</div>
88
</div>
99

10-
<div class="markdown">
10+
<div class="blog-post">
1111
{{ .Content }}
1212
</div>
1313

14-
<div class="post-tags">
14+
<div class="markdown">
1515
{{ if ne .Type "page" }}
1616
{{ if gt .Params.tags 0 }}
1717
<nav class="nav tags">

‎package.json

+6-2
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,15 @@
11
{
22
"private": true,
33
"scripts": {
4-
"build": "tailwind build ./assets/styles.css -o ./static/css/tailwind.css"
4+
"build": "postcss ./assets/styles.sss -o ./static/css/tailwind.css"
55
},
66
"dependencies": {
7-
"@tailwindcss/ui": "^0.2.2",
87
"@straw-hat/prettier-config": "^1.0.1",
8+
"@tailwindcss/ui": "^0.2.2",
9+
"autoprefixer": "^9.7.6",
10+
"postcss-cli": "^7.1.0",
11+
"postcss-import": "^12.0.1",
12+
"postcss-nested": "^4.2.1",
913
"tailwindcss": "^1.3.5"
1014
}
1115
}

‎postcss.config.js

+8
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
module.exports = {
2+
plugins: [
3+
require('postcss-import'),
4+
require('postcss-nested'),
5+
require('tailwindcss'),
6+
require('autoprefixer'),
7+
],
8+
};

0 commit comments

Comments
 (0)