From e5355de93315c51f5de800fa6412f73f4aa2a4fc Mon Sep 17 00:00:00 2001 From: scragly <29337040+scragly@users.noreply.github.com> Date: Thu, 22 Oct 2020 14:29:33 +1000 Subject: Add wave-style hero, 100K promo, timeline card. --- pydis_site/static/css/home/index.css | 127 +++++++++++++++++++++++++++++++---- 1 file changed, 113 insertions(+), 14 deletions(-) (limited to 'pydis_site/static/css/home/index.css') diff --git a/pydis_site/static/css/home/index.css b/pydis_site/static/css/home/index.css index ba856a8e..67caf61c 100644 --- a/pydis_site/static/css/home/index.css +++ b/pydis_site/static/css/home/index.css @@ -70,18 +70,117 @@ span.repo-language-dot.javascript { padding-bottom: 3rem; } -@media screen and (min-width: 1088px) { - .video-container iframe { - height: calc(42vw * 0.5625); - max-height: 371px; - max-width: 660px; - } -} - -@media screen and (max-width: 1087px) { - .video-container iframe { - height: calc(92vw * 0.5625); - max-height: none; - max-width: none; - } +.welcome-video { + 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; +} + +.welcome-video: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{ + 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; +} + +.main-head { + position: relative; + background-color: #7289DA; + color: #fff; + height: 32vw; + max-height: 500px; + overflow-x: hidden; + width: 100%; + padding: 0; +} + +.bottom-wave { + background: url(https://svgur.com/i/QVH.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; +} + +.above-waves { + z-index: 4; +} + +.wave { + background: url(https://svgur.com/i/QSd.svg) repeat-x; + position: absolute; + bottom: 0; + width: 6400px; + 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; +} + +@keyframes wave { + 0% { + margin-left: 0; + } + 100% { + margin-left: -1600px; + } +} + +.showcase { + margin: 0 1em; +} + +.mini-timeline { + height: 3px; + position: relative; + margin: 50px 0 50px 0; + background: linear-gradient(to right, #ffffff00, #666666ff, #ffffff00); + text-align: center; +} +.mtl-item { + display: inline-block; + vertical-align: middle; + width: 30px; + height: 30px; + border-radius: 50%; + position: relative; + top: -14px; + margin: 0 4% 0 4%; + background-color: #3EB2EF; + color: white; + font-size: 15px; + line-height: 33px; + border:none; + box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24); + transition: all 0.3s cubic-bezier(.25,.8,.25,1); +} + +.mtl-item: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); } -- cgit v1.2.3 From 235abfd6db3f684bf4c87ef9f77015636fdca488 Mon Sep 17 00:00:00 2001 From: scragly <29337040+scragly@users.noreply.github.com> Date: Thu, 22 Oct 2020 15:01:46 +1000 Subject: Use local svgs for wave elements. --- pydis_site/static/css/home/index.css | 4 +- pydis_site/static/images/waves/wave_dark.svg | 73 +++++++++++++++++++++++++ pydis_site/static/images/waves/wave_white.svg | 77 +++++++++++++++++++++++++++ 3 files changed, 152 insertions(+), 2 deletions(-) create mode 100644 pydis_site/static/images/waves/wave_dark.svg create mode 100644 pydis_site/static/images/waves/wave_white.svg (limited to 'pydis_site/static/css/home/index.css') diff --git a/pydis_site/static/css/home/index.css b/pydis_site/static/css/home/index.css index 67caf61c..9e36a51c 100644 --- a/pydis_site/static/css/home/index.css +++ b/pydis_site/static/css/home/index.css @@ -111,7 +111,7 @@ span.repo-language-dot.javascript { } .bottom-wave { - background: url(https://svgur.com/i/QVH.svg) repeat-x; + background: url(../../images/waves/wave_white.svg) repeat-x; position: absolute; bottom: 0; width: 6400px; @@ -126,7 +126,7 @@ span.repo-language-dot.javascript { } .wave { - background: url(https://svgur.com/i/QSd.svg) repeat-x; + background: url(../../images/waves/wave_dark.svg) repeat-x; position: absolute; bottom: 0; width: 6400px; diff --git a/pydis_site/static/images/waves/wave_dark.svg b/pydis_site/static/images/waves/wave_dark.svg new file mode 100644 index 00000000..35174c47 --- /dev/null +++ b/pydis_site/static/images/waves/wave_dark.svg @@ -0,0 +1,73 @@ + + + + + + image/svg+xml + + + + + + + + + + + + + diff --git a/pydis_site/static/images/waves/wave_white.svg b/pydis_site/static/images/waves/wave_white.svg new file mode 100644 index 00000000..441dacff --- /dev/null +++ b/pydis_site/static/images/waves/wave_white.svg @@ -0,0 +1,77 @@ + + + + + + image/svg+xml + + + + + + + + + + + + + + -- cgit v1.2.3 From a971b36e079345fff3142a9cc663670f3b2a2ff8 Mon Sep 17 00:00:00 2001 From: scragly <29337040+scragly@users.noreply.github.com> Date: Thu, 22 Oct 2020 15:45:14 +1000 Subject: Add a message section to replace hero section for mobiles. --- pydis_site/static/css/home/index.css | 5 +++++ pydis_site/templates/home/index.html | 13 ++++++++++++- 2 files changed, 17 insertions(+), 1 deletion(-) (limited to 'pydis_site/static/css/home/index.css') diff --git a/pydis_site/static/css/home/index.css b/pydis_site/static/css/home/index.css index 9e36a51c..18f2d1aa 100644 --- a/pydis_site/static/css/home/index.css +++ b/pydis_site/static/css/home/index.css @@ -104,6 +104,7 @@ span.repo-language-dot.javascript { background-color: #7289DA; color: #fff; height: 32vw; + min-height: 270px; max-height: 500px; overflow-x: hidden; width: 100%; @@ -184,3 +185,7 @@ span.repo-language-dot.javascript { box-shadow: 0 2px 5px rgba(0,0,0,0.16), 0 2px 5px rgba(0,0,0,0.23); transform: scale(1.5); } + +.message { + margin: 5px; +} diff --git a/pydis_site/templates/home/index.html b/pydis_site/templates/home/index.html index 04ad4465..fbdd942d 100644 --- a/pydis_site/templates/home/index.html +++ b/pydis_site/templates/home/index.html @@ -9,7 +9,18 @@ {% block content %} {% include "base/navbar.html" %} -
+
+
+

100K Member Milestone!

+
+
+ Thanks to all our members for helping us create this friendly and helpful community! +

+ 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! +
+
+
-- cgit v1.2.3 From 6437abed32c35b5c3de365b7af2cedf9b4adea42 Mon Sep 17 00:00:00 2001 From: scragly <29337040+scragly@users.noreply.github.com> Date: Thu, 22 Oct 2020 15:50:58 +1000 Subject: Override notice bottom margin, use new class instead of bulma class. --- pydis_site/static/css/home/index.css | 3 ++- pydis_site/templates/home/index.html | 2 +- 2 files changed, 3 insertions(+), 2 deletions(-) (limited to 'pydis_site/static/css/home/index.css') diff --git a/pydis_site/static/css/home/index.css b/pydis_site/static/css/home/index.css index 18f2d1aa..cb79a6e6 100644 --- a/pydis_site/static/css/home/index.css +++ b/pydis_site/static/css/home/index.css @@ -186,6 +186,7 @@ span.repo-language-dot.javascript { transform: scale(1.5); } -.message { +.notice { margin: 5px; + margin-bottom: -10px!important; } diff --git a/pydis_site/templates/home/index.html b/pydis_site/templates/home/index.html index fbdd942d..24806399 100644 --- a/pydis_site/templates/home/index.html +++ b/pydis_site/templates/home/index.html @@ -9,7 +9,7 @@ {% block content %} {% include "base/navbar.html" %} -
+

100K Member Milestone!

-- cgit v1.2.3 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(-) (limited to 'pydis_site/static/css/home/index.css') 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 }} -
- -
-
+

+ +
+
+ + {{ repo.language }} +
+
+ + {{ repo.stargazers }} +
+
+ + {{ repo.forks }} +
+
+ + + +
{% endfor %}
+
- {# Sponsors #} -
-
+ +
+

Sponsors -- cgit v1.2.3