Merge pull request #4 from practical-python-org/feature/logo_addition

Xarlos89 · web-flow · commit dad173e8881d · 2026-08-04T08:39:29.000+02:00
Feature/logo addition
diff --git a/docs/index.md b/docs/index.md
@@ -7,15 +7,16 @@ hide:
 
 <div class="pp-hero" markdown>
 
-# Practical Python
+![Practical Python Logo](/static/logo.svg)
 
 A Discord community for people who write Python. {{ member_count }} of us so far.
 
 [Join the Discord]({{ discord_invite }}){ .md-button .md-button--primary }
 
-
 </div>
 
+#
+
 <div class="grid cards" markdown>
 
 -   :material-brain:{ .lg .middle } __New Here?__
diff --git a/docs/static/logo.svg b/docs/static/logo.svg
@@ -0,0 +1,119 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 1920 1080"><style>
+#stripe-fill { animation: fill 6000ms linear infinite; }
+@keyframes fill {
+0%   { transform: matrix(2.66, 0, 0, 0.49, 1, 0.54); animation-timing-function: cubic-bezier(0.19, 0.42, 0.02, 1.56); }
+50%  { transform: matrix(4.01, 0, 0, 0.74, 1, 0.54); animation-timing-function: cubic-bezier(0.31, 0, 0.18, 1); }
+100% { transform: matrix(2.95, 0, 0, 0.54, 1, 0.54); } }
+@keyframes bg-A {
+0%   { transform: translate(541.77px, -1270.49px); animation-timing-function: cubic-bezier(0.38, 0.31, 0.27, 1); }
+23.33% { transform: translate(541.77px, 647.70px); }
+50%  { transform: translate(541.77px, 647.70px); animation-timing-function: cubic-bezier(0.31, 0, 0.18, 1); }
+100% { transform: translate(541.77px, 2718.29px); } }
+@keyframes bg-B {
+0%   { transform: skewY(-56.13deg); animation-timing-function: cubic-bezier(0.52, 0.19, 0.3, 1); }
+50%  { transform: skewY(40deg); animation-timing-function: cubic-bezier(0.31, 0, 0.18, 1); }
+100% { transform: skewY(-28.18deg); } }
+@keyframes A {
+0%   { transform: translate(90px, 938.98px); animation-timing-function: cubic-bezier(0.19, 0.42, 0.02, 1.56); }
+50%  { transform: translate(90px, 800px); animation-timing-function: cubic-bezier(0.31, 0, 0.18, 1); }
+100% { transform: translate(90px, 909.09px); } }
+@keyframes B {
+0%   { transform: scaleY(1.05); animation-timing-function: cubic-bezier(0.19, 0.42, 0.02, 1.56); }
+50%  { transform: scaleY(1.4); animation-timing-function: cubic-bezier(0.31, 0, 0.18, 1); }
+100% { transform: scaleY(1.13); } }
+@keyframes C {
+0%   { transform: translate(270px, 1044.39px); animation-timing-function: cubic-bezier(0.19, 0.42, 0.02, 1.56); }
+50%  { transform: translate(270px, 974.90px); animation-timing-function: cubic-bezier(0.31, 0, 0.18, 1); }
+100% { transform: translate(270px, 1029.45px); } }
+@keyframes D {
+0%   { transform: scaleY(1.03); animation-timing-function: cubic-bezier(0.19, 0.42, 0.02, 1.56); }
+50%  { transform: scaleY(1.2); animation-timing-function: cubic-bezier(0.31, 0, 0.18, 1); }
+100% { transform: scaleY(1.06); } }
+@keyframes E {
+0%   { transform: translate(450px, 1089.65px); animation-timing-function: cubic-bezier(0.19, 0.42, 0.02, 1.56); }
+50%  { transform: translate(450px, 1054.90px); animation-timing-function: cubic-bezier(0.31, 0, 0.18, 1); }
+100% { transform: translate(450px, 1082.17px); } }
+@keyframes F {
+0%   { transform: scaleY(1.01); animation-timing-function: cubic-bezier(0.19, 0.42, 0.02, 1.56); }
+50%  { transform: scaleY(1.1); animation-timing-function: cubic-bezier(0.31, 0, 0.18, 1); }
+100% { transform: scaleY(1.03); } }
+@keyframes G {
+0%   { transform: translate(630px, 1129.65px); animation-timing-function: cubic-bezier(0.19, 0.42, 0.02, 1.56); }
+50%  { transform: translate(630px, 1094.90px); animation-timing-function: cubic-bezier(0.31, 0, 0.18, 1); }
+100% { transform: translate(630px, 1122.17px); } }
+@keyframes H {
+0%   { transform: scaleY(0.99); animation-timing-function: cubic-bezier(0.19, 0.42, 0.02, 1.56); }
+50%  { transform: scaleY(0.9); animation-timing-function: cubic-bezier(0.31, 0, 0.18, 1); }
+100% { transform: scaleY(0.97); } }
+@keyframes I {
+0%   { transform: translate(810px, 1070.66px); animation-timing-function: cubic-bezier(0.19, 0.42, 0.02, 1.56); }
+50%  { transform: translate(810px, 1174.90px); animation-timing-function: cubic-bezier(0.31, 0, 0.18, 1); }
+100% { transform: translate(810px, 1093.08px); } }
+@keyframes J {
+0%   { transform: scaleY(0.97); animation-timing-function: cubic-bezier(0.19, 0.42, 0.02, 1.56); }
+50%  { transform: scaleY(0.8); animation-timing-function: cubic-bezier(0.31, 0, 0.18, 1); }
+100% { transform: scaleY(0.94); } }
+@keyframes K {
+0%   { transform: translate(990px, 991.53px); animation-timing-function: cubic-bezier(0.19, 0.42, 0.02, 1.56); }
+50%  { transform: translate(990px, 1200px); animation-timing-function: cubic-bezier(0.31, 0, 0.18, 1); }
+100% { transform: translate(990px, 1036.36px); } }
+@keyframes L {
+0%   { transform: scaleY(0.95); animation-timing-function: cubic-bezier(0.19, 0.42, 0.02, 1.56); }
+50%  { transform: scaleY(0.6); animation-timing-function: cubic-bezier(0.31, 0, 0.18, 1); }
+100% { transform: scaleY(0.87); } }
+@keyframes M {
+0%,20%,20.17%,26.67% { transform: translate(66px, 24.24px); }
+46.67%,100% { transform: translate(66px, 24.24px) rotate(720deg); } }
+@keyframes N {
+0%,20% { transform: scale(0.8); }
+26.67% { transform: scale(1); }
+38.33%,100% { transform: scale(1.5); } }
+@keyframes logo {
+0%,18.33% { opacity: 0; }
+31.67%,61.67% { opacity: 1; }
+73.33%,100% { opacity: 0; } }
+</style><defs>
+<linearGradient id="colors" x1="-0.02" y1="-0.01" x2="1" y2="0.99" gradientUnits="objectBoundingBox">
+<stop offset="1%" stop-color="#ffd43b"/>
+<stop offset="32%" stop-color="#ffd43b"/>
+<stop offset="75%" stop-color="#4babbe"/>
+<stop offset="100%" stop-color="#4babbe"/>
+</linearGradient>
+<radialGradient id="stripe-fill" cx="0" cy="0" gradientUnits="objectBoundingBox" gradientTransform="matrix(2.66 0 0 0.49 1 0.54)">
+<stop offset="0%" stop-color="#fff"/>
+<stop offset="100%" stop-color="#000"/>
+</radialGradient>
+<linearGradient id="blue-fill" x1="10.34" y1="4.93" x2="66.87" y2="54" gradientUnits="userSpaceOnUse">
+<stop offset="0%" stop-color="#5a9fd4"/>
+<stop offset="100%" stop-color="#306998"/>
+</linearGradient>
+<linearGradient id="yellow-fill" x1="88.72" y1="83.69" x2="68.53" y2="54.88" gradientUnits="userSpaceOnUse">
+<stop offset="0%" stop-color="#ffd43b"/>
+<stop offset="100%" stop-color="#ffe873"/>
+</linearGradient></defs>
+
+<g transform="matrix(1.78 0 0 0.58 -3.46 -16.27)" mask="url(#bg-masks)">
+<rect width="1080" height="1920" fill="url(#colors)"/><mask id="bg-masks" x="-150%" y="-150%" height="400%" width="400%">
+<g style="animation:bg-A 6000ms linear infinite;"><g transform="skewY(-56.13)" style="animation:bg-B 6000ms linear infinite;">
+<g id="bg-stripes" transform="scale(1,1.77) translate(-540,-1047.45)">
+<g style="animation:A 6000ms linear infinite;"><g transform="scaleY(1.05)" style="animation:B 6000ms linear infinite;">
+<rect width="180" height="1920" transform="translate(-90,-960)" fill="url(#stripe-fill)"/></g></g>
+<g style="animation:C 6000ms linear infinite;"><g transform="scaleY(1.03)" style="animation:D 6000ms linear infinite;">
+<rect width="180" height="1920" transform="translate(-90,-960)" fill="url(#stripe-fill)"/></g></g>
+<g style="animation:E 6000ms linear infinite;"><g transform="scaleY(1.01)" style="animation:F 6000ms linear infinite;">
+<rect width="180" height="1920" transform="translate(-90,-960)" fill="url(#stripe-fill)"/></g></g>
+<g style="animation:G 6000ms linear infinite;"><g transform="scaleY(0.99)" style="animation:H 6000ms linear infinite;">
+<rect width="180" height="1920" transform="translate(-90,-960)" fill="url(#stripe-fill)"/></g></g>
+<g style="animation:I 6000ms linear infinite;"><g transform="scaleY(0.97)" style="animation:J 6000ms linear infinite;">
+<rect width="180" height="1920" transform="translate(-90,-960)" fill="url(#stripe-fill)"/></g></g>
+<g style="animation:K 6000ms linear infinite;"><g transform="scaleY(0.95)" style="animation:L 6000ms linear infinite;">
+<rect width="180" height="1920" transform="translate(-90,-960)" fill="url(#stripe-fill)"/></g></g></g></g></g></mask></g>
+
+<g transform="matrix(4.33 0 0 4.33 676.70 424.06)" style="animation:logo 6000ms linear infinite;"><g style="animation:M 6000ms linear infinite;">
+<g transform="scale(0.8)" style="animation:N 6000ms linear infinite;"><g transform="translate(-50,-51.25)">
+<path d="M49.64,13.66c-2.47.02-4.83.23-6.91.59-6.12,1.09-7.24,3.35-7.24,7.53v5.51h14.47v1.84h-19.9c-4.2,0-7.88,2.53-9.03,7.34-1.33,5.51-1.39,8.95,0,14.7c1.02,4.28,3.48,7.34,7.69,7.34h4.97v-6.62c0-4.77,4.13-8.98,9.04-8.98h14.45c4.02,0,7.24-3.32,7.24-7.36v-13.77c0-3.92-3.31-6.87-7.24-7.52-2.49-.42-5.06-.61-7.54-.6ZM41.82,18.1c1.49,0,2.71,1.24,2.71,2.77c0,1.52-1.22,2.74-2.71,2.74-1.5,0-2.72-1.22-2.72-2.74c0-1.53,1.22-2.77,2.72-2.77Z" transform="translate(0 7.26)" fill="url(#blue-fill)"/>
+<path d="M66.22,29.13v6.42c0,4.98-4.22,9.18-9.04,9.18h-14.45c-3.96,0-7.24,3.39-7.24,7.35v13.78c0,3.92,3.41,6.23,7.24,7.35c4.58,1.35,8.97,1.59,14.45,0c3.64-1.06,7.23-3.18,7.23-7.35v-5.52h-14.45v-1.84h21.69c4.2,0,5.77-2.93,7.23-7.33c1.52-4.53,1.45-8.89,0-14.71-1.03-4.18-3.02-7.33-7.23-7.33h-5.43ZM58.09,64.02c1.5,0,2.72,1.23,2.72,2.75s-1.22,2.76-2.72,2.76c-1.49,0-2.71-1.24-2.71-2.76s1.22-2.75,2.71-2.75Z" transform="translate(0 7.26)" fill="url(#yellow-fill)"/>
+</g></g></g>
+<g id="font" transform="matrix(1 0 0 2 655.88 745.99)">
+<path d="M6.89,-18.78q-1.36,0-2.28-0.35t-1.38-0.95-0.46-1.34q0-0.750.46-1.35t1.36-0.94t2.22-0.34q1.31,0,2.280.34t1.50.940.53,1.36q0,0.75-0.52,1.35t-1.480.94-2.230.35ZM2.42,-16.7v-7.22h1.83v3.51h0.26v3.71Zm4.16-3.08q0.81,0,1.33-0.22t0.78-0.590.25-0.83q0-0.45-0.26-0.83t-0.8-0.59-1.37-0.22q-0.79,0-1.290.21t-0.730.57-0.240.86q0,0.480.240.85t0.750.58t1.340.21Zm6.440.86v-5h1.83v1.22l-0.22-0.16q0.17-0.250.46-0.46t0.69-0.34q0.34-0.130.76-0.2t0.85-0.090.850.02v1.04q-0.41-0.06-0.94-0.04t-0.970.16q-0.430.12-0.70.32t-0.40.44-0.130.53v2.54Zm9.230.14q-1,0-1.7-0.21t-1.05-0.55-0.36-0.75q0-0.360.22-0.65t0.69-0.5t1.2-0.34q0.56-0.1,1.31-0.18t1.63-0.14t1.84-0.15l-0.740.23q0.01-0.52-0.43-0.76t-1.48-0.25q-0.63,0-1.210.16t-0.820.54l-1.89-0.32q0.34-0.63,1.31-1.02t2.61-0.38q1.25,0,2.180.22t1.390.71q0.250.260.30.54t0.050.6v3.07h-1.81v-1.08l0.30.18q-0.630.54-1.460.79t-2.090.25Zm0.41-0.89q0.7,0,1.2-0.14t0.79-0.330.4-0.36q0.16-0.210.18-0.49t0.02-0.45l0.640.1q-0.940.08-1.610.14t-1.150.11-0.850.12q-0.350.07-0.610.16t-0.390.21-0.130.28q0,0.180.170.32t0.50.230.820.08Zm10.920.89q-1.43,0-2.45-0.34t-1.55-0.94-0.55-1.35q0.01-0.770.56-1.36t1.58-0.94t2.43-0.34q1.59,0,2.680.43t1.42,1.17l-2.060.3q-0.24-0.4-0.8-0.63t-1.27-0.22q-0.81,0-1.330.21t-0.770.57-0.250.82q0.010.710.6,1.15t1.760.44q0.83,0,1.31-0.2t0.71-0.59l2.110.25q-0.430.76-1.5,1.17t-2.630.41Zm11.29-0.14q-0.920.09-1.80.08t-1.58-0.18-1.06-0.52q-0.32-0.32-0.33-0.66t-0.02-0.76v-4.35h2.06v4.28q0,0.30.010.53t0.180.37q0.310.280.990.31t1.55-0.04Zm-6.47-4.12v-0.87h6.47v0.87Zm8.64-1.63v-1.02h2.07v1.02Zm0,5.76v-5h2.07v5Zm8.670.14q-1.43,0-2.45-0.34t-1.55-0.94-0.55-1.35q0.01-0.770.56-1.36t1.58-0.94t2.43-0.34q1.59,0,2.680.43t1.42,1.17l-2.060.3q-0.24-0.4-0.8-0.63t-1.27-0.22q-0.81,0-1.330.21t-0.770.57-0.250.82q0.010.710.6,1.15t1.760.44q0.83,0,1.31-0.2t0.71-0.59l2.110.25q-0.430.76-1.5,1.17t-2.630.41Zm8.31,0q-1,0-1.7-0.21t-1.05-0.55-0.36-0.75q0-0.360.22-0.65t0.69-0.5t1.2-0.34q0.56-0.1,1.31-0.18t1.63-0.14t1.84-0.15l-0.740.23q0.01-0.52-0.43-0.76t-1.48-0.25q-0.63,0-1.210.16t-0.820.54l-1.89-0.32q0.34-0.63,1.31-1.02t2.61-0.38q1.25,0,2.180.22t1.390.71q0.250.260.30.54t0.050.6v3.07h-1.81v-1.08l0.30.18q-0.630.54-1.460.79t-2.090.25Zm0.41-0.89q0.7,0,1.2-0.14t0.79-0.330.4-0.36q0.16-0.210.18-0.49t0.02-0.45l0.640.1q-0.940.08-1.610.14t-1.150.11-0.850.12q-0.350.07-0.610.16t-0.390.21-0.130.28q0,0.180.170.32t0.50.230.820.08Zm7.060.75v-6.81h2.07v6.81Zm12.530.14q-1.36,0-2.28-0.35t-1.38-0.95-0.46-1.34q0-0.750.46-1.35t1.36-0.94t2.22-0.34q1.31,0,2.280.34t1.50.940.53,1.36q0,0.75-0.52,1.35t-1.480.94-2.230.35Zm-4.47,2.08v-7.22h1.83v3.51h0.26v3.71Zm4.16-3.08q0.81,0,1.33-0.22t0.78-0.590.25-0.83q0-0.45-0.26-0.83t-0.8-0.59-1.37-0.22q-0.79,0-1.290.21t-0.730.57-0.240.86q0,0.480.240.85t0.750.58t1.340.21Zm7.32,3.08l1.79-2.640.030.78-4.04-5.36h2.16l2.87,3.96h-0.55l2.79-3.96h2.07l-5.17,7.22Zm14.51-2.22q-0.920.09-1.80.08t-1.58-0.18-1.06-0.52q-0.32-0.32-0.33-0.66t-0.02-0.76v-4.35h2.06v4.28q0,0.30.010.53t0.180.37q0.310.280.990.31t1.55-0.04Zm-6.47-4.12v-0.87h6.47v0.87Zm14.88,4.12v-2.41q0-0.24-0.06-0.52t-0.28-0.55-0.65-0.44-1.17-0.17q-0.39,0-0.780.07t-0.70.24-0.50.46-0.190.75l-1.23-0.28q0-0.640.46-1.16t1.35-0.83t2.2-0.31q1.03,0,1.70.19t1.060.470.580.610.240.610.060.47v2.79Zm-6.43,0v-6.67h1.85v3.51h0.25v3.16Zm14.850.14q-1.39,0-2.43-0.34t-1.61-0.93-0.57-1.37q0-0.790.58-1.38t1.62-0.93t2.4-0.33q1.4,0,2.440.34t1.610.930.57,1.37q0,0.78-0.58,1.37t-1.620.93-2.430.34Zm0-1.05q1.24,0,1.84-0.44t0.6-1.15q0-0.73-0.61-1.16t-1.83-0.43q-0.83,0-1.370.2t-0.790.56-0.260.83q0,0.730.61,1.16t1.810.43Zm12.930.91v-2.41q0-0.24-0.06-0.52t-0.28-0.55-0.65-0.44-1.17-0.17q-0.39,0-0.780.07t-0.70.24-0.50.46-0.190.75l-1.23-0.28q0-0.640.46-1.16t1.35-0.83t2.2-0.31q1.03,0,1.70.19t1.060.470.580.610.240.610.060.47v2.79Zm-6.43,0v-5h1.85v1.55h0.25v3.45Z" transform="matrix(1 0 0 2 -660.41 -289.23)" fill="#fff"/>
+</g></g></svg>
diff --git a/docs/stylesheets/extra.css b/docs/stylesheets/extra.css
@@ -22,7 +22,7 @@
 
 .pp-hero {
   text-align: center;
-  padding: 3.2rem 0 2.4rem;
+  padding: 0 0 2.4rem;
 }
 
 .md-typeset .pp-hero h1 {
@@ -32,7 +32,7 @@
 }
 
 .md-typeset .pp-hero p {
-  max-width: 34rem;
+  max-width: 44rem;
   margin-inline: auto;
   font-size: 0.9rem;
 }

Original file line number	Diff line number	Diff line change
`@@ -22,7 +22,7 @@`
`22`	`22`
`23`	`23`	`.pp-hero {`
`24`	`24`	`text-align: center;`
`25`		`- padding: 3.2rem 0 2.4rem;`
	`25`	`+ padding: 0 0 2.4rem;`
`26`	`26`	`}`
`27`	`27`
`28`	`28`	`.md-typeset .pp-hero h1 {`
`@@ -32,7 +32,7 @@`
`32`	`32`	`}`
`33`	`33`
`34`	`34`	`.md-typeset .pp-hero p {`
`35`		`- max-width: 34rem;`
	`35`	`+ max-width: 44rem;`
`36`	`36`	`margin-inline: auto;`
`37`	`37`	`font-size: 0.9rem;`
`38`	`38`	`}`