Add legal (#11)

* add legal page

Author: b5

content/_index.md

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

content/legal.md

@@ -53,4 +53,54 @@ template = "page.html"
 [extra]
 +++
 
-This is the legal page
+Our content licensing policies are based on those of the [Google Developer](https://developers.google.com/terms/site-policies) website.
+
+We are pleased to license much of the documentation on n0.computer under terms that explicitly encourage people to take, modify, reuse, re-purpose, and remix our work as they see fit.
+
+You will find the following notice at the bottom of many pages on the n0.computer website:
+
+> Except as otherwise noted, the content of this page is licensed under the Creative Commons Attribution 4.0 License. For details, see our [Site Policies](/legal).
+
+When you see a page with this notice you are free to use nearly everything on the page in your own creations. For example, you could quote the text in a book, cut-and-paste sections to your blog, record it as an audiobook for the visually impaired, or even translate it into Swahili. Really. That's what open content licenses are all about. We just ask that you give us attribution when you reuse our work.
+
+You may also find the following notice on the bottom of some pages:
+
+   Except as otherwise noted, the content of this page is licensed under the Creative Commons Attribution 4.0 License, and code samples are licensed under the Apache 2.0 License. For details, see our Site Policies.
+
+When you see this notice, you are free to use the content, and in addition you are free to use the computer source code that appears in the content (such as in examples) in the code of your own projects.
+
+
+## What is not licensed?
+
+We say "nearly everything" as there are a few simple conditions that apply.
+
+number 0's trademarks and other brand features are not included in this license. For example, the number 0 logo is not covered, and neither are our trade dress, our other trademarks, or our brand features. You are not allowed to use these without our permission.
+
+In some cases, a page may include content consisting of images, audio or video material, or a link to content on a different webpage (such as videos or slide decks). This content is not covered by the license, unless specifically noted.
+
+## Attribution
+
+Proper attribution is required when you reuse or create modified versions of content that appears on a page made available under the terms of the Creative Commons Attribution license. The complete requirements for attribution can be found in section 3 of the Creative Commons legal code.
+
+In practice we ask that you provide attribution to number 0 to the best of the ability of the medium in which you are producing the work.
+
+There are several typical ways in which this might apply:
+
+### Exact Reproductions
+
+If your online work exactly reproduces text or images from this site, in whole or in part, please include a paragraph at the bottom of your page that reads:
+
+> Portions of this page are reproduced from work created and shared by number 0 and used according to terms described in the Creative Commons 4.0 Attribution License.
+
+Also, please link back to the original source page so that readers can refer to it for more information.
+
+### Modified Versions
+
+If your online work shows modified text or images based on the content from this site, please include a paragraph at the bottom of your page that reads:
+
+> Portions of this page are modifications based on work created and shared by number 0 and used according to terms described in the Creative Commons 4.0 Attribution License.
+
+Again, please link back to the original source page so that readers can refer to it for more information. This is even more important when the content has been modified.
+
+### Other Media
+If you produce non-hypertext works, such as books, audio, or video, we ask that you make a best effort to include a spoken or written attribution in the spirit of the messages above.

src/styles/style.css

@@ -1,61 +1,72 @@
-@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;700&family=Space+Mono&display=swap');
+@import url("https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;700&family=Space+Mono&display=swap");
 
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
 
+#page-content h1 {
+    font-size: 28px;
+}
+#page-content h2 {
+    font-size: 24px;
+}
+#page-content h3 {
+    font-size: 22px;
+}
+#page-content h4 {
+    font-size: 20px;
+}
 
-.blog #page-content h1 { font-size: 28px; }
-.blog #page-content h2 { font-size: 24px; }
-.blog #page-content h3 { font-size: 22px; }
-.blog #page-content h4 { font-size: 20px; }
-
-.blog #page-content h1,
-.blog #page-content h2, 
-.blog #page-content h3, 
-.blog #page-content h4, 
-.blog #page-content h5, 
-.blog #page-content h6 {
-  margin-top: 12px;
-  margin-bottom: 12px;
+#page-content h1,
+#page-content h2,
+#page-content h3,
+#page-content h4,
+#page-content h5,
+#page-content h6 {
+    margin-top: 12px;
+    margin-bottom: 12px;
 }
 
-.blog #page-content p {
-  margin-bottom: 16px;
-  line-height: 1.5em;
-  /* color: #cfd7e6; */
+#page-content p {
+    margin-bottom: 16px;
+    line-height: 1.5em;
+    /* color: #cfd7e6; */
 }
 
-.blog #page-content ul { list-style: disc; }
-.blog #page-content ol { list-style: bullets; }
+#page-content ul {
+    list-style: disc;
+}
+#page-content ol {
+    list-style: bullets;
+}
 
-.blog #page-content ol,
-.blog #page-content ul {
-  padding-left: 20px;
-  line-height: 1.45em;
-  margin-bottom: 14px;
-  margin-top: 14px;
-  /* color: #b9c0cd; */
+#page-content ol,
+#page-content ul {
+    padding-left: 20px;
+    line-height: 1.45em;
+    margin-bottom: 14px;
+    margin-top: 14px;
+    /* color: #b9c0cd; */
 }
 
-.blog #page-content ol li,
-.blog #page-content ul li {
-  margin-bottom: 5px;
+#page-content ol li,
+#page-content ul li {
+    margin-bottom: 5px;
 }
 
-.blog #page-content blockquote {
-  padding-left: 20px;
-  margin-top: 20px;
-  margin-bottom: 20px;
-  font-style: italic;
+#page-content blockquote {
+    padding-left: 20px;
+    margin-top: 20px;
+    margin-bottom: 20px;
+    font-style: italic;
 }
 
-.blog #page-content a {
-  text-decoration: underline;
-  text-decoration-style: dotted;
-  text-decoration-color: #b9c0cd;
+#page-content a {
+    text-decoration: underline;
+    text-decoration-style: dotted;
+    text-decoration-color: #b9c0cd;
 }
 
-.blog #page-content aside {
-  font-style: italic;
-}
+#page-content aside {
+    font-style: italic;
+}

static/styles/style.css

@@ -331,6 +331,10 @@ img, video {
   margin-bottom: 2rem;
 }
 
+.mt-5 {
+  margin-top: 1.25rem;
+}
+
 .block {
   display: block;
 }
@@ -403,6 +407,18 @@ img, video {
   max-width: 42rem;
 }
 
+.max-w-3xl {
+  max-width: 48rem;
+}
+
+.max-w-4xl {
+  max-width: 56rem;
+}
+
+.max-w-xl {
+  max-width: 36rem;
+}
+
 .flex-1 {
   flex: 1;
 }
@@ -516,6 +532,14 @@ img, video {
   padding: .5rem;
 }
 
+.p-4 {
+  padding: 1rem;
+}
+
+.p-6 {
+  padding: 1.5rem;
+}
+
 .px-4 {
   padding-left: 1rem;
   padding-right: 1rem;
@@ -640,6 +664,11 @@ img, video {
   line-height: 1.75rem;
 }
 
+.text-xs {
+  font-size: .75rem;
+  line-height: 1rem;
+}
+
 .font-bold {
   font-weight: 700;
 }
@@ -719,6 +748,11 @@ img, video {
   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));
+}
+
 .shadow-inner {
   --tw-shadow: inset 0 2px 4px 0 #0000000d;
   --tw-shadow-colored: inset 0 2px 4px 0 var(--tw-shadow-color);
@@ -753,63 +787,63 @@ img, video {
   transition-timing-function: cubic-bezier(.4, 0, .2, 1);
 }
 
-.blog #page-content h1 {
+#page-content h1 {
   font-size: 28px;
 }
 
-.blog #page-content h2 {
+#page-content h2 {
   font-size: 24px;
 }
 
-.blog #page-content h3 {
+#page-content h3 {
   font-size: 22px;
 }
 
-.blog #page-content h4 {
+#page-content h4 {
   font-size: 20px;
 }
 
-.blog #page-content h1, .blog #page-content h2, .blog #page-content h3, .blog #page-content h4, .blog #page-content h5, .blog #page-content h6 {
+#page-content h1, #page-content h2, #page-content h3, #page-content h4, #page-content h5, #page-content h6 {
   margin-top: 12px;
   margin-bottom: 12px;
 }
 
-.blog #page-content p {
+#page-content p {
   margin-bottom: 16px;
   line-height: 1.5em;
 }
 
-.blog #page-content ul {
+#page-content ul {
   list-style: disc;
 }
 
-.blog #page-content ol {
+#page-content ol {
   list-style: bullets;
 }
 
-.blog #page-content ol, .blog #page-content ul {
+#page-content ol, #page-content ul {
   margin-top: 14px;
   margin-bottom: 14px;
   padding-left: 20px;
   line-height: 1.45em;
 }
 
-.blog #page-content ol li, .blog #page-content ul li {
+#page-content ol li, #page-content ul li {
   margin-bottom: 5px;
 }
 
-.blog #page-content blockquote {
+#page-content blockquote {
   margin-top: 20px;
   margin-bottom: 20px;
   padding-left: 20px;
   font-style: italic;
 }
 
-.blog #page-content a {
+#page-content a {
   text-decoration: underline dotted #b9c0cd;
 }
 
-.blog #page-content aside {
+#page-content aside {
   font-style: italic;
 }
 
@@ -923,6 +957,11 @@ img, video {
     padding-bottom: 20rem;
   }
 
+  .sm\:px-10 {
+    padding-left: 2.5rem;
+    padding-right: 2.5rem;
+  }
+
   .sm\:pr-0 {
     padding-right: 0;
   }
@@ -950,6 +989,11 @@ img, video {
   .md\:w-3\/4 {
     width: 75%;
   }
+
+  .md\:px-10 {
+    padding-left: 2.5rem;
+    padding-right: 2.5rem;
+  }
 }
 
 @media (min-width: 1024px) {

templates/layout.html

@@ -69,7 +69,7 @@
             <img class="block md:hidden h-8 w-auto" src="img/logos/wordmark-small-salmon.svg" alt="Number Zero">
             <img class="hidden md:block h-8 w-auto" src="img/logos/wordmark-full-salmon.svg" alt="Number Zero">
           </a>
-          
+
           <div class="hidden inset-y-0 sm:block sm:pr-0 sm:inset-auto">
             <div class="flex space-x-5">
               <!-- Current: "bg-n0gray-900 text-white", Default: "text-n0gray-400 hover:bg-n0gray-700 hover:text-white" -->
@@ -120,6 +120,9 @@
         <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">
+        <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>
   {% endblock footer %}