fediglam/static/site.css
2022-12-13 00:40:12 -08:00

220 lines
3.6 KiB
CSS

@import url('https://fonts.googleapis.com/css2?family=Quicksand:wght@300;400;500;600;700&display=swap');
* {
--theme-color: #713c8c;
--theme-color-highlight: #9b52bf;
}
body {
margin: 0px;
font-family: "Quicksand", sans-serif;
}
nav {
padding: 5px;
border-bottom: solid 1px black;
width: 100%;
box-sizing: border-box;
display: flex;
align-items: center;
}
h1 {
margin: 0px;
}
h1 > a {
color: #000;
text-decoration: none;
}
nav > ul {
margin: 0px;
padding: 0px;
flex-grow: 1;
display: flex;
list-style: none;
justify-content: flex-end;
}
nav > ul > li > * {
padding: 5px;
margin: 0px 5px;
}
nav > ul > li.title > a {
border: none;
justify-self: start;
}
main {
padding: 1em;
overflow: scroll;
}
.user-mini {
display: flex;
margin: 0.5em 0px;
}
.user-mini .avatar {
max-width: 3em;
}
.user-mini .details {
margin: 5px;
}
.user-mini .handle {
font-size: small;
}
form {
display: flex;
flex-direction: column;
max-width: 400px;
padding: 1em;
}
form > * {
margin: 5px 0px;
}
form .textinput {
display: flex;
padding: 6px;
border: solid 1px black;
border-radius: 8px;
outline: solid 2px transparent;
transition: outline 0.2s;
cursor: text;
}
form .textinput input {
flex-grow: 1;
flex-basis: 3em;
width: 10px;
appearance: none;
border: none;
}
form .textinput input:focus-visible{
outline: none;
}
form .textinput:focus-within {
outline: solid 2px var(--theme-color);
}
form .textinput span.prefix {
user-select: none;
flex-basis: 1.5em;
text-align: center;
}
form .textinput span.suffix {
user-select: none;
flex-basis: 3em;
flex-grow: 1;
max-width: min-content;
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
}
@media (max-width: 360px) {
form .textinput span.suffix {
display: none;
}
}
form .form-helpinfo {
font-size: small;
}
button, a.button {
padding: 5px;
border-radius: 10px;
border: none;
color: #fff;
background-color: var(--theme-color);
font-weight: bold;
transition: background-color 0.2s;
cursor: pointer;
}
button:hover, a.button:hover {
background-color: var(--theme-color-highlight);
}
.user-profile img.banner {
width: 100%;
height: 24em;
object-fit: cover;
/* TODO: Center this on the image focus */
}
.user-profile {
--avatar-size: 12em;
}
.user-profile .avatar {
margin-top: calc(var(--avatar-size) * -3/5);
margin-left: calc(var(--avatar-size) / 20);
}
.user-profile .avatar img {
width: var(--avatar-size);
height: var(--avatar-size);
}
.user-profile header > div {
display: flex;
position: relative;
z-index: 1;
flex-wrap: wrap;
}
.user-profile header .names {
margin: 1em;
}
.user-profile > div {
margin-left: calc(var(--avatar-size) * 3/5);
}
.user-profile .profile-fields .field {
display: grid;
grid-template-columns: 1fr 3fr;
text-align: center;
}
.user-profile .profile-fields .field .field-name { grid-column: 1; }
.user-profile .profile-fields .field .field-value { grid-column: 2; }
@media (max-width: 720px) {
.user-profile img.banner {
height: 18em;
}
.user-profile {
--avatar-size: 10em;
}
.user-profile .profile-fields .field {
grid-template-columns: 1fr 2fr;
}
}
@media (max-width: 480px) {
.user-profile img.banner {
height: 12em;
}
.user-profile header div {
}
.user-profile header div * {
flex-basis: 100%;
text-align: center;
}
.user-profile {
--avatar-size: 8em;
}
.user-profile .avatar {
margin-left: 0px;
}
.user-profile > div {
margin-left: 0px;
}
.user-profile .bio {
text-align: center;
}
.user-profile .profile-fields .field {
grid-template-columns: 2fr 3fr;
}
}