refactored styles and added comments

problemsolver03 · problemsolver03 · commit 07f6890071d2 · 2021-12-05T15:49:51.000+05:30
diff --git a/dist/simple.css b/dist/simple.css
@@ -2,24 +2,28 @@
   box-sizing: border-box;
 }
 
+/*common styles */
 :root {
   --bg1: #012a4a;
   --bg2: #013a63;
   --bg3: #01497c;
   --bg4: #014f86;
   --bg5: #2a6f97;
   --bg6: #61a5c2;
+  --bg7: #eef3f5;
 }
 body {
   margin: 0;
   padding: 0;
-  /* remove this if not needed*/
-  background-color: #eef3f5;
   font-family: "Noto Sans", sans-serif;
   font-size: 1rem;
-  line-height: 1.5rem;
-  /* remove this if not needed*/
 }
+img {
+  width: 100%;
+}
+/*common styles */
+
+/*background styles */
 .bg1 {
   background-color: var(--bg1);
 }
@@ -38,6 +42,11 @@ body {
 .bg6 {
   background-color: var(--bg6);
 }
+.bg7 {
+  background-color: var(--bg7);
+}
+/*background styles */
+/*utility styles */
 .p1 {
   padding: 4px;
 }
@@ -71,6 +80,30 @@ body {
 .txt-center {
   text-align: center;
 }
+.ht1 {
+  height: 10vh;
+}
+.ht2 {
+  height: 20vh;
+}
+.ht3 {
+  height: 33.3vh;
+}
+.ht4 {
+  height: 50vh;
+}
+.ht5 {
+  height: 75vh;
+}
+.ht6 {
+  height: 100vh;
+}
+
+.txt-white {
+  color: #fff;
+}
+/*utility styles */
+/*grid styles*/
 .container {
   max-width: 1440px;
   margin: 0 auto;
@@ -136,27 +169,6 @@ body {
 .col-12 {
   width: 100%;
 }
-.h1 {
-  height: 10vh;
-}
-.h2 {
-  height: 20vh;
-}
-.h3 {
-  height: 33.3vh;
-}
-.h4 {
-  height: 50vh;
-}
-.h5 {
-  height: 75vh;
-}
-.h6 {
-  height: 100vh;
-}
-img {
-  width: 100%;
-}
 
 [class*="col"] {
   position: relative;
@@ -166,10 +178,7 @@ img {
   z-index: 1;
   position: relative;
 }
-
-.txt-white {
-  color: #fff;
-}
+/*grid styles*/
 
 /* responsive styles */
 
diff --git a/flexboxgrid.html b/flexboxgrid.html
@@ -9,7 +9,7 @@
         <meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
     </head>
 
-    <body>
+    <body class="bg7">
         <div class="container-full">
                 <div class="row">
                      <div class="col-1 bg1 p10 txt-center">.col-1</div>
