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 ++++++++++++------ 1 file changed, 12 insertions(+), 6 deletions(-) (limited to 'pydis_site/static/css/base/base.css') 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 { -- 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/base/base.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 }} -
- -
-
+

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

Sponsors -- 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/static/css/base/base.css') 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 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/static/css/base/base.css') 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"> + + + + + + +