flesh out features section, make css sad

cloudybutnorain · Dec 26, 2023 · 1b61e64 · 1b61e64
1 parent 9cf07be
commit 1b61e64
Show file tree

Hide file tree

Showing 3 changed files with 68 additions and 9 deletions.
diff --git a/site/assets/css/markdown.css b/site/assets/css/markdown.css
@@ -40,7 +40,7 @@ h3 {
   font-weight: 600;
   font-size: 24px;
   line-height: 30px;
-  margin: 18px 0 0 0;
+  margin: 24px 0 0 0;
 }
 
 h4 {
@@ -55,6 +55,22 @@ li {
   padding-top: 16px;
 }
 
+details {
+  background-color: #a5d8ff;
+  margin-top: 16px;
+  padding: 8px 0px;
+}
+
+summary {
+  list-style: initial;
+  list-style-type: square;
+  margin-left: 28px;
+}
+
+details div {
+  margin-left: 28px;
+}
+
 hr {
   margin: 24px 0 24px 0;
 }

diff --git a/site/assets/css/tailwind.css b/site/assets/css/tailwind.css
@@ -550,6 +550,10 @@ video {
   position: relative;
 }
 
+.mt-2 {
+  margin-top: 0.5rem;
+}
+
 .block {
   display: block;
 }
@@ -606,6 +610,16 @@ video {
   transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
 }
 
+.cursor-pointer {
+  cursor: pointer;
+}
+
+.select-none {
+  -webkit-user-select: none;
+     -moz-user-select: none;
+          user-select: none;
+}
+
 .resize {
   resize: both;
 }
@@ -618,6 +632,10 @@ video {
   flex-direction: column;
 }
 
+.items-start {
+  align-items: flex-start;
+}
+
 .items-end {
   align-items: flex-end;
 }
@@ -626,10 +644,18 @@ video {
   align-items: center;
 }
 
+.justify-start {
+  justify-content: flex-start;
+}
+
 .justify-center {
   justify-content: center;
 }
 
+.justify-between {
+  justify-content: space-between;
+}
+
 .border {
   border-width: 1px;
 }
@@ -694,6 +720,10 @@ video {
   padding-bottom: 2rem;
 }
 
+.pt-2 {
+  padding-top: 0.5rem;
+}
+
 .text-center {
   text-align: center;
 }

diff --git a/site/index.html b/site/index.html
@@ -28,15 +28,28 @@ <h2>About</h2>
       </div>
     </div>
     <div class="w-full bg-[#C6DFEF] flex flex-row items-center justify-center">
-      <div class="max-w-[768px] px-8 py-8">
+      <div class="w-full max-w-[768px] px-8 py-8">
         <h2 class="text-[#161253]">Features</h2>
-        <ul>
-          <li><b>A fast, globally-replicated CDN</b><br/>We use Bunny CDN to host the actual websites. This is great for you, since it means your sites are served from fast SSD storage always located near your visitors, and my servers going down won't mean your site is unavailable.</li>
-          <li><b>SSL certificates and DDOS protection</b><br/>including for custom domain names!</li>
-          <li><b>Built-in analytics (and soon, monitoring)</b><br/>and because we use server-side access logs for this, it just works out of the box. No need for tracking pixels, 3rd party services, or GDPR cookie-consent banners. Run your site Javascript-free if you want!</li>
-          <li><b>A familiar git-based workflow</b><br/>if you've ever used Heroku, you know how nice it is to deploy your code with a simple <code>git push</code>. And if you haven't, it's just a single command from a tool probably already installed on your computer.</li>
-          <li><b>Zero big-tech bullshit</b><br/>this was all made by one person (me, Brandon)! I am not Amazon, Microsoft, or Google, and CBNR deliberately avoids using any of their services, at least directly. Sleep better knowing that less of your money is going into the pockets of Jeff Bezos.</li>
-        </ul>
+        <details>
+          <summary class="select-none cursor-pointer"><b>A fast, globally-replicated CDN</b></summary>
+          <div class="mt-2">The websites of CBNR are served by <a href="#">Bunny.net</a>, via SSDs located all over the world, and folks viewing your website get their copy delivered directly from Bunny. So, your sites are faster and more reliable, and CBNR going down doesn't mean your sites are down too.</div>
+        </details>
+        <details>
+          <summary class="select-none cursor-pointer"><b>SSL certificates and DDoS protection</b></summary>
+          <div class="mt-2">These are table-stakes features you need to host a site on the public web today, which you get "for free" from our integration with the CDN. This includes SSL certificates for custom domains, which CBNR fully supports.</div>
+        </details>
+        <details open="">
+          <summary class="select-none cursor-pointer"><b>Built-in analytics (and soon, monitoring)</b></summary>
+          <div class="mt-2">Know how popular your site is over time. And because we use server-side access logs for this, it just works out of the box -- no need for tracking pixels, 3rd party services, or GDPR cookie-consent banners. Run your site Javascript-free if you want!</div>
+        </details>
+        <details>
+          <summary class="select-none cursor-pointer"><b>A familiar Git-based workflow</b></summary>
+          <div class="mt-2">If you've ever used Heroku, you know how nice it is to simply <code>git push</code> and see your code deployed. And if you haven't, it's just a single command from a tool probably already installed on your computer.</div>
+        </details>
+        <details>
+          <summary class="select-none cursor-pointer"><b>Zero big-tech bullshit</b></summary>
+          <div class="mt-2">This was all made by one person (<a href="#">me, Brandon</a>). I am not Amazon, Microsoft, or Google, and CBNR deliberately avoids using any of their services, at least directly. Support a less dystopian future for the Internet!</div>
+        </details>
       </div>
     </div>
     <div class="w-full h-48 bg-white flex flex-row items-center justify-center">