basic styling

kontent-ai · Nov 19, 2020 · a8a7f03 · a8a7f03
1 parent 8c6a99a
commit a8a7f03
Show file tree

Hide file tree

Showing 7 changed files with 142 additions and 5 deletions.
diff --git a/input/_Hero.cshtml b/input/_Hero.cshtml
@@ -3,10 +3,13 @@
 @{
   ViewBag.Title = @Model.Headline;
 }
-  <h1>@Model.Headline</h1>
-  <div>
+
+<div class="hero">
+  <h1 class="append-dot">@Model.Headline</h1>
+  <div class="summary">
     @Model.Summary
   </div>
-  <div>
+  <div class="button">
     <a href="@Model.CtaUrl">@Model.CtaLabel</a>
-  </div>
+  </div>
+<div>
diff --git a/input/_Layout.cshtml b/input/_Layout.cshtml
@@ -1,14 +1,20 @@
+@using Statiq.Common
+
 <!DOCTYPE html>
 <html lang="en">
 
 <head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>@ViewBag.Title</title>
+  <link rel="stylesheet" href="@IExecutionContext.Current.GetLink("/styles/main.css")" />
+
 </head>
 
 <body>
-  @RenderBody()
+  <div class="layout">
+    @RenderBody()
+  </div>
 </body>
 
 </html>
diff --git a/input/styles/_global.scss b/input/styles/_global.scss
@@ -0,0 +1,57 @@
+/// <reference path="_variables.scss" />
+
+html,
+body {
+  margin: 0 auto;
+  padding: 0;
+  background-color: $color-base;
+  color: $color-primary;
+  font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
+
+  .layout {
+    max-width: 960px;
+    margin: auto;
+  }
+
+  h1 {
+    font-size: 32px;
+    padding: 0 0 16px;
+
+    @media screen and (min-width: 480px) {
+      font-size: 48px;
+      padding: 0 0 18px;
+    }
+
+    @media screen and (min-width: 740px) {
+      font-size: 56px;
+      padding: 0 0 24px;
+    }
+
+    @media screen and (min-width: 1280px) {
+      font-size: 72px;
+      padding: 0 0 36px;
+    }
+
+    &.append-dot:after {
+      content: ".";
+      color: $color-kontent-orange;
+    }
+  }
+
+  .button {
+    margin: 2em 1em;
+
+    a {
+      background-color: $color-secondary;
+      border: none;
+      color: $color-primary;
+      padding: 15px 32px;
+      text-align: center;
+      text-decoration: none;
+      display: inline-block;
+      font-size: 16px;
+      text-transform: uppercase;
+      font-weight: bold;
+    }
+  }
+}
diff --git a/input/styles/_hero.scss b/input/styles/_hero.scss
@@ -0,0 +1,14 @@
+.hero {
+  text-align: center;
+  overflow-x: hidden;
+  margin: 2em;
+  text-align: center;
+  overflow-x: hidden;
+  .summary {
+    width: 500px;
+    margin: auto;
+    line-height: 1.5em;
+    text-align: center;
+    font-weight: bold;
+  }
+}
diff --git a/input/styles/_reset.scss b/input/styles/_reset.scss
@@ -0,0 +1,48 @@
+/* http://meyerweb.com/eric/tools/css/reset/ 
+   v2.0 | 20110126
+   License: none (public domain)
+*/
+
+html, body, div, span, applet, object, iframe,
+h1, h2, h3, h4, h5, h6, p, blockquote, pre,
+a, abbr, acronym, address, big, cite, code,
+del, dfn, em, img, ins, kbd, q, s, samp,
+small, strike, strong, sub, sup, tt, var,
+b, u, i, center,
+dl, dt, dd, ol, ul, li,
+fieldset, form, label, legend,
+table, caption, tbody, tfoot, thead, tr, th, td,
+article, aside, canvas, details, embed, 
+figure, figcaption, footer, header, hgroup, 
+menu, nav, output, ruby, section, summary,
+time, mark, audio, video {
+	margin: 0;
+	padding: 0;
+	border: 0;
+	font-size: 100%;
+	font: inherit;
+	vertical-align: baseline;
+}
+/* HTML5 display-role reset for older browsers */
+article, aside, details, figcaption, figure, 
+footer, header, hgroup, menu, nav, section {
+	display: block;
+}
+body {
+	line-height: 1;
+}
+ol, ul {
+	list-style: none;
+}
+blockquote, q {
+	quotes: none;
+}
+blockquote:before, blockquote:after,
+q:before, q:after {
+	content: '';
+	content: none;
+}
+table {
+	border-collapse: collapse;
+	border-spacing: 0;
+}
diff --git a/input/styles/_variables.scss b/input/styles/_variables.scss
@@ -0,0 +1,5 @@
+$color-kontent-orange: #F05A22;
+
+$color-primary: #FFFFFF;
+$color-secondary: #B72929;
+$color-base: #231F20;
diff --git a/input/styles/main.scss b/input/styles/main.scss
@@ -0,0 +1,4 @@
+@import "variables";
+@import "reset";
+@import "global";
+@import "hero";