Mercurial

comparison mrjunejune/src/tools/markdown_to_html/index.css @ 184:8c74204fd362

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
[MD to HTML] Updated so it can be used through readme to html
author MrJuneJune <me@mrjunejune.com>
date Fri, 23 Jan 2026 22:20:35 -0800
parents 902e29c38d66
children
comparison
equal deleted inserted replaced
183:a8976a008a9d 184:8c74204fd362
5 } 5 }
6 6
7 body { 7 body {
8 line-height: 1.6; 8 line-height: 1.6;
9 padding: 20px; 9 padding: 20px;
10 max-width: 1200px; 10 max-width: 1400px;
11 margin: 0 auto; 11 margin: 0 auto;
12 }
13
14 .header {
15 text-align: center;
16 margin-bottom: 30px;
17 }
18
19 .header h1 {
20 color: rgb(var(--gray-dark));
21 margin-bottom: 10px;
22 }
23
24 .container {
25 display: grid;
26 grid-template-columns: 1fr 1fr;
27 gap: 20px;
28 height: calc(100vh - 200px);
29 min-height: 500px;
30 }
31
32 .panel {
33 display: flex;
34 flex-direction: column;
35 background: var(--white);
36 border-radius: 8px;
37 border: 1px solid rgba(var(--gray), 0.3);
38 padding: 15px;
39 overflow: hidden;
40 }
41
42 .title {
43 display: flex;
44 justify-content: space-between;
45 align-items: center;
46 margin-bottom: 10px;
47 flex-shrink: 0;
48 }
49
50 .label {
51 font-weight: 600;
52 color: rgb(var(--gray-dark));
53 font-size: 14px;
54 text-transform: uppercase;
55 letter-spacing: 0.5px;
12 } 56 }
13 57
14 button { 58 button {
15 background: var(--accent); 59 background: var(--accent);
16 color: var(--white); 60 color: var(--white);
17 border: none; 61 border: none;
18 padding: 10px 20px; 62 padding: 8px 16px;
19 border-radius: 4px; 63 border-radius: 4px;
20 cursor: pointer; 64 cursor: pointer;
21 font-size: 16px; 65 font-size: 14px;
22 margin-top: 10px; 66 transition: background 0.2s;
23 }
24
25 .title button {
26 margin-top: 0px;
27 margin-bottom: 10px;
28 } 67 }
29 68
30 button:hover { 69 button:hover {
31 background: var(--accent-dark); 70 background: var(--accent-dark);
32 } 71 }
33 72
34 h1 { 73 /* Input textarea */
35 color: var(--darkgray);
36 margin-bottom: 20px;
37 }
38
39 textarea { 74 textarea {
75 flex: 1;
40 width: 100%; 76 width: 100%;
41 height: 700px;
42 padding: 15px; 77 padding: 15px;
43 background: rgb(var(--gray-light)); 78 background: rgb(var(--gray-light));
44 color: var(--darkgray); 79 color: rgb(var(--gray-dark));
45 border-radius: 4px; 80 border: 1px solid rgba(var(--gray), 0.3);
46 font-family: 'Courier New', monospace; 81 border-radius: 4px;
82 font-family: 'SF Mono', 'Monaco', 'Consolas', monospace;
47 font-size: 14px; 83 font-size: 14px;
48 resize: vertical; 84 line-height: 1.5;
49 } 85 resize: none;
50 86 }
51 .container { 87
52 display: grid; 88 textarea:focus {
53 grid-template-columns: 1fr 1fr; 89 outline: none;
54 gap: 20px; 90 border-color: var(--accent);
55 margin-top: 20px; 91 }
56 } 92
57 93 /* Output panel */
58 .title { 94 #output {
59 display: grid; 95 flex: 1;
60 grid-template-columns: 1fr 1fr; 96 padding: 15px;
61 margin-bottom: 10px; 97 border: 1px solid rgba(var(--gray), 0.3);
62 } 98 border-radius: 4px;
63
64 .panel {
65 background: var(--white); 99 background: var(--white);
66 border-radius: 8px; 100 color: rgb(var(--gray-dark));
67 border: 1px dotted #ccc; 101 overflow-y: auto;
68 padding: 20px; 102 font-size: 15px;
69 } 103 }
70 104
71 #output { 105 /* Markdown output styles */
72 min-height: 500px; 106 #output h1, #output h2, #output h3, #output h4, #output h5, #output h6 {
73 padding: 15px; 107 margin: 1em 0 0.5em 0;
74 border: 1px solid rgb(var(--gray-light)); 108 color: rgb(var(--gray-dark));
75 border-radius: 4px; 109 line-height: 1.3;
76 background: rgb(var(--gray-light)); 110 }
77 } 111
78 112 #output h1:first-child, #output h2:first-child, #output h3:first-child {
79 h1, h2, h3, h4, h5, h6 { 113 margin-top: 0;
80 margin: 20px 0 10px 0; 114 }
81 color: var(--darkgray); 115
82 } 116 #output h1 { font-size: 1.8em; }
83 117 #output h2 { font-size: 1.5em; }
84 h1 { font-size: 2em; } 118 #output h3 { font-size: 1.25em; }
85 h2 { font-size: 1.5em; } 119 #output h4 { font-size: 1.1em; }
86 h3 { font-size: 1.3em; } 120
87 121 #output p {
88 p { 122 margin: 0.8em 0;
89 margin: 10px 0; 123 }
90 } 124
91 125 #output ul, #output ol {
92 ul, ol { 126 margin: 0.8em 0;
93 margin: 10px 0; 127 padding-left: 25px;
94 padding-left: 30px; 128 }
95 } 129
96 130 #output li {
97 li { 131 margin: 0.3em 0;
98 margin: 5px 0; 132 }
99 } 133
100 134 #output code {
101 code {
102 background: rgb(var(--gray-light)); 135 background: rgb(var(--gray-light));
103 padding: 2px 6px; 136 padding: 2px 6px;
104 border-radius: 3px; 137 border-radius: 3px;
105 font-family: 'Courier New', monospace; 138 font-family: 'SF Mono', 'Monaco', 'Consolas', monospace;
106 font-size: 0.9em; 139 font-size: 0.9em;
107 } 140 color: var(--accent);
108 141 }
109 pre { 142
110 background: #282c34; 143 #output pre {
111 color: #abb2bf; 144 background: var(--black);
112 padding: 15px; 145 color: var(--white);
113 border-radius: 4px; 146 padding: 15px;
147 border-radius: 6px;
114 overflow-x: auto; 148 overflow-x: auto;
115 margin: 10px 0; 149 margin: 1em 0;
116 text-wrap: auto; 150 line-height: 1.4;
117 } 151 }
118 152
119 pre code { 153 #output pre code {
120 background: none; 154 background: none;
121 color: inherit; 155 color: inherit;
122 padding: 0; 156 padding: 0;
123 } 157 }
124 158
125 blockquote { 159 #output blockquote {
126 border-left: 4px solid rgb(var(--gray-light)); 160 border-left: 4px solid var(--accent);
127 padding-left: 15px; 161 padding: 10px 15px;
128 margin: 10px 0; 162 margin: 1em 0;
129 color: var(--gray); 163 background: rgb(var(--gray-light));
164 color: rgb(var(--gray));
130 font-style: italic; 165 font-style: italic;
131 } 166 }
132 167
133 a { 168 #output a {
134 color: var(--accent); 169 color: var(--accent);
135 text-decoration: none; 170 text-decoration: none;
136 } 171 }
137 172
138 a:hover { 173 #output a:hover {
139 text-decoration: underline; 174 text-decoration: underline;
140 } 175 }
141 176
142 hr { 177 #output hr {
143 border: none; 178 border: none;
144 border-top: 2px solid var(--black); 179 border-top: 1px solid rgb(var(--gray-light));
145 margin: 20px 0; 180 margin: 1.5em 0;
146 } 181 }
147 182
148 img { 183 #output img {
149 max-width: 100%; 184 max-width: 100%;
150 height: auto; 185 height: auto;
151 } 186 border-radius: 4px;
152 187 }
153 strong { 188
154 font-weight: bold; 189 #output strong {
155 } 190 font-weight: 600;
156 191 }
157 em { 192
193 #output em {
158 font-style: italic; 194 font-style: italic;
159 } 195 }
160 196
161 del { 197 #output del {
162 text-decoration: line-through; 198 text-decoration: line-through;
163 } 199 color: rgb(var(--gray));
164 200 }
165 .header { 201
166 text-align: center; 202 /* Mobile */
167 margin-bottom: 30px; 203 @media (max-width: 900px) {
168 }
169
170 .label {
171 font-weight: bold;
172 margin-bottom: 10px;
173 color: var(--gray);
174 }
175
176 .title .label {
177 margin-bottom: 0px;
178 }
179
180 @media (max-width: 768px) {
181 body { 204 body {
182 padding: 10px; 205 padding: 15px;
183 font-size: 16px;
184 } 206 }
185 207
186 .container { 208 .container {
187 grid-template-columns: 1fr; 209 grid-template-columns: 1fr;
210 height: auto;
188 gap: 15px; 211 gap: 15px;
189 } 212 }
190 213
191 h1 {
192 font-size: 1.75rem;
193 }
194
195 .panel { 214 .panel {
196 padding: 15px; 215 min-height: 350px;
197 } 216 }
198 217
199 textarea { 218 textarea {
200 height: 400px; 219 min-height: 300px;
201 font-size: 16px;
202 } 220 }
203 221
204 #output { 222 #output {
205 min-height: 300px; 223 min-height: 300px;
206 font-size: 1rem; 224 }
207 } 225 }
208
209 button {
210 font-size: 1rem;
211 padding: 12px 20px;
212 min-height: 44px;
213 width: 100%;
214 }
215
216 .title {
217 grid-template-columns: 1fr;
218 gap: 10px;
219 }
220
221 .label {
222 font-size: 1rem;
223 }
224
225 h1 { font-size: 1.75em; }
226 h2 { font-size: 1.5em; }
227 h3 { font-size: 1.25em; }
228 }