Skip to content

Commit

Permalink
CSS and template updates (#68)
Browse files Browse the repository at this point in the history 
- More reasonable light/dark schemes
- Make bio field look like an actual textarea
- Drop sub-header class in favor of menu-item

Change-Id: I202e76d14bee84e6efd094145c2df2ad2c43dcc1

Signed-off-by: Ian Meyer <[email protected]>
  • Loading branch information
@imeyer
imeyer authored Oct 15, 2024
1 parent 3edffae commit 88f6842
Show file tree
Hide file tree
Showing 3 changed files with 90 additions and 48 deletions.
128 changes: 85 additions & 43 deletions static/style.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,47 +5,78 @@
--menu-border: 0.5px solid #454545;

/* Light mode variables */
--background-color-light: #f0f4f8;
--content-bg-light: #f9f9f9;
--even-row-color-light: #8C867D;
--odd-row-color-light: #CCB287;
--form-bg-light: #ddd;
--header-color-light: #efefef;
--primary-color-light: #1e6091;
--text-color-light: #333;
--text-color-secondary-light: #555;
--threadpost-bg-light: #fff;
--menu-item-bg-light: #C7CACD;
--button-text-color-light: #fff;
--background-color-light: #e5e5e5;
--button-text-color-light: #000000;
--content-bg-light: #f8f8f8;
--even-row-color-light: #f1f1f1;
--form-bg-light: #f8f8f8;
--header-color-light: #e5e5e5;
--link-color-light: #303030;
--menu-admin-item-bg-light: #e38c8c;
--menu-admin-text-color-light: #e9e9e9;
--menu-item-bg-light: #ffffff;
--menu-text-color-light: #323232;
--odd-row-color-light: #f0f0f4;
--primary-color-light: #ececec;
--text-color-light: #212121;
--text-color-secondary-light: #383838;
--threadpost-bg-light: #f8f8f8;


/* Dark mode variables */
--background-color-dark: #1a2634;
--button-text-color-dark: #222;
--content-bg-dark: #2c2c2c;
--even-row-color-dark: #444;
--odd-row-color-dark: #333;
--form-bg-dark: #333;
--header-color-dark: #2c2c2c;
--primary-color-dark: #b5deff;
--menu-admin-item-bg-dark: #c23030;
--menu-admin-text-color-dark: #ffffff;
--menu-item-bg-dark: #24456c;
--menu-text-color-dark: #e3e3e3;
--odd-row-color-dark: #333;
--primary-color-dark: #314c63;
--text-color-dark: #e0e0e0;
--text-color-secondary-dark: #b0b0b0;
--threadpost-bg-dark: #333;
--menu-item-bg-dark: #6B84A2;
--button-text-color-dark: #222;

/* Default to light mode */
--background-color: var(--background-color-light);
--button-text-color: var(--button-text-color-light);
--content-bg: var(--content-bg-light);
--even-row-color: var(--even-row-color-light);
--odd-row-color: var(--odd-row-color-light);
--form-bg: var(--form-bg-light);
--header-color: var(--header-color-light);
--link-color: var(--link-color-light);
--menu-admin-item-bg: var(--menu-admin-item-bg-light);
--menu-admin-text-color: var(--menu-admin-text-color-light);
--menu-item-bg: var(--menu-item-bg-light);
--menu-text-color: var(--menu-text-color-light);
--odd-row-color: var(--odd-row-color-light);
--primary-color: var(--primary-color-light);
--text-color: var(--text-color-light);
--text-color-secondary: var(--text-color-secondary-light);
--text-color: var(--text-color-light);
--threadpost-bg: var(--threadpost-bg-light);
--menu-item-bg: var(--menu-item-bg-light);
--button-text-color: var(--button-text-color-light);
}

@media (prefers-color-scheme: dark) {
:root {
--background-color: var(--background-color-dark);
--content-bg: var(--content-bg-dark);
--even-row-color: var(--even-row-color-dark);
--odd-row-color: var(--odd-row-color-dark);
--form-bg: var(--form-bg-dark);
--header-color: var(--header-color-dark);
--primary-color: var(--primary-color-dark);
--text-color: var(--text-color-dark);
--text-color-secondary: var(--text-color-secondary-dark);
--threadpost-bg: var(--threadpost-bg-dark);
--menu-admin-item-bg: var(--menu-admin-item-bg-dark);
--menu-item-bg: var(--menu-item-bg-dark);
--button-text-color: var(--button-text-color-dark);
--link-color: var(--link-color-dark);
--menu-text-color: var(--menu-text-color-dark);
}
}

/* Base styles */
Expand All @@ -59,7 +90,7 @@ body {
}

a {
color: var(--primary-color);
color: var(--link-color);
text-decoration: none;
}

Expand Down Expand Up @@ -153,7 +184,7 @@ tbody>tr:nth-child(odd) {

.edit-profile button,
.form-group button {
background-color: var(--primary-color);
background-color: var(--menu-item-bg);
border: none;
border-radius: 0.625rem;
color: var(--button-text-color);
Expand Down Expand Up @@ -322,22 +353,41 @@ hr {
margin-bottom: 1.2rem;
}

.sub-header {
.menu-item {
display: block;
width: fit-content;
border-radius: 0.625rem 0.625rem 0 0;
border: var(--border);
border-bottom: 0px;
margin-right: 0.625rem;
padding: 5px 10px 10px 10px;
padding: 0.39rem;
color: var(--menu-text-color);
background-color: var(--menu-item-bg)
}

.sub-header.admin {
.menu-item.admin:hover {
color: var(--menu-admin-text-color);
background-color: var(--menu-admin-item-bg);
}

.menu-item.admin {
margin-left: 1.5rem;
color: var(--menu-admin-text-color);
background-color: var(--menu-admin-item-bg);
border-radius: 0.625rem 0.625rem 0 0;
}

.menu-item a {
color: var(--menu-text-color);
text-decoration: none;
font-weight: 400;
}

.menu-item.admin a {
color: var(--menu-link-color);
font-weight: 600;
}

.board-title {
font-size: 1.3em;
font-weight: 500;
Expand All @@ -353,10 +403,18 @@ hr {
}

.header,
.sub-header {
.menu-item {
font-size: 1.1em;
}

.threadpost-body pre {
font-size: 0.9rem;
background-color: #222;
padding: 0.7rem;
border-radius: 0.625rem;
width: max-content;
}

/* SVG styles */
svg a {
cursor: pointer;
Expand Down Expand Up @@ -409,23 +467,7 @@ svg a:active {



/* Media Queries */
@media (prefers-color-scheme: dark) {
:root {
--background-color: var(--background-color-dark);
--content-bg: var(--content-bg-dark);
--even-row-color: var(--even-row-color-dark);
--odd-row-color: var(--odd-row-color-dark);
--form-bg: var(--form-bg-dark);
--header-color: var(--header-color-dark);
--primary-color: var(--primary-color-dark);
--text-color: var(--text-color-dark);
--text-color-secondary: var(--text-color-secondary-dark);
--threadpost-bg: var(--threadpost-bg-dark);
--menu-item-bg: var(--menu-item-bg-dark);
--button-text-color: var(--button-text-color-dark);
}
}


@media (max-width: 48rem) {

Expand Down
2 changes: 1 addition & 1 deletion tmpl/edit-profile.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -27,7 +27,7 @@ <h3>Editing profile for {{ .User.Email }}</h3>
</div>
<div class="form-group">
<label for="Bio">Bio</label>
<textarea id="bio" name="bio">{{ .Member.Bio.String }}</textarea>
<textarea id="bio" name="bio" rows="10">{{ .Member.Bio.String }}</textarea>
</div>
<div class="form-group">
<button type="submit">Update Profile</button>
Expand Down
8 changes: 4 additions & 4 deletions tmpl/menu.html
View file
Original file line number Diff line number Diff line change
@@ -1,10 +1,10 @@
{{ define "menu" }}
<span class="menu">
<span class="sub-header"><a href="/">index</a></span>
<span class="sub-header"><a href="/thread/new">new thread</a></span>
<span class="sub-header"><a href="/member/edit">edit profile</a></span>
<span class="menu-item"><a href="/">index</a></span>
<span class="menu-item"><a href="/thread/new">new thread</a></span>
<span class="menu-item"><a href="/member/edit">edit profile</a></span>
{{ if .User.IsAdmin }}
<span class="sub-header admin"><a href="/admin">admin</a></span>
<span class="menu-item admin"><a href="/admin">admin</a></span>
{{ end }}
</span>
<hr />
Expand Down

0 comments on commit 88f6842

Please sign in to comment.