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 +++++++++++++++++++++++++++---- pydis_site/static/images/events/100k.png | Bin 0 -> 210477 bytes pydis_site/templates/home/index.html | 58 +++++++++++++- 3 files changed, 169 insertions(+), 16 deletions(-) create mode 100644 pydis_site/static/images/events/100k.png (limited to 'pydis_site') 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); } diff --git a/pydis_site/static/images/events/100k.png b/pydis_site/static/images/events/100k.png new file mode 100644 index 00000000..ae024d77 Binary files /dev/null and b/pydis_site/static/images/events/100k.png differ diff --git a/pydis_site/templates/home/index.html b/pydis_site/templates/home/index.html index f31363a4..04ad4465 100644 --- a/pydis_site/templates/home/index.html +++ b/pydis_site/templates/home/index.html @@ -9,6 +9,35 @@ {% block content %} {% include "base/navbar.html" %} +
+
+
+
+
+ +
+
+ +
+ 100K members! +
+ +
+ +
+ +
+
+
+ +
{# Who are we? #} @@ -38,8 +67,33 @@ {# Right column container #} -
- +
+
+

+ New Timeline! +

+
+ + + + + + +
+

+ Start from our humble beginnings to discover the events that made our community what it is today. +

+
+ + + +
+
-- 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') 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') 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') 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 325f978b5f9d94deef8988617eb16a6cd97f0cbe Mon Sep 17 00:00:00 2001 From: scragly <29337040+scragly@users.noreply.github.com> Date: Fri, 23 Oct 2020 21:52:54 +1000 Subject: Change discord img-based link to normal nav item. --- pydis_site/static/css/base/base.css | 18 ++++++++++++------ pydis_site/templates/base/navbar.html | 11 +++-------- 2 files changed, 15 insertions(+), 14 deletions(-) (limited to 'pydis_site') diff --git a/pydis_site/static/css/base/base.css b/pydis_site/static/css/base/base.css index dc7c504d..42bbc8cf 100644 --- a/pydis_site/static/css/base/base.css +++ b/pydis_site/static/css/base/base.css @@ -30,16 +30,22 @@ div.card.has-equal-height { background-color: transparent; } -.navbar-item.has-left-margin-1 { - margin-left: 1rem; +.navbar-link:not(.is-arrowless) { + padding-left: 2rem; + padding-right: 3.5em; } -.navbar-item.has-left-margin-2 { - margin-left: 2rem; +.navbar-link:not(.is-arrowless)::after { + right: 2em; + margin-top: -0.42em; } -.navbar-item.has-left-margin-3 { - margin-left: 3rem; +/* Dropdown nav needs to be viewable at edge of canvas */ +@media screen and (min-width: 1024px) { + .navbar-dropdown { + left: unset; + right: 0; + } } #navbar-banner { diff --git a/pydis_site/templates/base/navbar.html b/pydis_site/templates/base/navbar.html index c2915025..9453c7b5 100644 --- a/pydis_site/templates/base/navbar.html +++ b/pydis_site/templates/base/navbar.html @@ -20,8 +20,8 @@ -- 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') 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 From f1ee1f154494728f305381df19d9f293b8667805 Mon Sep 17 00:00:00 2001 From: scragly <29337040+scragly@users.noreply.github.com> Date: Fri, 23 Oct 2020 22:00:27 +1000 Subject: Fix video aspect in timeline, quote img src urls. After updating the frontpage and creating an fixed-aspect-ratio style pair, I found I could just reuse them in the timeline to fix the inconsistent responsive aspect ratio that was occurring there. Some img src values also were not quoted; while this can work fine, it can break if the url has spaces or certain characters and is inconsistent with the rest of the project. --- pydis_site/static/css/home/timeline.css | 14 -------------- pydis_site/templates/home/timeline.html | 24 ++++++++++++------------ 2 files changed, 12 insertions(+), 26 deletions(-) (limited to 'pydis_site') diff --git a/pydis_site/static/css/home/timeline.css b/pydis_site/static/css/home/timeline.css index 07e17e15..89de0887 100644 --- a/pydis_site/static/css/home/timeline.css +++ b/pydis_site/static/css/home/timeline.css @@ -61,20 +61,6 @@ button, input, textarea, select { background-color: #576297 !important; } -.video-container { - position: relative; - width: 100%; - height: 0; - padding-bottom: 75%; -} -.video { - position: absolute; - top: 0; - left: 0; - width: 100%; - height: 100%; -} - .pydis-logo-banner { background-color: #7289DA !important; border-radius: 10px; diff --git a/pydis_site/templates/home/timeline.html b/pydis_site/templates/home/timeline.html index 54cbdc1b..f3c58fc2 100644 --- a/pydis_site/templates/home/timeline.html +++ b/pydis_site/templates/home/timeline.html @@ -14,7 +14,7 @@
- Picture + Picture
@@ -231,8 +231,8 @@

PyDis hits 15,000 members; the “hot ones special” video is released

-
-
@@ -319,8 +319,8 @@ developers join us to judge the event and help out our members during the event. One of them, @tshirtman, even joins our staff!

-
-
@@ -377,8 +377,8 @@ Several of the Code Jam participants also end up getting involved contributing to the Arcade repository.

-
-
@@ -450,8 +450,8 @@ Code Jam for 2020 attracts hundreds of participants, and sees the creation of some fantastic projects. Check them out in our judge stream below:

-
-
@@ -481,13 +481,13 @@
- Picture + Picture

Python Discord hosts the 2020 CPython Core Developer Q&A

-
-
-- cgit v1.2.3 From 7395563a2114ad00e07d5e7caf7986e7e6de5e53 Mon Sep 17 00:00:00 2001 From: scragly <29337040+scragly@users.noreply.github.com> Date: Sun, 25 Oct 2020 01:09:16 +1000 Subject: Change discord nav item to distinct CTA button. --- pydis_site/static/css/base/base.css | 53 +++++--- pydis_site/static/images/navbar/discord.svg | 143 +++++++++++++++++++++ .../static/images/navbar/navbar_discordjoin.svg | 81 ------------ pydis_site/templates/base/navbar.html | 11 +- 4 files changed, 185 insertions(+), 103 deletions(-) create mode 100644 pydis_site/static/images/navbar/discord.svg delete mode 100644 pydis_site/static/images/navbar/navbar_discordjoin.svg (limited to 'pydis_site') diff --git a/pydis_site/static/css/base/base.css b/pydis_site/static/css/base/base.css index 306a3def..3ac2c503 100644 --- a/pydis_site/static/css/base/base.css +++ b/pydis_site/static/css/base/base.css @@ -18,42 +18,55 @@ main.site-content { 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-link:not(.is-arrowless) { - padding-left: 2rem; - padding-right: 3.5em; +#navbar-banner { + background-color: transparent; } -.navbar-link:not(.is-arrowless)::after { - right: 2em; - margin-top: -0.42em; +#navbar-banner img { + max-height: 3rem; } -/* Dropdown nav needs to be viewable at edge of canvas */ -@media screen and (min-width: 1024px) { - .navbar-dropdown { - left: unset; - right: 0; - } +#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: 5% 50%; } -#navbar-banner img { - max-height: 3rem; +#discord-btn:hover { + background-color: transparent; } #django-logo { diff --git a/pydis_site/static/images/navbar/discord.svg b/pydis_site/static/images/navbar/discord.svg new file mode 100644 index 00000000..e3090ee7 --- /dev/null +++ b/pydis_site/static/images/navbar/discord.svg @@ -0,0 +1,143 @@ + + + + + + + + + + + + image/svg+xml + + + + + + + + + + + + + + + + + + + + + JOIN US + + + + diff --git a/pydis_site/static/images/navbar/navbar_discordjoin.svg b/pydis_site/static/images/navbar/navbar_discordjoin.svg deleted file mode 100644 index 75e6b102..00000000 --- a/pydis_site/static/images/navbar/navbar_discordjoin.svg +++ /dev/null @@ -1,81 +0,0 @@ - - - - - - - - - - image/svg+xml - - - - - - - - - - - diff --git a/pydis_site/templates/base/navbar.html b/pydis_site/templates/base/navbar.html index 9453c7b5..d8abf36d 100644 --- a/pydis_site/templates/base/navbar.html +++ b/pydis_site/templates/base/navbar.html @@ -20,8 +20,8 @@ + + {# Desktop Nav Discord #} +
+ Discord +
+
+
-- cgit v1.2.3 From fcf0067ea4f68003ed0e2954d645398df82a43e0 Mon Sep 17 00:00:00 2001 From: scragly <29337040+scragly@users.noreply.github.com> Date: Sun, 25 Oct 2020 01:09:49 +1000 Subject: Use local img for welcome video thumbnail. --- pydis_site/static/images/frontpage/welcome.jpg | Bin 0 -> 51725 bytes pydis_site/templates/home/index.html | 2 +- 2 files changed, 1 insertion(+), 1 deletion(-) create mode 100644 pydis_site/static/images/frontpage/welcome.jpg (limited to 'pydis_site') diff --git a/pydis_site/static/images/frontpage/welcome.jpg b/pydis_site/static/images/frontpage/welcome.jpg new file mode 100644 index 00000000..0eb8f672 Binary files /dev/null and b/pydis_site/static/images/frontpage/welcome.jpg differ diff --git a/pydis_site/templates/home/index.html b/pydis_site/templates/home/index.html index 7d91feb4..7f59231c 100644 --- a/pydis_site/templates/home/index.html +++ b/pydis_site/templates/home/index.html @@ -42,7 +42,7 @@ span{height:1.5em;text-align:center;font:68px/1.5 sans-serif;color:#FFFFFFEE;text-shadow:0 0 0.1em #00000020} - Welcome to Python Discord + Welcome to Python Discord ▶ " allow="autoplay; accelerometer; clipboard-write; encrypted-media; gyroscope; picture-in-picture" -- cgit v1.2.3 From 75dadc4a76f795fd13a2e87cb2f68c2758b0e7ad Mon Sep 17 00:00:00 2001 From: scragly <29337040+scragly@users.noreply.github.com> Date: Sun, 25 Oct 2020 01:40:07 +1000 Subject: Remove blurple peek on Discord CTA, convert text to obj. --- pydis_site/static/css/base/base.css | 2 +- pydis_site/static/images/navbar/discord.svg | 42 ++++++++++++++++++++++------- 2 files changed, 33 insertions(+), 11 deletions(-) (limited to 'pydis_site') diff --git a/pydis_site/static/css/base/base.css b/pydis_site/static/css/base/base.css index 3ac2c503..b53ff5d4 100644 --- a/pydis_site/static/css/base/base.css +++ b/pydis_site/static/css/base/base.css @@ -62,7 +62,7 @@ main.site-content { 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: 5% 50%; + background-position: 1% 50%; } #discord-btn:hover { diff --git a/pydis_site/static/images/navbar/discord.svg b/pydis_site/static/images/navbar/discord.svg index e3090ee7..406e3836 100644 --- a/pydis_site/static/images/navbar/discord.svg +++ b/pydis_site/static/images/navbar/discord.svg @@ -13,7 +13,7 @@ version="1.1" id="svg8" inkscape:version="1.0.1 (3bc2e813f5, 2020-09-07)" - sodipodi:docname="navbar_discordjoin2.svg"> + sodipodi:docname="discord.svg"> image/svg+xml - + @@ -106,7 +106,7 @@ + transform="matrix(0.90000009,0,0,0.90000009,10.464254,9.7980333)"> @@ -128,14 +128,36 @@ d="m 107.16039,90.382629 -3.19204,3.19205 c -0.15408,0.15408 -0.40352,0.15408 -0.55746,0 l -0.37229,-0.37231 c -0.15368,-0.15369 -0.15408,-0.40277 -5.3e-4,-0.55681 l 2.52975,-2.54167 -2.52975,-2.54164 c -0.15329,-0.15408 -0.15309,-0.40312 5.3e-4,-0.55681 l 0.37229,-0.37228 c 0.15408,-0.15408 0.40353,-0.15408 0.55746,0 l 3.19204,3.19201 c 0.15408,0.15407 0.15408,0.40354 0,0.55746 z" inkscape:connector-curvature="0" style="fill:#7289da;fill-opacity:1;stroke-width:0.0164247" /> - JOIN US + style="font-style:normal;font-weight:normal;font-size:6.35px;line-height:1.25;font-family:sans-serif;letter-spacing:0px;word-spacing:0px;white-space:pre;shape-inside:url(#rect953-0);fill:#7289da;fill-opacity:1;stroke:none"> + + + + + + +