data-preservation-programs · orvn · Jul 20, 2023 · Jun 13, 2023 · Jun 13, 2023 · Jun 14, 2023
diff --git a/README.md b/README.md
@@ -1,23 +1,22 @@
-# AU Nuxt Static Boilerplate
+## Data Programs Website
 
 [![Conventional Commits](https://img.shields.io/badge/Conventional%20Commits-1.0.0-%23FE5196?logo=conventionalcommits&logoColor=white)](https://conventionalcommits.org)
 
-![Nuxt Static banner](https://raw.githubusercontent.com/agency-undone/nuxt-static/develop/static/images/open-graph.png)
+![Data Programs graph image](static/images/data-programs-open-graph.png)
 
 ## Overview
 
-This is the boilerplate repository for building static sites using Nuxt
+This is the repo for the Data Programs static microsite (available at [dataprograms.org](https://dataprograms.org))
 
 - This repo represents a static site which requires compilation, but can then be served as a static resource
 - This site can be hosted on any resource supporting static files, but may include some services that require a serverless node
-- When running in production, this repository is primarily tested against the Netlify ecosystem, including Netlify Functions for any dynamic functionality
 - The site itself is served statically, but internal navigation is virtualized in the browser: in other words, the site acts as an SPA when browsed on the client
 - While a static site, this app can be extended at any time to a full application by changing the `target` in settings
 
 
 ## Stack
 
-- Requires nodeJS and has been tested on node 16
+- Requires nodeJS and has been tested on node 16 (node 16.14+ required)
 - Uses a Vue framework, [nuxtJS 2](https://nuxtjs.org/), deployed in static mode
 - Styles are written in SCSS, and are concatenated and tree-shaken during compile-time
 

diff --git a/app.html b/app.html
@@ -3,23 +3,23 @@
 
   <head {{ HEAD_ATTRS }}>
     {{ HEAD }}
-    <link rel="apple-touch-icon" sizes="57x57" href="/apple-icon-57x57.png">
-    <link rel="apple-touch-icon" sizes="60x60" href="/apple-icon-60x60.png">
-    <link rel="apple-touch-icon" sizes="72x72" href="/apple-icon-72x72.png">
-    <link rel="apple-touch-icon" sizes="76x76" href="/apple-icon-76x76.png">
-    <link rel="apple-touch-icon" sizes="114x114" href="/apple-icon-114x114.png">
-    <link rel="apple-touch-icon" sizes="120x120" href="/apple-icon-120x120.png">
-    <link rel="apple-touch-icon" sizes="144x144" href="/apple-icon-144x144.png">
-    <link rel="apple-touch-icon" sizes="152x152" href="/apple-icon-152x152.png">
-    <link rel="apple-touch-icon" sizes="180x180" href="/apple-icon-180x180.png">
-    <link rel="icon" type="image/png" sizes="192x192"  href="/android-icon-192x192.png">
-    <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
-    <link rel="icon" type="image/png" sizes="96x96" href="/favicon-96x96.png">
-    <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
-    <link rel="manifest" href="/manifest.json">
-    <meta name="msapplication-TileColor" content="#ffffff">
-    <meta name="msapplication-TileImage" content="/ms-icon-144x144.png">
-    <meta name="theme-color" content="#ffffff">
+    <link rel="apple-touch-icon" sizes="57x57" href="/favicon/apple-icon-57x57.png">
+    <link rel="apple-touch-icon" sizes="60x60" href="/favicon/apple-icon-60x60.png">
+    <link rel="apple-touch-icon" sizes="72x72" href="/favicon/apple-icon-72x72.png">
+    <link rel="apple-touch-icon" sizes="76x76" href="/favicon/apple-icon-76x76.png">
+    <link rel="apple-touch-icon" sizes="114x114" href="/favicon/apple-icon-114x114.png">
+    <link rel="apple-touch-icon" sizes="120x120" href="/favicon/apple-icon-120x120.png">
+    <link rel="apple-touch-icon" sizes="144x144" href="/favicon/apple-icon-144x144.png">
+    <link rel="apple-touch-icon" sizes="152x152" href="/favicon/apple-icon-152x152.png">
+    <link rel="apple-touch-icon" sizes="180x180" href="/favicon/apple-icon-180x180.png">
+    <link rel="icon" type="image/png" sizes="192x192"  href="/favicon/android-icon-192x192.png">
+    <link rel="icon" type="image/png" sizes="32x32" href="/favicon/favicon-32x32.png">
+    <link rel="icon" type="image/png" sizes="96x96" href="/favicon/favicon-96x96.png">
+    <link rel="icon" type="image/png" sizes="16x16" href="/favicon/favicon-16x16.png">
+    <link rel="manifest" href="/favicon/manifest.json">
+    <meta name="msapplication-TileColor" content="#000000">
+    <meta name="msapplication-TileImage" content="/favicon/ms-icon-144x144.png">
+    <meta name="theme-color" content="#000000">
   </head>
 
   <body {{ BODY_ATTRS }}>

diff --git a/app/router.scrollBehavior.js b/app/router.scrollBehavior.js
diff --git a/assets/fonts/RandomGrotesque/README.txt b/assets/fonts/RandomGrotesque/README.txt
@@ -0,0 +1,6 @@
+"Random Grotesque" is a multifunctional grotesque sans-serif typeface. It was originally designed to capture the feel of Helvetica but still maintain its unique personality. The most distinguishable feature is the inktrap. "Random Grotesque" is great for posters, logos, headings, titles, subtitles, or text blocks of different sizes.
+The whole family consists of 36 styles, with 3 widths: Slim, Standard, and Spacious; 6 weights ranging from Light to Black; Upright and Italic. 12 Standard-width fonts will be free for personal and commercial uses. Each font contains 737 glyphs and supports over 101 languages.
+
+If you want to donate, please send it to my Paypal account through the following link: https://paypal.me/randommaerks
+
+Thank you for the support!
diff --git a/assets/fonts/RandomGrotesque/RG-StandardBold.otf b/assets/fonts/RandomGrotesque/RG-StandardBold.otf
diff --git a/assets/fonts/RandomGrotesque/RG-StandardBold.ttf b/assets/fonts/RandomGrotesque/RG-StandardBold.ttf
diff --git a/assets/fonts/RandomGrotesque/RG-StandardBold.woff b/assets/fonts/RandomGrotesque/RG-StandardBold.woff
diff --git a/assets/fonts/RandomGrotesque/RG-StandardBold.woff2 b/assets/fonts/RandomGrotesque/RG-StandardBold.woff2
diff --git a/assets/fonts/RandomGrotesque/RG-StandardBoldIt.otf b/assets/fonts/RandomGrotesque/RG-StandardBoldIt.otf
diff --git a/assets/fonts/RandomGrotesque/RG-StandardBoldIt.ttf b/assets/fonts/RandomGrotesque/RG-StandardBoldIt.ttf
diff --git a/assets/fonts/RandomGrotesque/RG-StandardBoldIt.woff b/assets/fonts/RandomGrotesque/RG-StandardBoldIt.woff
diff --git a/assets/fonts/RandomGrotesque/RG-StandardBoldIt.woff2 b/assets/fonts/RandomGrotesque/RG-StandardBoldIt.woff2
diff --git a/assets/fonts/RandomGrotesque/RG-StandardMedium.otf b/assets/fonts/RandomGrotesque/RG-StandardMedium.otf
diff --git a/assets/fonts/RandomGrotesque/RG-StandardMedium.ttf b/assets/fonts/RandomGrotesque/RG-StandardMedium.ttf
diff --git a/assets/fonts/RandomGrotesque/RG-StandardMedium.woff b/assets/fonts/RandomGrotesque/RG-StandardMedium.woff
diff --git a/assets/fonts/RandomGrotesque/RG-StandardMedium.woff2 b/assets/fonts/RandomGrotesque/RG-StandardMedium.woff2
diff --git a/assets/fonts/RandomGrotesque/RG-StandardMediumIt.otf b/assets/fonts/RandomGrotesque/RG-StandardMediumIt.otf
diff --git a/assets/fonts/RandomGrotesque/RG-StandardMediumIt.ttf b/assets/fonts/RandomGrotesque/RG-StandardMediumIt.ttf
diff --git a/assets/fonts/RandomGrotesque/RG-StandardMediumIt.woff b/assets/fonts/RandomGrotesque/RG-StandardMediumIt.woff
diff --git a/assets/fonts/RandomGrotesque/RG-StandardMediumIt.woff2 b/assets/fonts/RandomGrotesque/RG-StandardMediumIt.woff2
diff --git a/assets/fonts/RandomGrotesque/RG-StandardRegular.otf b/assets/fonts/RandomGrotesque/RG-StandardRegular.otf
diff --git a/assets/fonts/RandomGrotesque/RG-StandardRegular.ttf b/assets/fonts/RandomGrotesque/RG-StandardRegular.ttf
diff --git a/assets/fonts/RandomGrotesque/RG-StandardRegular.woff b/assets/fonts/RandomGrotesque/RG-StandardRegular.woff
diff --git a/assets/fonts/RandomGrotesque/RG-StandardRegular.woff2 b/assets/fonts/RandomGrotesque/RG-StandardRegular.woff2
diff --git a/assets/fonts/RandomGrotesque/RG-StandardRegularIt.otf b/assets/fonts/RandomGrotesque/RG-StandardRegularIt.otf
diff --git a/assets/fonts/RandomGrotesque/RG-StandardRegularIt.ttf b/assets/fonts/RandomGrotesque/RG-StandardRegularIt.ttf
diff --git a/assets/fonts/RandomGrotesque/RG-StandardRegularIt.woff b/assets/fonts/RandomGrotesque/RG-StandardRegularIt.woff
diff --git a/assets/fonts/RandomGrotesque/RG-StandardRegularIt.woff2 b/assets/fonts/RandomGrotesque/RG-StandardRegularIt.woff2
diff --git a/assets/fonts/RandomGrotesque/RG-StandardSemibold.otf b/assets/fonts/RandomGrotesque/RG-StandardSemibold.otf
diff --git a/assets/fonts/RandomGrotesque/RG-StandardSemibold.ttf b/assets/fonts/RandomGrotesque/RG-StandardSemibold.ttf
diff --git a/assets/fonts/RandomGrotesque/RG-StandardSemibold.woff b/assets/fonts/RandomGrotesque/RG-StandardSemibold.woff
diff --git a/assets/fonts/RandomGrotesque/RG-StandardSemibold.woff2 b/assets/fonts/RandomGrotesque/RG-StandardSemibold.woff2
diff --git a/assets/fonts/RandomGrotesque/RG-StandardSemiboldIt.otf b/assets/fonts/RandomGrotesque/RG-StandardSemiboldIt.otf
diff --git a/assets/fonts/RandomGrotesque/RG-StandardSemiboldIt.ttf b/assets/fonts/RandomGrotesque/RG-StandardSemiboldIt.ttf
diff --git a/assets/fonts/RandomGrotesque/RG-StandardSemiboldIt.woff b/assets/fonts/RandomGrotesque/RG-StandardSemiboldIt.woff
diff --git a/assets/fonts/RandomGrotesque/RG-StandardSemiboldIt.woff2 b/assets/fonts/RandomGrotesque/RG-StandardSemiboldIt.woff2
diff --git a/assets/fonts/RandomGrotesque/Random Grotesque Specimen.pdf b/assets/fonts/RandomGrotesque/Random Grotesque Specimen.pdf
diff --git a/assets/fonts/RandomGrotesque/RandomMaerks' End-User License Agreement.pdf b/assets/fonts/RandomGrotesque/RandomMaerks' End-User License Agreement.pdf
diff --git a/assets/fonts/RandomGrotesqueSlim/RG-SlimBlackIt.otf b/assets/fonts/RandomGrotesqueSlim/RG-SlimBlackIt.otf
diff --git a/assets/fonts/RandomGrotesqueSlim/RG-SlimBlackIt.ttf b/assets/fonts/RandomGrotesqueSlim/RG-SlimBlackIt.ttf
diff --git a/assets/fonts/RandomGrotesqueSlim/RG-SlimBlackIt.woff b/assets/fonts/RandomGrotesqueSlim/RG-SlimBlackIt.woff
diff --git a/assets/fonts/RandomGrotesqueSlim/RG-SlimBlackIt.woff2 b/assets/fonts/RandomGrotesqueSlim/RG-SlimBlackIt.woff2
diff --git a/assets/fonts/RandomGrotesqueSlim/RG-SlimRegular.otf b/assets/fonts/RandomGrotesqueSlim/RG-SlimRegular.otf
diff --git a/assets/fonts/RandomGrotesqueSlim/RG-SlimRegular.ttf b/assets/fonts/RandomGrotesqueSlim/RG-SlimRegular.ttf
diff --git a/assets/fonts/RandomGrotesqueSlim/RG-SlimRegular.woff b/assets/fonts/RandomGrotesqueSlim/RG-SlimRegular.woff
diff --git a/assets/fonts/RandomGrotesqueSlim/RG-SlimRegular.woff2 b/assets/fonts/RandomGrotesqueSlim/RG-SlimRegular.woff2
diff --git a/assets/fonts/RandomGrotesqueSpacious/RG-SpaciousBlackIt.otf b/assets/fonts/RandomGrotesqueSpacious/RG-SpaciousBlackIt.otf
diff --git a/assets/fonts/RandomGrotesqueSpacious/RG-SpaciousBlackIt.ttf b/assets/fonts/RandomGrotesqueSpacious/RG-SpaciousBlackIt.ttf
diff --git a/assets/fonts/RandomGrotesqueSpacious/RG-SpaciousBlackIt.woff b/assets/fonts/RandomGrotesqueSpacious/RG-SpaciousBlackIt.woff
diff --git a/assets/fonts/RandomGrotesqueSpacious/RG-SpaciousBlackIt.woff2 b/assets/fonts/RandomGrotesqueSpacious/RG-SpaciousBlackIt.woff2
diff --git a/assets/fonts/RandomGrotesqueSpacious/RG-SpaciousRegular.otf b/assets/fonts/RandomGrotesqueSpacious/RG-SpaciousRegular.otf
diff --git a/assets/fonts/RandomGrotesqueSpacious/RG-SpaciousRegular.ttf b/assets/fonts/RandomGrotesqueSpacious/RG-SpaciousRegular.ttf
diff --git a/assets/fonts/RandomGrotesqueSpacious/RG-SpaciousRegular.woff b/assets/fonts/RandomGrotesqueSpacious/RG-SpaciousRegular.woff
diff --git a/assets/fonts/RandomGrotesqueSpacious/RG-SpaciousRegular.woff2 b/assets/fonts/RandomGrotesqueSpacious/RG-SpaciousRegular.woff2
diff --git a/assets/fonts/SpaceGrotesk/SpaceGrotesk-VariableFont_wght.ttf b/assets/fonts/SpaceGrotesk/SpaceGrotesk-VariableFont_wght.ttf
diff --git a/assets/fonts/SpaceGrotesk/static/SpaceGrotesk-Bold.ttf b/assets/fonts/SpaceGrotesk/static/SpaceGrotesk-Bold.ttf
diff --git a/assets/fonts/SpaceGrotesk/static/SpaceGrotesk-Light.ttf b/assets/fonts/SpaceGrotesk/static/SpaceGrotesk-Light.ttf
diff --git a/assets/fonts/SpaceGrotesk/static/SpaceGrotesk-Medium.ttf b/assets/fonts/SpaceGrotesk/static/SpaceGrotesk-Medium.ttf
diff --git a/assets/fonts/SpaceGrotesk/static/SpaceGrotesk-Regular.ttf b/assets/fonts/SpaceGrotesk/static/SpaceGrotesk-Regular.ttf
diff --git a/assets/fonts/SpaceGrotesk/static/SpaceGrotesk-SemiBold.ttf b/assets/fonts/SpaceGrotesk/static/SpaceGrotesk-SemiBold.ttf
diff --git a/assets/fonts/eb-garamond/eb-garamond-i-variable.woff2 b/assets/fonts/eb-garamond/eb-garamond-i-variable.woff2
diff --git a/assets/fonts/eb-garamond/eb-garamond-variable.woff2 b/assets/fonts/eb-garamond/eb-garamond-variable.woff2
diff --git a/assets/noise.png b/assets/noise.png
diff --git a/assets/scss/block.scss b/assets/scss/block.scss
@@ -15,14 +15,14 @@
     margin-bottom: toRem(90);
   }
   // add margin bottom for first col and if col is marked first
-  [class*=grid-] > [class*=md-first],
-  [class*=grid-] > [class*=col-]:first-child {
-    @include medium {
-      margin-bottom: toRem(34);
-    }
-  }
+  // [class*=grid-] > [class*=md-first],
+  // [class*=grid-] > [class*=col-]:first-child {
+  //   @include medium {
+  //     margin-bottom: toRem(34);
+  //   }
+  // }
   // remove margin bottom if marked last
   [class*=grid-] > [class*=md-last][class*=col-]:first-child {
     margin-bottom: 0;
   }
-}
+}
diff --git a/assets/scss/main.scss b/assets/scss/main.scss
@@ -8,34 +8,111 @@ $fontAssetPath: '~assets/fonts';
 /////////////////////////////////////////////////////////////////// Custom Fonts
 // -----------------------------------------------------------------------------
 @font-face {
-  font-family: 'EB Garamond';
+  font-family: 'Random Grotesque';
   font-style: normal;
-  font-weight: 400 800;
+  font-weight: 400;
   font-display: swap;
-  src: url('#{$fontAssetPath}/eb-garamond/eb-garamond-variable.woff2') format('woff2');
+  src: url('#{$fontAssetPath}/RandomGrotesque/RG-StandardRegular.otf') format('opentype'),
+       url('#{$fontAssetPath}/RandomGrotesque/RG-StandardRegular.ttf') format('truetype'),
+       url('#{$fontAssetPath}/RandomGrotesque/RG-StandardRegular.woff') format('woff'),
+       url('#{$fontAssetPath}/RandomGrotesque/RG-StandardRegular.woff2') format('woff2');
 }
+
+@font-face {
+  font-family: 'Random Grotesque';
+  font-style: italic;
+  font-weight: 400;
+  font-display: swap;
+  src: url('#{$fontAssetPath}/RandomGrotesque/RG-StandardRegularIt.otf') format('opentype'),
+       url('#{$fontAssetPath}/RandomGrotesque/RG-StandardRegularIt.ttf') format('truetype'),
+       url('#{$fontAssetPath}/RandomGrotesque/RG-StandardRegularIt.woff') format('woff'),
+       url('#{$fontAssetPath}/RandomGrotesque/RG-StandardRegularIt.woff2') format('woff2');
+}
+
+@font-face {
+  font-family: 'Random Grotesque';
+  font-style: normal;
+  font-weight: 500;
+  font-display: swap;
+  src: url('#{$fontAssetPath}/RandomGrotesque/RG-StandardMedium.otf') format('opentype'),
+       url('#{$fontAssetPath}/RandomGrotesque/RG-StandardMedium.ttf') format('truetype'),
+       url('#{$fontAssetPath}/RandomGrotesque/RG-StandardMedium.woff') format('woff'),
+       url('#{$fontAssetPath}/RandomGrotesque/RG-StandardMedium.woff2') format('woff2');
+}
+
+@font-face {
+  font-family: 'Random Grotesque';
+  font-style: italic;
+  font-weight: 500;
+  font-display: swap;
+  src: url('#{$fontAssetPath}/RandomGrotesque/RG-StandardMediumIt.otf') format('opentype'),
+       url('#{$fontAssetPath}/RandomGrotesque/RG-StandardMediumIt.ttf') format('truetype'),
+       url('#{$fontAssetPath}/RandomGrotesque/RG-StandardMediumIt.woff') format('woff'),
+       url('#{$fontAssetPath}/RandomGrotesque/RG-StandardMediumIt.woff2') format('woff2');
+}
+
+@font-face {
+  font-family: 'Random Grotesque';
+  font-style: normal;
+  font-weight: 600;
+  font-display: swap;
+  src: url('#{$fontAssetPath}/RandomGrotesque/RG-StandardSemibold.otf') format('opentype'),
+       url('#{$fontAssetPath}/RandomGrotesque/RG-StandardSemibold.ttf') format('truetype'),
+       url('#{$fontAssetPath}/RandomGrotesque/RG-StandardSemibold.woff') format('woff'),
+       url('#{$fontAssetPath}/RandomGrotesque/RG-StandardSemibold.woff2') format('woff2');
+}
+
+@font-face {
+  font-family: 'Random Grotesque';
+  font-style: italic;
+  font-weight: 600;
+  font-display: swap;
+  src: url('#{$fontAssetPath}/RandomGrotesque/RG-StandardSemiboldIt.otf') format('opentype'),
+       url('#{$fontAssetPath}/RandomGrotesque/RG-StandardSemiboldIt.ttf') format('truetype'),
+       url('#{$fontAssetPath}/RandomGrotesque/RG-StandardSemiboldIt.woff') format('woff'),
+       url('#{$fontAssetPath}/RandomGrotesque/RG-StandardSemiboldIt.woff2') format('woff2');
+}
+
+@font-face {
+  font-family: 'Random Grotesque';
+  font-style: normal;
+  font-weight: 700;
+  font-display: swap;
+  src: url('#{$fontAssetPath}/RandomGrotesque/RG-StandardBold.otf') format('opentype'),
+       url('#{$fontAssetPath}/RandomGrotesque/RG-StandardBold.ttf') format('truetype'),
+       url('#{$fontAssetPath}/RandomGrotesque/RG-StandardBold.woff') format('woff'),
+       url('#{$fontAssetPath}/RandomGrotesque/RG-StandardBold.woff2') format('woff2');
+}
+
 @font-face {
-  font-family: 'EB Garamond';
+  font-family: 'Random Grotesque';
   font-style: italic;
-  font-weight: 400 800;
+  font-weight: 700;
   font-display: swap;
-  src: url('#{$fontAssetPath}/eb-garamond/eb-garamond-i-variable.woff2') format('woff2');
+  src: url('#{$fontAssetPath}/RandomGrotesque/RG-StandardBoldIt.otf') format('opentype'),
+       url('#{$fontAssetPath}/RandomGrotesque/RG-StandardBoldIt.ttf') format('truetype'),
+       url('#{$fontAssetPath}/RandomGrotesque/RG-StandardBoldIt.woff') format('woff'),
+       url('#{$fontAssetPath}/RandomGrotesque/RG-StandardBoldIt.woff2') format('woff2');
+}
+
+@font-face {
+  font-family: 'Space Grotesk';
+  src: url('#{$fontAssetPath}/SpaceGrotesk/SpaceGrotesk-VariableFont_wght.ttf') format('truetype');
+  font-weight: 300 700;
 }
 
 // ///////////////////////////////////////////////////////////////////// General
 // -----------------------------------------------------------------------------
 html, body {
-  @include fontWeight_Regular;
-  font-family: $font_Primary;
-  line-height: leading(28, 16);
-  font-size: 16px;
+  @include p2;
+  background-color: $color_Primary;
   -moz-osx-font-smoothing: grayscale;
   -webkit-font-smoothing: antialiased;
   scroll-behavior: smooth;
   ::selection,
   ::-moz-selection {
-    background: $color_Primary;
-    color: white;
+    background-color: $grenadier;
+    color: #FFFFFF;
   }
   &.no-scroll {
     overflow-y: hidden;
@@ -45,6 +122,10 @@ html, body {
   }
   * {
     box-sizing: border-box;
+    &:focus-visible {
+      outline: 3px solid $grenadier;
+      outline-offset: 2px;
+    }
     &:before,
     &:after {
       box-sizing: border-box;
@@ -97,7 +178,7 @@ img {
   width: $containerWidth;
   margin: 0 auto;
   @include customMaxMQ ($containerWidth + 4rem) {
-    padding: 0 7%;
+    padding: 0 4.1665%;
     width: 100%;
   }
   &[class*="-noGutter"] {
@@ -136,12 +217,12 @@ h5, .h5 {
   @include h5;
 }
 
-h6, .h6 {
-  @include h6;
-}
+// h6, .h6 {
+//   @include h6;
+// }
 
 p {
-  @include p1;
+  @include p2;
   margin-bottom: 1rem;
 }
 
@@ -154,16 +235,16 @@ p {
 }
 
 a {
-  @include p1Link;
+  // @include p1Link;
 }
 
 strong {
   font-weight: 500;
 }
 
-caption {
-  @include caption;
-}
+// caption {
+//   @include caption;
+// }
 
 // ////////////////////////////////////////////////////////////////// Components
 // -----------------------------------------------------------------------------