very basic reset and page structure added

jamestomasino · Nov 1, 2021 · 868ab4d · 868ab4d
1 parent adc6faf
commit 868ab4d
Show file tree

Hide file tree

Showing 10 changed files with 225 additions and 9 deletions.
diff --git a/app.vue b/app.vue
diff --git a/assets/css/_colors.scss b/assets/css/_colors.scss
@@ -0,0 +1,13 @@
+:root {
+ --blue: #0075BC;
+ --dark-blue: #005C96;
+ --light-teal: rgb(0, 187, 212, 0.05);
+ --teal: #00BBD4;
+ --dark-teal: #00B5D1;
+ --darker-grey: #444444;
+ --dark-grey: #606060;
+ --light-grey: #CCCCCC;
+ --white: #FFFFFF;
+ --black: #000000;
+ --yellow: #FBD333;
+}
diff --git a/assets/css/_global.scss b/assets/css/_global.scss
@@ -0,0 +1,32 @@
+#main,
+#main:active,
+#main:focus {
+ outline: 0px solid transparent;
+ overflow: hidden;
+}
+
+#skip a {
+ display: block;
+ position: absolute;
+ left: -999px;
+ top: -999px;
+ width: 1px;
+ height: 1px;
+ overflow: hidden;
+ &:focus {
+ left: auto;
+ top: auto;
+ width: 30%;
+ height: auto;
+ overflow: auto;
+ margin: 10px 35%;
+ color: #000000;
+ background-color: #ffffff;
+ padding: 5px;
+ border-radius: 15px;
+ border: 4px solid #000000;
+ text-align: center;
+ font-size: 1.2em;
+ z-index: 999;
+ }
+}
diff --git a/assets/css/_reset.scss b/assets/css/_reset.scss
@@ -0,0 +1,120 @@
+/* Normalize */
+button,
+input,
+optgroup,
+select,
+textarea {
+ font-family: inherit; /* 1 */
+ font-size: 100%; /* 1 */
+ line-height: 1.15; /* 1 */
+ margin: 0; /* 2 */
+}
+/**
+ * Show the overflow in IE.
+ * 1. Show the overflow in Edge.
+ */
+button,
+input { /* 1 */
+ overflow: visible;
+}
+/**
+ * Remove the inheritance of text transform in Edge, Firefox, and IE.
+ * 1. Remove the inheritance of text transform in Firefox.
+ */
+button,
+select { /* 1 */
+ text-transform: none;
+}
+/**
+ * Correct the inability to style clickable types in iOS and Safari.
+ */
+button,
+[type="button"],
+[type="reset"],
+[type="submit"] {
+ -webkit-appearance: button;
+}
+
+html {
+ font-family: 'Source Sans Pro', -apple-system, BlinkMacSystemFont, 'Segoe UI',
+ Roboto, 'Helvetica Neue', Arial, sans-serif;
+ font-size: 16px;
+ word-spacing: 1px;
+ -ms-text-size-adjust: 100%;
+ -webkit-text-size-adjust: 100%;
+ -moz-osx-font-smoothing: grayscale;
+ -webkit-font-smoothing: antialiased;
+ box-sizing: border-box;
+}
+
+*,
+*:before,
+*:after {
+ box-sizing: border-box;
+ margin: 0;
+}
+
+#__application {
+ overflow-x: hidden;
+}
+
+sub,
+sup {
+ /* Specified in % so that the sup/sup is the
+ right size relative to the surrounding text */
+ font-size: 50%;
+ /* Zero out the line-height so that it doesn't
+ interfere with the positioning that follows */
+ line-height: 0;
+ /* Where the magic happens: makes all browsers position
+ the sup/sup properly, relative to the surrounding text */
+ position: relative;
+ /* Note that if you're using Eric Meyer's reset.css, this
+ is already set and you can remove this rule */
+ vertical-align: baseline;
+}
+sup {
+ /* Move the superscripted text up */
+ top: -0.7em;
+}
+sub {
+ /* Move the subscripted text down, but only
+ half as far down as the superscript moved up */
+ bottom: -0.25em;
+}
+
+.killscroll {
+ overflow: hidden;
+}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/assets/css/main.scss b/assets/css/main.scss
@@ -0,0 +1,3 @@
+@import 'reset';
+@import 'colors';
+@import 'global';
diff --git a/layouts/default.vue b/layouts/default.vue
@@ -0,0 +1,10 @@
+<template>
+ <div>
+ <div id="skip">
+ <a class="skip-main" href="#main">Skip to main content</a>
+ </div>
+ <div id="main" ref="main" aria-label="main" role="main">
+ <slot />
+ </div>
+ </div>
+</template>
diff --git a/nuxt.config.ts b/nuxt.config.ts
@@ -1,4 +1,17 @@
 import { defineNuxtConfig } from 'nuxt3'
 
 export default defineNuxtConfig({
+ head: {
+ titleTemplate: '%s',
+ meta: [
+ { charset: 'utf-8' },
+ { name: 'viewport', content: 'width=device-width, initial-scale=1' },
+
+ // hid is used as unique identifier. Do not use `vmid` for it as it will not work
+ { hid: 'description', name: 'description', content: 'Meta description' }
+ ]
+ },
+ css: [
+ '~/assets/css/main.scss'
+ ]
 })
diff --git a/package.json b/package.json
@@ -6,6 +6,8 @@
  "start": "node .output/server/index.mjs"
  },
  "devDependencies": {
- "nuxt3": "latest"
- }
+ "nuxt3": "latest",
+ "sass": "^1.43.4"
+ },
+ "dependencies": {}
 }
diff --git a/pages/index.vue b/pages/index.vue
@@ -0,0 +1,22 @@
+<template>
+ <div>
+ <Head>
+ <Title>Slow.is</Title>
+ <Meta name="description" content="An intentional publishing platform." />
+ <Link rel="canonical" :href="`https://slow.is${$route.path}`" />
+ </Head>
+ <Body class="home" />
+
+ Hi
+ <nuxt-link to="/monkey/">Monkey</nuxt-link>
+ </div>
+</template>
+
+<script>
+export default {
+ name: 'Homepage',
+ data () {
+ return {}
+ }
+}
+</script>
diff --git a/yarn.lock b/yarn.lock
@@ -1433,7 +1433,7 @@ chalk@^4.1.0, chalk@^4.1.2:
  ansi-styles "^4.1.0"
  supports-color "^7.1.0"
 
-chokidar@^3.5.2:
+"chokidar@>=3.0.0 <4.0.0", chokidar@^3.5.2:
  version "3.5.2"
  resolved "https://registry.yarnpkg.com/chokidar/-/chokidar-3.5.2.tgz#dba3976fcadb016f66fd365021d91600d01c1e75"
  integrity sha512-ekGhOnNVPgT77r4K/U3GDhu+FQ2S8TnK/s2KbIGXi0SZWuwkZ2QNyfWdZW+TVfn84DpEP7rLeCt2UI6bJ8GwbQ==
@@ -4434,6 +4434,13 @@ safe-buffer@~5.1.0, safe-buffer@~5.1.1:
  resolved "https://registry.yarnpkg.com/safer-buffer/-/safer-buffer-2.1.2.tgz#44fa161b0187b9549dd84bb91802f9bd8385cd6a"
  integrity sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==
 
+sass@^1.43.4:
+ version "1.43.4"
+ resolved "https://registry.yarnpkg.com/sass/-/sass-1.43.4.tgz#68c7d6a1b004bef49af0d9caf750e9b252105d1f"
+ integrity sha512-/ptG7KE9lxpGSYiXn7Ar+lKOv37xfWsZRtFYal2QHNigyVQDx685VFT/h7ejVr+R8w7H4tmUgtulsKl5YpveOg==
+ dependencies:
+ chokidar ">=3.0.0 <4.0.0"
+
 sax@^1.2.4:
  version "1.2.4"
  resolved "https://registry.yarnpkg.com/sax/-/sax-1.2.4.tgz#2816234e2378bddc4e5354fab5caa895df7100d9"