Merge pull request #31 from stackabletech/feat/23-footer

Adding a footer

Author: fhennig

.github/workflows/build.yml

@@ -1,4 +1,4 @@
-name: Build Bundle
+name: Build Bundle. Includes linting.
 
 on:
   pull_request:
@@ -21,4 +21,4 @@ jobs:
             ${{ runner.OS }}-node-
             ${{ runner.OS }}-
       - run: npm ci
-      - run: node_modules/.bin/gulp bundle
+      - run: npm run bundle

gulp.d/tasks/build.js

@@ -103,6 +103,7 @@ module.exports = (src, dest, preview) => () => {
       .src(['css/site.css', 'css/vendor/*.css'], { ...opts, sourcemaps })
       .pipe(postcss((file) => ({ plugins: postcssPlugins, options: { file } }))),
     vfs.src('font/*.{ttf,woff*(2)}', opts),
+    vfs.src('webfonts/*.{ttf,woff*(2)}', opts),
     vfs.src('img/**/*.{gif,ico,jpg,png,svg}', opts).pipe(
       preview
         ? through()

gulpfile.js

@@ -17,7 +17,7 @@ const serverConfig = { host: '0.0.0.0', port: 5252, livereload }
 const task = require('./gulp.d/tasks')
 const glob = {
   all: [srcDir, previewSrcDir],
-  css: `${srcDir}/css/**/*.css`,
+  css: [`${srcDir}/css/**/*.css`, `!${srcDir}/css/vendor/**/*.css`],
   js: ['gulpfile.js', 'gulp.d/**/*.js', `${srcDir}/{helpers,js}/**/*.js`],
 }
 

package.json

@@ -7,6 +7,11 @@
     "type": "git",
     "url": "https://gitlab.com/antora/antora-ui-default.git"
   },
+  "scripts": {
+    "lint": "gulp lint",
+    "bundle": "gulp bundle",
+    "preview": "gulp preview"
+  },
   "engines": {
     "node": ">= 8.0.0"
   },

src/css/footer.css

@@ -10,6 +10,103 @@ footer.footer {
   margin: 0.5rem 0;
 }
 
-.footer a {
-  color: var(--footer-link-font-color);
+.footer-info {
+  display: flex;
+  gap: 24px;
+}
+
+@media screen and (max-width: 720px) {
+  .footer-info {
+    flex-direction: column;
+  }
+}
+
+@media screen and (min-width: 720px) {
+  .footer-info {
+    flex-direction: row;
+  }
+}
+
+.footer-info-item-large {
+  flex-grow: 3;
+}
+
+.footer-info-item {
+  flex-grow: 1;
+}
+
+.footer-info-item h2 {
+  margin-top: 0;
+}
+
+.footer-link-list {
+  list-style-type: none;
+  padding: 0;
+  margin: 0;
+}
+
+.footer-link-list li a {
+  color: var(--footer-font-color);
+}
+
+.footer-link-list li a:hover {
+  text-decoration: none;
+  color: var(--color-brand-primary);
+}
+
+.c-and-socials {
+  display: flex;
+  gap: 24px;
+  align-items: center;
+  justify-content: space-between;
+}
+
+@media screen and (max-width: 720px) {
+  .c-and-socials {
+    flex-direction: column;
+  }
+}
+
+@media screen and (min-width: 720px) {
+  .c-and-socials {
+    flex-direction: row;
+  }
+}
+
+.footer-container {
+  display: flex;
+  flex-direction: column;
+  gap: 24px;
+}
+
+.social-icons-container {
+  display: flex;
+  flex-direction: row;
+  gap: 10px;
+}
+
+.social-icon {
+  background-color: var(--footer-font-color);
+  color: var(--body-font-color);
+  border-radius: 50%;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 20px;
+  height: 36px;
+  width: 36px;
+  cursor: pointer;
+  transition: all 0.3s;
+}
+
+.social-icon:hover {
+  background-color: var(--color-brand-primary);
+  color: var(--footer-font-color);
+  text-decoration: none;
+}
+
+.footer-seperator {
+  width: 100%;
+  height: 1px;
+  background-color: var(--footer-font-color);
 }

src/css/site.css

@@ -17,3 +17,4 @@
 @import "highlight.css";
 @import "print.css";
 @import "landing.css";
+@import "vendor/fontawesome.css";

src/css/vars.css

@@ -116,9 +116,9 @@
   --toc-line-height: 1.2;
   /* footer */
   --footer-line-height: var(--doc-line-height);
-  --footer-background: var(--color-smoke-90);
-  --footer-font-color: var(--color-gray-70);
-  --footer-link-font-color: var(--color-jet-80);
+  --footer-background: var(--color-jet-70);
+  --footer-font-color: var(--color-white);
+  --footer-link-font-color: var(--color-smoke-70);
   /* dimensions and positioning */
   --navbar-height: calc(73 / var(--rem-base) * 1rem);
   --toolbar-height: calc(45 / var(--rem-base) * 1rem);