style this bitch

themes/basspistol2025/assets/css/style.css

@@ -1,12 +1,27 @@
+* {
+  filter: grayscale(100%);
+  transition: filter 15s;
+}
+*:hover {
+  filter: grayscale(0%);
+  transition: filter .4s;
+}
 body {
   font-family: Sigoil, Space-Grotesk, 'Arial', 'Helvetica', sans-serif;
   font-weight: normal;
   width: 100vw;
-  background-color: #000;
+
+  background-color: black;
+  color: orange;
+
+}
+#main {
+  display: flex;
+
 }
 h1, h2, h3, h4, h5, h6, h7, h8 {
 
-  font-family: Space-Grotesk, 'Arial', 'Helvetica', sans-serif;
+  font-family: Outward, Space-Grotesk, 'Arial', 'Helvetica', sans-serif;
 
 }
 h1 {
@@ -27,12 +42,16 @@ strong {
 main {
  width: 100%;
  height: 100%;
+ display: flex;
+ flex-wrap: wrap;
 }
 #hero {
-position:relative;
+  margin: 0;
   background-color: purple;
-
+  border-style: double;
-  width: 100vw;
+  border-color: orange;
+  border-width: 10px;
+  width: 100%;
   padding:0;
   overflow: hidden;
 }
@@ -56,44 +75,79 @@ margin: 0;
 
 /* Profiles */
 #gang {
-
   display: flex;
   flex-wrap: wrap;
   justify-content: space-between;
+
+  a {
+    text-decoration: none;
+  }
+  article {
+    margin:2px;
+    flex: 1 1 300px;
+
+  }
+  h2 {
+    font-size: 24em;
+/*    text-transform: uppercase;*/
+    line-height: 1em;
+    flex: 1 1 100%;
+  }
+  p {
+    flex: 1 1 100%;
+    font-size: 1.5em;
+    line-height: 1em;
+  }
+
   figure {
-    filter: grayscale(100%);
-    transition: all 2s;
     padding: 4px;
     margin: auto;
-    flex: 1 1 25vw;
+
-    min-width: 33vw;
+
-    min-height: 25vw;
+
+    border-style: double;
+    border-color: purple;
+    border-width: 10px;
+
     img {
       width: 100%;
       object-fit: cover;
+      border-style: double;
+      border-color: purple;
+      border-width: 10px;
+      max-height: 300px;
 
     }
 
   }
-  figure:hover {
-    filter: grayscale(0%);
-    transition: all 2s;
-  }
-
   figcaption {
     font-family: Outward, 'Arial', 'Helvetica', sans-serif;
-    font-size: 15em;
+    font-size: 9em;
     line-height: 0.3em;
-
     height: 100px;
-/*    font-weight: bold;*/
+    font-weight: bold;
-   font-style: italic;
+/*    font-style: italic;*/
-
     background-color: black;
     color: white;
     padding: 20px;
     text-align: center;
-    border-style: dashed;
+    border-style: double;
-    border-color: #fff;
+    border-color: purple;
     border-width: 10px;
+    color: orange;
+    z-index: 100;
+    position: relative;
+    text-decoration: none;
+    margin-bottom: 4px;
+    text-transform: lowercase;
+ }
+ .section-headers {
+   padding: 80px;
+   border-style: double;
+   border-color: purple;
+   border-width: 10px;
+   flex: 1 0 100%;
+   max-width: 100%;
+   margin-top: 0;
+}
 }

themes/basspistol2025/layouts/_default/index.html

@@ -7,12 +7,14 @@
 
 {{ define "main" }}
 
-{{ partial "body/newsletter.html" . }}
 
 
 {{ partial "body/gang.html" . }}
+
+
+
 {{ end }}
 
 {{ define "footer"}}
-
+{{ partial "body/newsletter.html" . }}
 {{ end }}

themes/basspistol2025/layouts/partials/body/gang.html

@@ -1,30 +1,35 @@
 <section id="gang">
+  <article class="section-headers">
+    <h2>Gung</h2>
+    <p>Ordinary people with extraordinary visions. <br />
+    Powerful. Syndicated. Artists.</p>
+  </article>
 
-{{/* prebuild/layouts/index.html */}}
+  {{/* prebuild/layouts/index.html */}}
-{{ $url := "https://s.basspistol.org/api/pinned-users" }}
+  {{ $url := "https://s.basspistol.org/api/pinned-users" }}
-{{ $opts := dict
+  {{ $opts := dict
     "method" "post"
     "body" `{"complete": true}`
     "headers" (dict  "Content-Type" "application/json")
-}}
+  }}
-{{ with resources.GetRemote $url $opts }}
+  {{ with resources.GetRemote $url $opts }}
     {{ $monsters := unmarshal .Content }}
     {{ range $monsters }}
 
-<article>
+  <article>
     {{ if .url }}
-  <a href="{{ .url }}">
+    <a href="{{ .url }}" target="_blank">
     {{ else }}
-  <a href="https://s.basspistol.org/@{{ .username }}">
+    <a href="https://s.basspistol.org/@{{ .username }}" target="_blank">
     {{ end }}
     <figure>
       <figcaption>{{ .username }}</figcaption>
       <img src="{{ .avatarUrl }}" />
     </figure>
     </a>
-</article>
+  </article>
 
     {{ end }}
-{{ end }}
+  {{ end }}
 
 </section>