alexandrehtrb.github.io/tailwind.css at master · alexandrehtrb/alexandrehtrb.github.io · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
@tailwind base;
@tailwind components;
@tailwind utilities;

pre {
  /* this is to avoid background colour in mermaid diagrams */
  --tw-prose-pre-bg: rgba(255, 255, 255, 0);
}

.paginator-text {
  @apply text-gray-600 font-bold py-2 px-4;
}

.post-tag {
  @apply inline-block text-xs rounded-full py-2 px-4 mt-1 mr-1 bg-gray-300 dark:bg-gray-500;
}

.header-anchor {
  text-decoration: none!important;
}

h1 > a.header-anchor {
  font-weight: 800;
}

h2 > a.header-anchor {
  font-weight: 700;
}

/*html {
  background-color: #FFFCF0;
}

html.dark {
  background-color: rgb(0, 0, 0);
}*/

:not(pre) > code {
  background-color: oklch(0.97 0 0);
  border-color: oklch(0.922 0 0);
  border-style: solid;
  border-width: 1px;
  padding-bottom: 2px;
  padding-left: 4px;
  padding-right: 4px;
  padding-top: 2px;
}

html.dark :not(pre) > code {
  background-color: rgb(31, 31, 35);
  border-color: #38383D;
  border-style: solid;
  border-width: 1px;
  padding-bottom: 2px;
  padding-left: 4px;
  padding-right: 4px;
  padding-top: 2px;
}

html mark {
  background-color: yellow;
  color: var(--tw-prose-body);
}

html.dark mark {
  background-color: rgba(238, 255, 0, 0.24);
  color: var(--tw-prose-body);
}

/* Shiki alternate between light and dark colour themes */
html.dark .shiki,
html.dark .shiki span {
  color: var(--shiki-dark) !important;
  background-color: var(--shiki-dark-bg) !important;
  /* Optional, if you also want font styles */
  font-style: var(--shiki-dark-font-style) !important;
  font-weight: var(--shiki-dark-font-weight) !important;
  text-decoration: var(--shiki-dark-text-decoration) !important;
}

/* Shiki code line diffs */
.shiki span.line.diff.add,
.shiki span.line.diff.add span
{
  background-color: rgba(16, 185, 129, 0.14) !important
}

.shiki span.line.diff.remove,
.shiki span.line.diff.remove span
{
  background-color: rgba(244, 63, 94, 0.14) !important
}

/* wrapped -->
   for long single-lines of code,
   such as for command-line cmds.

   styles below make the line of code
   overflow into other lines in <code>,
   and make the code not go under the
   copy code buttons.*/

pre.shiki.wrapped {
  white-space: pre-wrap;
}

pre.shiki.wrapped code {
  margin-right: 48px;
  display: inline-block;
}

/* Copy code buttons on code blocks */
/* https://junges.dev/2-how-to-add-github-copy-to-clipboard-button-on-your-docsblog */
pre[class*="shiki"] {
  position: relative;
  margin: 5px 0;
  padding: 1.75rem 0 1.75rem 1rem;
}

pre > .button-copy-code {
  position: absolute;
  top: 32px;
  right: 16px;
}

@media only screen and (max-device-width: 480px) {
  pre > .button-copy-code {
    display: none;
  }
}