max / makenotwork

2.3 KB · 134 lines History Blame Raw

1	/* RESPONSIVE, 768px (tablet) */
2
3	@media (max-width: 768px) {
4	.container {
5	padding: 0.75rem;
6	}
7
8	.padded-page {
9	padding: 0.75rem;
10	}
11
12	.form-row {
13	grid-template-columns: 1fr;
14	}
15
16	.data-table th,
17	.data-table td {
18	padding: 0.35rem 0.5rem;
19	font-size: 0.8rem;
20	}
21
22	.directory-table th,
23	.directory-table td {
24	padding: 0.35rem 0.5rem;
25	font-size: 0.8rem;
26	}
27
28	.page-header {
29	flex-direction: column;
30	align-items: flex-start;
31	gap: 0.5rem;
32	}
33
34	/* Hamburger menu */
35	.nav-toggle-label {
36	display: block;
37	}
38
39	.site-header nav {
40	display: none;
41	position: absolute;
42	top: 100%;
43	left: 0;
44	right: 0;
45	background: var(--background);
46	border-bottom: 1px solid var(--border);
47	padding: 0.75rem 1.25rem;
48	z-index: 10;
49	}
50
51	.site-header {
52	position: relative;
53	}
54
55	.nav-toggle-checkbox:checked ~ nav {
56	display: block;
57	}
58
59	.site-header .nav-links {
60	flex-direction: column;
61	gap: 0.75rem;
62	}
63
64	/* Animate hamburger to X */
65	.nav-toggle-checkbox:checked ~ .nav-toggle-label span:nth-child(1) {
66	transform: rotate(45deg) translate(5px, 5px);
67	}
68
69	.nav-toggle-checkbox:checked ~ .nav-toggle-label span:nth-child(2) {
70	opacity: 0;
71	}
72
73	.nav-toggle-checkbox:checked ~ .nav-toggle-label span:nth-child(3) {
74	transform: rotate(-45deg) translate(5px, -5px);
75	}
76
77	/* Hide less important columns on mobile */
78	.data-table .col-author {
79	display: none;
80	}
81
82	.directory-table .col-type,
83	.directory-table .col-items {
84	display: none;
85	}
86
87	.col-replies {
88	width: auto;
89	}
90	}
91
92	/* RESPONSIVE, 480px (phone) */
93
94	@media (max-width: 480px) {
95	.container {
96	padding: 0.5rem;
97	}
98
99	.padded-page {
100	padding: 0.5rem;
101	}
102
103	h1 {
104	font-size: 1.6rem;
105	}
106
107	.toast-container {
108	left: 0.75rem;
109	right: 0.75rem;
110	}
111
112	.toast {
113	max-width: 100%;
114	}
115
116	.post-header {
117	flex-direction: column;
118	gap: 0.2rem;
119	}
120
121	/* The composer and the on-screen keyboard together take most of a phone, so
122	the log gives up height rather than pushing the input off the bottom. */
123	.chat-log {
124	height: 55vh;
125	padding: 0.35rem;
126	}
127
128	/* No hover on a touch screen, so a delete control that only appears on hover
129	is a control that does not exist. */
130	.chat-remove {
131	opacity: 1;
132	}
133	}
134