Mercurial Hosting > linkmystyle
diff src/site.css @ 0:8f4df159f06b
start public repo
author | Franklin Schmidt <fschmidt@gmail.com> |
---|---|
date | Fri, 11 Jul 2025 20:57:49 -0600 |
parents | |
children |
line wrap: on
line diff
--- /dev/null Thu Jan 01 00:00:00 1970 +0000 +++ b/src/site.css Fri Jul 11 20:57:49 2025 -0600 @@ -0,0 +1,223 @@ +* { + box-sizing: border-box; +} + +body { + font-family: Bitter; + margin: 0; +} +body[colored] { + background-color: #C0D1D6; +} + +a[link] { + display: block; + border-radius: 12px / 50%; + color: white; + background-color: #325762; + text-align: center; + padding: 12px; + text-decoration: none; + margin-bottom: 10px; +} +a[link]:hover { + background-color: #243F47; +} + +div[links] { + max-width: 600px; + margin-left: auto; + margin-right: auto; +} +@media (max-width: 700px) { + div[links] { + max-width: 90%; + } +} + +div[saved] { + background-color: white; + padding-top: 10px; + padding-bottom: 10px; + color: green; + text-align: center; + position: relative; +} +div[saved] p { + margin-top: 8px; + margin-bottom: 8px; +} +div[saved] a { + text-decoration: none; +} +div[saved] a[close] { + position: absolute; + top: 10px; + right: 10px; + display: block; +} +div[saved] img { + display: block; + height: 26px; + opacity: 0.7; +} + +div[pics] { + display: flex; + gap: 3%; + flex-wrap: wrap; +} +div[pics] span { + width: 22.75%; + aspect-ratio: 1; + margin-bottom: 3%; +} +@media (max-width: 800px) { + div[pics] span { + width: 48.5%; + } +} +div[pics] a img { + display: block; + width: 100%; + border-radius: 4px; +} + +div[back] a { + display: inline-block; + margin-left: 20px; + margin-top: 10px; +} +div[back] img { + width: 30px; +} + +html[pic] div[hashtags] { + margin-top: 8px; +} +div[hashtags] a { + text-decoration: none; + color: black; +} + + +html[main] body { + text-align: center; +} +html[main] div[home] { + padding-top: 8px; + margin-bottom: 60px; +} +html[main] div[home] a { + text-decoration: none; + color: black; +} +html[main] div[home] a:hover { + text-decoration: underline; +} +html[main] div[home] span[lms] { + font-family: Fraunces; + font-size: 18px; + font-weight: bold; +} +html[main] div[home] span[small] { + font-size: 11px; +} +html[main] img[user] { + display: block; + width: 100px; + height: 100px; + object-fit: cover; + border-radius: 50%; + margin-left: auto; + margin-right: auto; +} +html[main] h1 { + font-size: 24px; + font-weight: normal; +} +html[main] div[bio] { + white-space: pre-wrap; + margin-bottom: 20px; + max-width: 600px; + margin-left: auto; + margin-right: auto; +} +html[main] div[icons] { + display: flex; + justify-content: center; + flex-wrap: wrap; + gap: 10px; + margin-bottom: 20px; +} +html[main] div[icons] img { + display: block; + height: 40px; +} +html[main] div[hashtags] { + margin-top: 40px; +} + +html[main] div[pics] { + width: 90%; + margin-top: 40px; + margin-left: auto; + margin-right: auto; +} + +html[pic] img[pic] { + width: 100%; + display: block; +} + +html[pic] div[body] { + margin-top: 40px; + margin-bottom: 40px; +} +@media (min-width: 888px) { + html[pic] div[body] { + display: flex; + align-items: flex-start; + } + html[pic] div[left] { + width: 45%; + margin-left: 5%; + } + html[pic] div[outer_links] { + width: 55%; + margin-left: 5%; + margin-right: 5%; + } +} +@media (max-width: 887px) { + html[pic] div[left] { + width: 90%; + margin-left: auto; + margin-right: auto; + margin-bottom: 40px; + } +} + +span[select] { + display: inline-block; + color: white; +} +span[select] select { + background-color: #325762; + padding: 12px; + padding-right: calc(12px + 1em); + border-radius: 12px / 50%; + border: none; + appearance: none; + cursor: pointer; + color: inherit; + outline: none; +} +span[select] select:hover { + background-color: #243F47; +} +span[select]:after { + content: "⋁"; + margin-left: -1.5em; + pointer-events: none; +}