From 0debbceebc7cad5212bae56e0250e885896a3035 Mon Sep 17 00:00:00 2001 From: scragly <29337040+scragly@users.noreply.github.com> Date: Fri, 23 Oct 2020 21:56:36 +1000 Subject: Use sections, remove unused CSS, improve repo cards. --- pydis_site/static/css/base/base.css | 16 ++- pydis_site/static/css/home/index.css | 248 +++++++++++++++++++---------------- pydis_site/templates/home/index.html | 166 ++++++++++++++--------- 3 files changed, 255 insertions(+), 175 deletions(-) diff --git a/pydis_site/static/css/base/base.css b/pydis_site/static/css/base/base.css index 42bbc8cf..306a3def 100644 --- a/pydis_site/static/css/base/base.css +++ b/pydis_site/static/css/base/base.css @@ -12,7 +12,7 @@ main.site-content { flex: 1; } -div.card.has-equal-height { +.card.has-equal-height { height: 100%; display: flex; flex-direction: column; @@ -117,3 +117,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; +} diff --git a/pydis_site/static/css/home/index.css b/pydis_site/static/css/home/index.css index cb79a6e6..58ca8888 100644 --- a/pydis_site/static/css/home/index.css +++ b/pydis_site/static/css/home/index.css @@ -1,146 +1,86 @@ -.discord-banner { - border-radius: 0.5rem; +h1 { + padding-bottom: 0.5em; } -.hero-image { - width: 20rem; - margin: auto; -} - -.hero-body { - padding-top: 1rem; - padding-bottom: 1rem; -} - -.section-sp img { - height: 5rem; - margin-right: 2rem; -} +/* Mobile-only notice banner */ -.video-container iframe, -.video-container object, -.video-container embed { - width: 100%; - height: calc(92vw * 0.5625); - margin: 8px auto auto auto; +#mobile-notice { + margin: 5px; + margin-bottom: -10px!important; } -div.card.github-card { - box-shadow: none; - border: #d1d5da 1px solid; - border-radius: 3px; -} +/* Wave hero */ -div.repo-headline { - font-size: 1.25rem; - margin-bottom: 8px; -} - -span.repo-language-dot { - border-radius: 50%; - height: 12px; - width: 12px; - top: 1px; - display: inline-block; +#wave-hero { position: relative; + background-color: #7289DA; + color: #fff; + height: 32vw; + min-height: 270px; + max-height: 500px; + overflow-x: hidden; + width: 100%; + padding: 0; } -span.repo-language-dot.python { - background-color: #3572A5; -} - -span.repo-language-dot.html { - background-color: #e34c26; -} - -span.repo-language-dot.css { - background-color: #563d7c; -} - -span.repo-language-dot.javascript { - background-color: #f1e05a; -} - -#repo-footer-item { - margin-left: 1.2rem; +#wave-hero .container { + z-index: 4; /* keep hero contents above wave animations */ } -#sponsors-hero { - padding-top: 2rem; - padding-bottom: 3rem; +@media screen and (min-width: 769px) and (max-width: 1023px) { + #wave-hero .columns { + margin: 0 1em 0 1em; /* Stop cards touching canvas edges in table-view */ + } } -.welcome-video { +#wave-hero iframe { box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23); transition: all 0.3s cubic-bezier(.25,.8,.25,1); border-radius: 10px; margin-top: 1em; + border: none; } -.welcome-video:hover { +#wave-hero iframe:hover { box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22); } -.aspect-wrapper { - position: relative; - padding-bottom: 56.25%; -} -.aspect-content { - top: 0; - left: 0; - width: 100%; - height: 100%; - position: absolute; -} - -.hero-card img{ +#wave-hero-right img{ border-radius: 10px; box-shadow: 0 1px 6px rgba(0,0,0,0.16), 0 1px 6px rgba(0,0,0,0.23); margin-top: 1em; + text-align: right; } -.main-head { - position: relative; - background-color: #7289DA; - color: #fff; - height: 32vw; - min-height: 270px; - max-height: 500px; - overflow-x: hidden; - width: 100%; - padding: 0; -} - -.bottom-wave { - background: url(../../images/waves/wave_white.svg) repeat-x; +#wave-hero .wave { + background: url(../../images/waves/wave_dark.svg) repeat-x; position: absolute; bottom: 0; width: 6400px; - height: 26px; - animation: wave 50s cubic-bezier( 0.36, 0.45, 0.63, 0.53) infinite; - transform: translate3d(0, 0, 0); - z-index: 3; + animation-name: wave; + animation-timing-function: cubic-bezier(.36,.45,.63,.53); + animation-iteration-count: infinite; + transform: translate3d(0,0,0); /* Trigger 3D acceleration for smoother animation */ } -.above-waves { - z-index: 4; +#front-wave { + animation-duration: 60s; + animation-delay: -50s; + opacity: 0.5; + height: 178px; } -.wave { - background: url(../../images/waves/wave_dark.svg) repeat-x; - position: absolute; - bottom: 0; - width: 6400px; +#back-wave { + animation-duration: 65s; height: 198px; - animation: wave 65s cubic-bezier( 0.36, 0.45, 0.63, 0.53) infinite; - transform: translate3d(0, 0, 0); } -.wave:nth-of-type(2) { - animation: wave 60s cubic-bezier( 0.36, 0.45, 0.63, 0.53) -.125s infinite, swell 60s ease -1.25s infinite; - opacity: 0.5; - height: 178px; - animation-delay: -50s; +#bottom-wave { + animation-duration: 50s; + animation-delay: -10s; + background: url(../../images/waves/wave_white.svg) repeat-x !important; + height: 26px; + z-index: 3; } @keyframes wave { @@ -152,18 +92,21 @@ span.repo-language-dot.javascript { } } -.showcase { +/* Showcase */ + +#showcase { margin: 0 1em; } -.mini-timeline { +#showcase .mini-timeline { height: 3px; position: relative; margin: 50px 0 50px 0; background: linear-gradient(to right, #ffffff00, #666666ff, #ffffff00); text-align: center; } -.mtl-item { + +#showcase .mini-timeline i { display: inline-block; vertical-align: middle; width: 30px; @@ -181,12 +124,91 @@ span.repo-language-dot.javascript { transition: all 0.3s cubic-bezier(.25,.8,.25,1); } -.mtl-item:hover { +#showcase .mini-timeline i:hover { box-shadow: 0 2px 5px rgba(0,0,0,0.16), 0 2px 5px rgba(0,0,0,0.23); transform: scale(1.5); } -.notice { - margin: 5px; - margin-bottom: -10px!important; +/* Projects */ + +#projects { + padding-top: 0; +} + +#projects .card { + box-shadow: none; + border: #d1d5da 1px solid; + border-radius: 3px; + transition: all 0.2s cubic-bezier(.25,.8,.25,1); + height: 100%; + display: flex; + flex-direction: column; +} + +#projects .card:hover { + box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24); +} + +#projects .card-header { + box-shadow: none; + font-size: 1.25rem; + padding: 1.5rem 1.5rem 0 1.5rem; +} + +#projects .card-header-icon { + font-size: 1.5rem; + padding: 0 1rem 0 0; +} + +#projects .card-header-title { + padding: 0; + color: #7289DA; +} + +#projects .card:hover .card-header-title { + color: #363636; +} + +#projects .card-content { + padding-top: 8px; + padding-bottom: 1rem; +} + +#projects .card-footer { + margin-top: auto; + border: none; +} + +#projects .card-footer-item { + border: none; +} + +#projects .card-footer-item i { + margin-right: 0.5rem; +} + +#projects .repo-language-dot { + border-radius: 50%; + height: 12px; + width: 12px; + top: -1px; + display: inline-block; + position: relative; +} + +#projects .repo-language-dot.python { background-color: #3572A5; } +#projects .repo-language-dot.html { background-color: #e34c26; } +#projects .repo-language-dot.css { background-color: #563d7c; } +#projects .repo-language-dot.javascript { background-color: #f1e05a; } + +/* Sponsors */ + +#sponsors .hero-body { + padding-top: 2rem; + padding-bottom: 3rem; +} + +#sponsors img { + height: 5rem; + margin-right: 2rem; } diff --git a/pydis_site/templates/home/index.html b/pydis_site/templates/home/index.html index 24806399..7d91feb4 100644 --- a/pydis_site/templates/home/index.html +++ b/pydis_site/templates/home/index.html @@ -9,7 +9,8 @@ {% block content %} {% include "base/navbar.html" %} -
+ +

100K Member Milestone!

@@ -19,42 +20,58 @@ As a nice treat, we've created a Timeline page for people to discover the events that made our community what it is today. Be sure to check it out! -
-
-
-
-
-
+
+ + +
+ +
+
+ + {# Embedded Welcome video #} +
+
-
- 100K members! + {# Right side content #} +
+ 100K members!
-
-
-
-
+ {# Animated wave elements #} + + +
-
- {# Who are we? #} -
+ +
+ +

Who are we?

-
+

@@ -77,70 +94,97 @@

- {# Right column container #} -
-
-

- New Timeline! -

+ {# Showcase box #} +
+
-
+ + +
+
+ +
- {# Projects #} + +
+

Projects

-
+
- {# Display projects from HomeView.repos #} + {# Generate project data from HomeView.repos #} {% for repo in repo_data %}
-
-
-
- - {{ repo.repo_name }} -
- -
-
+

+ + + + + +
{% endfor %}
+
- {# Sponsors #} -
-
+ +
+

Sponsors -- cgit v1.2.3