More CSS cleanup, adding ceiling snake

jackreichelt · jackreichelt · commit b52463719e72 · 2025-09-10T11:40:11.000+10:00
diff --git a/assets/images/header-snake.svg b/assets/images/header-snake.svg
@@ -0,0 +1,11 @@
+<svg width="187" height="338" viewBox="0 0 187 338" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_8_46)">
+<path d="M67 108V288C67 288 67 338 -43 338C-153 338 -153 288 -153 288V238C-153 238 -143 238 -103 238C-63 238 -33 208 -33 168C-33 128 -33 78 -33 48C-33 18 -13 -2 17 -2C47 -2 137 -2 137 -2C137 -2 187 -2 187 108C187 218 137 218 137 218H87V108H67Z" fill="#FFD343"/>
+<path d="M157 168C157 179.046 148.046 188 137 188C125.954 188 117 179.046 117 168C117 156.954 125.954 148 137 148C148.046 148 157 156.954 157 168Z" fill="white"/>
+</g>
+<defs>
+<clipPath id="clip0_8_46">
+<rect width="187" height="338" fill="white"/>
+</clipPath>
+</defs>
+</svg>
diff --git a/index.html b/index.html
@@ -8,8 +8,11 @@
 </head>
 <body>
     <header>
-        <h1>Python Australia</h1>
-        <p class="intro">Python Australia is a community-run organisation dedicated to bringing together Python enthusiasts from across the country. We aim to connect Python-appreciators with local meetups, events, and initiatives to help grow and connect the Python community in Australia.</p>
+        <img src="assets/images/header-snake.svg" alt="Python Snake" class="">
+        <div>
+            <h1>Python Australia</h1>
+            <p class="intro">Python Australia is a community-run organisation dedicated to bringing together Python enthusiasts from across the country. We aim to connect Python-appreciators with local meetups, events, and initiatives to help grow and connect the Python community in Australia.</p>
+        </div>
     </header>
 
     <section class="discord-promo">
diff --git a/style/style.css b/style/style.css
@@ -99,15 +99,26 @@ body {
 }
 
 header {
+    display: flex;
+    justify-content: center;
+    align-items: center;
     background: var(--python-blue);
     color: #fff;
-    padding: 2rem 1rem 1rem 1rem;
     text-align: center;
-}
 
-header h1 {
-    margin: 0 0 0.5rem 0;
-    font-size: 2.5rem;
+    img {
+        justify-self: start;
+        height: 10rem;
+    }
+
+    div {
+        width: 100%;
+    }
+
+    h1 {
+        margin: 0 0 0.5rem 0;
+        font-size: 2.5rem;
+    }
 }
 
 .intro {
@@ -148,9 +159,10 @@ main {
     transition: box-shadow 0.2s;
     min-height: 240px;
     height: 100%;
-}
-.meetup-cell:hover {
-    box-shadow: 0 4px 20px color-mix(in oklab, var(--python-blue), transparent 50%);
+
+    &:hover {
+        box-shadow: 0 4px 20px color-mix(in oklab, var(--python-blue), transparent 50%);
+    }
 }
 
 .meetup-logo {
