GitBlixt
teagles/middleman-starter-netlify-cms

Add very basic styling to the homepage

Tom Rutgers committed Aug 14, 2018
commit 5376663508221f7896dcc8593fcc5143218409e5
Showing 8 changed files with 249 additions and 17 deletions
source/images/coffee.jpg +0 -0
source/index.html.erb +5 -10
@@ @@ -1,17 +1,12 @@
---
- title: Welcome to Middleman
+ title: Home - Middleman + Netlify CMS Example
---
- <h1>
- Middleman is Running
- </h1>
-
- <%= link_to(
- "Read Documentation",
- "https://middlemanapp.com/basics/templating_language/",
- target: "_blank"
- ) %>
+ <section class="hero-homepage">
+ <h1>Welcome</h1>
+ </section>
<section class="posts">
+ <h1>News</h1>
<% blog.articles.each do |article| %>
<article class="post">
<h1><%= article.title %></h1>
source/stylesheets/all.css.scss +5 -1
@@ @@ -2,5 +2,9 @@
@charset 'utf-8';
//base
+ @import 'base/reset';
@import 'base/colors';
- @import 'base/base';
\ No newline at end of file
+ @import 'base/typography';
+ @import 'base/placeholders';
+
+ @import 'demo/homepage';
\ No newline at end of file
source/stylesheets/base/_base.scss +0 -6
@@ @@ -1,6 +0,0 @@
- %img-responsive{
- display: block;
- width: 100%;
- max-width: 100%;
- height: auto;
- }
\ No newline at end of file
source/stylesheets/base/_placeholders.scss +6 -0
@@ @@ -0,0 +1,6 @@
+ %img-responsive{
+ display: block;
+ width: 100%;
+ max-width: 100%;
+ height: auto;
+ }
\ No newline at end of file
source/stylesheets/base/_reset.scss +213 -0
@@ @@ -0,0 +1,213 @@
+ /* ------------------------------------------
+ RESET
+ --------------------------------------------- */
+ body, div,
+ h1, h2, h3, h4, h5, h6,
+ p, blockquote, pre, dl, dt, dd, ol, ul, li, hr,
+ fieldset, form, label, legend, th, td,
+ article, aside, figure, footer, header, hgroup, menu, nav, section,
+ summary, hgroup {
+ margin: 0;
+ padding: 0;
+ border: 0;
+ }
+
+ h1, h2, h3, h4, h5, h6, small {
+ font-size: 1em;
+ }
+
+ @-webkit-viewport {width:device-width}
+ @-moz-viewport {width:device-width}
+ @-ms-viewport {width:device-width}
+ @-o-viewport {width:device-width}
+ @viewport {width:device-width}
+
+ img, video {
+ width: auto;
+ max-width: 100%;
+ height: auto;
+ }
+
+ html {
+ -webkit-text-size-adjust: 100%;
+ -ms-text-size-adjust: 100%;
+ text-size-adjust: 100%;
+ }
+
+ /* ------------------------------------------
+ CONSISTENCY FIXES
+ --------------------------------------------- */
+ article, aside, details, figcaption, figure, footer,
+ header, hgroup, main, nav, section, summary {
+ display: block;
+ }
+
+ audio, canvas, video {
+ display: inline-block;
+ }
+
+ audio:not([controls]) {
+ display: none;
+ height: 0;
+ }
+
+ [hidden] {
+ display: none;
+ }
+
+ html {
+ -webkit-text-size-adjust: 100%;
+ -ms-text-size-adjust: 100%;
+ text-size-adjust: 100%;
+ }
+
+ a:active,
+ a:hover {
+ outline: 0;
+ }
+
+ abbr[title] {
+ border-bottom: 1px dotted;
+ }
+
+ b, strong {
+ font-weight: bold;
+ }
+
+ dfn {
+ font-style: italic;
+ }
+
+ hr {
+ color: transparent;
+ background: none;
+ -moz-box-sizing: content-box;
+ box-sizing: content-box;
+ height: 0;
+ }
+
+ mark {
+ background: #ff0;
+ color: #000;
+ }
+
+ code, kbd, pre, samp {
+ font-family: monospace, monospace;
+ font-size: 1em;
+ }
+
+ pre {
+ white-space: pre-wrap;
+ }
+
+ q {
+ quotes: "\201C" "\201D" "\2018" "\2019";
+ }
+
+ small {
+ font-size: 80%;
+ }
+
+ sub, sup {
+ font-size: 75%;
+ line-height: 0;
+ position: relative;
+ vertical-align: baseline;
+ }
+
+ sup {
+ top: -0.5em;
+ }
+
+ sub {
+ bottom: -0.25em;
+ }
+
+ svg:not(:root) {
+ overflow: hidden;
+ }
+
+ ul, ol {
+ margin-left: 1.5em;
+ }
+
+ ul {
+ list-style-type: disc;
+ }
+
+ ol {
+ list-style-type: decimal;
+ }
+
+ nav ol,
+ nav ul {
+ list-style: none;
+ margin: 0;
+ padding: 0;
+ }
+
+ button, input, select, textarea {
+ font-family: inherit;
+ font-size: 100%;
+ margin: 0;
+ }
+
+ button, input {
+ line-height: normal;
+ }
+
+ button, select {
+ text-transform: none;
+ }
+
+ button,
+ html input[type="button"],
+ input[type="reset"],
+ input[type="submit"] {
+ -webkit-appearance: button;
+ cursor: pointer;
+ }
+
+ button[disabled],
+ html input[disabled] {
+ cursor: default;
+ }
+
+ input[type="checkbox"],
+ input[type="radio"] {
+ box-sizing: border-box;
+ padding: 0;
+ }
+
+ input[type="search"] {
+ -webkit-appearance: textfield;
+ -moz-box-sizing: content-box;
+ -webkit-box-sizing: content-box;
+ box-sizing: content-box;
+ }
+
+ input[type="search"]::-webkit-search-cancel-button,
+ input[type="search"]::-webkit-search-decoration {
+ -webkit-appearance: none;
+ }
+
+ button::-moz-focus-inner,
+ input::-moz-focus-inner {
+ border: 0;
+ padding: 0;
+ }
+
+ textarea {
+ overflow: auto;
+ vertical-align: top;
+ }
+
+ table {
+ border-collapse: collapse;
+ border-spacing: 0;
+ }
+
+ a img, img {
+ -ms-interpolation-mode: bicubic;
+ border: 0;
+ }
\ No newline at end of file
source/stylesheets/base/_typography.scss +5 -0
@@ @@ -0,0 +1,5 @@
+ body {
+ font-family: -apple-system, BlinkMacSystemFont, "Avenir Next", "Avenir", "Segoe UI", "Lucida Grande", "Helvetica Neue", "Helvetica", "Fira Sans", "Roboto", "Noto", "Droid Sans", "Cantarell", "Oxygen", "Ubuntu", "Franklin Gothic Medium", "Century Gothic", "Liberation Sans", sans-serif;
+ -webkit-font-smoothing: antialiased;
+ text-rendering: optimizeLegibility;
+ }
\ No newline at end of file
source/stylesheets/demo/_homepage.scss +15 -0
@@ @@ -0,0 +1,15 @@
+ .hero-homepage {
+ width: 100%;
+ padding: 20% 0;
+ text-align: center;
+ background-image: url('../images/coffee.jpg');
+ background-size: cover;
+
+ h1 {
+ display: inline-block;
+ padding: 16px;
+ font-size: 48px;
+ color: #fff;
+ background-color: $primary-color;
+ }
+ }
\ No newline at end of file