profiles (#7)

Reviewed-on: https://git.hatecomputers.club/hatecomputers/hatecomputers.club/pulls/7
Co-authored-by: Elizabeth <elizabeth@simponic.xyz>
Co-committed-by: Elizabeth <elizabeth@simponic.xyz>

5 files changed, 92 insertions, 7 deletions

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;
+}