Updated form styles, added code comments

Author: EzequielBruni

TODO

@@ -18,3 +18,5 @@ Todo:
     ✔ Checkboxes @done(20-07-07 20:38)
     ✔ Radio buttons @done(20-07-07 20:38)
   ✔ Re-configure repository @done(20-07-07 21:59)
+  ✔ Finish up Forms @done(21-01-27 21:41)
+  ☐ Add more code comments

_colors.scss

@@ -2,7 +2,7 @@
 
 $primary-color: rgb(219,8,138) !default;
 
-$secondary-color: darken($primary-color, 20%) !default;
+$secondary-color: desaturate(darken($primary-color, 20%), 20%) !default;
 
 $tertiary-color: rgb(167,218,212) !default;
 
@@ -12,7 +12,7 @@ $dark-background: rgb(46,65,72) !default;
 
 $dark-text: rgb(46,65,72) !default;
 
-$light-text: rgb(255,246,183)  !default;
+$light-text: rgb(255,255,255)  !default;
 
 $success-color: rgb(18, 194, 62) !default;
 

_content-components.scss

@@ -38,13 +38,13 @@ img {
   border-left: .5rem solid $tertiary-color;
 }
 
-// Focused Images
+// Focused Images are designed to make pictures stand out a little more
 
 @media (min-width: 1100px) {
 
   div.img-focused, img.img-focused, .img-focused {
     width: calc(100% + 6rem);
-    margin-left: -1.5rem;
+    margin-left: -3rem;
   }
 
 }

_forms.scss

@@ -1,24 +1,29 @@
 /* FORM STYLES */
 
+// Trigger form styles only in the content
+// This makes forms outside of the content, such as search forms, easier to style
+
 .content form, form.content {
   margin-bottom: 1.5rem;
 }
 
-input[type=text], input[type=number], input[type=password], input[type=file], textarea, select {
-  display: block;
-  box-sizing: border-box;
-  font-family: $monospace-font;
-}
+// Turn every immediatechild element of the form into its own block-level element
 
 form.content > *, .content form > * {
   padding: 1rem;
   display: block;
-  background: white;
-  border-top: 1px dotted $dark-background;
-  
+  border-top: 1px solid $tertiary-color;
+}
+
+// Basic styles for the most common form elements
+
+input[type=text], input[type=number], input[type=password], input[type=file], textarea, select {
+  display: block;
+  box-sizing: border-box;
+  font-family: $monospace-font;
 }
 
-.content > label, .content form > label, {
+.content > label, .content form > label {
 
   font-weight: bold;
 
@@ -39,16 +44,17 @@ form.content > *, .content form > * {
 
 }
 
+// Styles for fieldsets, checkboxes, and radio boxes
+
 .content fieldset, .content form fieldset {
   border-top: 1px solid $tertiary-color;
 
   legend {
     font-weight: bold;
-    padding: 0rem .3rem 0rem .3rem;
+    padding: 0rem .5rem 0rem .5rem;
   }
 }
 
-
 input[type=checkbox], input[type=radio] {
   margin-right: .3rem;
 
@@ -57,12 +63,14 @@ input[type=checkbox], input[type=radio] {
   }
 }
 
-input[type=submit] {
+// Styles for submit and button elements
+
+input[type=submit], button {
   background-color: $secondary-color;
   border: 1px solid $dark-background;
   color: $light-text;
   border-radius: .3rem;
-  font-size: 1rem;
-  padding: .3rem;
-  font-family: $heading-font;
+  font-size: 1em;
+  padding: .5em;
+  font-family: $monospace-font;
 }

_helper-classes.scss

@@ -1,7 +1,7 @@
 
 /* FLOATS */
 
-// Basic floats
+// Basic floats move things to the left or right in a content area
 
 @media (min-width: 60rem) {
 
@@ -26,15 +26,15 @@
 }
 
 
-// Out-of-bounds floats
+// Out-of-bounds floats move things a little bit farther to the left or right, out of bounds
 
 @media (min-width: 1100px) {
   .content .float-left.float-hard {
-    margin-left: -1.5rem;
+    margin-left: -3rem;
   }
 
   .content .float-right.float-hard {
-    margin-right: -1.5rem;
+    margin-right: -3rem;
   }
 }
 

_mixins.scss

@@ -1,5 +1,8 @@
 /* ICONS */
 
+// These icons are used for the alert and notice boxes 
+// They are implemented as mixins to keep things organized, and to make them easily usable elsewhere
+
 // Error warning (filled)
 
 @mixin icon-warning-filled {
@@ -21,7 +24,6 @@
 
 }
 
-
 // Search icon (regular)
 
 @mixin icon-search-regular {

_navigation.scss

@@ -25,22 +25,24 @@ nav.nav-bar, nav.nav-block {
   }
 }
 
+  // Styles to add background colors into navigation bars. Used on dropdowns, accordions, and hamburger menus, among others
 
-.nav-filled {
-  ul {
-    li {
-      a {
-        background: $light-background;
-        color: $primary-color;
+  .nav-filled {
+    ul {
+      li {
+        a {
+          background: $light-background;
+          color: $primary-color;
 
-        &:hover {
-          background: darken($tertiary-color, 5%);
+          &:hover {
+            background: darken($tertiary-color, 5%);
+          }
         }
       }
     }
   }
-}
 
+// The basic styles for nav bars on tablet and desktop-sized screens
 
 @media (min-width: 50rem) {
   nav.nav-bar {
@@ -65,6 +67,8 @@ nav.nav-bar, nav.nav-block {
   }
 }
 
+// Styles for aligning navigation links to the left or right
+
 nav.left, nav.right {
 
   ul {
@@ -86,7 +90,6 @@ nav.left, nav.right {
 }
 
 
-
 nav.right {
 
   ul {
@@ -100,8 +103,8 @@ nav.right {
 }
 
 
-
 // Simple Vertical Navigation Block
+// Just add this to any nav bar to make it vertical.
 
 nav.nav-block {
 
@@ -118,10 +121,11 @@ nav.nav-block {
 }
 
 
-
 // The Dropdown Navigation Bar
 
-// First, let's hide the child lists from view.
+// This works with no JS, using a checkbox to implement the show/hide on click functionality 
+
+// First, let's hide the child lists from view
 
 nav.dropdown {
   ul li ul {
@@ -142,7 +146,7 @@ nav.dropdown {
         flex: 1;
       }
 
-      // Hide the actual checkbox. People will click the label to reveal the dropdown
+      // Hide the actual checkbox - People will click the label to reveal the dropdown
 
       input[type=checkbox] {
         display: none;
@@ -170,7 +174,7 @@ nav.dropdown {
     }
   }
 
-  // Some styles specifically for the vertical navigation block
+  // Some styles specifically for the using the vertical navigation block with dropdowns
 
   &.nav-block {
     ul li ul {
@@ -179,6 +183,7 @@ nav.dropdown {
   }
 }
 
+// And now, the desktop / tablet version
 
 @media (min-width: 50rem) {
   nav.dropdown {
@@ -215,6 +220,8 @@ nav.dropdown {
 
 // The Centered Navigation Bar
 
+// Simply put, this aligns all the links to the middle
+
 nav.centered {
   ul {
     display: flex;
@@ -246,6 +253,8 @@ nav.centered {
 
 // Hamburger Navigation
 
+// Works on the same principle as the drop-down menu, requires a checkbox
+
 nav.hamburger {
 
   input[type=checkbox] {
@@ -319,6 +328,8 @@ nav.breadcrumb {
 
 // Accordion Navigation
 
+// Drop-down and hamburger menus on steroids
+
 nav.accordion {
 
   input[type=checkbox] {

_type.scss

@@ -21,16 +21,14 @@
   $monospace-font: 'IBM Plex Mono', monospace;
 
 /* TYPE SCALING */
-  
 
+// This setup allows typefaces to change size as you make the screen wider or smaller.
 
 :root {
   font-size: calc(1rem + ((1vw - 7.68px) * 0.3472));
   min-height: 0vw;
 }
 
-
-
   @media (min-width: 1920px) {
     :root {
       font-size: 20px;
@@ -82,7 +80,6 @@
 
 /* GENERAL ALIGNMENTS */
 
-
   p,
   ul,
   ol,