n0 protocol services page (#12)

Author: b5

content/_index.md

@@ -1,4 +1,4 @@
 +++
-title = "number zero"
+title = "number 0"
 description = "Less net work for networks"
 +++

content/n0ps.md

@@ -0,0 +1,5 @@
++++
+title = "number 0 protocol services"
+description = "Build on the edge with the team that lives there"
+template="n0ps.html"
++++

static/styles/style.css

@@ -307,6 +307,26 @@ img, video {
   margin-bottom: auto;
 }
 
+.mt-5 {
+  margin-top: 1.25rem;
+}
+
+.ml-16 {
+  margin-left: 4rem;
+}
+
+.mb-1 {
+  margin-bottom: .25rem;
+}
+
+.mb-2 {
+  margin-bottom: .5rem;
+}
+
+.mr-10 {
+  margin-right: 2.5rem;
+}
+
 .mt-2 {
   margin-top: .5rem;
 }
@@ -323,18 +343,10 @@ img, video {
   margin-right: 1rem;
 }
 
-.mb-2 {
-  margin-bottom: .5rem;
-}
-
 .mb-8 {
   margin-bottom: 2rem;
 }
 
-.mt-5 {
-  margin-top: 1.25rem;
-}
-
 .block {
   display: block;
 }
@@ -403,10 +415,6 @@ img, video {
   max-width: 72rem;
 }
 
-.max-w-2xl {
-  max-width: 42rem;
-}
-
 .max-w-3xl {
   max-width: 48rem;
 }
@@ -415,8 +423,8 @@ img, video {
   max-width: 56rem;
 }
 
-.max-w-xl {
-  max-width: 36rem;
+.max-w-2xl {
+  max-width: 42rem;
 }
 
 .flex-1 {
@@ -447,6 +455,10 @@ img, video {
   justify-content: space-between;
 }
 
+.gap-5 {
+  gap: 1.25rem;
+}
+
 .gap-y-6 {
   row-gap: 1.5rem;
 }
@@ -467,10 +479,19 @@ img, video {
   border-radius: .375rem;
 }
 
+.border-t {
+  border-top-width: 1px;
+}
+
 .border-dotted {
   border-style: dotted;
 }
 
+.border-gray-700 {
+  --tw-border-opacity: 1;
+  border-color: rgb(55 65 81 / var(--tw-border-opacity));
+}
+
 .border-gray-400 {
   --tw-border-opacity: 1;
   border-color: rgb(156 163 175 / var(--tw-border-opacity));
@@ -532,10 +553,6 @@ img, video {
   padding: .5rem;
 }
 
-.p-4 {
-  padding: 1rem;
-}
-
 .p-6 {
   padding: 1.5rem;
 }
@@ -580,6 +597,11 @@ img, video {
   padding-right: .5rem;
 }
 
+.py-6 {
+  padding-top: 1.5rem;
+  padding-bottom: 1.5rem;
+}
+
 .pt-40 {
   padding-top: 10rem;
 }
@@ -604,6 +626,18 @@ img, video {
   padding-bottom: 4rem;
 }
 
+.pt-6 {
+  padding-top: 1.5rem;
+}
+
+.pb-12 {
+  padding-bottom: 3rem;
+}
+
+.pr-24 {
+  padding-right: 6rem;
+}
+
 .pt-12 {
   padding-top: 3rem;
 }
@@ -654,6 +688,11 @@ img, video {
   line-height: 1.5rem;
 }
 
+.text-xs {
+  font-size: .75rem;
+  line-height: 1rem;
+}
+
 .text-4xl {
   font-size: 2.25rem;
   line-height: 2.5rem;
@@ -664,11 +703,6 @@ img, video {
   line-height: 1.75rem;
 }
 
-.text-xs {
-  font-size: .75rem;
-  line-height: 1rem;
-}
-
 .font-bold {
   font-weight: 700;
 }
@@ -693,6 +727,14 @@ img, video {
   line-height: 1.625;
 }
 
+.leading-8 {
+  line-height: 2rem;
+}
+
+.leading-7 {
+  line-height: 1.75rem;
+}
+
 .text-n0pink-300 {
   --tw-text-opacity: 1;
   color: rgb(255 210 204 / var(--tw-text-opacity));
@@ -718,6 +760,21 @@ img, video {
   color: rgb(228 228 231 / var(--tw-text-opacity));
 }
 
+.text-n0gray-700 {
+  --tw-text-opacity: 1;
+  color: rgb(63 63 70 / var(--tw-text-opacity));
+}
+
+.text-n0gray-500 {
+  --tw-text-opacity: 1;
+  color: rgb(113 113 122 / var(--tw-text-opacity));
+}
+
+.text-n0pink-500 {
+  --tw-text-opacity: 1;
+  color: rgb(255 172 156 / var(--tw-text-opacity));
+}
+
 .text-gray-400 {
   --tw-text-opacity: 1;
   color: rgb(156 163 175 / var(--tw-text-opacity));
@@ -738,19 +795,17 @@ img, video {
   color: rgb(243 244 246 / var(--tw-text-opacity));
 }
 
-.text-n0pink-500 {
-  --tw-text-opacity: 1;
-  color: rgb(255 172 156 / var(--tw-text-opacity));
-}
-
 .text-gray-300 {
   --tw-text-opacity: 1;
   color: rgb(209 213 219 / var(--tw-text-opacity));
 }
 
-.text-n0gray-700 {
-  --tw-text-opacity: 1;
-  color: rgb(63 63 70 / var(--tw-text-opacity));
+.underline {
+  text-decoration-line: underline;
+}
+
+.decoration-dotted {
+  text-decoration-style: dotted;
 }
 
 .shadow-inner {
@@ -899,6 +954,10 @@ img, video {
     display: block;
   }
 
+  .sm\:grid {
+    display: grid;
+  }
+
   .sm\:hidden {
     display: none;
   }
@@ -935,6 +994,15 @@ img, video {
     width: 33.3333%;
   }
 
+  .sm\:scroll-px-6 {
+    scroll-padding-left: 1.5rem;
+    scroll-padding-right: 1.5rem;
+  }
+
+  .sm\:grid-cols-2 {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+
   .sm\:flex-row {
     flex-direction: row;
   }
@@ -957,11 +1025,6 @@ img, video {
     padding-bottom: 20rem;
   }
 
-  .sm\:px-10 {
-    padding-left: 2.5rem;
-    padding-right: 2.5rem;
-  }
-
   .sm\:pr-0 {
     padding-right: 0;
   }

templates/layout.html

@@ -50,7 +50,7 @@
 <body class="bg-n0gray-900 text-n0gray-200 h-screen justify-between font-space">
   {% block navbar %}
   <nav id="navbar" class="fixed w-full transition-colors ease-in duration-1000">
-    <div class="max-w-6xl mx-auto px-4 sm:px-6 lg:px-10">
+    <div class="mr-auto px-4 sm:px-6 lg:px-10">
       <div class="relative flex items-center justify-between h-20">
         <div class="absolute inset-y-0 right-0 flex items-center sm:hidden">
           <!-- Mobile menu button-->
@@ -108,7 +108,7 @@
 
   {% block footer %}
   <footer class="bg-n0gray-1000 pt-20 pb-16">
-    <div class="w-full max-w-6xl mx-auto px-4 sm:px-6 lg:px-10 flex flex-col sm:flex-row">
+    <div class="w-full px-4 sm:px-6 lg:px-10 flex flex-col sm:flex-row">
       <div class="w-full sm:w-3/12">
         <a href="/">
           <img class="block h-8 w-auto" src="img/logos/wordmark-small-gray.svg" alt="Number Zero">
@@ -120,7 +120,7 @@
         <a href="/legal" target="blank" class="mx-4">legal</a>
       </div>
     </div>
-    <div class="w-full max-w-6xl mx-auto mt-5 p-6 md:px-10">
+    <div class="w-full mt-5 py-6 px-4 sm:scroll-px-6 md:px-10">
         <p class="text-xs text-n0gray-700">Except as otherwise noted, the content of this page is licensed under the Creative Commons Attribution 4.0 License.<br />For details, see our Site Policies.</p>
     </div>
   </footer>