Updated base, mixins, utilities & 3rd party.md

THIRD_PARTY_LICENSES.md

@@ -1,27 +1,12 @@
 # Third-Party Licenses
 
-## SASS (MIT License)
-[SASS Authors] Natalie Weizenbaum (https://github.com/nex3)
+SASS (MIT License)
+[SASS Authors] Natalie Weizenbaum 
+SASS[https://github.com/sass]
+MIT License[https://mit-license.org/]
 
-MIT License
 
-Copyright (c) 2019, Google LLC
-
-Permission is hereby granted, free of charge, to any person obtaining
-a copy of this software and associated documentation files (the
-"Software"), to deal in the Software without restriction, including
-without limitation the rights to use, copy, modify, merge, publish,
-distribute, sublicense, and/or sell copies of the Software, and to
-permit persons to whom the Software is furnished to do so, subject to
-the following conditions:
-
-The above copyright notice and this permission notice shall be
-included in all copies or substantial portions of the Software.
-
-THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
-EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
-MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
-NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE
-LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION
-OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION
-WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+SCSSAssist(Apache 2.0)
+[SCSSAssist Author] Avadhut
+SCSSAssist[https://github.com/avadhut-the-merciful/SCSSAssist]
+Apache License Version 2.0[http://www.apache.org/licenses/]

src/sass/_base.scss

@@ -0,0 +1,6 @@
+@include reset;
+
+body{
+    // font-size-- min = 14px max= 18px
+    font-size: clamp(1.4rem,calc(4vw + 1rem), 1.8rem);
+}

src/sass/_mixins.scss

@@ -0,0 +1,62 @@
+/*
+    Resets margin padding to zero.
+    Removes text decoration of <a> & <ul>
+    font-size = 62.5% changes default font size; that is 1 rem is 10px 
+    16px is default size 10/16 == 62.5%
+    New default font-size is 10px (is done for simplification)
+    Have added color-scheme light-dark
+    Based on browser setting one color is selected
+*/
+
+@mixin reset{
+    *,::after,::before{
+        margin: 0;
+        padding: 0;
+        box-sizing: inherit;
+    }
+
+    a{
+        text-decoration: none ;
+    }
+
+    ul{
+        list-style: none;
+    }
+
+    html{
+        font-size: 62.5%; // 1rem = 10px
+        color-scheme: light dark;
+    }
+
+    body{
+        box-sizing: border-box;
+        background-color: light-dark(rgb(146, 144, 144), black);
+    }
+}
+
+
+// MEDIA QUERY MANAGER
+/*
+0 - 600px:      Phone
+600 - 900px:    Tablet portrait
+900 - 1200px:   Tablet landscape
+[1200 - 1800] is where our styles apply
+1800px + :      Big desktop
+*/
+// 1em = 16px
+
+
+@mixin responsive($device) {
+    @if $device == phone {
+        @media only screen and (max-width: 37.5em) { @content };    //600px
+    }
+    @if $device == tab-port {
+        @media only screen and (max-width: 56.25em) { @content };     //900px
+    }
+    @if $device == tab-land {
+        @media only screen and (max-width: 75em) { @content };    //1200px
+    }
+    @if $device == big-desktop {
+        @media only screen and (min-width: 112.5em) { @content };    //1800
+    }
+}

src/sass/_utilities.scss

@@ -0,0 +1,71 @@
+.center-text{text-align: center;}
+
+
+
+// Margins
+
+.marginTopSmallest{margin-top: .8rem;}
+.marginTopSmall{margin-top: 2rem;}
+.marginTopMedium{margin-top: 4rem;}
+.marginTopBig{margin-top: 8rem;}
+
+.marginBottomSmallest{margin-bottom: .8rem;}
+.marginBottomSmall{margin-bottom: 2rem;}
+.marginBottomMedium{margin-bottom: 4rem;}
+.marginBottomBig{margin-bottom: 8rem;}
+
+.marginLeftSmallest{margin-left: .8rem;}
+.marginLeftSmall{margin-left: 2rem;}
+.marginLeftMedium{margin-left: 4rem;}
+.marginLeftBig{margin-left: 8rem;}
+
+.marginRightSmallest{margin-right: .8rem;}
+.marginRightSmall{margin-right: 2rem;}
+.marginRightMedium{margin-right: 4rem;}
+.marginRightBig{margin-right: 8rem;}
+
+
+
+//Font-size
+
+/*
+    This are the new Fluid Typography. 
+    you don't have to media query for fonts
+    
+*/
+
+h1{
+    font-size: clamp(6rem,calc(5vw + 1rem), 8rem);
+}
+
+h2{
+    font-size: clamp(4rem,calc(5vw + .8rem), 6rem);
+}
+
+h3{
+    font-size: clamp(3.5rem,calc(4vw + 1rem), 4.5rem);
+}
+
+h4{
+    font-size: clamp(3rem,calc(3vw + 1rem), 4rem);
+}
+
+h5{
+    font-size: clamp(2.5rem,calc(3vw + 1rem), 3.5rem);
+}
+
+h6{
+    font-size: clamp(2.5rem,calc(3vw + 1rem), 3.5rem);
+}
+
+
+
+
+
+
+//Font-weight
+
+.bold-text{font-weight: 700;}
+.semi-bold-text{font-weight: 600;}
+.normal-text{font-weight: 400;}
+.light-text{font-weight: 300;}