[package.json] Remove @angular/flex-layout ; [src/assets/styles/flex.…

…scss] Replace with this ; [.github/workflows/main.yml] Use latest actions

.github/workflows/main.yml

@@ -11,7 +11,7 @@ jobs:
         uses: actions/checkout@v2
 
       - name: Use Node.js LTS
-        uses: actions/setup-node@v3
+        uses: actions/setup-node@v4
         with:
           node-version: lts/*
 

package.json

@@ -17,7 +17,6 @@
     "@angular/common": "^15.2.4",
     "@angular/compiler": "^15.2.4",
     "@angular/core": "^15.2.4",
-    "@angular/flex-layout": "^14.0.0-beta.41",
     "@angular/forms": "^15.2.4",
     "@angular/platform-browser": "^15.2.4",
     "@angular/platform-browser-dynamic": "^15.2.4",
@@ -40,4 +39,4 @@
     "karma-jasmine-html-reporter": "~2.0.0",
     "typescript": "~4.9.5"
   }
-}
+}

src/app/navbar/navbar.component.html

@@ -1,16 +1,16 @@
-<section class="hero" fxLayout="column">
-  <nav fxFlex fxLayout="row" style="padding-top: 20px; margin-bottom: 20px">
-    <a fxFlex.gt-md="50" routerLink="/">
+<section class="hero flex-direction-column">
+  <nav class="flex-direction-row" style="padding-top: 20px; margin-bottom: 20px">
+    <a class="gt-md-width-pc-50" routerLink="/">
       <h1>offscale.io</h1>
       <h3>engineering and<br/>research that scales</h3>
     </a>
-    <h1 fxFlex fxLayoutAlign="end" ngStyle.lt-md="font-size: small">
+    <h1>
       <a href="https://github.com/offscale">
         <img alt="GitHub repos for Offscale"
-             height="50px"
-             ngStyle.lt-md="height: 30px; padding: 0 10px" src="/assets/github-white.svg"/>
+             width="51" height="50" id="github-logo"
+             ngSrc="/assets/github-white.svg" />
       </a>
     </h1>
   </nav>
-  <ng-content fxFlex="auto"></ng-content>
+  <ng-content></ng-content>
 </section>

src/app/navbar/navbar.component.scss

@@ -37,4 +37,17 @@ nav {
   }
 
   padding: 0 100px;
+  display: flex;
+  flex: 1 1 9px;
+  flex-grow: 1;
+  flex-shrink: 1;
+  flex-basis: 1e-9px;
+  justify-content: space-between;
+}
+
+/* lt-md */
+@media screen and (max-width: 959px) {
+  nav {
+    padding: 0;
+  }
 }

src/app/navbar/navbar.component.ts

@@ -4,7 +4,7 @@ import { Component } from '@angular/core';
 @Component({
   selector: 'app-navbar',
   templateUrl: './navbar.component.html',
-  styleUrls: ['./navbar.component.scss']
+  styleUrls: ['./navbar.component.scss', '../../assets/styles/flex.scss']
 })
 export class NavbarComponent {
 }

src/app/navbar/navbar.module.ts

@@ -1,21 +1,13 @@
 import { NgModule } from '@angular/core';
-import { CommonModule } from '@angular/common';
+import {CommonModule, NgOptimizedImage} from '@angular/common';
 import { RouterModule } from '@angular/router';
 
-import { FlexLayoutModule } from '@angular/flex-layout';
-
 import { NavbarComponent } from './navbar.component';
 
 
 @NgModule({
   declarations: [NavbarComponent],
-  exports: [
-    NavbarComponent
-  ],
-  imports: [
-    CommonModule,
-    FlexLayoutModule,
-    RouterModule
-  ]
+  exports: [NavbarComponent],
+  imports: [CommonModule, RouterModule, NgOptimizedImage]
 })
 export class NavbarModule {}

src/app/slash/slash.component.html

@@ -4,19 +4,19 @@
   </div>
 </app-navbar>
 
-<section class="center" fxLayout="column" style="padding: 0 18%" ngStyle.lt-md="padding: 0">
-  <div class="m-v-lg text-size-lg" fxFlex="100" style="padding: 0 10px">
+<section class="text-align-center" style="padding: 0 18%"  >
+  <div class="m-v-lg text-size-lg" style="padding: 0 10px">
     Develop anywhere; deploy everywhere.
   </div>
 
 
-  <div fxLayout="row" fxLayout.lt-md="column" fxFlex="100">
-    <div fxFlex="33">
+  <div class="row-narrow-column-wide">
+    <div class="width-pc-33">
       <!--<img src="/assets/dial-multicloud.svg"/>-->
       <h2>Cross-platform</h2>
       <p>Build and release for multiple platforms, including:</p>
-      <div fxLayout="row">
-        <ul fxFlex="50">
+      <div  class="row-narrow-column-wide">
+        <ul class="width-pc-50">
           <li>Windows</li>
           <li>Linux</li>
           <li>macOS</li>
@@ -32,13 +32,13 @@ <h2>Cross-platform</h2>
       </div>
     </div>
 
-    <div fxFlex="33">
+    <div class="width-pc-33">
       <!--<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 fxLayout="row">
-        <ul fxFlex="50">
+      <div class="row-narrow-column-wide">
+        <ul class="width-pc-50">
           <li>AWS</li>
           <li>Microsoft Azure</li>
           <li>Google Cloud</li>
@@ -54,12 +54,12 @@ <h2>Multicloud</h2>
       </div>
     </div>
 
-    <div fxFlex="33">
+    <div class="width-pc-33">
       <!--<img src="/assets/dial-ml.svg"/>-->
       <h2>Machine Learning and Artificial Intelligence</h2>
       <p>Meta-framework built supporting:</p>
-      <div fxLayout="row">
-        <ul fxFlex="50">
+      <div  class="row-narrow-column-wide">
+        <ul class="width-pc-50">
           <li>TensorFlow</li>
           <li>Keras</li>
           <li>PyTorch</li>
@@ -75,14 +75,14 @@ <h2>Machine Learning and Artificial Intelligence</h2>
     </div>
   </div>
 
-  <div fxLayout="row" fxLayout.lt-md="column" fxFlex="100">
-    <div fxFlex="33">
+  <div  class="row-narrow-column-wide">
+    <div class="width-pc-33">
       <!--<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 fxLayout="row">
-        <ul fxFlex="50">
+      <div  class="row-narrow-column-wide">
+        <ul class="width-pc-50">
           <li>Swift (iOS)</li>
           <li>Java (Android)</li>
           <li>Kotlin (Android)</li>
@@ -95,21 +95,21 @@ <h2>Multilingual compilers</h2>
       </div>
     </div>
 
-    <div fxFlex="33">
+    <div class="width-pc-33">
       <!--<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 fxFlex="33">
+    <div class="width-pc-33">
       <!--<img src="/assets/dial-heart.svg"/>-->
       <h2>100% open source</h2>
       <p>(Apache-2.0 OR MIT) licensed. Totally free.
       </p>
-      <div fxLayout="row">
-        <ul fxFlex="50">
+      <div  class="row-narrow-column-wide">
+        <ul class="width-pc-50">
           <li>609 repos on GitHub</li>
         </ul>
         <ul>
@@ -124,7 +124,7 @@ <h2>100% open source</h2>
 </section>
 
 <section class="">
-  <div class="flex-container desktop-flex-rows fixed-width-lg m-v-lg flex-space-between">
+  <div class="flex-container desktop-flex-rows fixed-width-lg m-v-lg justify-content-space-between">
     <div>
       <img src="/assets/cdd-diagram.svg" width="100%" alt="CDD diagram"/>
     </div>
@@ -160,21 +160,20 @@ <h2>100% open source</h2>
   </div>
 </section>
 
-<section class="case_study p-v-lg center" fxLayout="column">
-  <div fxFlex="auto" class="m-v-md text-size-lg">Software-engineering consulting</div>
-  <a fxFlex="auto" href="mailto:[email protected]" class="btn btn-primary m-v-md center" fxFlexAlign="center">
+<section class="case_study p-v-lg text-align-center flex-row">
+  <div class="m-v-md text-size-lg">Software-engineering consulting</div>
+  <a href="mailto:[email protected]" class="btn btn-primary m-v-md text-align-center">
     get in touch
   </a>
 </section>
 
-<footer fxLayout="row" fxLayoutAlign="center center"
-        style="padding: 40px 0 40px 90px" ngStyle.lt-md="{'padding': 0 40px}"
-        class="text-center">
-  <a fxFlex="auto" routerLink="/">
+<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="/">
     <h1>offscale.io</h1>
     <h3>engineering and<br/>research that scales</h3>
   </a>
-  <div fxFlex>
-    &copy; 2018&ndash;2023
+  <div class="flex-direction-row width-pc-50-lt-md-100 flex-center">
+    &copy; 2018&ndash;2024&nbsp;
   </div>
 </footer>

src/app/slash/slash.component.scss

@@ -55,11 +55,11 @@ footer {
   align-items: center;
 }
 
-.flex-space-between {
+.justify-content-space-between {
   justify-content: space-between;
 }
 
-.center {
+.text-align-center {
   text-align: center;
 }
 
@@ -209,3 +209,10 @@ footer {
     font-weight: normal;
   }
 }
+
+/* lt-md */
+@media screen and (max-width: 959px) {
+  footer {
+    padding: 0 !important;
+  }
+}

src/app/slash/slash.component.ts

@@ -4,7 +4,7 @@ import { DomSanitizer } from '@angular/platform-browser';
 @Component({
   selector: 'app-slash',
   templateUrl: './slash.component.html',
-  styleUrls: ['./slash.component.scss']
+  styleUrls: ['./slash.component.scss', '../../assets/styles/flex.scss']
 })
 export class SlashComponent implements OnInit {
   safeHtml;

src/app/slash/slash.module.ts

@@ -2,8 +2,6 @@ import { NgModule } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { RouterModule } from '@angular/router';
 
-import { FlexLayoutModule } from '@angular/flex-layout';
-
 import { SvgViewerModule } from '../svg-viewer/svg-viewer.module';
 import { NavbarModule } from '../navbar/navbar.module';
 import { SlashComponent } from './slash.component';
@@ -14,7 +12,6 @@ import { slashRoutes } from './slash.routes';
   declarations: [SlashComponent],
   imports: [
     CommonModule, RouterModule, RouterModule.forChild(slashRoutes),
-    FlexLayoutModule,
     SvgViewerModule, NavbarModule
   ]
 })