Adding comments & Changing order

src/scss/_base.scss

@@ -1,4 +1,12 @@
 // sass-lint:disable no-vendor-prefixes
+
+/*=========================================
+1. Base --> Baseline: 8px = .8rem
+=========================================== */
+
+/* -- Disable elastic scrolling/bounce:
+webslides.js will add .ws-ready automatically. Don't worry :) -- */
+
 .ws-ready {
   &,
   body {

src/scss/_color.scss

@@ -1,5 +1,13 @@
 // sass-lint:disable no-color-literals
 // sass-lint:disable no-vendor-prefixes
+
+/*=========================================
+Colors
+=========================================== */
+
+/* -- Disable elastic scrolling/bounce:
+webslides.js will add .ws-ready automatically. Don't worry :) -- */
+
 body {
   background-color: $body-bg;
   color: $body-color;

src/scss/_typography.scss

@@ -1,3 +1,7 @@
+/*============================
+2. TYPOGRAPHY & LISTS
+============================== */
+
 html,
 body {
   font-weight: 300;
@@ -414,7 +418,6 @@ figure[class*='text-pull-'] {
   font-family: 'San Francisco', helvetica, arial, sans-serif;
 }
 
-
 @font-face {
   font-family: 'San Francisco';
   font-weight: 100;

src/scss/_vars.scss

@@ -8,7 +8,7 @@ $white: #fff;
 $mine-shaft: #333;
 $royal-blue: #44d;
 $havelock-blue: #67d;
-$catskill-white: #edf2f7;
+$catskill-white: #f7f9fb;
 $cod-gray: #111;
 $big-stone: #123;
 $rhino: #346;

src/scss/full.scss

@@ -44,41 +44,51 @@
 @import 'utils/mixins';
 @import 'utils/animations';
 @import 'utils/reset';
-@import 'base';
-@import 'color';
-@import 'typography';
-
-@import 'utils/bugs';
 @import 'utils/clear';
 
-@import 'modules/avatars';
-@import 'modules/badges';
+@import 'base';
+@import 'typography';
+
+@import 'modules/media';
 @import 'modules/browser';
-@import 'modules/button';
-@import 'modules/cards';
-@import 'modules/flexblock';
-@import 'modules/flexblock-activity';
-@import 'modules/flexblock-clients';
-@import 'modules/flexblock-features';
-@import 'modules/flexblock-gallery';
-@import 'modules/flexblock-metrics';
-@import 'modules/flexblock-plans';
-@import 'modules/flexblock-reasons';
-@import 'modules/flexblock-specs';
-@import 'modules/flexblock-steps';
-@import 'modules/form';
 @import 'modules/grid';
+
 @import 'modules/header-footer';
 @import 'modules/logo';
-@import 'modules/longform';
-@import 'modules/media';
 @import 'modules/navigation';
-@import 'modules/print';
-@import 'modules/promos';
-@import 'modules/quotes';
+
 @import 'modules/slides';
 @import 'modules/slides-bg';
 @import 'modules/slides-navigation';
-@import 'modules/tables';
-@import 'modules/toc';
+
+@import 'modules/flexblock';
+@import 'modules/flexblock-features';
+@import 'modules/flexblock-clients';
+@import 'modules/flexblock-steps';
+@import 'modules/flexblock-metrics';
+@import 'modules/flexblock-specs';
+@import 'modules/flexblock-reasons';
+@import 'modules/flexblock-gallery';
+@import 'modules/flexblock-plans';
+@import 'modules/flexblock-activity';
+@import 'modules/promos';
 @import 'modules/work';
+@import 'modules/toc';
+
+@import 'modules/cards';
+
+@import 'modules/quotes';
+@import 'modules/avatars';
+
+@import 'modules/tables';
+
+@import 'modules/form';
+@import 'modules/button';
+@import 'modules/badges';
+
+@import 'modules/longform';
+
+@import 'utils/bugs';
+@import 'modules/print';
+
+@import 'color';

src/scss/modules/_avatars.scss

@@ -1,3 +1,7 @@
+/*=========================================
+12. Avatars - uifaces.com
+=========================================== */
+
 cite img,
 img[class*='avatar-'] {
   display: inline-block;

src/scss/modules/_badges.scss

@@ -1,3 +1,6 @@
+/*=== App Store Badges === */
+/* Change width and height: 216x64px, 162x48px, 135x40... */
+
 [class*='badge-'] {
   background-repeat: no-repeat;
   background-size: cover;

src/scss/modules/_browser.scss

@@ -1,9 +1,5 @@
-
-h1 + .browser,
-h2 + .browser,
-p + .browser {
-  margin-top: 4.8rem;
-}
+/*=== HTML Browser (Screenshots) ================ */
+/* <figure class="browser"> img </figure> */
 
 .browser {
   border-radius: .3rem;

src/scss/modules/_button.scss

@@ -1,3 +1,4 @@
+/* Buttons/Badges */
 [class*='button'] {
   @media (min-width: 500px) {
     & + & {

src/scss/modules/_cards.scss

@@ -1,3 +1,7 @@
+/*===========================================
+10. Cards
+============================================= */
+
 [class*='card-'] {
   &,
   & > a {

src/scss/modules/_flexblock-activity.scss

@@ -1,3 +1,8 @@
+/*===========================================
+6.9 Block Activity <ul class="activity">
+CV / News
+============================================= */
+
 .flexblock.activity {
   flex-direction: column;
 

src/scss/modules/_flexblock-clients.scss

@@ -1,3 +1,7 @@
+/*=====================================================================
+6.2 Clients Logos <ul class="flexblock clients">
+======================================================================= */
+
 .flexblock.clients.blink li > a,
 .flexblock.clients li {
   padding: 0;

src/scss/modules/_flexblock-features.scss

@@ -1,3 +1,7 @@
+/*====================================================================
+6.1 Features <ul class="flexblock features">
+====================================================================== */
+
 .flexblock.features {
   > li {
     border-radius: .4rem;

src/scss/modules/_flexblock-gallery.scss

@@ -1,3 +1,9 @@
+/*=================================================
+6.7 Gallery - <ul class="flexblock gallery">
+Block Thumbnails li+.overlay+image
+img size recommended:800x600px
+=================================================== */
+
 .flexblock.gallery {
   li {
     margin-bottom: 4.8rem;

src/scss/modules/_flexblock-metrics.scss

@@ -1,3 +1,7 @@
+/*=================================================
+6.4 Block Numbers - <ul class="flexblock metrics">
+=================================================== */
+
 .metrics li {
   text-align: center;
   width: 100%;

src/scss/modules/_flexblock-plans.scss

@@ -1,3 +1,7 @@
+/*===============================================
+6.8 Plans / Pricing <ul class="flexblock plans">
+================================================= */
+
 .flexblock.plans {
   > li {
     border-radius: 3px;

src/scss/modules/_flexblock-reasons.scss

@@ -25,11 +25,12 @@
 
   @media (min-width: 768px) {
     padding-left: 8.8rem;
-
+    /* You need two digits? (1-10)*/
+    /*padding-left: 12rem; */
+}
     &:before {
       left: 2.4rem;
       position: absolute;
     }
   }
 }
-

src/scss/modules/_flexblock-specs.scss

@@ -1,3 +1,7 @@
+/*=====================================================
+6.5 Specs/Items: <ul class="flexblock specs">
+======================================================= */
+
 .specs li {
   text-align: left;
   width: 100%;

src/scss/modules/_flexblock-steps.scss

@@ -1,3 +1,8 @@
+/*==================================================
+6.3 flexblock.steps <ul class="flexblock steps">
+About, Philosophy...
+=================================================== */
+
 .steps li {
   width: 100%;
 

src/scss/modules/_flexblock.scss

@@ -1,3 +1,8 @@
+/*===============================================================
+6. Magic blocks with flexbox (Auto-fill & Equal Height)
+Blocks Links li>a = .flexblock.blink (.blink required)
+================================================================= */
+
 .flexblock {
   clear: both;
   display: flex;
@@ -79,8 +84,6 @@ footer .column h3 {
   margin-bottom: 0;
 }
 
-
-
 .flexblock li li,
 .flexblock.blink li li {
   padding: 0;

src/scss/modules/_form.scss

@@ -1,3 +1,7 @@
+/*=========================================
+14. Forms
+=========================================== */
+
 form {
   text-align: left;
 

src/scss/modules/_grid.scss

@@ -1,3 +1,6 @@
+/*=== 1.4. Basic Grid (Flexible blocks)
+Auto-fill & Equal height === */
+
 .grid {
   clear: both;
   display: flex;

src/scss/modules/_header-footer.scss

@@ -1,3 +1,10 @@
+/*=========================================
+3. Header & Footer
+=========================================== */
+
+/* -- If you want an unique, global header/footer,read this:
+https://github.com/webslides/webslides/issues/57 -- */
+
 header,
 footer,
 #navigation {

src/scss/modules/_logo.scss

@@ -1,3 +1,5 @@
+/*=== 3.1. Logo === */
+
 .logo {
   text-transform: lowercase;
 
@@ -7,6 +9,8 @@
     float: left;
     height: 4.8rem;
     text-indent: -4000px;
+    /*If you remove text-indent and add: */
+    /*padding-left: 6rem;*/
     vertical-align: middle;
     width: 4.8rem;
   }

src/scss/modules/_longform.scss

@@ -1,5 +1,12 @@
+/*=========================================
+15. Longform
+=========================================== */
+/* -- Posts = .wrap.longform -- */
+
 .longform {
   width: 72rem;
+  /* Why 72rem=720px?
+  90-95 characters per line = better reading speed */
 
   &.alignleft,
   &.alignright {
@@ -29,7 +36,12 @@
     font-size: 1.6rem;
     line-height: 2.4rem;
   }
-
+  /* Mobile: video full width */
+  .text-pull.embed {
+    margin-left: -2.4rem;
+    margin-right: -2.4rem;
+    padding-bottom: 60.6%;
+  }
   @media (min-width: 1280px) {
     [class*='text-pull-'] {
       max-width: 32%;

src/scss/modules/_media.scss

@@ -1,7 +1,12 @@
+/*=== 1.3 Responsive Media (videos, iframe...) === */
+
 .embed {
   height: 0;
   overflow: hidden;
+  /*aspect ratio:16:9*/
   padding-bottom: 56.6%;
+  /*aspect ratio: 4:3*/
+  /*padding-bottom: 75%;*/
   position: relative;
 
   iframe,
@@ -16,6 +21,9 @@
     width: 100%;
   }
 
+  /* -- Responsive background video
+  https://fvsch.com/code/video-background/ -- */
+
   .fullscreen > & {
     bottom: 0;
     height: auto;
@@ -25,6 +33,7 @@
     right: 0;
     top: 0;
 
+    /* 1. No object-fit support: */
     & > iframe,
     & > object,
     & > embed,
@@ -39,6 +48,7 @@
         width: 300%;
       }
 
+      /* 2. If supporting object-fit, overriding (1): */
       @supports (object-fit: cover) {
         height: 100%;
         left: 0;

src/scss/modules/_navigation.scss

@@ -1,7 +1,22 @@
+/*=========================================
+4. Navigation
+=========================================== */
+
+/*=== 4.1. Navbars === */
+
 nav ul {
   display: flex;
   flex-wrap: wrap;
+  /*====align left====*/
   justify-content: flex-start;
+  /* ==== align center ====*/
+  /*justify-content: center; */
+  /*====align right====*/
+  /* justify-content: flex-end; */
+  /*====separated columns li a====*/
+  /* justify-content: space-between; */
+  /*====separated columns centered li a====*/
+  /*justify-content: space-around;*/
 
   li {
     float: left;
@@ -36,10 +51,12 @@ header nav ul {
 
 nav.aligncenter ul,
 .aligncenter nav ul {
+  /* ==== align center ====*/
   justify-content: center;
 }
 
 nav.navbar ul li {
+  /*====full float li a ====*/
   flex: 1 1 auto;
 }
 

src/scss/modules/_print.scss

@@ -1,3 +1,7 @@
+/*=========================================
+16. PRINT
+=========================================== */
+
 // sass-lint:disable no-important
 @media print {
   @page {

src/scss/modules/_promos.scss

@@ -1,3 +1,7 @@
+/*=============================================
+7. Promos/Offers (pricing, tagline, CTA...)
+=============================================== */
+
 .cta {
   display: flex;
   flex-wrap: wrap;
@@ -57,7 +61,7 @@
     }
   }
 }
-
+/* --- Header CTA --- */
 .cta-cover {
   display: table;
   width: 100%;

src/scss/modules/_quotes.scss

@@ -1,3 +1,7 @@
+/*=========================================
+11. Quotes
+=========================================== */
+
 blockquote {
   display: inline-block;
   position: relative;
@@ -11,16 +15,11 @@ blockquote {
     }
   }
 }
-
+/* -- Interviews dl.text-interview -- */
 dd blockquote p:last-child {
   margin-bottom: 0;
 }
 
-.bg-apple blockquote p {
-  font-family: 'San Francisco', 'Roboto', helvetica, arial, sans-serif;
-  font-weight: 300;
-}
-
 cite {
   display: block;
   text-align: center;
@@ -34,9 +33,12 @@ cite {
 cite span {
   display: block;
 }
+/* -- A big Blockquote -- */
+/* .wall will be deprecated soon. Use .text-quote ;) */
 
 .text-quote,
 .wall {
+  /* Versatility: blockquote, p, h2... */
   position: relative;
 
   &:before {

src/scss/modules/_slides-bg.scss

@@ -1,3 +1,5 @@
+/*=== 5.3 Slides - Background Images/Videos === */
+
 .background,
 [class*='background-'] {
   background-repeat: no-repeat;
@@ -8,6 +10,8 @@
   top: 0;
 }
 
+/*=== BG Positions === */
+
 .background {
   background-position: center;
   background-size: cover;
@@ -64,12 +68,18 @@
     }
   }
 
+  /*fullscreen video
+    <video class="background-video">
+  */
+
   &-video {
     height: 100%;
     object-fit: fill;
     width: 100%;
   }
 }
+/*=== bg image/video overlay === */
+/*-- [class*="bg-"] .background.dark, [class*="bg-"] .embed.dark...  -- */
 
 [class*='bg-'] .light,
 [class*='bg-'] .light {
@@ -96,6 +106,8 @@
   }
 }
 
+/*=== Animated Background Image === */
+
 .background.anim {
   animation: anim 80s linear infinite;
   background-position: center top;
@@ -105,6 +117,10 @@
 
 }
 
+/*=== Background with a frame === */
+/*<span class="background" style="background-image:url('image.jpg')"></span>
+<span class="background frame"></span>*/
+
 [class*='background'].frame {
   margin: 2.4rem;
 }

src/scss/modules/_slides-navigation.scss

@@ -1,3 +1,5 @@
+/* === 5.2 Counter / Navigation Slides  === */
+
 #navigation {
   animation: fadeIn 8s;
   bottom: 0;
@@ -8,6 +10,7 @@
   position: fixed;
   right: 0;
   width: 24.4rem;
+  /* hover/visibility */
   z-index: 4;
 
   &:hover {

src/scss/modules/_slides.scss

@@ -1,3 +1,11 @@
+/*============================================
+5. SLIDES (Full Screen)
+Vertically and horizontally centered
+============================================== */
+
+/* Fade transition to all slides.
+* = All HTML elements will have those styles.*/
+
 section * {
   animation: fadeIn .6s ease-in-out;
 }
@@ -8,13 +16,17 @@ section .dark {
   animation-duration: 0s;
 }
 
+/*=== Section = Slide === */
+
 section,
 .slide {
   display: flex;
   flex-direction: column;
   justify-content: center;
-  min-height: 100vh;
+  min-height: 100vh; /*Fullscreen*/
+  /* Prototyping? min-height: 720px (Baseline: 8px = .8rem)*/
   padding: 2.4rem;
+  /*Fixed/Visible header? padding-top: 12rem; */
   page-break-after: always;
   position: relative;
   word-wrap: break-word;
@@ -24,19 +36,25 @@ section,
     padding-top: 12rem;
   }
 }
-
+/*slide with no padding (full card, .embed youtube video...) */
 .fullscreen {
-  padding: 0;
+  padding: 0
+  /* Fixed/Visible header?
+  padding:8.2rem 0 0 0;
+  */
 }
-
+/* slide alignment - top */
 .slide-top {
   justify-content: flex-start;
 }
-
+/* slide alignment - bottom */
 .slide-bottom {
   justify-content: flex-end;
 }
 
+/*== 5.1. Mini container width:50%
+Aligned items [class*="content-"]=== */
+
 [class*='content-'] {
   position: relative;
   text-align: left;

src/scss/modules/_tables.scss

@@ -1,3 +1,7 @@
+/*=========================================
+13. Tables
+=========================================== */
+
 table {
   margin-bottom: 3.2rem;
   margin-top: 3.2rem;

src/scss/modules/_toc.scss

@@ -1,3 +1,7 @@
+/*===========================================
+9. Table of contents
+============================================= */
+
 .toc,
 .toc ol > li:before,
 .chapter {

src/scss/modules/_work.scss

@@ -1,3 +1,7 @@
+/*=========================================
+8. Work/Resumé/CV <ul class="work">
+=========================================== */
+
 .work {
   clear: both;
   display: flex;
@@ -20,6 +24,7 @@
 
   p {
     margin-bottom: 0;
+    transition: .3s
   }
 
   li a {
@@ -30,11 +35,6 @@
     width: 100%;
   }
 
-  li a p,
-  li:first-child a:hover p:first-child {
-    transition: .3s;
-  }
-
   li p {
     padding-left: 1.2rem;
   }
@@ -106,9 +106,3 @@
     width: 1px;
   }
 }
-
-.text-pull.embed {
-  margin-left: -2.4rem;
-  margin-right: -2.4rem;
-  padding-bottom: 60.6%;
-}

src/scss/utils/_animations.scss

@@ -1,3 +1,10 @@
+/* === 1.2 Animations ================
+Just 5 basic animations:
+.fadeIn, .fadeInUp, .zoomIn, .slideInLeft, and .slideInRight
+https://github.com/daneden/animate.css */
+
+/*-- fadeIn -- */
+
 @keyframes fadeIn {
   from {
     opacity: 0;
@@ -12,6 +19,7 @@
   animation: fadeIn 1s;
 }
 
+/*-- fadeInUp -- */
 @keyframes fadeInUp {
   from {
     opacity: 0;
@@ -28,6 +36,7 @@
   animation: fadeInUp 1s;
 }
 
+/*-- zoomIn -- */
 @keyframes zoomIn {
   from {
     transform: scale3d(.3, .3, .3);
@@ -42,6 +51,7 @@
   animation: zoomIn 1s;
 }
 
+/*-- slideInLeft -- */
 @keyframes slideInLeft {
   from {
     transform: translate3d(-100%, 0, 0);
@@ -58,6 +68,7 @@
   animation-fill-mode: both;
 }
 
+/*-- slideInRight -- */
 @keyframes slideInRight {
   from {
     transform: translate3d(100%, 0, 0);
@@ -74,7 +85,7 @@
   animation-fill-mode: both;
 }
 
-
+/* Animated Background (Matrix) */
 @keyframes anim {
   0% {
     transform: translateY(0);
@@ -85,7 +96,7 @@
   }
 }
 
-
+/* Duration */
 .slow {
   animation-duration: 4s;
 

src/scss/utils/_bugs.scss

@@ -1,3 +1,8 @@
+/*=========================================
+16. SAFARI BUGS (flex-wrap)
+Solution: stackoverflow.com/questions/34250282/flexbox-safari-bug-flex-wrap
+=========================================== */
+
 .flexblock:before,
 .flexblock:after,
 .grid:before,

src/scss/utils/_clear.scss

@@ -1,3 +1,5 @@
+/*=== Clearing === */
+
 header,
 main,
 section,

src/scss/utils/_reset.scss

@@ -298,4 +298,3 @@ dt {
 dd {
   margin: 0;
 }
-