Merge pull request #415 from python-discord/frontpage-100k

Frontpage design update - Stage 1 - 100K edition.

1 files changed, 48 insertions, 15 deletions

diff --git a/pydis_site/static/css/base/base.css b/pydis_site/static/css/base/base.css
index dc7c504d..b53ff5d4 100644
--- a/pydis_site/static/css/base/base.css
+++ b/pydis_site/static/css/base/base.css
@@ -12,42 +12,61 @@ main.site-content {
     flex: 1;
 }
 
-div.card.has-equal-height {
+.card.has-equal-height {
     height: 100%;
     display: flex;
     flex-direction: column;
 }
 
-.navbar-item.is-fullsize {
-    padding: 0;
+.navbar {
+    padding-right: 0.8em;
 }
 
-.navbar-item.is-fullsize img {
-    max-height: 4.75rem;
+.navbar-item .navbar-link {
+    padding-left: 1.5em;
+    padding-right: 2.5em;
+}
+
+.navbar-link:not(.is-arrowless)::after {
+    right: 1.125em;
+    margin-top: -0.455em;
 }
 
 .navbar-item.has-no-highlight:hover {
     background-color: transparent;
 }
 
-.navbar-item.has-left-margin-1 {
-    margin-left: 1rem;
+#navbar-banner {
+    background-color: transparent;
 }
 
-.navbar-item.has-left-margin-2 {
-    margin-left: 2rem;
+#navbar-banner img {
+    max-height: 3rem;
 }
 
-.navbar-item.has-left-margin-3 {
-    margin-left: 3rem;
+#discord-btn a {
+    color: transparent;
+    background-image: url(../../images/navbar/discord.svg);
+    background-size: 200%;
+    background-position: 100% 50%;
+    background-repeat: no-repeat;
+    padding-left: 2.5rem;
+    padding-right: 2.5rem;
+    background-color: #697ec4ff;
+    margin-left: 0.5rem;
+    transition: all 0.2s cubic-bezier(.25,.8,.25,1);
+    overflow: hidden;
 }
 
-#navbar-banner {
-    background-color: transparent;
+#discord-btn:hover a {
+    box-shadow: 0 1px 4px rgba(0,0,0,0.16), 0 1px 6px rgba(0,0,0,0.23);
+    /*transform: scale(1.03) translate3d(0,0,0);*/
+    background-size: 200%;
+    background-position: 1% 50%;
 }
 
-#navbar-banner img {
-    max-height: 3rem;
+#discord-btn:hover {
+    background-color: transparent;
 }
 
 #django-logo {
@@ -111,3 +130,17 @@ button.is-size-navbar-menu, a.is-size-navbar-menu {
 .codehilite-wrap {
     margin-bottom: 1em;
 }
+
+/* 16:9 aspect ratio fixing */
+.force-aspect-container {
+    position: relative;
+    padding-bottom: 56.25%;
+}
+
+.force-aspect-content {
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    position: absolute;
+}