[DRAFT] first skin, add local font DejaVu Sans

static/css/skeleton.css

@@ -23,8 +23,38 @@
 - Utilities
 - Clearing
 - Media Queries
+- Custom Code
 */
 
+/* Fonts
+–––––––––––––––––––––––––––––––––––––––––––––––––– */
+@font-face {
+  font-family: 'DejaVu Sans';
+  font-style: normal;
+  font-weight: 300;
+  font-display: swap;
+  src:
+          url('../fonts/DejaVuSans-ExtraLight.woff2') format('woff2')
+}
+
+@font-face {
+  font-family: 'DejaVu Sans';
+  font-style: normal;
+  font-weight: 500;
+  font-display: swap;
+  src:
+          url('../fonts/DejaVuSansMono.woff2') format('woff2')
+}
+
+@font-face {
+  font-family: 'DejaVu Sans';
+  font-style: normal;
+  font-weight: 800;
+  font-display: swap;
+  src:
+          url('../fonts/DejaVuSans-Bold.woff2') format('woff2')
+}
+
 
 /* Grid
 –––––––––––––––––––––––––––––––––––––––––––––––––– */
@@ -124,8 +154,9 @@ body {
   font-size: 1.5em; /* currently ems cause chrome bug misinterpreting rems on body element */
   line-height: 1.6;
   font-weight: 400;
-  font-family: "Raleway", "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif;
-  color: #222; }
+  font-family: "DejaVu Sans", "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif;
+  color: #222; 
+}
 
 
 /* Typography
@@ -182,9 +213,9 @@ input[type="button"] {
   text-transform: uppercase;
   text-decoration: none;
   white-space: nowrap;
-  background-color: transparent;
+  background-color: white;
   border-radius: 4px;
-  border: 1px solid #bbb;
+  border: 1px solid transparent;
   cursor: pointer;
   box-sizing: border-box; }
 .button:hover,
@@ -206,8 +237,8 @@ input[type="submit"].button-primary,
 input[type="reset"].button-primary,
 input[type="button"].button-primary {
   color: #FFF;
-  background-color: #33C3F0;
-  border-color: #33C3F0; }
+  background-color: red;
+  border-color: red; }
 .button.button-primary:hover,
 button.button-primary:hover,
 input[type="submit"].button-primary:hover,
@@ -219,8 +250,8 @@ input[type="submit"].button-primary:focus,
 input[type="reset"].button-primary:focus,
 input[type="button"].button-primary:focus {
   color: #FFF;
-  background-color: #1EAEDB;
-  border-color: #1EAEDB; }
+  background-color: darkred;
+  border-color: darkred; }
 
 
 /* Forms
@@ -237,7 +268,7 @@ select {
   height: 38px;
   padding: 6px 10px; /* The 6px vertically centers text on FF, ignored by Webkit */
   background-color: #fff;
-  border: 1px solid #D1D1D1;
+  border: 1px solid transparent;
   border-radius: 4px;
   box-shadow: none;
   box-sizing: border-box; }
@@ -266,7 +297,7 @@ input[type="url"]:focus,
 input[type="password"]:focus,
 textarea:focus,
 select:focus {
-  border: 1px solid #33C3F0;
+  border: 1px solid #222;
   outline: 0; }
 label,
 legend {
@@ -416,3 +447,81 @@ there.
 
 /* Larger than Desktop HD */
 @media (min-width: 1200px) {}
+
+/* custom */
+.content-center-all {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.content-center-end {
+  display: flex;
+  align-items: center;
+  justify-content: end;
+}
+
+.font-base {
+  font-size: 1.2rem !important;
+}
+
+.full-height {
+  min-height: 100vh;
+  height: 100%;
+}
+
+.p-3 {
+    padding: 3rem;
+}
+
+.p-1 {
+  padding: 1rem;
+}
+
+.mb-0 {
+  margin-bottom: 0;
+}
+
+.mb-1 {
+  margin-bottom: 1rem;
+}
+
+.mb-3 {
+  margin-bottom: 3rem;
+}
+
+.w-full {
+  width: 100%;
+}
+
+.block {
+  display: block;
+}
+
+.bold {
+  font-weight: 800;
+}
+
+.light {
+  font-weight: 300;
+}
+
+.bg-gray {
+  background-color: #F1F1F1;
+}
+
+.bg-green {
+  background-color: #2b8c68;
+}
+
+.bg-red {
+  background-color: red;
+}
+
+.text-white {
+  color: #fff;
+}
+
+.text-center {
+  text-align: center;
+}