manoverboard-alpha 0.1.0 → 0.1.1

data/_sass/layout.scss

@@ -0,0 +1,125 @@
+/*
+# MOB 2020 Grid System
+# last modified October 19, 2020
+*/
+
+.wo,
+.wo-stacked,
+.wo-full {
+    max-width: 100%;
+    overflow: hidden;
+    position: relative;
+    text-align: center;
+    * {
+        text-align: left;
+    }
+    &.between {
+        align-content: space-around;
+    }
+    .left {
+        justify-self: start;
+    }
+    .right {
+        justify-self: end;
+    }
+    .bottom {
+        align-self: end; 
+    }
+    .center {
+        justify-self: center;
+        text-align: center;
+        * {
+            text-align: center;
+        }
+    }
+}
+
+.wo,
+.wo-full {
+    display: grid;
+    grid-template-columns: repeat($column-count, 1fr);
+    gap: $column-margin + px $column-margin + px;
+    justify-items: stretch;
+    align-items: start;
+}
+
+.wo,
+.wo-stacked,
+.wo-single {
+    margin: 20px;
+}
+
+.wo-full {
+    padding: 20px;
+}
+
+img[class^="col-"],
+img[class*="col-"] {
+    place-self: start;
+}
+
+@media only screen and (min-width: 1200px) {
+    .l-hide {
+        display: none !important;
+    }
+
+    // 1920 
+    @for $a from 1 through ($column-count) {
+        @for $b from 1 through ($column-count + 1) {
+            .col-#{$a}-to-#{$b} {
+                grid-column-start: $a;
+                grid-column-end: $b;
+            }
+        }
+    }
+}
+
+@media only screen and (min-width: 600px) and (max-width: 1200px) {
+    // medium
+    .wo,
+    .wo-full {
+        display: grid;
+        grid-template-columns: repeat($column-count-m, 1fr);
+        gap: $column-margin + px $column-margin + px;
+        justify-items: stretch;
+        align-items: start;
+    }
+
+    .m-hide {
+        display: none !important;
+    }
+
+    @for $a-m from 1 through ($column-count-m) {
+        @for $b-m from 1 through ($column-count-m + 1) {
+            .m-col-#{$a-m}-to-#{$b-m} {
+                grid-column-start: $a-m;
+                grid-column-end: $b-m;
+            }
+        }
+    }
+}
+
+@media only screen and (max-width: 600px) {
+    // small (mobile)
+    .wo,
+    .wo-full {
+        display: grid;
+        grid-template-columns: repeat($column-count-s, 1fr);
+        gap: $column-margin + px $column-margin + px;
+        justify-items: stretch;
+        align-items: start;
+    }
+
+    .s-hide {
+        display: none !important;
+    }
+
+    @for $a-s from 1 through ($column-count-s) {
+        @for $b-s from 1 through ($column-count-s + 1) {
+            .s-col-#{$a-s}-to-#{$b-s} {
+                grid-column-start: $a-s;
+                grid-column-end: $b-s;
+            }
+        }
+    }
+}

data/_sass/responsive.scss

@@ -0,0 +1,22 @@
+@media only screen and (min-width: 1200px) {
+
+}
+
+@media only screen and (min-width: 600px) and (max-width: 1200px) {
+
+}
+
+@media only screen and (max-width: 600px) {
+    h1, h2, h3, h4, h5, h6, li, p,
+    .main-header__nav a, a.link, a,
+    input, button, textarea {
+        font-weight: 500 !important;
+        font-size: 180%;
+        line-height: 1.111;
+        letter-spacing: 0px;
+    }
+
+    // comment!!!! 
+    // better comment
+
+}

data/assets/config-file-example_config.yml

@@ -0,0 +1,89 @@
+# Welcome to Jekyll!
+#
+# This config file is meant for settings that affect your whole blog, values
+# which you are expected to set up once and rarely edit after that. If you find
+# yourself editing this file very often, consider using Jekyll's data files
+# feature for the data you need to update frequently.
+#
+# For technical reasons, this file is *NOT* reloaded automatically when you use
+# 'bundle exec jekyll serve'. If you change this file, please restart the server process.
+#
+# If you need help with YAML syntax, here are some quick references for you: 
+# https://learn-the-web.algonquindesign.ca/topics/markdown-yaml-cheat-sheet/#yaml
+# https://learnxinyminutes.com/docs/yaml/
+#
+# Site settings
+# These are used to personalize your new site. If you look in the HTML files,
+# you will see them accessed via {{ site.title }}, {{ site.email }}, and so on.
+# You can create any custom variable you would like, and they will be accessible
+# in the templates via {{ site.myvariable }}.
+
+title: Manoverboard Boilerplate
+description: >- # this means to ignore newlines until "baseurl:"
+  Write an awesome description for your new site here. You can edit this
+  line in _config.yml. It will appear in your document head meta (for
+  Google search results) and in your feed.xml site description.
+baseurl: "" # the subpath of your site, e.g. /blog
+url: "" # the base hostname & protocol for your site, e.g. http://example.com
+
+# Build settings
+markdown: kramdown
+theme: manoverboard-alpha
+plugins:
+  - jekyll-feed
+sass:
+  sass_dir: _sass #compressed
+  style: expanded
+collections_dir: collections
+
+# CloudCannon Options
+_options:
+  image: # Front matter field
+    uploads_dir: "uploads/:title"
+  content: # Content Editor and block Editable Regions
+    uploads_dir: "uploads/:title"
+
+#cloudcannon:
+  #data: true
+
+# CloudCannon Field Descriptions
+_comments:
+  name: This can get converted to the file name
+  title: This can get converted to the file name
+
+# Collections (Custom Post Types)
+collections:
+  general_pages:
+    output: true
+    _hide_content: true
+    permalink: /:name
+    # sort_by:   
+
+defaults:
+  - scope:
+      path: ""
+      type: "posts"
+    values:
+      layout: "post"
+  - scope:
+      path: ""
+      type: "general_pages"
+    values:
+      layout: "default"
+
+# Exclude from processing.
+# The following items will not be processed, by default.
+# Any item listed under the `exclude:` key here will be automatically added to
+# the internal "default list".
+#
+# exclude:
+#   - .sass-cache/
+#   - .jekyll-cache/
+#   - gemfiles/
+#   - Gemfile
+#   - Gemfile.lock
+#   - node_modules/
+#   - vendor/bundle/
+#   - vendor/cache/
+#   - vendor/gems/
+#   - vendor/ruby/

data/assets/css/main.scss

@@ -0,0 +1,374 @@
+---
+# MOB 2020 Main Stylesheet
+# last modified August 18, 2020
+---
+
+// this file must start with front matter, like above, so jekyll knows to parse and do shit with it! :D
+
+// ————————————————————————————————————————— 
+// VARIABLES: for partials
+// ————————————————————————————————————————— 
+// for layout
+$column-count: 10; 
+$column-count-m: 7;
+$column-count-s: 4;
+$grid-width: 1920; 
+$column-margin: 20;
+
+// ————————————————————————————————————————— 
+// IMPORTS 
+// ————————————————————————————————————————— 
+// these are partials
+// init for mob theme
+@import "init";
+// grid and base layout classes
+@import "layout";
+
+
+// ————————————————————————————————————————— 
+// VARIABLES: for base
+// ————————————————————————————————————————— 
+$headerheight: 80px;
+$fullbrowserheight: calc(100vh - 80px);
+
+// color
+$black: #000;
+$white: #FBF9F2;
+
+// easings
+$easing: cubic-bezier(0.83, 0, 0.17, 1);
+
+
+// ————————————————————————————————————————— 
+// M I X I N S
+// ————————————————————————————————————————— 
+// @include background-image("image.jpg");
+@mixin background-image($url) {
+    background: $grey url($url) no-repeat center;
+    background-size: cover;
+}
+
+// @include background-fill();
+@mixin background-fill() {
+    background-repeat: no-repeat;
+    background-position: center;
+    background-size: cover;
+}
+
+
+// ————————————————————————————————————————— 
+// S T A T E S
+// ————————————————————————————————————————— 
+::selection {
+    background:rgba(252, 67, 54, 0.5);
+}
+
+::-moz-selection {
+    background: rgba(252, 67, 54, 0.5);
+}
+
+.keyboard-focus :focus {
+    outline: 2px solid blue;
+}
+
+// skip link defaults
+#skipLink {
+  padding: 20px 10px 11px 10px;
+  display: inline-block;
+  position: absolute;
+  z-index: 123456789;
+  background-color: white;
+  top: -200px;
+  left: 20px;
+  border-radius: 0px 0px 5px 5px;
+  box-shadow: 0px 0px 24px rgba(0,0,0,0.5);
+  transition: .4s all $easing;
+  &:focus {
+    top: 0;
+  }
+}
+
+
+
+// ————————————————————————————————————————— 
+// core styles & classes
+// ————————————————————————————————————————— 
+
+body,
+input,
+textarea,
+radio,
+checkbox,
+.strip {
+    background-color: transparent;
+    font-weight: normal;
+    font-style: normal;
+    line-height: 1;
+    text-align: left;
+}
+
+.pv {
+    padding-top: 65px;
+    padding-bottom: 65px;
+}
+
+.video-wrapper {
+    position: relative;
+    padding-bottom: 56.25%;
+    /* 16:9 */
+    padding-top: 25px;
+    height: 0;
+    embed,
+    video,
+    object {
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 100%;
+    }
+}
+
+/* Fixes potential theme css conflict. */
+.acf-map {
+    width: 100%;
+    height: 100vh;
+    img {
+        max-width: inherit !important;
+    }
+}
+
+li p,
+p .button {
+    font-size: 100%;
+}
+
+
+
+// ————————————————————————————————————————— 
+// header
+// —————————————————————————————————————————
+
+#header {}
+
+// ————————————————————————————————————————— 
+// ST Typography
+// —————————————————————————————————————————
+
+.st {
+    h1,
+    h2,
+    h3,
+    h4,
+    h5,
+    h6 {
+        margin: 0;
+        padding: 0;
+    }
+
+    p,
+    li {
+        margin: 0;
+        padding: 0;
+    }
+
+    b,
+    strong {
+        font-weight: 600;
+    }
+
+    a {
+        text-decoration: underline;
+    }
+
+    p.small {
+        font-size: 140%;
+    }
+
+    // ————————————————————————————— headings
+
+    h1,
+    h2 {
+        font-size: 360%;
+        font-weight: 400;
+        margin-top: 40px;
+        margin-bottom: 10px;
+    }
+
+    h3 {
+        font-size: 270%;
+        margin-bottom: 10px;
+        margin-top: 40px;
+    }
+
+    h4 {
+        font-size: 200%;
+        margin-top: 20px;
+        margin-bottom: 2px;
+    }
+
+    h5 {
+        font-size: 200%;
+    }
+
+    h6 {
+        font-size: 300%;
+        margin-bottom: 32px;
+    }
+
+    // ————————————————————————————— lists
+
+    ul {
+        list-style-type: disc;
+    }
+
+    ul ul {
+        margin-top: 10px;
+        margin-bottom: 20px;
+        list-style-type: circle;
+    }
+
+    ul ul ul {
+        list-style-type: square;
+    }
+
+    ol {
+        list-style-type: decimal;
+    }
+
+    ol ol {
+        margin-top: 10px;
+        margin-bottom: 20px;
+        list-style-type: lower-alpha;
+    }
+
+    ol ol ol {
+        list-style-type: lower-roman;
+    }
+
+    ol ol,
+    ul ol {
+        list-style-type: lower-roman;
+    }
+
+    li li {
+        font-size: 100%;
+    }
+
+    iframe {
+        width: 100%;
+    }
+}
+
+
+// ————————————————————————————————————————— 
+// Special Typography
+// —————————————————————————————————————————
+
+// ————————————————————————————————————————— 
+// buttons
+// —————————————————————————————————————————
+
+.button {
+    margin-top: 10px;
+    display: inline-block;
+    padding: 15px 30px;
+    text-decoration: none !important;
+    line-height: 1;
+    &:hover {}
+}
+
+
+
+// ————————————————————————————————————————— 
+// contact form 7
+// —————————————————————————————————————————
+
+.form-layer {
+    padding: 0 20px 100px;
+    text-align: center;
+    background: white;
+
+    .form-layer__form {
+        p {
+            font-size: 100%;
+            margin-top: 25px;
+            display: block;
+            clear: both;
+        }
+
+        p {
+            font-size: 100%;
+            margin-top: 25px;
+            display: block;
+            clear: both;
+        }
+
+        p.three-field-date,
+        p.two-field-date {
+            font-size: 100%;
+            margin-top: 0;
+        }
+
+        label,
+        legend {
+            display: inline-block;
+            padding-bottom: 5px;
+            font-size: 180%;
+        }
+
+        legend {
+            margin-top: 25px;
+        }
+
+        input,
+        textarea,
+        checkbox,
+        radio {
+            box-sizing: border-box;
+            border: none;
+            margin: 0;
+            padding: 0;
+            width: 600px;
+            max-width: 100%;
+            font-size: 180%;
+            line-height: 1.2;
+            padding: 10px;
+        }
+
+        input[type="submit"] {
+            text-align: center;
+            font-size: 180%;
+            width: auto;
+        }
+
+        input:focus,
+        textarea:focus {
+            outline: 3px solid #4985a7;
+            color: black;
+        }
+
+        select {
+            -webkit-appearance: none;
+            -moz-appearance: none;
+            appearance: none;
+            box-sizing: border-box !important;
+            background: url('img/dropdown-arrow.png') no-repeat 96% 50% transparent;
+            background-size: 16px 9px;
+        }
+    }
+}
+
+
+// ————————————————————————————————————————— 
+// footer
+// —————————————————————————————————————————
+
+#footer {}
+
+
+// —————————————————————————————————————————
+// IMPORTS
+// —————————————————————————————————————————
+// these are partials, must go in the _sass folder
+@import "responsive.scss";