base typography

Author: Alban Bailly

themes/linode-hugo-base-theme/gulpfile.js

@@ -10,6 +10,7 @@ const cssnano = require('cssnano');
 const stylelint = require('stylelint');
 const reporter = require('postcss-reporter');
 
+const tailwind = 'tailwind.js';
 const mainCss = './srcCSS/main.css';
 const css = './srcCSS/**/*.css';
 const html = './layouts/**/*.html'
@@ -60,5 +61,9 @@ gulp.task('watch:html', () => {
   gulp.watch(html, ['compile']);
 });
 
+gulp.task('watch:tailwind', () => {
+  gulp.watch(tailwind, ['compile']);
+});
+
 gulp.task('default', ['lint', 'compile', 'cssInfo']);
-gulp.task('watch', ['compile', 'watch:css', 'watch:html']);
+gulp.task('watch', ['compile', 'watch:css', 'watch:html', 'watch:tailwind']);

themes/linode-hugo-base-theme/layouts/_default/summary.html

@@ -7,6 +7,6 @@ <h2>
     {{ partial "2_molecules/post-categories" . }}
   </header>
   {{ .Summary }}
-  <p></p>
+  <hr>
   <a href="{{ .RelPermalink }}">Read More</a>
 </article>

themes/linode-hugo-base-theme/layouts/partials/0_utilities/fonts.html

@@ -1 +1 @@
-<link href="https://fonts.googleapis.com/css?family=Lato:400,600,700|Source+Code+Pro:500" rel="stylesheet" type="text.css">
+<link href="https://fonts.googleapis.com/css?family=Lato:400,400i,700,700i" rel="stylesheet">

themes/linode-hugo-base-theme/srcCSS/components/0_utilities/typography.css

@@ -1,3 +1,76 @@
+body {
+  @apply font-sans;
+  line-height: var(--line-height);
+  font-size: var(--body-font-size);
+  -webkit-font-smoothing: antialiased;
+}
+
+h1, h2, h3, h4, h5, h6 {
+  @apply font-sans;
+  font-weight: var(--heading-font-weight);
+  line-height: var(--heading-line-height);
+  margin-top: var(--heading-margin-top);
+  margin-bottom: var(--heading-margin-bottom);
+}
+
+p {
+  margin-top: var(--paragraph-margin-top);
+  margin-bottom: var(--paragraph-margin-bottom);
+}
+
+dl, ol, ul {
+  margin-top: var(--list-margin-top);
+  margin-bottom: var(--list-margin-bottom);
+}
+
+pre, code, samp {
+  @apply font-mono;
+  font-size: var(--pre-font-size);
+}
+
+pre {
+  margin-top: var(--pre-margin-top);
+  margin-bottom: var(--pre-margin-bottom);
+  overflow-x: scroll;
+}
+
+h1 { font-size: var(--h1) }
+h2 { font-size: var(--h2) }
+h3 { font-size: var(--h3) }
+h4 { font-size: var(--h4) }
+h5 { font-size: var(--h5) }
+h6 { font-size: var(--h6) }
+
+blockquote {
+  line-height: 1.5rem;
+  margin-top: 1.5rem;
+  margin-bottom: 1.5rem;
+}
+
+table {
+  margin-top: 1.5rem;
+  border-spacing: 0px;
+  border-collapse: collapse;
+}
+
+table td,
+table th {
+  padding: 0;
+  line-height: 33px;
+}
+
+code {
+  vertical-align: bottom;
+}
+
+.lead {
+  font-size: 1.414rem;
+}
+
+.hug {
+  margin-top: 0;
+}
+
 a {
   @apply text-l-green;
   text-decoration: none;
@@ -7,4 +80,22 @@ a:hover,
 a:visited,
 a:active {
   text-decoration: underline;
+}
+
+:root {
+  --body-font-size: 1rem;
+  --line-height: 1.5;
+  --heading-font-weight: 700;
+  --heading-line-height: 1.25;
+  /* PLEASE USE A MODULAR SCALE SUCH AS: http://www.modularscale.com */
+  --h1: 2.441rem;
+  --h2: 1.953rem;
+  --h3: 1.25rem;
+  --h4: 1rem;
+  --h5: .8rem;
+  --h6: .64rem;
+  --paragraph-margin-top: 1.5rem;
+  --paragraph-margin-bottom: 0;
+  --heading-margin-top: 1.5rem;
+  --heading-margin-bottom: 0;
 }

themes/linode-hugo-base-theme/static/assets/css/main.css

@@ -48,6 +48,7 @@ let colors = {
   'l-green': '#1AB15C',
   'l-nav-grey': '#a6a6a6',
 
+  // Standard Colors
   'transparent': 'transparent',
 
   'black': '#22292f',
@@ -199,28 +200,10 @@ module.exports = {
 
   fonts: {
     'sans': [
-      'system-ui',
-      'BlinkMacSystemFont',
-      '-apple-system',
-      'Segoe UI',
-      'Roboto',
-      'Oxygen',
-      'Ubuntu',
-      'Cantarell',
-      'Fira Sans',
-      'Droid Sans',
-      'Helvetica Neue',
+      'Lato',
       'sans-serif',
     ],
     'serif': [
-      'Constantia',
-      'Lucida Bright',
-      'Lucidabright',
-      'Lucida Serif',
-      'Lucida',
-      'DejaVu Serif',
-      'Bitstream Vera Serif',
-      'Liberation Serif',
       'Georgia',
       'serif',
     ],