Merge pull request #135 from codeitcodes/dev

Dev

Author: benhatsor

about.md

@@ -0,0 +1,32 @@
+<h1 id="details">Technical details</h2>
+
+<h3>The Codeit Editor</h3>
+
+The editor utilizes:
+
+<ul>
+  
+  <li>The <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/contenteditable"><code>contenteditable</code> API</a>, to enable editing the highlighted HTML. Compare this to other code editors, such as Visual Studio Code, Atom, or CodeMirror, which use an invisible overlaid textarea on top of the highlighted HTML, and constantly synchronize the textarea and DOM. Codeit's approach is more performant, as synchronisation between textarea and DOM, and code buffering, are not required.</li>
+  
+  <li>The <a href="https://developer.mozilla.org/en-US/docs/Web/API/MutationObserver"><code>MutationObserver</code> API</a>, to quickly detect changes in the DOM without an event listener. Changes from JavaScript will be detected automatically by the editor, without the need to run an <code>update</code> function.</li>
+  
+  <li>The <a href="https://developer.mozilla.org/en-US/docs/Web/API/Range"><code>Range</code> API</a>, for optimized parsing of the DOM. Using the <code>contenteditable</code> API includes a caveat, as the browser reparses the entire DOM after every change. However, using the Range API optimizes DOM parsing by directing the browser to parse only what's actually changed. This approach works for files up to 1000 lines in length. After that, code buffering is required.</li>
+  
+</ul>
+
+The editor is <a href="/lib">fully standalone</a>, and is a library by itself. It includes multiple custom <a href="/lib">plugins</a> and <a href="https://github.com/PrismJS/prism/tree/master/themes">themes</a>.
+
+<h3>Security</h3>
+
+When you log in to Git, Codeit recives an authuntication token from your Git hosting provider.
+This token is saved on your device and is used to read and commit code.
+
+When you edit a file, Codeit saves a local copy of the file on your device.
+When you commit an edited file, its local copy is deleted.
+
+<h3>Privacy</h3>
+
+Codeit dosen't collect data. Your code stays on your device.
+Codeit uses [Plausible](https://plausible.io) to get stats. [See the stats.](https://plausible.io/codeit.codes)
+
+If cookies are disabled, your browser will block Codeit from installing a Service Worker, which is necessary for the app to function. For this reason, we ask you enable cookies on the Codeit site.

homepage/about.md

@@ -1,7 +1,3 @@
-/* Yeah I know it's messy,
-   I was busy working on the Codeit app so I used a site generator :3
-*/
-
 @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');
 
 /*! normalize.css v8.0.0 | MIT License | github.com/necolas/normalize.css */
@@ -3128,8 +3124,8 @@ body {
 }
 
 .footer__primary {
-  margin-right: 40px;
-  margin-bottom: 0
+  margin: 0;
+  margin-right: -7px;
 }
 
 .footer__end {
@@ -3208,7 +3204,8 @@ body {
 .footer__social {
   display: flex;
   list-style-type: none;
-  padding-left: 0
+  padding-left: 0;
+  margin: 0;
 }
 
 .footer__social li {
@@ -3234,12 +3231,11 @@ body {
 .footer__linkRow {
   display: flex;
   flex-wrap: wrap;
-  margin: 0 -8px
 }
 
 .footer__linkRow a {
   color: inherit;
-  margin: 0 8px
+  margin: 0 7px
 }
 
 .footer__linkGroups {
@@ -4242,7 +4238,8 @@ body {
 }
 
 .ftPoint__description {
-  font-size: 1.15em
+  font-size: 1.15em;
+  color: #b3b3b3;
 }
 
 .ftPoint__description p {
@@ -4322,7 +4319,7 @@ body {
   }
 
   .ft:not(.ft--right):not(.ft--noPdx) .ft__half:last-child {
-    padding-top: 50px
+    padding-top: 25px
   }
 
   .ft:not(.ft--right):not(.ft--noPdx) .ft__half:first-child {
@@ -4377,6 +4374,15 @@ body {
   .ftChecks {
     justify-content: center
   }
+  
+  #footer .footer__social {
+    margin: 15px auto;
+  }
+  
+  #footer .footer__primary {
+    margin: auto;
+    margin-bottom: 10px;
+  }
 }
 
 @media only screen and (max-width:500px) {
@@ -4681,11 +4687,11 @@ a[href]:not(.btn):hover {
 }
 
 #hero {
-  background: #010101 !important;
+  background: hsl(228deg 14% 7%) !important;
 }
 
 body {
-  background: #010101;
+  background: hsl(228deg 14% 7%);
 }
 
 #hero .pdxParent--smartphones::after {
@@ -4694,7 +4700,7 @@ body {
   top: 0;
   width: 100%;
   height: 100px;
-  background: linear-gradient(180deg, #010101, #01010100);
+  background: linear-gradient(180deg, hsl(228deg 14% 7%), hsl(228deg 14% 7% / 0%));
   z-index: 10;
 }
 
@@ -4757,7 +4763,7 @@ body {
   content: '';
   height: 28px;
   width: 28px;
-  box-shadow: inset 0 0 0 2px rgb(255 255 255 / 10%), inset 0 -10px 0 0 #000, inset 0 0 0 2px rgb(255 255 255 / 50%);
+  box-shadow: inset 0 0 0 2px rgb(255 255 255 / 10%), inset 0 -10px 0 0 #0f1014, inset 0 0 0 2px rgb(255 255 255 / 50%);
   background: transparent;
   color: transparent;
   animation: loader 1s linear infinite;
@@ -4766,7 +4772,7 @@ body {
 }
 
 .ctas .btn.second.loading::before {
-  box-shadow: inset 0 0 0 2px rgb(255 255 255 / 10%), inset 0 -10px 0 0 #1c1c1d, inset 0 0 0 2px rgb(255 255 255 / 50%);
+  box-shadow: inset 0 0 0 2px rgb(255 255 255 / 10%), inset 0 -10px 0 0 #1a1c24, inset 0 0 0 2px rgb(255 255 255 / 50%);
 }
 
 .ctas .btn.installed {
@@ -4794,7 +4800,7 @@ body {
 }
 
 #features {
-  background: #111 !important;
+  background: #1a1c24 !important;
   margin-top: -5px;
 }
 
@@ -4820,19 +4826,24 @@ body {
 
 #features .iconWrapper .backdrop {
   border-radius: 50%;
-  background: #0066B8;
+  background: hsl(228deg 38% 21%);
 }
 
 #features .iconWrapper .backdrop circle {
   fill: none;
 }
 
 #features .iconWrapper.circle svg.icon {
-  stroke: #fff;
   width: 34px;
   height: 34px;
   max-width: auto;
   max-height: auto;
+  color: hsl(223deg 92% 87%);
+}
+
+#features .ftPoint__title {
+  color: #f1f1f2e0;
+  margin-bottom: 1px;
 }
 
 #features::after {
@@ -4841,12 +4852,12 @@ body {
   bottom: 0;
   width: 100%;
   height: 50px;
-  background: linear-gradient(0deg, #111111, #11111100);
+  background: linear-gradient(0deg, #1a1c24, #1a1c2400);
   z-index: 10;
 }
 
 #cta {
-  background: #1c1c1d !important;
+  background: #1a1c24 !important;
 }
 
 #footer a {