Mercurial Hosting > linkmystyle

comparison src/site.css @ 0:8f4df159f06b

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
start public repo
author Franklin Schmidt <fschmidt@gmail.com>
date Fri, 11 Jul 2025 20:57:49 -0600
parents
children
comparison
equal deleted inserted replaced
-1:000000000000 0:8f4df159f06b
1 * {
2 box-sizing: border-box;
3 }
4
5 body {
6 font-family: Bitter;
7 margin: 0;
8 }
9 body[colored] {
10 background-color: #C0D1D6;
11 }
12
13 a[link] {
14 display: block;
15 border-radius: 12px / 50%;
16 color: white;
17 background-color: #325762;
18 text-align: center;
19 padding: 12px;
20 text-decoration: none;
21 margin-bottom: 10px;
22 }
23 a[link]:hover {
24 background-color: #243F47;
25 }
26
27 div[links] {
28 max-width: 600px;
29 margin-left: auto;
30 margin-right: auto;
31 }
32 @media (max-width: 700px) {
33 div[links] {
34 max-width: 90%;
35 }
36 }
37
38 div[saved] {
39 background-color: white;
40 padding-top: 10px;
41 padding-bottom: 10px;
42 color: green;
43 text-align: center;
44 position: relative;
45 }
46 div[saved] p {
47 margin-top: 8px;
48 margin-bottom: 8px;
49 }
50 div[saved] a {
51 text-decoration: none;
52 }
53 div[saved] a[close] {
54 position: absolute;
55 top: 10px;
56 right: 10px;
57 display: block;
58 }
59 div[saved] img {
60 display: block;
61 height: 26px;
62 opacity: 0.7;
63 }
64
65 div[pics] {
66 display: flex;
67 gap: 3%;
68 flex-wrap: wrap;
69 }
70 div[pics] span {
71 width: 22.75%;
72 aspect-ratio: 1;
73 margin-bottom: 3%;
74 }
75 @media (max-width: 800px) {
76 div[pics] span {
77 width: 48.5%;
78 }
79 }
80 div[pics] a img {
81 display: block;
82 width: 100%;
83 border-radius: 4px;
84 }
85
86 div[back] a {
87 display: inline-block;
88 margin-left: 20px;
89 margin-top: 10px;
90 }
91 div[back] img {
92 width: 30px;
93 }
94
95 html[pic] div[hashtags] {
96 margin-top: 8px;
97 }
98 div[hashtags] a {
99 text-decoration: none;
100 color: black;
101 }
102
103
104 html[main] body {
105 text-align: center;
106 }
107 html[main] div[home] {
108 padding-top: 8px;
109 margin-bottom: 60px;
110 }
111 html[main] div[home] a {
112 text-decoration: none;
113 color: black;
114 }
115 html[main] div[home] a:hover {
116 text-decoration: underline;
117 }
118 html[main] div[home] span[lms] {
119 font-family: Fraunces;
120 font-size: 18px;
121 font-weight: bold;
122 }
123 html[main] div[home] span[small] {
124 font-size: 11px;
125 }
126 html[main] img[user] {
127 display: block;
128 width: 100px;
129 height: 100px;
130 object-fit: cover;
131 border-radius: 50%;
132 margin-left: auto;
133 margin-right: auto;
134 }
135 html[main] h1 {
136 font-size: 24px;
137 font-weight: normal;
138 }
139 html[main] div[bio] {
140 white-space: pre-wrap;
141 margin-bottom: 20px;
142 max-width: 600px;
143 margin-left: auto;
144 margin-right: auto;
145 }
146 html[main] div[icons] {
147 display: flex;
148 justify-content: center;
149 flex-wrap: wrap;
150 gap: 10px;
151 margin-bottom: 20px;
152 }
153 html[main] div[icons] img {
154 display: block;
155 height: 40px;
156 }
157 html[main] div[hashtags] {
158 margin-top: 40px;
159 }
160
161 html[main] div[pics] {
162 width: 90%;
163 margin-top: 40px;
164 margin-left: auto;
165 margin-right: auto;
166 }
167
168 html[pic] img[pic] {
169 width: 100%;
170 display: block;
171 }
172
173 html[pic] div[body] {
174 margin-top: 40px;
175 margin-bottom: 40px;
176 }
177 @media (min-width: 888px) {
178 html[pic] div[body] {
179 display: flex;
180 align-items: flex-start;
181 }
182 html[pic] div[left] {
183 width: 45%;
184 margin-left: 5%;
185 }
186 html[pic] div[outer_links] {
187 width: 55%;
188 margin-left: 5%;
189 margin-right: 5%;
190 }
191 }
192 @media (max-width: 887px) {
193 html[pic] div[left] {
194 width: 90%;
195 margin-left: auto;
196 margin-right: auto;
197 margin-bottom: 40px;
198 }
199 }
200
201 span[select] {
202 display: inline-block;
203 color: white;
204 }
205 span[select] select {
206 background-color: #325762;
207 padding: 12px;
208 padding-right: calc(12px + 1em);
209 border-radius: 12px / 50%;
210 border: none;
211 appearance: none;
212 cursor: pointer;
213 color: inherit;
214 outline: none;
215 }
216 span[select] select:hover {
217 background-color: #243F47;
218 }
219 span[select]:after {
220 content: "⋁";
221 margin-left: -1.5em;
222 pointer-events: none;
223 }