[src/app/slash/slash.component.html] Responsive layout fix ; [src/ass…

…ets/styles/flex.scss] Helper classes for responsive layout
offscale · Jan 9, 2024 · 84e6428 · 84e6428
1 parent 40cf0ef
commit 84e6428
Show file tree

Hide file tree

Showing 2 changed files with 38 additions and 15 deletions.
diff --git a/src/app/slash/slash.component.html b/src/app/slash/slash.component.html
@@ -4,19 +4,19 @@
   </div>
 </app-navbar>
 
-<section class="text-align-center" style="padding: 0 18%"  >
-  <div class="m-v-lg text-size-lg" style="padding: 0 10px">
+<section class="text-align-center padding-pc-18-gt-md"  >
+  <div class="m-v-lg text-size-lg">
     Develop anywhere; deploy everywhere.
   </div>
 
 
   <div class="row-narrow-column-wide">
-    <div class="width-pc-33">
+    <div class="width-pc-33-lt-md-100">
       <!--<img src="/assets/dial-multicloud.svg"/>-->
       <h2>Cross-platform</h2>
       <p>Build and release for multiple platforms, including:</p>
       <div  class="row-narrow-column-wide">
-        <ul class="width-pc-50">
+        <ul class="width-pc-50-lt-md-100">
           <li>Windows</li>
           <li>Linux</li>
           <li>macOS</li>
@@ -32,13 +32,13 @@ <h2>Cross-platform</h2>
       </div>
     </div>
 
-    <div class="width-pc-33">
+    <div class="width-pc-33-lt-md-100">
       <!--<img src="/assets/dial-distributed.svg"/>-->
       <h2>Multicloud</h2>
       <p>Deploy and manage across any of 50+ different public and private cloud providers,
         including:</p>
       <div class="row-narrow-column-wide">
-        <ul class="width-pc-50">
+        <ul class="width-pc-50-lt-md-100">
           <li>AWS</li>
           <li>Microsoft Azure</li>
           <li>Google Cloud</li>
@@ -54,12 +54,12 @@ <h2>Multicloud</h2>
       </div>
     </div>
 
-    <div class="width-pc-33">
+    <div class="width-pc-33-lt-md-100">
       <!--<img src="/assets/dial-ml.svg"/>-->
       <h2>Machine Learning and Artificial Intelligence</h2>
       <p>Meta-framework built supporting:</p>
       <div  class="row-narrow-column-wide">
-        <ul class="width-pc-50">
+        <ul class="width-pc-50-lt-md-100">
           <li>TensorFlow</li>
           <li>Keras</li>
           <li>PyTorch</li>
@@ -76,13 +76,13 @@ <h2>Machine Learning and Artificial Intelligence</h2>
   </div>
 
   <div  class="row-narrow-column-wide">
-    <div class="width-pc-33">
+    <div class="width-pc-33-lt-md-100">
       <!--<img src="/assets/dial-multicloud.svg"/>-->
       <h2>Multilingual compilers</h2>
       <p>Automatically translate code between languages. Speedup code creation, improve consistency, and increase doc
         &amp; test coverage.</p>
       <div  class="row-narrow-column-wide">
-        <ul class="width-pc-50">
+        <ul class="width-pc-50-lt-md-100">
           <li>Swift (iOS)</li>
           <li>Java (Android)</li>
           <li>Kotlin (Android)</li>
@@ -95,21 +95,21 @@ <h2>Multilingual compilers</h2>
       </div>
     </div>
 
-    <div class="width-pc-33">
+    <div class="width-pc-33-lt-md-100">
       <!--<img src="/assets/dial-distributed.svg"/>-->
       <h2>Multicluster</h2>
       <p>Deploy, manage, and maintain multiple Docker containers at scale with Kubernetes.</p>
       <p>Coordinate multiple distributed systems in the one cluster with Apache Mesos.</p>
       <p>Major C++ contributions to Mesos, and major Go contributions to Kubernetes.</p>
     </div>
 
-    <div class="width-pc-33">
+    <div class="width-pc-33-lt-md-100">
       <!--<img src="/assets/dial-heart.svg"/>-->
       <h2>100% open source</h2>
       <p>(Apache-2.0 OR MIT) licensed. Totally free.
       </p>
       <div  class="row-narrow-column-wide">
-        <ul class="width-pc-50">
+        <ul class="width-pc-50-lt-md-100">
           <li>609 repos on GitHub</li>
         </ul>
         <ul>
@@ -169,11 +169,11 @@ <h2>100% open source</h2>
 
 <footer style="padding: 40px 0 40px 90px"
         class="text-center row-narrow-column-wide justify-content-space-between">
-  <a class="flex-row width-pc-50-lt-md-100" routerLink="/">
+  <a class="flex-row width-pc-50-lt-md-100-lt-md-100" routerLink="/">
     <h1>offscale.io</h1>
     <h3>engineering and<br/>research that scales</h3>
   </a>
-  <div class="flex-direction-row width-pc-50-lt-md-100 flex-center">
+  <div class="flex-direction-row width-pc-50-lt-md-100-lt-md-100 flex-center gt-md-padding-right-100px">
     &copy; 2018&ndash;2024&nbsp;
   </div>
 </footer>
diff --git a/src/assets/styles/flex.scss b/src/assets/styles/flex.scss
@@ -31,6 +31,10 @@
   max-width: 33%;
 }
 
+.width-pc-33-lt-md-100 {
+  max-width: 33%;
+}
+
 .width-pc-50 {
   max-width: 50%;
 }
@@ -47,6 +51,7 @@
 
   section {
     padding: 0;
+    margin: 0;
   }
 
   #github-logo {
@@ -68,11 +73,29 @@
   .width-pc-50-lt-md-100 {
     max-width: 100%;
   }
+
+  .width-pc-33-lt-md-100 {
+    max-width: 100%;
+  }
+
+  .gt-md-padding-right-100px {
+    padding-right: 0;
+  }
 }
 
 /* gt-md */
 @media screen and (min-width: 1280px) {
+  .gt-md-padding-right-100px {
+    padding-right: 100px;
+  }
+
   .gt-md-width-pc-50 {
     max-width: 50%;
   }
+
+  .padding-pc-18-gt-md {
+    padding: 0 18%
+  }
+
+
 }