Mercurial

comparison mrjunejune/pages/tools/markdown_to_html/index.css @ 76:35b1abc37969

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
Updating my website to use seobeo library.
author June Park <parkjune1995@gmail.com>
date Wed, 31 Dec 2025 14:11:21 -0800
parents
children
comparison
equal deleted inserted replaced
75:ae6a88e6e484 76:35b1abc37969
1 * {
2 margin: 0;
3 padding: 0;
4 box-sizing: border-box;
5 }
6
7 body {
8 line-height: 1.6;
9 padding: 20px;
10 max-width: 1200px;
11 margin: 0 auto;
12 background: rgb(var(--gray-light));
13 }
14
15 button {
16 background: var(--accent);
17 color: var(--white);
18 border: none;
19 padding: 10px 20px;
20 border-radius: 4px;
21 cursor: pointer;
22 font-size: 16px;
23 margin-top: 10px;
24 }
25
26 .title button {
27 margin-top: 0px;
28 }
29
30 button:hover {
31 background: var(--accent-dark);
32 }
33
34 h1 {
35 color: var(--darkgray);
36 margin-bottom: 20px;
37 }
38
39 textarea {
40 width: 100%;
41 height: 500px;
42 padding: 15px;
43 border: 1px solid rgb(var(--gray-light));
44 border-radius: 4px;
45 font-family: 'Courier New', monospace;
46 font-size: 14px;
47 resize: vertical;
48 }
49
50 .container {
51 display: grid;
52 grid-template-columns: 1fr 1fr;
53 gap: 20px;
54 margin-top: 20px;
55 }
56
57 .title {
58 display: grid;
59 place-items: center;
60 grid-template-columns: 1fr 1fr;
61 margin-bottom: 10px;
62 }
63
64 .panel {
65 background: var(--white);
66 border-radius: 8px;
67 padding: 20px;
68 box-shadow: 0 2px 4px rgba(0,0,0,0.1);
69 }
70
71 #output {
72 min-height: 500px;
73 padding: 15px;
74 border: 1px solid rgb(var(--gray-light));
75 border-radius: 4px;
76 background: rgb(var(--gray-light));
77 }
78
79 #output h1, #output h2, #output h3, #output h4, #output h5, #output h6 {
80 margin: 20px 0 10px 0;
81 color: var(--darkgray);
82 }
83
84 #output h1 { font-size: 2em; }
85 #output h2 { font-size: 1.5em; }
86 #output h3 { font-size: 1.3em; }
87
88 #output p {
89 margin: 10px 0;
90 }
91
92 #output ul, #output ol {
93 margin: 10px 0;
94 padding-left: 30px;
95 }
96
97 #output li {
98 margin: 5px 0;
99 }
100
101 #output code {
102 background: rgb(var(--gray-light));
103 padding: 2px 6px;
104 border-radius: 3px;
105 font-family: 'Courier New', monospace;
106 font-size: 0.9em;
107 }
108
109 #output pre {
110 background: #282c34;
111 color: #abb2bf;
112 padding: 15px;
113 border-radius: 4px;
114 overflow-x: auto;
115 margin: 10px 0;
116 }
117
118 #output pre code {
119 background: none;
120 color: inherit;
121 padding: 0;
122 }
123
124 #output blockquote {
125 border-left: 4px solid rgb(var(--gray-light));
126 padding-left: 15px;
127 margin: 10px 0;
128 color: var(--gray);
129 font-style: italic;
130 }
131
132 #output a {
133 color: var(--accent);
134 text-decoration: none;
135 }
136
137 #output a:hover {
138 text-decoration: underline;
139 }
140
141 #output hr {
142 border: none;
143 border-top: 2px solid rgb(var(--gray-light));
144 margin: 20px 0;
145 }
146
147 #output img {
148 max-width: 100%;
149 height: auto;
150 }
151
152 #output strong {
153 font-weight: bold;
154 }
155
156 #output em {
157 font-style: italic;
158 }
159
160 #output del {
161 text-decoration: line-through;
162 }
163
164 .header {
165 text-align: center;
166 margin-bottom: 30px;
167 }
168
169 .label {
170 font-weight: bold;
171 margin-bottom: 10px;
172 color: var(--gray);
173 }
174
175 .title .label {
176 margin-bottom: 0px;
177 }
178
179 @media (max-width: 768px) {
180 .container {
181 grid-template-columns: 1fr;
182 }
183 }