From e1382867ab2a96cf1b656b9b9f5154c0e7fa6aac Mon Sep 17 00:00:00 2001 From: Derek Date: Wed, 2 Sep 2020 22:28:19 -0400 Subject: add static timeline assets --- pydis_site/static/images/timeline/cd-icon-location.svg | 4 ++++ pydis_site/static/images/timeline/cd-icon-movie.svg | 4 ++++ pydis_site/static/images/timeline/cd-icon-picture.svg | 5 +++++ 3 files changed, 13 insertions(+) create mode 100755 pydis_site/static/images/timeline/cd-icon-location.svg create mode 100755 pydis_site/static/images/timeline/cd-icon-movie.svg create mode 100755 pydis_site/static/images/timeline/cd-icon-picture.svg (limited to 'pydis_site/static/images') diff --git a/pydis_site/static/images/timeline/cd-icon-location.svg b/pydis_site/static/images/timeline/cd-icon-location.svg new file mode 100755 index 00000000..6128fecd --- /dev/null +++ b/pydis_site/static/images/timeline/cd-icon-location.svg @@ -0,0 +1,4 @@ + + + diff --git a/pydis_site/static/images/timeline/cd-icon-movie.svg b/pydis_site/static/images/timeline/cd-icon-movie.svg new file mode 100755 index 00000000..498a93fa --- /dev/null +++ b/pydis_site/static/images/timeline/cd-icon-movie.svg @@ -0,0 +1,4 @@ + + + diff --git a/pydis_site/static/images/timeline/cd-icon-picture.svg b/pydis_site/static/images/timeline/cd-icon-picture.svg new file mode 100755 index 00000000..dd5f180b --- /dev/null +++ b/pydis_site/static/images/timeline/cd-icon-picture.svg @@ -0,0 +1,5 @@ + + + -- cgit v1.2.3 From 1da259dde97b856262185fc06dd25d5bae385cff Mon Sep 17 00:00:00 2001 From: Joe Banks Date: Mon, 12 Oct 2020 00:58:56 +0100 Subject: Update default picture to community logo --- .../static/images/timeline/cd-icon-picture.svg | 83 ++++++++++++++++++++-- 1 file changed, 78 insertions(+), 5 deletions(-) (limited to 'pydis_site/static/images') diff --git a/pydis_site/static/images/timeline/cd-icon-picture.svg b/pydis_site/static/images/timeline/cd-icon-picture.svg index dd5f180b..b173ff12 100755 --- a/pydis_site/static/images/timeline/cd-icon-picture.svg +++ b/pydis_site/static/images/timeline/cd-icon-picture.svg @@ -1,5 +1,78 @@ - - - + +image/svg+xml \ No newline at end of file -- cgit v1.2.3 From 59a29dc7c2a716ba84e51100d2db947291e1328f Mon Sep 17 00:00:00 2001 From: Joe Banks Date: Mon, 12 Oct 2020 01:16:35 +0100 Subject: Fix line endings --- pydis_site/static/images/timeline/cd-icon-picture.svg | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'pydis_site/static/images') diff --git a/pydis_site/static/images/timeline/cd-icon-picture.svg b/pydis_site/static/images/timeline/cd-icon-picture.svg index b173ff12..6ebd0d83 100755 --- a/pydis_site/static/images/timeline/cd-icon-picture.svg +++ b/pydis_site/static/images/timeline/cd-icon-picture.svg @@ -75,4 +75,4 @@ class="st3" id="path1950" inkscape:connector-curvature="0" - inkscape:label="lower_snake" /> \ No newline at end of file + inkscape:label="lower_snake" /> -- cgit v1.2.3 From 8a9337ecb120c325e7f2f4c22e2d4c1b46ac3f48 Mon Sep 17 00:00:00 2001 From: Joe Banks Date: Mon, 12 Oct 2020 01:30:23 +0100 Subject: Use bigger icon for timeline items --- .../static/images/timeline/cd-icon-picture.svg | 82 ++++++++++------------ 1 file changed, 38 insertions(+), 44 deletions(-) (limited to 'pydis_site/static/images') diff --git a/pydis_site/static/images/timeline/cd-icon-picture.svg b/pydis_site/static/images/timeline/cd-icon-picture.svg index 6ebd0d83..c2e297ac 100755 --- a/pydis_site/static/images/timeline/cd-icon-picture.svg +++ b/pydis_site/static/images/timeline/cd-icon-picture.svg @@ -7,16 +7,19 @@ xmlns="http://www.w3.org/2000/svg" xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd" xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape" - xml:space="preserve" - viewBox="0 0 463.86203 463.86203" - y="0px" - x="0px" - id="svg8" + enable-background="new 0 0 438 438" version="1.1" - sodipodi:docname="logo_discord.svg" + viewBox="0 0 346.16486 345.72064" + xml:space="preserve" + id="svg6016" + sodipodi:docname="logo_solo.svg" inkscape:version="0.91 r13725" - width="463.86203" - height="463.86203">image/svg+xml + style="fill:#ffffff" /> \ No newline at end of file -- cgit v1.2.3 From 96860be9cbe6d3dba680e8ef9ac9db410bfd8e19 Mon Sep 17 00:00:00 2001 From: Joe Banks Date: Mon, 12 Oct 2020 01:49:54 +0100 Subject: Fix line endings --- pydis_site/static/images/timeline/cd-icon-picture.svg | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'pydis_site/static/images') diff --git a/pydis_site/static/images/timeline/cd-icon-picture.svg b/pydis_site/static/images/timeline/cd-icon-picture.svg index c2e297ac..015718a8 100755 --- a/pydis_site/static/images/timeline/cd-icon-picture.svg +++ b/pydis_site/static/images/timeline/cd-icon-picture.svg @@ -69,4 +69,4 @@ id="path6014" inkscape:label="lower_snake" inkscape:connector-curvature="0" - style="fill:#ffffff" /> \ No newline at end of file + style="fill:#ffffff" /> -- cgit v1.2.3 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/static/images') 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/static/images') 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 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/images') 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/static/images') 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/static/images') 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"> + + + + + + +