X-Git-Url: https://git.njae.me.uk/?a=blobdiff_plain;f=assets%2Fmain%2Fsass%2Fbase%2F_typography.scss;h=1731af46a82b206b1aad54c424e5a532abe5204f;hb=f7da1ca71f0edcfd84cc3fed89dde5e79306af88;hp=ee8673ac690b625257cd064c9f73956498fbe632;hpb=8af2079e4b096e77ba2f922d6a18224ce01cb7bd;p=editorial.git

diff --git a/assets/main/sass/base/_typography.scss b/assets/main/sass/base/_typography.scss
index ee8673a..1731af4 100644
--- a/assets/main/sass/base/_typography.scss
+++ b/assets/main/sass/base/_typography.scss
@@ -1,54 +1,52 @@
 ///
-/// Massively by HTML5 UP
+/// Editorial by HTML5 UP
 /// html5up.net | @ajlkn
 /// Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
 ///
 
 /* Type */
 
-	html {
-		font-size: 16pt;
+	body, input, select, textarea {
+		color: _palette(fg);
+		font-family: _font(family);
+		font-size: 13pt;
+		font-weight: _font(weight);
+		line-height: 1.65;
 
 		@include breakpoint('<=xlarge') {
-			font-size: 12pt;
+			font-size: 11pt;
 		}
 
 		@include breakpoint('<=large') {
-			font-size: 11pt;
+			font-size: 10pt;
 		}
 
 		@include breakpoint('<=xxsmall') {
-			font-size: 10pt;
+			font-size: 9pt;
 		}
 	}
 
-	body {
-		color: _palette(fg);
-	}
-
-	body, input, select, textarea {
-		font-family: _font(family);
-		font-weight: _font(weight);
-		font-size: 1rem;
-		line-height: 2.375;
-	}
-
 	a {
 		@include vendor('transition', (
 			'color #{_duration(transition)} ease-in-out',
-			'background-color #{_duration(transition)} ease-in-out',
-			'border-color #{_duration(transition)} ease-in-out',
-			'box-shadow #{_duration(transition)} ease-in-out'
+			'border-bottom-color #{_duration(transition)} ease-in-out'
 		));
 		border-bottom: dotted 1px;
+		color: _palette(accent);
 		text-decoration: none;
 
 		&:hover {
-			border-bottom-color: transparent;
+			border-bottom-color: _palette(accent);
+			color: _palette(accent) !important;
+
+			strong {
+				color: inherit;
+			}
 		}
 	}
 
 	strong, b {
+		color: _palette(fg-bold);
 		font-weight: _font(weight-bold);
 	}
 
@@ -57,103 +55,122 @@
 	}
 
 	p {
-		text-align: justify;
 		margin: 0 0 _size(element-margin) 0;
 	}
 
 	h1, h2, h3, h4, h5, h6 {
+		color: _palette(fg-bold);
 		font-family: _font(family-heading);
 		font-weight: _font(weight-heading);
 		line-height: 1.5;
-		letter-spacing: 0.075em;
-		text-transform: uppercase;
 		margin: 0 0 (_size(element-margin) * 0.5) 0;
 
 		a {
-			border-bottom: 0;
 			color: inherit;
 			text-decoration: none;
+			border-bottom: 0;
 		}
 	}
 
 	h1 {
-		font-size: 4rem;
-		line-height: 1.1;
-		margin: 0 0 _size(element-margin) 0;
+		font-size: 4em;
+		margin: 0 0 (_size(element-margin) * 0.25) 0;
+		line-height: 1.3;
 	}
 
 	h2 {
-		font-size: 1.75rem;
-		line-height: 1.3;
-		margin: 0 0 (_size(element-margin) * 0.75) 0;
+		font-size: 1.75em;
 	}
 
 	h3 {
-		font-size: 1.25rem;
-		margin: 0 0 (_size(element-margin) * 0.75) 0;
+		font-size: 1.25em;
 	}
 
 	h4 {
-		font-size: 1rem;
+		font-size: 1.1em;
 	}
 
 	h5 {
-		font-size: 0.9rem;
+		font-size: 0.9em;
 	}
 
 	h6 {
-		font-size: 0.8rem;
+		font-size: 0.7em;
+	}
+
+	@include breakpoint('<=xlarge') {
+		h1 {
+			font-size: 3.5em;
+		}
+	}
+
+	@include breakpoint('<=medium') {
+		h1 {
+			font-size: 3.25em;
+		}
+	}
+
+	@include breakpoint('<=small') {
+		h1 {
+			font-size: 2em;
+			line-height: 1.4;
+		}
+
+		h2 {
+			font-size: 1.5em;
+		}
 	}
 
 	sub {
-		font-size: 0.8rem;
+		font-size: 0.8em;
 		position: relative;
-		top: 0.5rem;
+		top: 0.5em;
 	}
 
 	sup {
-		font-size: 0.8rem;
+		font-size: 0.8em;
 		position: relative;
-		top: -0.5rem;
+		top: -0.5em;
 	}
 
 	blockquote {
-		border-left: solid 4px;
+		border-left: solid 3px _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);
 		border-radius: _size(border-radius);
-		border: solid 2px;
+		border: solid 1px _palette(border);
 		font-family: _font(family-fixed);
-		font-size: 0.9rem;
-		margin: 0 0.25rem;
-		padding: 0.25rem 0.65rem;
+		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.9rem;
+		font-size: 0.9em;
 		margin: 0 0 _size(element-margin) 0;
 
 		code {
 			display: block;
 			line-height: 1.75;
-			padding: 1rem 1.5rem;
+			padding: 1em 1.5em;
 			overflow-x: auto;
 		}
 	}
 
 	hr {
 		border: 0;
-		border-bottom: solid 2px;
-		margin: (_size(element-margin) * 1.5) 0;
+		border-bottom: solid 1px _palette(border);
+		margin: _size(element-margin) 0;
 
 		&.major {
-			margin: (_size(element-margin) * 2.5) 0;
+			margin: (_size(element-margin) * 1.5) 0;
 		}
 	}
 
@@ -167,47 +184,4 @@
 
 	.align-right {
 		text-align: right;
-	}
-
-	@mixin color-typography($p: null) {
-		@if $p != null {
-			color: _palette($p, fg);
-		}
-
-		input, select, textarea {
-			color: _palette($p, fg-bold);
-		}
-
-		a {
-			color: _palette($p, fg-bold);
-			border-bottom-color: transparentize(_palette($p, fg), 0.5);
-
-			&:hover {
-				border-bottom-color: transparent;
-				color: _palette($p, accent) !important;
-			}
-		}
-
-		strong, b {
-			color: _palette($p, fg-bold);
-		}
-
-		h1, h2, h3, h4, h5, h6 {
-			color: _palette($p, fg-bold);
-		}
-
-		blockquote {
-			border-left-color: _palette($p, border);
-		}
-
-		code {
-			background: _palette($p, border-bg);
-			border-color: _palette($p, border);
-		}
-
-		hr {
-			border-bottom-color: _palette($p, border);
-		}
-	}
-
-	@include color-typography;
\ No newline at end of file
+	}
\ No newline at end of file