Mercurial

comparison mrjunejune/src/tools/markdown_to_html/index.css @ 100:65e5a5b89a4e

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
[Seobeo] Migrated everything to this page.
author June Park <parkjune1995@gmail.com>
date Sat, 03 Jan 2026 07:48:07 -0800
parents 3bdfffaad162
children 902e29c38d66
comparison
equal deleted inserted replaced
99:684edfaf93b7 100:65e5a5b89a4e
36 margin-bottom: 20px; 36 margin-bottom: 20px;
37 } 37 }
38 38
39 textarea { 39 textarea {
40 width: 100%; 40 width: 100%;
41 height: 500px; 41 height: 700px;
42 padding: 15px; 42 padding: 15px;
43 background: rgb(var(--gray-light)); 43 background: rgb(var(--gray-light));
44 color: var(--darkgray); 44 color: var(--darkgray);
45 border-radius: 4px; 45 border-radius: 4px;
46 font-family: 'Courier New', monospace; 46 font-family: 'Courier New', monospace;
55 margin-top: 20px; 55 margin-top: 20px;
56 } 56 }
57 57
58 .title { 58 .title {
59 display: grid; 59 display: grid;
60 place-items: center;
61 grid-template-columns: 1fr 1fr; 60 grid-template-columns: 1fr 1fr;
62 margin-bottom: 10px; 61 margin-bottom: 10px;
63 } 62 }
64 63
65 .panel { 64 .panel {
75 border: 1px solid rgb(var(--gray-light)); 74 border: 1px solid rgb(var(--gray-light));
76 border-radius: 4px; 75 border-radius: 4px;
77 background: rgb(var(--gray-light)); 76 background: rgb(var(--gray-light));
78 } 77 }
79 78
80 #output h1, #output h2, #output h3, #output h4, #output h5, #output h6 { 79 h1, h2, h3, h4, h5, h6 {
81 margin: 20px 0 10px 0; 80 margin: 20px 0 10px 0;
82 color: var(--darkgray); 81 color: var(--darkgray);
83 } 82 }
84 83
85 #output h1 { font-size: 2em; } 84 h1 { font-size: 2em; }
86 #output h2 { font-size: 1.5em; } 85 h2 { font-size: 1.5em; }
87 #output h3 { font-size: 1.3em; } 86 h3 { font-size: 1.3em; }
88 87
89 #output p { 88 p {
90 margin: 10px 0; 89 margin: 10px 0;
91 } 90 }
92 91
93 #output ul, #output ol { 92 ul, ol {
94 margin: 10px 0; 93 margin: 10px 0;
95 padding-left: 30px; 94 padding-left: 30px;
96 } 95 }
97 96
98 #output li { 97 li {
99 margin: 5px 0; 98 margin: 5px 0;
100 } 99 }
101 100
102 #output code { 101 code {
103 background: rgb(var(--gray-light)); 102 background: rgb(var(--gray-light));
104 padding: 2px 6px; 103 padding: 2px 6px;
105 border-radius: 3px; 104 border-radius: 3px;
106 font-family: 'Courier New', monospace; 105 font-family: 'Courier New', monospace;
107 font-size: 0.9em; 106 font-size: 0.9em;
108 } 107 }
109 108
110 #output pre { 109 pre {
111 background: #282c34; 110 background: #282c34;
112 color: #abb2bf; 111 color: #abb2bf;
113 padding: 15px; 112 padding: 15px;
114 border-radius: 4px; 113 border-radius: 4px;
115 overflow-x: auto; 114 overflow-x: auto;
116 margin: 10px 0; 115 margin: 10px 0;
117 } 116 text-wrap: auto;
118 117 }
119 #output pre code { 118
119 pre code {
120 background: none; 120 background: none;
121 color: inherit; 121 color: inherit;
122 padding: 0; 122 padding: 0;
123 } 123 }
124 124
125 #output blockquote { 125 blockquote {
126 border-left: 4px solid rgb(var(--gray-light)); 126 border-left: 4px solid rgb(var(--gray-light));
127 padding-left: 15px; 127 padding-left: 15px;
128 margin: 10px 0; 128 margin: 10px 0;
129 color: var(--gray); 129 color: var(--gray);
130 font-style: italic; 130 font-style: italic;
131 } 131 }
132 132
133 #output a { 133 a {
134 color: var(--accent); 134 color: var(--accent);
135 text-decoration: none; 135 text-decoration: none;
136 } 136 }
137 137
138 #output a:hover { 138 a:hover {
139 text-decoration: underline; 139 text-decoration: underline;
140 } 140 }
141 141
142 #output hr { 142 hr {
143 border: none; 143 border: none;
144 border-top: 2px solid rgb(var(--gray-light)); 144 border-top: 2px solid rgb(var(--gray-light));
145 margin: 20px 0; 145 margin: 20px 0;
146 } 146 }
147 147
148 #output img { 148 img {
149 max-width: 100%; 149 max-width: 100%;
150 height: auto; 150 height: auto;
151 } 151 }
152 152
153 #output strong { 153 strong {
154 font-weight: bold; 154 font-weight: bold;
155 } 155 }
156 156
157 #output em { 157 em {
158 font-style: italic; 158 font-style: italic;
159 } 159 }
160 160
161 #output del { 161 del {
162 text-decoration: line-through; 162 text-decoration: line-through;
163 } 163 }
164 164
165 .header { 165 .header {
166 text-align: center; 166 text-align: center;
195 .panel { 195 .panel {
196 padding: 15px; 196 padding: 15px;
197 } 197 }
198 198
199 textarea { 199 textarea {
200 height: 300px; 200 height: 400px;
201 font-size: 16px; 201 font-size: 16px;
202 } 202 }
203 203
204 #output { 204 #output {
205 min-height: 300px; 205 min-height: 300px;
220 220
221 .label { 221 .label {
222 font-size: 1rem; 222 font-size: 1rem;
223 } 223 }
224 224
225 #output h1 { font-size: 1.75em; } 225 h1 { font-size: 1.75em; }
226 #output h2 { font-size: 1.5em; } 226 h2 { font-size: 1.5em; }
227 #output h3 { font-size: 1.25em; } 227 h3 { font-size: 1.25em; }
228 } 228 }