feat(okdInstallationBlog): wip part 1 (#1)

Reviewed-on: http://gitea.wk.nt.local:31080/johnride/nationtech-website/pulls/1
Co-authored-by: Sylvain Tremblay <stremblay@nationtech.io>
Co-committed-by: Sylvain Tremblay <stremblay@nationtech.io>

sreez/style/main.scss

@@ -33,16 +33,62 @@ body {
   font-size: 3rem;
 }
 
+.font-3xl {
+  font-size: 2.5rem;
+}
+
+.font-2xl {
+  font-size: 2rem;
+}
+
 .font-xl {
   font-size: 1.7rem;
 }
 
+.font-l {
+  font-size: 1.5rem;
+}
+
+.font-m {
+  font-size: 1.2rem;
+}
+
+.font-italic {
+  font-style: italic;
+}
+
+.columns-list {
+  display: block;
+  column-count: 3;
+  column-gap: 1rem;
+  padding: 0;
+  margin-top: 2rem;
+  margin-bottom: 3rem;
+  margin-left: 6rem;
+  margin-right: 6rem;
+  list-style-position: inside;
+  white-space: nowrap;
+}
+
+.columns-list li {
+  display: list-item;
+  break-inside: avoid;
+  list-style-position: inside;
+  // padding: 0.5rem 0;
+  // margin-left: 20px;
+  margin-bottom: 0.5rem;
+}
+
 .line-1 {
   line-height: 1rem;
 }
 
 .color-gray {
-  color: gray
+  color: gray;
+}
+
+.color-okd-gray {
+  color: #344559;
 }
 
 ol {
@@ -67,6 +113,13 @@ ol {
   text-decoration: none;
 }
 
+.front-image {
+  // max-width: 900px;
+  min-width: 200px;
+  width: 100%;
+  height: auto;
+}
+
 .icon-as-image {
   color: black;
   text-decoration: none;
@@ -81,6 +134,10 @@ ol {
   align-items: center;
 }
 
+.justify-end {
+  justify-content: end;
+}
+
 .justify-center {
   justify-content: center;
 }
@@ -105,6 +162,18 @@ ol {
   margin-bottom: 2rem;
 }
 
+.pad-right-1 {
+  padding-right: 1rem;
+}
+
+.pad-right-2 {
+  padding-right: 2rem;
+}
+
+.pad-top-2 {
+  padding-top: 2rem;
+}
+
 .pad-y-4 {
   padding-top: 4rem;
   padding-bottom: 4rem;
@@ -128,6 +197,11 @@ ol {
   margin-right: 3rem;
 }
 
+.margin-x-6 {
+  margin-left: 6rem;
+  margin-right: 6rem;
+}
+
 .margin-y-25vh {
   margin-top: 25vh;
   margin-bottom: 25vh;
@@ -187,6 +261,10 @@ ol {
   margin-top: 5rem;
 }
 
+.margin-top-4 {
+  margin-top: 4rem;
+}
+
 .margin-top-2 {
   margin-top: 2rem;
 }
@@ -195,6 +273,18 @@ ol {
   margin-top: 1rem;
 }
 
+.margin-right-1 {
+  margin-right: 1rem;
+}
+
+.margin-right-2 {
+  margin-right: 2rem;
+}
+
+.margin-left-2 {
+  margin-left: 2rem;
+}
+
 .card {
   .card-icon {
     font-size: 7rem;
@@ -202,6 +292,11 @@ ol {
   }
 }
 
+.image-float-right {
+  height: auto;
+  float: right;
+}
+
 .card-list {
   text-align: left;
   justify-content: center;
@@ -249,6 +344,14 @@ ol {
   margin: auto;
 }
 
+.space-between {
+  justify-content: space-between;
+}
+
+.text-justify {
+  text-align: justify;
+}
+
 .text-left {
   text-align: left;
 }
@@ -292,10 +395,24 @@ ol.huge-list-markers li{
   font-weight: 600;
 }
 
+.height-70 {
+  height: 70px;
+}
+
 .height-110 {
   height: 110px;
 }
 
+.flex-align-start {
+  display: flex;
+  align-items: start;
+}
+
+.flex-align-center {
+  display: flex;
+  align-items: center;
+}
+
 .bg-light, body {
   background-color: #F8F9F1;
 }
@@ -347,6 +464,11 @@ ol.huge-list-markers li{
   .sm-margin-top-2 {
     margin-top: 2rem;
   }
+  
+  .columns-list {
+    column-count: 2;
+    margin-left: 4rem;
+  }
 }
 
 
@@ -365,6 +487,11 @@ ol.huge-list-markers li{
     margin-right: 3rem;
   }
 
+  .margin-x-6 {
+    margin-left: 6rem;
+    margin-right: 6rem;
+  }
+
   .lg-lr-sections {
     > div {
       margin-right: 0;