assets/css/main.css (view raw)
1/* Markdown */
2:root{
3--maincolor: red;
4--bordercl:rebeccapurple;
5--callouctcolor:dodgerblue;
6--hovercolor:navy;
7--darkMaincolor: #50fa7b;
8}
9html {
10 color: #232333;
11 font-family: 'Roboto Mono', monospace;
12 font-size: 15px;
13 line-height: 1.6em;
14}
15body{
16 display: block;
17 margin: 8px;
18}
19* {
20 -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
21}
22
23::selection {
24 background: var(--maincolor);
25 color: #fff;
26}
27
28p {
29 font-family: 'Fira Sans', sans-serif;
30 line-height: 1.5;
31}
32
33hr {
34 border: 0;
35 border-top: 3px dotted var(--bordercl);
36 margin: 1em 0;
37}
38
39blockquote {
40 border-left: 3px solid var(--bordercl);
41 color: #737373;
42 margin: 0;
43 padding-left: 1em;
44}
45
46a {
47 border-bottom: 3px solid var(--maincolor);
48 color: inherit;
49 text-decoration: none;
50}
51a:hover {
52 background-color: var(--hovercolor);
53 color: #fff;
54}
55
56ul {
57 list-style: none;
58 padding-left: 2ch;
59}
60ul li {
61 text-indent: -2ch;
62}
63ul > li::before {
64 content: '* ';
65 font-weight: bold;
66}
67
68/* Images */
69img {
70 border: 3px solid #ececec;
71 max-width: 100%;
72}
73
74figure {
75 box-sizing: border-box;
76 display: inline-block;
77 margin: 0;
78 max-width: 100%;
79}
80
81figure img {
82 max-height: 500px;
83}
84
85@media screen and (min-width: 600px) {
86 figure {
87 padding: 0 40px;
88 }
89}
90
91figure h4 {
92 font-size: 1rem;
93 margin: 0;
94 margin-bottom: 1em;
95}
96figure h4::before {
97 content: '↳ ';
98}
99
100/* Code blocks */
101code {
102 background-color: #f1f1f1;
103 padding: .1em .2em;
104}
105
106pre {
107 background-color: #ececec;
108 line-height: 1.4;
109 overflow-x: auto;
110 padding: 1em;
111}
112
113.highlight pre ::selection {
114 background: rgba(255, 255, 255, 0.2);
115 color: inherit;
116}
117
118pre code {
119 background-color: transparent;
120 color: inherit;
121 font-size: 100%;
122 padding: 0;
123}
124
125/* Containers */
126.content {
127 margin-bottom: 4em;
128 margin-left: auto;
129 margin-right: auto;
130 max-width: 800px;
131 padding: 0 1ch;
132 word-wrap: break-word;
133}
134
135/* Header */
136header {
137 display: flex;
138 flex-wrap: wrap;
139 justify-content: space-between;
140 margin: 1em 0;
141}
142
143header .main {
144 font-size: 1.5rem;
145}
146h1, h2, h3, h4, h5, h6 {
147 font-size: 1.2rem;
148 margin-top: 2em;
149}
150
151h1::before { color: var(--maincolor); content: '# '; }
152h2::before { color: var(--maincolor); content: '## '; }
153h3::before { color: var(--maincolor); content: '### '; }
154h4::before { color: var(--maincolor); content: '#### '; }
155h5::before { color: var(--maincolor); content: '##### '; }
156h6::before { color: var(--maincolor); content: '###### '; }
157
158/* Footer */
159footer {
160 margin-top: 1em;
161}
162
163/* Common */
164.title h1 {
165 margin-bottom: 0;
166}
167
168time {
169 color: grey;
170}
171
172/* Posts */
173article .title {
174 margin-bottom: 1em;
175}
176
177
178/* Callout */
179.callout {
180 background-color: var(--callouctcolor);
181 color: #fff;
182 padding: 1em;
183}
184
185.callout p {
186 font-family: 'IBM Plex Mono', monospace;
187 margin: 0;
188}
189
190.callout a {
191 border-bottom: 3px solid #fff;
192}
193
194.callout a:hover {
195 background-color: #fff;
196 color: var(--callouctcolor);
197}
198
199.site-description {
200display: flex;
201justify-content: space-between;
202}
203.tags li::before{
204 content: "🏷 ";
205}
206.tags a{
207 border-bottom: 3px solid var(--maincolor);
208}
209.tags a:hover{
210 color:white;
211 background-color: var(--hovercolor);
212}
213svg{
214 max-height: 15px;
215}
216.soc:hover{
217 color: white;
218}
219.draft-label{
220 color: var(--bordercl);
221 text-decoration: none;
222 padding: 2px 4px;
223 border-radius: 4px;
224 margin-left: 6px;
225 background-color: #f9f2f4;
226}
227.highlight {
228 position: relative;
229 -webkit-overflow-scrolling: touch;
230}
231.highlight pre code[class*="language-"] {
232 -webkit-overflow-scrolling: touch;
233}
234.highlight pre code[class*="language-"]::before {
235 background: black;
236 border-radius: 0 0 0.25rem 0.25rem;
237 color: white;
238 font-size: 12px;
239 letter-spacing: 0.025rem;
240 padding: 0.1rem 0.5rem;
241 position: absolute;
242 right: 1rem;
243 text-align: right;
244 text-transform: uppercase;
245 top: 0;
246}
247
248.highlight pre code[class=language-javaScript]::before,
249.highlight pre code[class="language-js"]::before {
250content: "js";
251background: #f7df1e;
252color: black;
253}
254.highlight pre code[class*='language-yml']::before,
255.highlight pre code[class*='language-yaml']::before {
256content: 'yaml';
257background: #f71e6a;
258color: white;
259}
260.highlight pre code[class*='language-shell']::before,
261.highlight pre code[class*='language-bash']::before,
262.highlight pre code[class*='language-sh']::before {
263content: 'shell';
264background: green;
265color:white
266}
267.highlight pre code[class*='language-json']::before{
268content: 'json';
269background: dodgerblue;
270 color: #000000
271}
272.highlight pre code[class*='language-python']::before,
273.highlight pre code[class*='language-py']::before {
274content: 'py';
275background: blue;
276color: yellow ;
277}
278.highlight pre code[class*='language-css']::before{
279content: 'css';
280background: cyan;
281color: black ;
282}
283.highlight pre code[class*='language-go']::before{
284content: 'Go';
285background: cyan;
286color: royalblue ;
287}
288.highlight pre code[class*='language-md']::before,
289.highlight pre code[class*='language-md']::before{
290content: 'Markdown';
291background: royalblue;
292color: whitesmoke ;
293}