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  line-height: 2.5em;
142}
143
144header .main {
145  font-size: 1.5rem;
146}
147h1, h2, h3, h4, h5, h6 {
148  font-size: 1.2rem;
149  margin-top: 2em;
150}
151
152h1::before { color: var(--maincolor); content: '# '; }
153h2::before { color: var(--maincolor); content: '## '; }
154h3::before { color: var(--maincolor); content: '### '; }
155h4::before { color: var(--maincolor); content: '#### '; }
156h5::before { color: var(--maincolor); content: '##### '; }
157h6::before { color: var(--maincolor); content: '###### '; }
158
159.meta {
160  color: #999;
161  letter-spacing: -0.5px;
162}
163
164/* Footer */
165footer {
166  display: flex;
167  align-items: center;
168  border-top: 0.4rem dotted var(--bordercl);
169  padding: 2rem 0rem;
170  margin-top: 2rem;
171}
172.soc {
173  display: flex;
174  align-items: center;
175  border-bottom: none;
176}
177.border {
178  margin-left: 0.5rem;
179  margin-right: 0.5rem;
180  border: 1px solid;
181}
182.footer-info {
183  padding: var(--footer-padding);
184}
185
186/* Common */
187.title h1 {
188  margin-bottom: 0;
189}
190
191time {
192  color: grey;
193}
194
195/* Posts */
196article .title {
197  margin-bottom: 1em;
198}
199
200
201/* Callout */
202.callout {
203  background-color: var(--callouctcolor);
204  color: #fff;
205  padding: 1em;
206}
207
208.callout p {
209  font-family: 'IBM Plex Mono', monospace;
210  margin: 0;
211}
212
213.callout a {
214  border-bottom: 3px solid #fff;
215}
216
217.callout a:hover {
218  background-color: #fff;
219  color: var(--callouctcolor);
220}
221
222.site-description {
223display: flex;
224justify-content: space-between;
225}
226.tags li::before{
227  content: "🏷 ";
228}
229.tags a{
230  border-bottom: 3px solid var(--maincolor); 
231}
232.tags a:hover{
233  color:white;
234  background-color: var(--hovercolor); 
235}
236svg{
237  max-height: 15px;
238}
239.soc:hover{
240  color: white;
241}
242.draft-label{ 
243    color: var(--bordercl);
244    text-decoration: none;
245    padding: 2px 4px;
246    border-radius: 4px;
247    margin-left: 6px;
248    background-color: #f9f2f4;
249}
250.highlight {
251  position: relative;
252  -webkit-overflow-scrolling: touch;
253}
254.highlight pre code[class*="language-"] {
255  -webkit-overflow-scrolling: touch;
256}
257.highlight pre code[class*="language-"]::before {
258  background: black;
259  border-radius: 0 0 0.25rem 0.25rem;
260  color: white;
261  font-size: 12px;
262  letter-spacing: 0.025rem;
263  padding: 0.1rem 0.5rem;
264  position: absolute;
265  right: 1rem;
266  text-align: right;
267  text-transform: uppercase;
268  top: 0;
269}
270
271.highlight pre code[class=language-javaScript]::before,
272.highlight pre code[class="language-js"]::before {
273content: "js";
274background: #f7df1e;
275color: black;
276}
277.highlight pre code[class*='language-yml']::before,
278.highlight pre code[class*='language-yaml']::before {
279content: 'yaml';
280background: #f71e6a;
281color: white;
282}
283.highlight pre code[class*='language-shell']::before,
284.highlight pre code[class*='language-bash']::before,
285.highlight pre code[class*='language-sh']::before {
286content: 'shell';
287background: green;
288color:white
289}
290.highlight pre code[class*='language-json']::before{
291content: 'json';
292background: dodgerblue;
293 color: #000000 
294}
295.highlight pre code[class*='language-python']::before,
296.highlight pre code[class*='language-py']::before {
297content: 'py';
298background: blue;
299color: yellow ;
300}
301.highlight pre code[class*='language-css']::before{
302content: 'css';
303background: cyan;
304color: black ;
305}
306.highlight pre code[class*='language-go']::before{
307content: 'Go';
308background: cyan;
309color: royalblue ;
310}
311.highlight pre code[class*='language-md']::before,
312.highlight pre code[class*='language-md']::before{
313content: 'Markdown';
314background: royalblue;
315color: whitesmoke ;
316}
317
318/* table */
319table {
320  border-spacing: 0;
321  border-collapse: collapse;
322}
323
324table th{
325  padding: 6px 13px;
326  border: 1px solid #dfe2e5;
327  font-size: large;
328}
329
330table td{
331  padding: 6px 13px;
332  border: 1px solid #dfe2e5;
333}