Changes

233 bytes added ,  13:54, 12 October 2021
m
clean up css and add comments
Line 1: Line 1:  
{{#css:
 
{{#css:
 +
 +
<!-- Styling for the columns -->
 
.row{
 
.row{
 
display:flex;
 
display:flex;
Line 10: Line 12:  
   background-color:#F5F5F5;
 
   background-color:#F5F5F5;
 
}
 
}
   
.col-1, .col-2, .col-3, .col-4, .col-5, .col-6, .col-7, .col-8, .col-9, .col-10, .col-11, .col-12, .col,
 
.col-1, .col-2, .col-3, .col-4, .col-5, .col-6, .col-7, .col-8, .col-9, .col-10, .col-11, .col-12, .col,
 
.col-auto, .col-sm-1, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-sm-10, .col-sm-11, .col-sm-12, .col-sm,
 
.col-auto, .col-sm-1, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-sm-10, .col-sm-11, .col-sm-12, .col-sm,
Line 23: Line 24:  
   padding-left: 15px;  
 
   padding-left: 15px;  
 
}
 
}
 +
 +
<!-- Mobile UI styling -->
 
@media (max-width: 576px) {
 
@media (max-width: 576px) {
 
   .col-sm-12 {
 
   .col-sm-12 {
Line 28: Line 31:  
     max-width: 100%; }
 
     max-width: 100%; }
 
   .section{
 
   .section{
   padding: 10px 0 20px 0;
+
   padding: 6px 0 20px 0;
 
   }
 
   }
 
   .navContainer{
 
   .navContainer{
Line 34: Line 37:  
   }
 
   }
 
}
 
}
 +
 +
<!-- Tablet UI styling -->
 
@media screen and (min-width: 576px) {
 
@media screen and (min-width: 576px) {
 
   .col-md-6 {
 
   .col-md-6 {
Line 43: Line 48:  
     max-width: 30%; }
 
     max-width: 30%; }
 
   .section{
 
   .section{
   padding: 10px 0 20px 20px;
+
   padding: 6px 0 20px 20px;
 
   }
 
   }
 
     .col-md-8{
 
     .col-md-8{
Line 50: Line 55:  
   }
 
   }
 
}
 
}
 +
 +
<!-- Desktop UI styling -->
 
@media screen and (min-width: 992px) {
 
@media screen and (min-width: 992px) {
 
   .col-lg {
 
   .col-lg {
Line 71: Line 78:  
   }
 
   }
 
}
 
}
 +
 +
<!-- Font styling -->
 
h1,h2{
 
h1,h2{
 
   font-family: 'Helvetica', sans-serif !important;
 
   font-family: 'Helvetica', sans-serif !important;
Line 84: Line 93:  
   font-weight: 700;
 
   font-weight: 700;
 
}
 
}
.mw-collapsible{
+
 
  margin-bottom: 5px;
+
<!-- Nav Menu Styling -->
}
  −
.checkbox{
  −
  display:inline-block;
  −
  width: 1rem;
  −
  height: 1rem !important;
  −
  border: solid 1px black;
  −
  margin-right: 10px;
  −
}
  −
.floatL{
  −
  float:left;
  −
}
   
.navMenu{
 
.navMenu{
 
   list-style:none;
 
   list-style:none;
Line 116: Line 114:  
   padding-bottom:0px !important;
 
   padding-bottom:0px !important;
 
}
 
}
   
.navMenu li{
 
.navMenu li{
 
   border: solid 1px #002D42;
 
   border: solid 1px #002D42;
Line 137: Line 134:  
   color: white !important;
 
   color: white !important;
 
   text-decoration:none;
 
   text-decoration:none;
}
  −
.mw-parser-output .external{
  −
  background:none;
  −
  padding-right:0;
   
}
 
}
 
.primary-btn{
 
.primary-btn{
Line 158: Line 151:  
   color: black !important;
 
   color: black !important;
 
}
 
}
 +
 +
<!-- Checklist styling -->
 
.checklistCont{
 
.checklistCont{
 
   border: 1px solid black;
 
   border: 1px solid black;
   padding: 1.5rem 0 1.5rem 0;
+
   margin: 1.5rem 0 1.5rem 0;
 
   border-radius: 10px;
 
   border-radius: 10px;
 +
}
 +
.mw-parser-output .external{
 +
  background:none;
 +
  padding-right:0;
 +
}
 +
.mw-collapsible{
 +
  margin-bottom: 5px;
 +
}
 +
.checkbox{
 +
  display:inline-block;
 +
  width: 1rem;
 +
  height: 1rem !important;
 +
  border: solid 1px black;
 +
  margin-right: 10px;
 
}
 
}
 
.card {
 
.card {
Line 175: Line 184:  
   flex: 1 1 auto;
 
   flex: 1 1 auto;
 
   padding: 12px; }
 
   padding: 12px; }
 +
 +
<!-- Back to top Button styling -->
 
.btn-backtotop {
 
.btn-backtotop {
 
   border: 1px solid #CECECE;
 
   border: 1px solid #CECECE;
Line 190: Line 201:  
   color: white;
 
   color: white;
 
   text-decoration: none;
 
   text-decoration: none;
 +
}
 +
.fixed{
 +
  position:fixed;
 +
  bottom:5px;
 +
  right:5px;
 +
}
 +
.arrow {
 +
  border: solid black;
 +
  border-width: 0 3px 3px 0;
 +
  display: inline-block;
 +
  padding: 3px;
 +
}
 +
.up {
 +
  transform: rotate(-135deg);
 +
  -webkit-transform: rotate(-135deg);
 
}
 
}
    +
<!-- More Button styling -->
 
.btn {
 
.btn {
 
   display: inline-block;
 
   display: inline-block;
Line 221: Line 248:  
     border-color: #F5F5F5;  
 
     border-color: #F5F5F5;  
 
     margin-bottom: 12px;
 
     margin-bottom: 12px;
}
  −
.fixed{
  −
  position:fixed;
  −
  bottom:5px;
  −
  right:5px;
  −
}
  −
.arrow {
  −
  border: solid black;
  −
  border-width: 0 3px 3px 0;
  −
  display: inline-block;
  −
  padding: 3px;
  −
}
  −
.up {
  −
  transform: rotate(-135deg);
  −
  -webkit-transform: rotate(-135deg);
   
}
 
}
 
}}
 
}}
233

edits