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