all repos — honk @ 30e1f606f1c5ab61d146ccc14d44f7f7570f3f8b

my fork of honk

views/style.css (view raw)

  1$bg-page: #305;
  2$bg-dark: #002;
  3$fg: #dde;
  4$fg-subtle: #aab;
  5$fg-limited: #a79;
  6
  7body {
  8	background: $bg-page;
  9	color: $fg;
 10	font-size: 1em;
 11	word-wrap: break-word;
 12	font-family: sans-serif, "Noto Color Emoji";
 13	line-height: 1.2;
 14}
 15pre, code {
 16	white-space: pre-wrap;
 17}
 18blockquote {
 19	margin-left: 0em;
 20	padding-left: 0.5em;
 21	border-left: 1px solid $fg-subtle;
 22}
 23table {
 24	display: block;
 25	max-width: 100%;
 26	overflow-x: auto;
 27}
 28a {
 29	color: $fg;
 30}
 31form, input, textarea {
 32	font-family: monospace, "Noto Color Emoji";
 33}
 34p {
 35	margin-top: 1em;
 36	margin-bottom: 1em;
 37}
 38input {
 39	background: $bg-page;
 40	color: $fg;
 41	font-size: 1.0em;
 42	line-height: 1.2em;
 43	padding: 0.5em;
 44}
 45body > header {
 46	margin: 1em auto;
 47	font-size: 1.5em;
 48}
 49body > header p {
 50	margin-left: 4em;
 51}
 52body > header span {
 53	margin-left: 2em;
 54}
 55header > details {
 56	background: $bg-page;
 57	padding: 1em;
 58	position: fixed;
 59	top: 0;
 60	display: inline;
 61}
 62header > details[open] {
 63	background: $bg-dark;
 64	border: 1px solid $fg;
 65}
 66header > details li {
 67	margin: 1em 0em 1em 0em;
 68}
 69main {
 70	max-width: 1200px;
 71	margin: auto;
 72	font-size: 1.5em;
 73}
 74.info {
 75	background: $bg-dark;
 76	border: 1px solid $fg;
 77	margin-bottom: 1em;
 78	padding: 0em 1em 0em 1em;
 79}
 80.info div {
 81	margin-top: 1em;
 82	margin-bottom: 1em;
 83}
 84label, button, form input[type=submit], select {
 85	font-size: 16px;
 86	font-family: monospace;
 87	color: $fg;
 88	background: $bg-page;
 89	border: 1px solid $fg;
 90	padding: 0.5em;
 91}
 92button a {
 93	text-decoration: none;
 94}
 95form {
 96	margin-top: 1em;
 97}
 98textarea {
 99	padding: 0.5em;
100	font-size: 1em;
101	background: $bg-page;
102	color: $fg;
103	width: 600px;
104	height: 8em;
105	margin-bottom: 0.5em;
106	box-sizing: border-box;
107	max-width: 100%;
108}
109input[type="checkbox"] {
110	position: fixed;
111	top: -9999px;
112}
113input[type="checkbox"] + span:after {
114	content: "no";
115}
116input[type="checkbox"]:checked + span:after {
117	content: "yes";
118}
119input[type="checkbox"]:focus + span:after {
120	outline: 1px solid $fg;
121}
122input[type=file] {
123	display: none;
124}
125
126.honk {
127	margin: auto;
128	background: $bg-dark;
129	border: 1px solid $fg;
130	border-radius: 1em;
131	margin-bottom: 1em;
132	padding-left: 1em;
133	padding-right: 1em;
134	padding-top: 0;
135	overflow: hidden;
136}
137.honk #honkform {
138	padding: 1em;
139	border: 1px solid $fg;
140}
141
142.honk a {
143	color: $fg;
144}
145.honk header .clip a {
146	color: $fg-subtle;
147}
148.honk header {
149	white-space: nowrap;
150	overflow: hidden;
151	text-overflow: ellipsis;
152	font-size: 0.8em;
153	line-height: 1.1;
154	margin-top: 1em;
155	height: 64px;
156}
157.honk header img {
158	float: left;
159	margin-right: 1em;
160	width: 64px;
161	height: 64px;
162}
163.honk header p {
164	margin-top: 0px;
165}
166.honk button {
167	margin-left: 4em;
168	margin-top: 2em;
169}
170.subtle {
171}
172.subtle .noise {
173	color: $fg-subtle;
174	font-size: 0.8em;
175}
176.subtle .noise a {
177	color: $fg-subtle;
178}
179.limited {
180	border: 1px solid $fg-limited;
181	color: $fg-limited;
182}
183.limited .noise {
184	color: $fg-limited;
185}
186.limited .noise a {
187	color: $fg-limited;
188}
189details.noise[open] summary {
190	display: none;
191}
192.inlineform {
193	display: inline;
194}
195.inlineform select {
196}
197.honk details.actions summary {
198	color: $fg-subtle;
199}
200.limited details.actions summary {
201	color: $fg-limited;
202}
203h1, h2 {
204	font-size: 1.2em;
205}
206h3, h4 {
207	font-size: 1.1em;
208}
209
210img:not(.emu) {
211	background: $bg-page;
212}
213img, video {
214	max-width: 100%;
215}
216img.emu {
217	width: 2em;
218	height: 2em;
219	vertical-align: middle;
220	margin: -2px;
221	object-fit: contain;
222}
223@media screen and (max-width: 740px) {
224	body {
225		font-size: 12px;
226	}
227	.honk header {
228		height: 52px;
229	}
230	.honk header img {
231		width: 48px;
232		height: 48px;
233	}
234}