diegoenriquezserrano.dev
this repo has no description
1* {
2 box-sizing: border-box;
3 padding: 0;
4 margin: 0;
5}
6
7body {
8 font-family: var(
9 --default-font,
10 'Open Sans',
11 'Liberation Sans',
12 'Arial',
13 'Segoe UI',
14 Tahoma,
15 Helvetica,
16 sans-serif
17 );
18}
19
20a {
21 color: var(--color-cyan);
22}
23
24input[type='file']::file-selector-button {
25 background-color: var(--color-char);
26 border-radius: var(--spacing-8);
27 border: var(--linear-width-2) outset var(--color-gray);
28 box-shadow: 2px 1px 2px -1px var(--color-black-semi-transparent);
29 color: var(--color-light);
30 cursor: pointer;
31 font-family: var(--default-font);
32 margin-right: var(--spacing-8);
33 padding: var(--spacing-8) var(--spacing-16);
34 text-transform: capitalize;
35}
36
37button:focus,
38input:focus,
39input[type='file']::file-selector-button:focus,
40textarea:focus {
41 outline-color: var(--color-cyan);
42 outline-style: inset;
43 outline-width: var(--linear-width-1);
44}
45
46:root {
47 --default-font: 'Open Sans';
48 --height-view-100: 100vh;
49}
50
51figure[data-role='icon-container'] > svg {
52 height: 100%;
53 width: 100%;
54}
55
56#flash-message-container {
57 left: 0;
58 max-width: 500px;
59 right: 0;
60 top: 2rem;
61 z-index: +1002;
62}
63
64.show-650 {
65 display: none !important;
66}
67
68.show-799 {
69 display: none !important;
70}
71
72.show-999 {
73 display: none !important;
74}
75
76@media (max-width: 650px) {
77 .show-650 {
78 display: var(--display, flex) !important;
79 }
80
81 .hide-650 {
82 display: none !important;
83 }
84}
85
86article-body ul {
87 list-style-type: disc;
88 margin: var(--spacing-16) 0;
89 padding: 0 0 0 var(--spacing-16);
90}
91
92article-body ol {
93 list-style-type: decimal;
94 padding: 0 0 0 var(--spacing-24);
95}
96
97article-body li {
98 display: list-item;
99 margin: 0 var(--spacing-8) var(--spacing-8) 0;
100 line-height: var(--height-large);
101}
102
103article-body h1,
104article-body h2,
105article-body h3,
106article-body h4,
107article-body h5,
108article-body h6 {
109 font-weight: bold;
110 margin: revert;
111 width: 100%;
112 word-break: break-word;
113}
114
115article-body p {
116 margin: var(--spacing-16) 0;
117}
118
119article-body blockquote {
120 margin: var(--spacing-16) var(--spacing-32);
121}
122
123article-body pre {
124 background-color: rgba(12, 12, 12, 1);
125 border-radius: var(--spacing-8);
126 border: 0.075rem inset rgba(0, 0, 0, 0.5);
127 box-shadow: inset 0.25rem 0.25rem 0.5rem -0.125rem rgba(0, 0, 0, 0.75);
128 font-family: 'Liberation Mono', 'Courier New', Courier, monospace;
129 margin: var(--spacing-16) 0;
130 overflow-x: auto;
131 padding: var(--spacing-16);
132 white-space: pre;
133}
134
135article-body code {
136 background-color: rgba(12, 12, 12, 1);
137 font-family: 'Liberation Mono', 'Courier New', Courier, monospace;
138}
139
140article-body a {
141 color: var(--color-cyan);
142}
143
144article-body hr {
145 border-color: var(--color-gray);
146}
147
148.modal-overlay {
149 left: 0;
150 max-height: 100vh;
151 min-height: 100vh;
152 min-width: 100vw;
153 overflow-x: hidden;
154 overflow-y: auto;
155 position: fixed;
156 top: 0;
157 z-index: +5;
158}
159
160.modal-small {
161 max-width: 315px;
162}
163
164.modal-medium {
165 max-width: 500px;
166}
167
168.modal-large {
169 max-width: 90vw;
170}
171
172.modal-scrollable {
173 overflow-y: auto;
174 max-height: inherit;
175}