Responsive video container not quite working the way it should.

3 files changed, 113 insertions, 51 deletions

diff --git a/pydis_site/static/css/base/base.css b/pydis_site/static/css/base/base.css
index f9c557d5..969511f4 100644
--- a/pydis_site/static/css/base/base.css
+++ b/pydis_site/static/css/base/base.css
@@ -12,6 +12,12 @@ main.site-content {
   flex: 1;
 }
 
+div.card.has-equal-height {
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+}
+
 #django-logo {
   padding-bottom: 2px;
   background: url(https://static.djangoproject.com/img/logos/django-logo-negative.png) no-repeat center;
diff --git a/pydis_site/static/css/home/index.css b/pydis_site/static/css/home/index.css
index 9f060562..4f1a25ab 100644
--- a/pydis_site/static/css/home/index.css
+++ b/pydis_site/static/css/home/index.css
@@ -48,9 +48,9 @@
 
 .video-container {
     position: relative;
-    padding-bottom: 285px;
-    padding-top: 30px;
-    height: 0;
+    padding-top: 56.25%;
+    margin-left: 10px;
+    margin-right: 10px;
     overflow: hidden;
 }
 
@@ -60,8 +60,37 @@
     position: absolute;
     top: 0;
     left: 0;
+    right: 0;
     width: 100%;
     height: 100%;
-    max-width: 560px;
+    border: 0;
     max-height: 315px;
+    max-width: 560px;
+}
+
+span.repo-language-dot {
+    border-radius: 50%;
+    height: 12px;
+    width: 12px;
+    top: 1px;
+    display: inline-block;
+    position: relative;
+}
+
+span.repo-language-dot.python {
+    background-color: #3572A5;
+}
+
+span.repo-language-dot.html {
+    background-color: #e34c26;
+}
+
+span.repo-language-dot.css {
+    background-color: #563d7c;
+}
+
+
+
+#repo-footer-item {
+    margin-left: 1.2rem;
 }
diff --git a/pydis_site/templates/home/index.html b/pydis_site/templates/home/index.html
index 88d557e1..9f9fe93e 100644
--- a/pydis_site/templates/home/index.html
+++ b/pydis_site/templates/home/index.html
@@ -11,9 +11,8 @@
 
   <section class="section">
 
-    <!-- About us -->
+    <!-- Who are we? -->
     <div class="container is-spaced">
-
       <h1 class="is-size-1">Who are we?</h1>
       <br>
       <div class="columns">
@@ -39,8 +38,10 @@
             complex project, we've got someone who can help you if you get stuck.
           </p>
         </div>
-        <div class="column is-half is-first has-text-centered video-container">
-          <iframe width="560" height="315" src="https://www.youtube.com/embed/DIBXg8Qh7bA" frameborder="0"
+
+        <!-- Intro video -->
+        <div class="column is-half video-container">
+          <iframe src="https://www.youtube.com/embed/DIBXg8Qh7bA" frameborder="0"
                   allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"
                   allowfullscreen></iframe>
         </div>
@@ -49,68 +50,94 @@
       <!-- Projects -->
       <h1 class="is-size-1">Projects</h1>
       <br>
-      <div class="columns">
+      <div class="columns is-multiline">
 
         <!-- Site -->
-        <div class="column is-one-quarter">
-          <div class="card">
-            <header class="card-header">
-              <p class="card-header-title">
-                pythondiscord/site
-              </p>
-            </header>
+        <div class="column is-one-third">
+          <div class="card has-equal-height">
             <div class="card-content">
-              <div class="content">
-                Some stuff goes in here. tags? dynamic info?
-              </div>
+              <i class="fab fa-github"></i> <a href="pythondiscord.com"> python-discord/site</a>
+              <br><br>
+              <em>Source code for our website</em>
+              <br><br>
+              </span><span class="repo-language-dot python"></span> Python
+              <span id="repo-footer-item"><i class="fas fa-star"></i> 566</span>
+              <span id="repo-footer-item"><i class="fas fa-code-branch"></i> 27</span>
             </div>
           </div>
         </div>
 
-        <!-- SeasonalBot -->
-        <div class="column is-one-quarter">
-          <div class="card">
-            <header class="card-header">
-              <p class="card-header-title">
-                pythondiscord/seasonalbot
-              </p>
-            </header>
+        <!-- Bot -->
+        <div class="column is-one-third">
+          <div class="card has-equal-height">
             <div class="card-content">
-              <div class="content">
-                Some stuff goes in here. tags? dynamic info? github stars?
-              </div>
+              <i class="fab fa-github"></i> <a href="pythondiscord.com"> python-discord/bot</a>
+              <br><br>
+              <em>Source code for our Discord bot</em>
+              <br><br>
+              </span><span class="repo-language-dot python"></span> Python
+              <span id="repo-footer-item"><i class="fas fa-star"></i> 566</span>
+              <span id="repo-footer-item"><i class="fas fa-code-branch"></i> 27</span>
             </div>
           </div>
         </div>
 
-        <!-- SeasonalBot -->
-        <div class="column is-one-quarter">
-          <div class="card">
-            <header class="card-header">
-              <p class="card-header-title">
-                pythondiscord/seasonalbot
-              </p>
-            </header>
+        <!-- Snekbox -->
+        <div class="column is-one-third">
+          <div class="card has-equal-height">
             <div class="card-content">
-              <div class="content">
-                Some stuff goes in here. tags? dynamic info? github stars?
-              </div>
+              <i class="fab fa-github"></i> <a href="pythondiscord.com"> python-discord/snekbox</a>
+              <br><br>
+              <em>Easy, safe evaluation of arbitrary Python code</em>
+              <br><br>
+              </span><span class="repo-language-dot python"></span> Python
+              <span id="repo-footer-item"><i class="fas fa-star"></i> 566</span>
+              <span id="repo-footer-item"><i class="fas fa-code-branch"></i> 27</span>
             </div>
           </div>
         </div>
 
         <!-- SeasonalBot -->
-        <div class="column is-one-quarter">
-          <div class="card">
-            <header class="card-header">
-              <p class="card-header-title">
-                pythondiscord/seasonalbot
-              </p>
-            </header>
+        <div class="column is-one-third">
+          <div class="card has-equal-height">
+            <div class="card-content">
+              <i class="fab fa-github"></i> <a href="pythondiscord.com"> python-discord/seasonalbot</a>
+              <br><br>
+              <em>A Discord bot that changes with the seasons. Meant as a beginner-friendly learning project.</em>
+              <br><br>
+              </span><span class="repo-language-dot python"></span> Python
+              <span id="repo-footer-item"><i class="fas fa-star"></i> 566</span>
+              <span id="repo-footer-item"><i class="fas fa-code-branch"></i> 27</span>
+            </div>
+          </div>
+        </div>
+
+        <!-- django-simple-bulma -->
+        <div class="column is-one-third">
+          <div class="card has-equal-height">
+            <div class="card-content">
+              <i class="fab fa-github"></i> <a href="pythondiscord.com"> python-discord/django-simple-bulma</a>
+              <br><br>
+              <em>Django application to add the Bulma CSS framework and its extensions</em>
+              <br><br>
+              </span><span class="repo-language-dot css"></span> CSS
+              <span id="repo-footer-item"><i class="fas fa-star"></i> 566</span>
+              <span id="repo-footer-item"><i class="fas fa-code-branch"></i> 27</span>
+            </div>
+          </div>
+        </div>
+
+        <!-- django-crispy-bulma -->
+        <div class="column is-one-third">
+          <div class="card has-equal-height">
             <div class="card-content">
-              <div class="content">
-                Some stuff goes in here. tags? dynamic info? github stars?
-              </div>
+              <i class="fab fa-github"></i> <a href="pythondiscord.com"> python-discord/django-crispy-bulma</a>
+              <br><br>
+              <em>Django application to add 'django-crispy-forms' layout objects for Bulma.io</em>
+              <br><br>
+              </span><span class="repo-language-dot html"></span> HTML
+              <span id="repo-footer-item"><i class="fas fa-star"></i> 566</span>
+              <span id="repo-footer-item"><i class="fas fa-code-branch"></i> 27</span>
             </div>
           </div>
         </div>