From 1d75bf7489527925217bd5611ba7910c0ffe077c Mon Sep 17 00:00:00 2001 From: Elizabeth Date: Tue, 9 Apr 2024 18:39:14 -0400 Subject: profiles (#7) Reviewed-on: https://git.hatecomputers.club/hatecomputers/hatecomputers.club/pulls/7 Co-authored-by: Elizabeth Co-committed-by: Elizabeth --- static/css/club.css | 48 ++++++++++++++++++++++++++++++++++++ static/css/colors.css | 11 ++++++++- static/css/form.css | 3 +++ static/css/guestbook.css | 1 + static/css/styles.css | 36 ++++++++++++++++++++++----- static/img/default-avatar.png | Bin 0 -> 105755 bytes static/js/components/infoBanners.js | 6 +++++ static/js/script.js | 1 + 8 files changed, 99 insertions(+), 7 deletions(-) create mode 100644 static/css/club.css create mode 100644 static/img/default-avatar.png create mode 100644 static/js/components/infoBanners.js (limited to 'static') diff --git a/static/css/club.css b/static/css/club.css new file mode 100644 index 0000000..747f2d0 --- /dev/null +++ b/static/css/club.css @@ -0,0 +1,48 @@ +.club-members { + display: flex; + flex-direction: row; + flex-wrap: wrap; + justify-content: left; + gap: 20px; + padding: 20px; +} + +.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: 600px; + min-width: 400px; + line-break: anywhere; +} + +.club-bio { + white-space: pre-wrap; + border-top: 1px solid var(--border-color); +} + +.avatar { + flex: 1; + display: flex; + justify-content: center; + align-items: center; +} + +.avatar div { + background-position: center center; + background-repeat: no-repeat; + background-size: cover; + width: 120px; + height: 120px; + border-radius: 25%; +} + +.about { + flex: 2; +} diff --git a/static/css/colors.css b/static/css/colors.css index c68bf8e..46357d9 100644 --- a/static/css/colors.css +++ b/static/css/colors.css @@ -1,7 +1,8 @@ :root { --background-color-light: #f4e8e9; - --background-color-light-2: #f7f7f7; + --background-color-light-2: #f5e6f3; --text-color-light: #333; + --confirm-color-light: #91d9bb; --link-color-light: #d291bc; --container-bg-light: #fff7f87a; --border-color-light: #692fcc; @@ -10,6 +11,7 @@ --background-color-dark: #333; --background-color-dark-2: #2c2c2c; --text-color-dark: #f4e8e9; + --confirm-color-dark: #4d8f73; --link-color-dark: #b86b77; --container-bg-dark: #424242ea; --border-color-dark: #956ade; @@ -24,6 +26,7 @@ --container-bg: var(--container-bg-dark); --border-color: var(--border-color-dark); --error-color: var(--error-color-dark); + --confirm-color: var(--confirm-color-dark); } [data-theme="LIGHT"] { @@ -34,9 +37,15 @@ --container-bg: var(--container-bg-light); --border-color: var(--border-color-light); --error-color: var(--error-color-light); + --confirm-color: var(--confirm-color-light); } .error { background-color: var(--error-color); padding: 1rem; } + +.success { + background-color: var(--confirm-color); + padding: 1rem; +} diff --git a/static/css/form.css b/static/css/form.css index a5dc358..7ccd8db 100644 --- a/static/css/form.css +++ b/static/css/form.css @@ -36,4 +36,7 @@ textarea { margin: 0 0 1em; border: 1px solid var(--border-color); background: var(--container-bg); + + resize: vertical; + min-height: 100px; } diff --git a/static/css/guestbook.css b/static/css/guestbook.css index 0fb7a16..6241717 100644 --- a/static/css/guestbook.css +++ b/static/css/guestbook.css @@ -3,6 +3,7 @@ border: 1px solid var(--border-color); padding: 10px; + max-width: 700px; } .entry-name { diff --git a/static/css/styles.css b/static/css/styles.css index ba58018..886052e 100644 --- a/static/css/styles.css +++ b/static/css/styles.css @@ -3,6 +3,7 @@ @import "/static/css/table.css"; @import "/static/css/form.css"; @import "/static/css/guestbook.css"; +@import "/static/css/club.css"; @font-face { font-family: "ComicSans"; @@ -22,15 +23,27 @@ } @-webkit-keyframes cursor { - 0% {cursor: url("/static/img/cursor-2.png"), auto;} - 50% {cursor: url("/static/img/cursor-1.png"), auto;} - 100% {cursor: url("/static/img/cursor-2.png"), auto;} + 0% { + cursor: url("/static/img/cursor-2.png"), auto; + } + 50% { + cursor: url("/static/img/cursor-1.png"), auto; + } + 100% { + cursor: url("/static/img/cursor-2.png"), auto; + } } @keyframes cursor { - 0% {cursor: url("/static/img/cursor-2.png"), auto;} - 50% {cursor: url("/static/img/cursor-1.png"), auto;} - 100% {cursor: url("/static/img/cursor-2.png"), auto;} + 0% { + cursor: url("/static/img/cursor-2.png"), auto; + } + 50% { + cursor: url("/static/img/cursor-1.png"), auto; + } + 100% { + cursor: url("/static/img/cursor-2.png"), auto; + } } body { @@ -70,3 +83,14 @@ hr { max-width: 900px; gap: 10px 10px; } + +.info { + margin-bottom: 1rem; + max-width: 600px; + + transition: opacity 0.3s; +} + +.info:hover { + opacity: 0.8; +} diff --git a/static/img/default-avatar.png b/static/img/default-avatar.png new file mode 100644 index 0000000..66a38c2 Binary files /dev/null and b/static/img/default-avatar.png differ diff --git a/static/js/components/infoBanners.js b/static/js/components/infoBanners.js new file mode 100644 index 0000000..6a19864 --- /dev/null +++ b/static/js/components/infoBanners.js @@ -0,0 +1,6 @@ +const infoBanners = document.querySelectorAll(".info"); +Array.from(infoBanners).forEach((infoBanner) => { + infoBanner.addEventListener("click", () => { + infoBanner.remove(); + }); +}); diff --git a/static/js/script.js b/static/js/script.js index 56233e3..b5e6249 100644 --- a/static/js/script.js +++ b/static/js/script.js @@ -1,5 +1,6 @@ const scripts = [ "/static/js/components/themeSwitcher.js", "/static/js/components/formatDate.js", + "/static/js/components/infoBanners.js", ]; requirejs(scripts); -- cgit v1.2.3-70-g09d2