update a11y

codebushi · Jul 30, 2019 · acba3ff · acba3ff
1 parent 20a80bb
commit acba3ff
Show file tree

Hide file tree

Showing 11 changed files with 1,121 additions and 891 deletions.
diff --git a/package.json b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "gatsby-theme-forty",
   "description": "Gatsby Theme - Forty",
-  "version": "1.0.1",
+  "version": "1.0.2",
   "author": "Hunter Chang",
   "dependencies": {
     "gatsby-plugin-manifest": "^2.2.4",
@@ -13,7 +13,9 @@
     "react-helmet": "^5.2.1"
   },
   "keywords": [
-    "gatsby"
+    "gatsby",
+    "gatsby-theme",
+    "gatsby-plugin"
   ],
   "license": "MIT",
   "scripts": {

diff --git a/src/assets/scss/base/_typography.scss b/src/assets/scss/base/_typography.scss
@@ -6,168 +6,186 @@
 
 /* Type */
 
-	body, input, select, textarea {
-		color: _palette(fg);
-		font-family: _font(family);
-		font-size: 17pt;
-		font-weight: _font(weight);
-		letter-spacing: _font(letter-spacing);
-		line-height: 1.65;
-
-		@include breakpoint(xlarge) {
-			font-size: 14pt;
-		}
-
-		@include breakpoint(large) {
-			font-size: 12pt;
-		}
-
-		@include breakpoint(xxsmall) {
-			font-size: 11pt;
-		}
-	}
-
-	a {
-		@include vendor('transition', (
-			'color #{_duration(transition)} ease-in-out',
-			'border-bottom-color #{_duration(transition)} ease-in-out'
-		));
-		border-bottom: dotted 1px;
-		color: inherit;
-		text-decoration: none;
-
-		&:hover {
-			border-bottom-color: transparent;
-			color: _palette(highlight) !important;
-		}
-
-		&:active {
-			color: desaturate(darken(_palette(highlight), 15), 5) !important;
-		}
-	}
-
-	strong, b {
-		color: _palette(fg-bold);
-		font-weight: _font(weight-bold);
-	}
-
-	em, i {
-		font-style: italic;
-	}
-
-	p {
-		margin: 0 0 _size(element-margin) 0;
-	}
-
-	h1, h2, h3, h4, h5, h6 {
-		color: _palette(fg-bold);
-		font-weight: _font(weight-bold);
-		line-height: 1.65;
-		margin: 0 0 (_size(element-margin) * 0.5) 0;
-
-		a {
-			color: inherit;
-			border-bottom: 0;
-		}
-	}
-
-	h1 {
-		font-size: 2.5em;
-	}
-
-	h2 {
-		font-size: 1.75em;
-	}
-
-	h3 {
-		font-size: 1.35em;
-	}
-
-	h4 {
-		font-size: 1.1em;
-	}
-
-	h5 {
-		font-size: 0.9em;
-	}
-
-	h6 {
-		font-size: 0.7em;
-	}
-
-	@include breakpoint(small) {
-		h1 {
-			font-size: 2em;
-		}
-
-		h2 {
-			font-size: 1.5em;
-		}
-
-		h3 {
-			font-size: 1.25em;
-		}
-	}
-
-	sub {
-		font-size: 0.8em;
-		position: relative;
-		top: 0.5em;
-	}
-
-	sup {
-		font-size: 0.8em;
-		position: relative;
-		top: -0.5em;
-	}
-
-	blockquote {
-		border-left: solid 4px _palette(border);
-		font-style: italic;
-		margin: 0 0 _size(element-margin) 0;
-		padding: (_size(element-margin) / 4) 0 (_size(element-margin) / 4) _size(element-margin);
-	}
-
-	code {
-		background: _palette(border-bg);
-		font-family: _font(family-fixed);
-		font-size: 0.9em;
-		margin: 0 0.25em;
-		padding: 0.25em 0.65em;
-	}
-
-	pre {
-		-webkit-overflow-scrolling: touch;
-		font-family: _font(family-fixed);
-		font-size: 0.9em;
-		margin: 0 0 _size(element-margin) 0;
-
-		code {
-			display: block;
-			line-height: 1.75;
-			padding: 1em 1.5em;
-			overflow-x: auto;
-		}
-	}
-
-	hr {
-		border: 0;
-		border-bottom: solid 1px _palette(border);
-		margin: _size(element-margin) 0;
-
-		&.major {
-			margin: (_size(element-margin) * 1.5) 0;
-		}
-	}
-
-	.align-left {
-		text-align: left;
-	}
-
-	.align-center {
-		text-align: center;
-	}
-
-	.align-right {
-		text-align: right;
-	}
+body,
+input,
+select,
+textarea {
+  color: _palette(fg);
+  font-family: _font(family);
+  font-size: 17pt;
+  font-weight: _font(weight);
+  letter-spacing: _font(letter-spacing);
+  line-height: 1.65;
+
+  @include breakpoint(xlarge) {
+    font-size: 14pt;
+  }
+
+  @include breakpoint(large) {
+    font-size: 12pt;
+  }
+
+  @include breakpoint(xxsmall) {
+    font-size: 11pt;
+  }
+}
+
+a {
+  @include vendor(
+    'transition',
+    (
+      'color #{_duration(transition)} ease-in-out',
+      'border-bottom-color #{_duration(transition)} ease-in-out'
+    )
+  );
+  border-bottom: dotted 1px;
+  color: inherit;
+  text-decoration: none;
+
+  &:hover {
+    border-bottom-color: transparent;
+    color: _palette(highlight) !important;
+  }
+
+  &:active {
+    color: desaturate(darken(_palette(highlight), 15), 5) !important;
+  }
+
+  &:focus {
+    outline: 3px solid rgba(155, 241, 255, 0.5);
+  }
+}
+
+strong,
+b {
+  color: _palette(fg-bold);
+  font-weight: _font(weight-bold);
+}
+
+em,
+i {
+  font-style: italic;
+}
+
+p {
+  margin: 0 0 _size(element-margin) 0;
+}
+
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+  color: _palette(fg-bold);
+  font-weight: _font(weight-bold);
+  line-height: 1.65;
+  margin: 0 0 (_size(element-margin) * 0.5) 0;
+
+  a {
+    color: inherit;
+    border-bottom: 0;
+  }
+}
+
+h1 {
+  font-size: 2.5em;
+}
+
+h2 {
+  font-size: 1.75em;
+}
+
+h3 {
+  font-size: 1.35em;
+}
+
+h4 {
+  font-size: 1.1em;
+}
+
+h5 {
+  font-size: 0.9em;
+}
+
+h6 {
+  font-size: 0.7em;
+}
+
+@include breakpoint(small) {
+  h1 {
+    font-size: 2em;
+  }
+
+  h2 {
+    font-size: 1.5em;
+  }
+
+  h3 {
+    font-size: 1.25em;
+  }
+}
+
+sub {
+  font-size: 0.8em;
+  position: relative;
+  top: 0.5em;
+}
+
+sup {
+  font-size: 0.8em;
+  position: relative;
+  top: -0.5em;
+}
+
+blockquote {
+  border-left: solid 4px _palette(border);
+  font-style: italic;
+  margin: 0 0 _size(element-margin) 0;
+  padding: (_size(element-margin) / 4) 0 (_size(element-margin) / 4)
+    _size(element-margin);
+}
+
+code {
+  background: _palette(border-bg);
+  font-family: _font(family-fixed);
+  font-size: 0.9em;
+  margin: 0 0.25em;
+  padding: 0.25em 0.65em;
+}
+
+pre {
+  -webkit-overflow-scrolling: touch;
+  font-family: _font(family-fixed);
+  font-size: 0.9em;
+  margin: 0 0 _size(element-margin) 0;
+
+  code {
+    display: block;
+    line-height: 1.75;
+    padding: 1em 1.5em;
+    overflow-x: auto;
+  }
+}
+
+hr {
+  border: 0;
+  border-bottom: solid 1px _palette(border);
+  margin: _size(element-margin) 0;
+
+  &.major {
+    margin: (_size(element-margin) * 1.5) 0;
+  }
+}
+
+.align-left {
+  text-align: left;
+}
+
+.align-center {
+  text-align: center;
+}
+
+.align-right {
+  text-align: right;
+}