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

improve home page club member CSS (#14)
continuous-integration/drone/push Build is running Details 

whoops, didn't open an issue. oh well. made the landing page look better while maintaining the spirit and vibes of the project

Co-authored-by: Mark Snyder <20092441+mkwsnyder@users.noreply.github.com>
Reviewed-on: #14
This commit is contained in:
rain 2024-10-14 22:26:21 -04:00
parent 86aaf49138
commit 84eb502bcd
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 { .club-members {
display: flex; display: grid;
flex-direction: row; gap: 1rem;
flex-wrap: wrap; grid-template-columns: repeat(auto-fill, minmax(24rem, 1fr));
justify-content: left;
gap: 20px;
padding: 20px;
} }
.club-member { .club-member {
flex: 1;
background-color: var(--background-color-2); background-color: var(--background-color-2);
border: 1px solid var(--border-color); border: 1px solid var(--border-color);
padding: 10px; }
display: flex;
flex-direction: row; .club-member-name {
align-items: center; font-size: 1.5em;
justify-content: space-around; font-weight: bold;
gap: 10px;
max-width: 500px;
min-width: 300px;
line-break: anywhere;
} }
.club-bio { .club-bio {
white-space: pre-wrap; padding-inline: .5rem;
border-top: 1px solid var(--border-color); padding-block: .25rem;
} }
.avatar { .avatar {
flex: 1; float: left;
display: flex; width: 30%;
justify-content: center; margin: .5rem;
align-items: center; margin-bottom: -.4rem;
} }
.avatar div { .avatar > img {
background-position: center center; width: -moz-available;
background-repeat: no-repeat; width: -webkit-fill-available; /* we live in a society */
background-size: cover; border-radius: 1rem;
width: 120px;
height: 120px;
border-radius: 25%;
} }
.about { .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"); src: url("/static/font/comicsans.ttf");
} }
* { /* global style */
box-sizing: border-box; html {
margin: 0; margin: 0;
padding: 0; padding: 0;
color: var(--text-color); color: var(--text-color);
font-family: "ComicSans", sans-serif; font-family: "ComicSans", sans-serif;
} }
* {
box-sizing: border-box;
}
/* i just cannot get this to look good on firefox... */ /* i just cannot get this to look good on firefox... */
@supports not (-moz-appearance: none) { @supports not (-moz-appearance: none) {
* { * {

12
templates/home.html
View File

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