Starting to look spicy

DebuggyTeam · Apr 16, 2023 · e437551 · e437551
1 parent 1b42f17
commit e437551
Show file tree

Hide file tree

Showing 9 changed files with 124 additions and 80 deletions.
diff --git a/Gemfile.lock b/Gemfile.lock
@@ -58,7 +58,7 @@ GEM
     safe_yaml (1.0.5)
     sass-embedded (1.61.0-x64-mingw-ucrt)
       google-protobuf (~> 3.21)
-    sass-embedded (1.61.0-x86_64-linux-gnu)
+    sass-embedded (1.61.0-x86_64-linux)
       google-protobuf (~> 3.21)
     terminal-table (3.0.2)
       unicode-display_width (>= 1.1.1, < 3)

diff --git a/_data/members.yml b/_data/members.yml
@@ -86,7 +86,7 @@
 - name: Ampflower
   team: development
   role: debuggy dev
-  description:
+  description: description not set
 
   social:
     pronouns:

diff --git a/_data/navigation.yml b/_data/navigation.yml
@@ -1,14 +1,10 @@
 - name: Home
   link: /
+- name: Test
+  link: /
+- name: Test
+  link: /
+- name: Test
+  link: /
 - name: Code of Conduct
   link: /code-of-conduct
-- name: Discord
-  link: /discord
-- name: Yeef
-  link: /code-of-conduct
-- name: Yeef 2 - Electric Boogalo
-  link: /code-of-conduct
-- name: Yeef 3
-  link: /code-of-conduct
-- name: Yeef 4
-  link: /code-of-conduct
diff --git a/_sass/colors.scss b/_sass/colors.scss
@@ -1,9 +1,13 @@
 :root {
+    /* Common colors */
+    --debuggy-dark-blue: rgb(42, 48, 163);
+    --debuggy-blue: rgb(49, 56, 188);
+    --debuggy-light-blue: rgb(52, 59, 201);
+
     /* Main site colors */
     --background-color: hsl(0, 0%, 100%);
-    --navbar-color: rgb(224, 195, 195, .7);
-    --navbar-button-color: hsl(0, 13, 70);
-    --navbar-button-hover-color: hsl(0, 13, 80);
+    --navbar-color: rgb(49, 56, 188, .8);
+    --navbar-border-color: rgb(42, 48, 163, .8);
 
     /* Text and links */
     --link-color: hsl(240, 100%, 50%);

diff --git a/_sass/components.scss b/_sass/components.scss
@@ -43,4 +43,4 @@
             line-clamp: 5; 
     -webkit-box-orient: vertical;
 	overflow: hidden;
-}
+}
diff --git a/_sass/navigation.scss b/_sass/navigation.scss
@@ -4,8 +4,11 @@ nav {
 	margin: 0;
 	margin-top: -1;
 	padding: 16px;
-	list-style-type: none;
-	justify-content: center;
+
+	display: flex;
+	flex-direction: row;
+
+	border-bottom: 3pt solid var(--navbar-border-color);
 	background-color: var(--navbar-color);
 
 	li {
@@ -20,13 +23,19 @@ nav {
 		border-radius: 3px;
 		margin: 0px 10px;
 		transition: all 250ms ease 0s;
-		background-color: var(--navbar-button-color);
+		color: white;
+		background-color: var(--debuggy-dark-blue);
 		text-decoration: none;
 
 		&:hover {
 			box-shadow: rgba(69, 69, 70, 0.47) 0px 0px 12pt;
-			background-color: var(--navbar-button-hover-color);
+			color: white;
+			background-color: var(--debuggy-light-blue);
 		}
 	}
+
+	a:first-child {
+		margin-right: auto;
+	}
 }
 
diff --git a/assets/css/style.scss b/assets/css/style.scss
@@ -49,6 +49,29 @@ ul, ol {
 	text-align: left;
 }
 
+.home {
+
+	justify-content: center;
+	padding: 3rem;
+
+	.dev-team-text {
+		margin-top: 10%;
+	}
+
+}
+
+.home-card {
+
+	background-color: var(--debuggy-team);
+	border: 3px solid var(--debuggy-team-border);
+
+	max-width: 30rem;
+	margin-left: auto;
+	margin-right: auto;
+	border-radius: 8px;
+
+}
+
 .profiles {
 
 	h1 {
@@ -62,6 +85,12 @@ ul, ol {
 	}
 
 	.profile-card {
+		box-shadow: rgba(0, 0, 0, 0.58) 0px 0px 9pt;
+		border: 0px;
+		outline: 0px;
+		border-radius: 8px;
+		margin: 0px 10px;
+
 		min-width: 250px;
 		max-width: 275px;
 		min-height: 325px;
@@ -105,13 +134,10 @@ ul, ol {
 }
 
 .profiles.dev-team {
-	display: flex;
-	flex-wrap: wrap;
-	flex-basis: 250px;
-	justify-content: center;
-	align-content: top;
-	flex-shrink: 0;
-	flex-grow: 1;
+    display: flex;
+    flex-direction: row;
+    flex-wrap: wrap;
+    justify-content: center;
 
 	a {
 		color: black;
@@ -125,7 +151,8 @@ ul, ol {
 		background-color: var(--debuggy-team);
 		border: 3px solid var(--debuggy-team-border);
 
-		margin: 20px 40px 20px 40px;
+		margin: 5rem 0.5rem 0;
+		height: 80%;
 	}
 
 	.profile-picture {

diff --git a/discord.html b/discord.html
@@ -9,4 +9,4 @@ <h1>About Debuggycord</h1>
     <br>Click the button below to join Debuggycord:
 </p>
 
-<a href="{{site.data.invite.link}}"><button class="debuggycord">Click to Join</button></a>
+<a href="{{site.data.invite.link}}"><button class="debuggycord">Click to Join</button></a>
diff --git a/index.html b/index.html
@@ -5,61 +5,69 @@
 
 <script src="https://unpkg.com/feather-icons"></script>
 
-<h1>The Debuggy Team</h1>
-<p>We are a group of people who like making Minecraft mods.</p>
+<div class="home">
+	<div class="home-card">
+		<h1>The Debuggy Team</h1>
+		<p>We are a group of people who like making Minecraft mods.</p>
+	</div>
 
-<h2>Debuggy Dev Team</h2>
-<p>Everyone listed here is involved with Debuggy projects code-wise.</p>
-<div class="profiles dev-team">
-    {% for card in site.data.members %}
-    <i>
-        <div class="profile-card">
-            {% if card.social.pfp-override %}
-            <img class="profile-picture" src="{{card.social.pfp-override}}" alt="{{card.name}}'s profile picture">
-            {% else %}
-            <img class="profile-picture" src="https://avatars.githubusercontent.com/{{card.social.github}}?size=256" alt="{{card.name}}'s profile picture">
-            {% endif %}
-
-            <h1>{{card.name}}</h1>
-            {% if card.social.pronouns %}
-            <p class="pronouns">{{card.social.pronouns}}</p>
-            {% endif %}
-
-
-            {% if card.is-plural-system==true %}
-            <p class="plurality">Plural System</p>
-            <div class="plural-avatars">
-                {% if card.is-system-memberlist-redacted==true %}
-                <div class="redacted-heart tooltip"><i data-feather="heart"></i>
-                    <span class="redacted-info tooltip-text">Memberlist redacted by request.</span>
-                </div>
-                {% else %}
-                {% for member in card.plural-system-members %}
-                <i><img src="{{card.social.profile-picture-url}}"></i>
-                {% endfor %}
-                {% endif %}
-            </div>
-            {% endif %}
+	<div class="dev-team-text">
+		<h2>Debuggy Dev Team</h2>
+		<p>Everyone listed here is involved with Debuggy projects code-wise.</p>
+	</div>
 
-            <p class="role">{{card.role}}</p>
-            <p class="description line-clamp">{{card.description}}</p>
-            {% if card.social.github %}
-            <div class="socials">
-                <a href="https://github.com/{{card.social.github}}" title="GitHub"><i data-feather="globe">{{card.social.github}}</i></a>
-            </div>
-            {% endif %}
-            {% if card.social.links %}
-            {% for social-link in card.social.links %}
-            <div class="socials">
-                <a href="{{social-link[1]}}" title="{{social-link[0]}}"><i data-feather="globe">{{social-link[0]}}</i></a>
-            </div>
-            {% endfor %}
-            {% endif %}
-        </div>
-    </i>
-    {% endfor %}
+	<div class="profiles dev-team">
+		{% for card in site.data.members %}
+		<i>
+			<div class="profile-card">
+				{% if card.social.pfp-override %}
+				<img class="profile-picture" src="{{card.social.pfp-override}}" alt="{{card.name}}'s profile picture">
+				{% else %}
+				<img class="profile-picture" src="https://avatars.githubusercontent.com/{{card.social.github}}?size=256" alt="{{card.name}}'s profile picture">
+				{% endif %}
+
+				<h1>{{card.name}}</h1>
+				{% if card.social.pronouns %}
+				<p class="pronouns">{{card.social.pronouns}}</p>
+				{% endif %}
+
+
+				{% if card.is-plural-system==true %}
+				<p class="plurality">Plural System</p>
+				<div class="plural-avatars">
+					{% if card.is-system-memberlist-redacted==true %}
+					<div class="redacted-heart tooltip"><i data-feather="heart"></i>
+						<span class="redacted-info tooltip-text">Memberlist redacted by request.</span>
+					</div>
+					{% else %}
+					{% for member in card.plural-system-members %}
+					<i><img src="{{card.social.profile-picture-url}}"></i>
+					{% endfor %}
+					{% endif %}
+				</div>
+				{% endif %}
+
+				<p class="role">{{card.role}}</p>
+				<p class="description line-clamp">{{card.description}}</p>
+				{% if card.social.github %}
+				<div class="socials">
+					<a href="https://github.com/{{card.social.github}}" title="GitHub"><i data-feather="globe">{{card.social.github}}</i></a>
+				</div>
+				{% endif %}
+				{% if card.social.links %}
+				{% for social-link in card.social.links %}
+				<div class="socials">
+					<a href="{{social-link[1]}}" title="{{social-link[0]}}"><i data-feather="globe">{{social-link[0]}}</i></a>
+				</div>
+				{% endfor %}
+				{% endif %}
+			</div>
+		</i>
+		{% endfor %}
+	</div>
 </div>
 
+
 <!--
 <h2>Debuggy Community Team</h2>
 <p>Everyone listed here is involved with managing and moderating the Debuggy community spaces.</p>