Tahinli/forge

public

0 watching

★ 0

3.2 KiB

1	// dashboard: sage redesign of the signed-in home page (pages/dashboard.rs). Greeting, the
2	// contribution card (see _heatmap.scss), then two columns: repositories and the inbox rows that
3	// need the viewer. Stacks to one column below 1000px.
4
5	.greet {
6	margin: 0;
7	font-size: 14px;
8	font-weight: 400;
9	color: var(--muted);
10	}
11
12	.dash-cols {
13	display: grid;
14	grid-template-columns: minmax(0, 1fr);
15	gap: 36px;
16	margin-top: 44px;
17
18	@media (min-width: 1000px) {
19	grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
20	gap: 40px;
21	}
22	}
23
24	// Section heading with a bottom border, the count and an optional button on the right.
25	.sec-head {
26	display: flex;
27	flex-wrap: wrap;
28	align-items: baseline;
29	gap: 12px;
30	margin-bottom: 4px;
31	padding-bottom: 12px;
32	border-bottom: 1px solid var(--border);
33
34	h2 {
35	margin: 0;
36	font-size: 15px;
37	font-weight: 600;
38	}
39
40	.small {
41	margin-right: auto;
42	color: var(--muted);
43	}
44	}
45
46	.dash-repos {
47	min-width: 0;
48
49	.table {
50	min-width: 520px;
51	font-size: 14.5px;
52
53	th {
54	padding: 12px 12px 10px 0;
55	border-bottom: 1px solid var(--border);
56	text-align: left;
57	font-size: 12.5px;
58	font-weight: 500;
59	color: var(--muted);
60	}
61
62	td {
63	padding: 14px 12px 14px 0;
64	border-bottom: 1px solid var(--border);
65	vertical-align: middle;
66	}
67
68	td .badge {
69	margin-left: 8px;
70	vertical-align: middle;
71	}
72	}
73	}
74
75	// Phone width: the description column goes, so the name column fits without sideways scrolling.
76	@media (max-width: 639px) {
77	.dash-repos .table {
78	min-width: 0;
79	width: 100%;
80	}
81
82	.dash-repos .dash-desc {
83	display: none;
84	}
85	}
86
87	.dash-attention {
88	min-width: 0;
89
90	.attn {
91	list-style: none;
92	margin: 14px 0 0;
93	padding: 0;
94	}
95
96	.attn li {
97	display: flex;
98	flex-direction: column;
99	gap: 2px;
100	padding: 12px 0;
101	border-bottom: 1px solid var(--border);
102	font-size: 14.5px;
103
104	&:last-child {
105	border-bottom: 0;
106	}
107	}
108
109	.attn a {
110	color: var(--text);
111	text-decoration: none;
112
113	&:hover {
114	text-decoration: underline;
115	}
116	}
117
118	.attn .sub {
119	color: var(--muted);
120	font-size: 13px;
121	}
122
123	> p.small {
124	margin: 14px 0 0;
125	}
126	}
127
128	// Explore: one-row search (input, then its button) and a sort control of pill links.
129	.explore-search {
130	display: flex;
131	flex-wrap: wrap;
132	gap: 8px;
133	align-items: center;
134	margin: 18px 0 0;
135
136	input[type="search"] {
137	flex: 1 1 240px;
138	width: auto;
139	min-width: 0;
140	}
141
142	button {
143	flex: 0 0 auto;
144	}
145
146	@media (max-width: 479px) {
147	input[type="search"] {
148	flex: 1 1 100%;
149	}
150	}
151	}
152
153	.explore-sort {
154	display: flex;
155	flex-wrap: wrap;
156	gap: 6px 8px;
157	align-items: center;
158	margin: 14px 0 0;
159	font-size: 13px;
160
161	a,
162	.current {
163	display: inline-flex;
164	align-items: center;
165	height: 28px;
166	padding: 0 12px;
167	border: 1px solid var(--border);
168	border-radius: 999px;
169	color: var(--text-2);
170	text-decoration: none;
171	}
172
173	a:hover {
174	background: var(--surface-2);
175	text-decoration: none;
176	}
177
178	.current {
179	border-color: transparent;
180	background: var(--accent-soft);
181	color: var(--accent-ink);
182	font-weight: 600;
183	}
184	}