hatecomputers
/
hatecomputers.club
6
0
Fork 0
Code Issues 2 Pull Requests Packages Projects Releases Wiki Activity

improve home page club member CSS #14

Merged
rain merged 1 commits from homepage-css-adventure into main 2024-10-14 22:26:22 -04:00
Conversation 0 Commits 1 Files Changed 3 +48 -38
3 changed files with 48 additions and 38 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

66
static/css/club.css
View File

@ -1,48 +1,54 @@
.club-members {
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: left;
gap: 20px;
padding: 20px;
display: grid;
gap: 1rem;
grid-template-columns: repeat(auto-fill, minmax(24rem, 1fr));
}
.club-member {
flex: 1;
background-color: var(--background-color-2);
border: 1px solid var(--border-color);
padding: 10px;
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-around;
gap: 10px;
max-width: 500px;
min-width: 300px;
line-break: anywhere;
}
.club-member-name {
font-size: 1.5em;
font-weight: bold;
}
.club-bio {
white-space: pre-wrap;
border-top: 1px solid var(--border-color);
padding-inline: .5rem;
padding-block: .25rem;
}
.avatar {
flex: 1;
display: flex;
justify-content: center;
align-items: center;
float: left;
width: 30%;
margin: .5rem;
margin-bottom: -.4rem;
}
.avatar div {
background-position: center center;
background-repeat: no-repeat;
background-size: cover;
width: 120px;
height: 120px;
border-radius: 25%;
.avatar > img {
width: -moz-available;
width: -webkit-fill-available; /* we live in a society */
border-radius: 1rem;
}
.about {
flex: 3;
background: var(--text-color);
color: var(--background-color);
font-weight: bold;
padding: .5rem;
}
.about a, .about a:visited {
color: var(--background-color);
text-decoration: underline dotted;
}
.text-muted {
opacity: .8;
font-weight: normal;
}
.bolder {
font-weight: bolder;
}

8
static/css/styles.css
View File

@ -10,14 +10,18 @@
src: url("/static/font/comicsans.ttf");
}
* {
box-sizing: border-box;
/* global style */
html {
margin: 0;
padding: 0;
color: var(--text-color);
font-family: "ComicSans", sans-serif;
}
* {
box-sizing: border-box;
}
/* i just cannot get this to look good on firefox... */
@supports not (-moz-appearance: none) {
* {

12
templates/home.html
View File

@ -5,15 +5,15 @@
{{ range $user := .Users }}
<div class="club-member">
<div class="avatar">
<div style="background-image: url('{{ $user.Avatar }}')"></div>
<img src="{{ $user.Avatar }}" alt="Profile picture for {{ $user.Username }}">
</div>
<div class="about">
<div>name: {{ $user.Username }}</div>
<div>pronouns: {{ $user.Pronouns }}</div>
<div>location: {{ $user.Location }}</div>
<div>www: <a href="{{ $user.Website }}">{{ $user.Website }}</a></div>
<div class="club-bio">{{ $user.Bio }}</div>
<div class="club-member-name">{{ $user.Username }}</div>
<div><span class="text-muted">pronouns:</span> <span class="bolder">{{ $user.Pronouns }}</span></div>
<div><span class="text-muted">location:</span> <span class="bolder">{{ $user.Location }}</span></div>
<div><span class="text-muted">www:</span> <span class="bolder"><a href="{{ $user.Website }}">{{ $user.Website }}</a></span></div>
</div>
<div class="club-bio">{{ $user.Bio }}</div>
</div>
{{ end }}
</div>