rails_app_generator 0.1.28 → 0.2.2

data/after_templates/application/printspeak/app/assets/stylesheets/home/components/_navbar.scss

@@ -0,0 +1,92 @@
+//
+// Navbar
+//
+
+#mainNav {
+    padding-top: 1rem;
+    padding-bottom: 1rem;
+    background-color: $gray-900;
+
+    .navbar-toggler {
+
+        padding: 0.75rem;
+        font-size: 0.75rem;
+        font-family: $headings-font-family;
+        text-transform: uppercase;
+        font-weight: $font-weight-bold;
+    }
+
+    .navbar-brand {
+        color: $primary;
+        font-family: $headings-font-family;
+        font-weight: $headings-font-weight;
+        letter-spacing: $headings-letter-spacing;
+        text-transform: uppercase;
+
+        img {
+            height: 1.5rem;
+        }
+    }
+
+    .navbar-nav {
+        .nav-item {
+            .nav-link {
+                font-family: $headings-font-family;
+                font-size: 0.95rem;
+                color: $white;
+                letter-spacing: $headings-letter-spacing;
+
+                &.active,
+                &:hover {
+                    color: $primary;
+                }
+            }
+        }
+    }
+}
+
+// Responsive styling for screen width equal to or greater than the large breakpoint
+@include media-breakpoint-up(lg) {
+    #mainNav {
+        padding-top: 1.5rem;
+        padding-bottom: 1.5rem;
+        border: none;
+        background-color: transparent;
+        transition: padding-top 0.3s ease-in-out,
+            padding-bottom 0.3s ease-in-out;
+
+        .navbar-brand {
+            font-size: 1.5em;
+            transition: font-size 0.3s ease-in-out;
+
+            img {
+                height: 2rem;
+                transition: height 0.3s ease-in-out;
+            }
+        }
+
+        // Styling for when the navbar shrinks on larger screens
+        &.navbar-shrink {
+            padding-top: 1rem;
+            padding-bottom: 1rem;
+            background-color: $gray-900;
+
+            .navbar-brand {
+                font-size: 1.25em;
+
+                svg,
+                img {
+                    height: 1.5rem;
+                }
+            }
+        }
+
+        .navbar-nav .nav-item {
+            margin-right: 1rem;
+
+            &:last-child {
+                margin-right: 0;
+            }
+        }
+    }
+}

data/after_templates/application/printspeak/app/assets/stylesheets/home/sections/_contact.scss

@@ -0,0 +1,71 @@
+//
+// Contact section styling
+//
+
+section#contact {
+    background-color: $gray-900;
+    background-image: url("map-image");
+    background-repeat: no-repeat;
+    background-position: center;
+
+    .section-heading {
+        color: $white;
+    }
+
+    form#contactForm {
+        .form-group {
+            margin-bottom: $grid-gutter-width;
+
+            input,
+            textarea {
+                padding: 1.25rem;
+            }
+
+            input.form-control {
+                height: auto;
+            }
+        }
+
+        .form-group-textarea {
+            height: 100%;
+
+            textarea {
+                height: 100%;
+                min-height: 10rem;
+            }
+        }
+
+        p.help-block {
+            margin: 0;
+        }
+
+        .form-control:focus {
+            border-color: $primary;
+            box-shadow: none;
+        }
+
+        ::-webkit-input-placeholder {
+            font-family: $headings-font-family;
+            font-weight: $headings-font-weight;
+            color: $gray-400;
+        }
+
+        :-moz-placeholder {
+            font-family: $headings-font-family;
+            font-weight: $headings-font-weight;
+            color: $gray-400;
+        }
+
+        ::-moz-placeholder {
+            font-family: $headings-font-family;
+            font-weight: $headings-font-weight;
+            color: $gray-400;
+        }
+
+        :-ms-input-placeholder {
+            font-family: $headings-font-family;
+            font-weight: $headings-font-weight;
+            color: $gray-400;
+        }
+    }
+}

data/after_templates/application/printspeak/app/assets/stylesheets/home/sections/_footer.scss

@@ -0,0 +1,9 @@
+//
+// Footer section styling
+//
+
+.footer {
+    text-align: center;
+    font-size: 0.9rem;
+    font-family: $headings-font-family;
+}

data/after_templates/application/printspeak/app/assets/stylesheets/home/sections/_masthead.scss

@@ -0,0 +1,52 @@
+//
+// Masthead section styling
+//
+
+header.masthead {
+    padding-top: 6rem + 4.5rem;
+    padding-bottom: 6rem;
+    text-align: center;
+    color: $white;
+    background-image: url("header-bg.jpg");
+    background-repeat: no-repeat;
+    background-attachment: scroll;
+    background-position: center center;
+    background-size: cover;
+
+    .masthead-subheading {
+        font-size: 1.5rem;
+        font-style: italic;
+        line-height: 1.5rem;
+        margin-bottom: 25px;
+        font-family: $subheadings-font-family;
+    }
+
+    .masthead-heading {
+        font-size: 3.25rem;
+        font-weight: 700;
+        line-height: 3.25rem;
+        margin-bottom: 2rem;
+        font-family: $headings-font-family;
+    }
+}
+
+@include media-breakpoint-up(md) {
+    header.masthead {
+        padding-top: 12.5rem + 4.5rem;
+        padding-bottom: 12.5rem;
+
+        .masthead-subheading {
+            font-size: 2.25rem;
+            font-style: italic;
+            line-height: 2.25rem;
+            margin-bottom: 2rem;
+        }
+
+        .masthead-heading {
+            font-size: 4.5rem;
+            font-weight: 700;
+            line-height: 4.5rem;
+            margin-bottom: 4rem;
+        }
+    }
+}

data/after_templates/application/printspeak/app/assets/stylesheets/home/sections/_portfolio.scss

@@ -0,0 +1,108 @@
+//
+// Portfolio section styling
+//
+
+#portfolio {
+    .portfolio-item {
+        max-width: 26rem;
+        margin-left: auto;
+        margin-right: auto;
+
+        .portfolio-link {
+            position: relative;
+            display: block;
+            margin: 0 auto;
+
+            .portfolio-hover {
+                display: flex;
+                position: absolute;
+                width: 100%;
+                height: 100%;
+                background: fade-out($primary, 0.1);
+                align-items: center;
+                justify-content: center;
+                opacity: 0;
+                transition: opacity ease-in-out 0.25s;
+
+                .portfolio-hover-content {
+                    font-size: 1.25rem;
+                    color: white;
+                }
+            }
+
+            &:hover {
+                .portfolio-hover {
+                    opacity: 1;
+                }
+            }
+        }
+
+        .portfolio-caption {
+            padding: 1.5rem;
+            text-align: center;
+            background-color: $white;
+
+            .portfolio-caption-heading {
+                font-size: 1.5rem;
+                font-family: $headings-font-family;
+                font-weight: $headings-font-weight;
+                margin-bottom: 0;
+            }
+
+            .portfolio-caption-subheading {
+                font-style: italic;
+                font-family: $subheadings-font-family;
+            }
+        }
+    }
+}
+
+.portfolio-modal {
+    .modal-dialog {
+        margin: 1rem;
+        max-width: 100vw;
+    }
+
+    .modal-content {
+        padding-top: 6rem;
+        padding-bottom: 6rem;
+        text-align: center;
+
+        h2 {
+            font-size: 3rem;
+            line-height: 3rem;
+        }
+
+        p.item-intro {
+            font-style: italic;
+            margin-bottom: 2rem;
+            font-family: $subheadings-font-family;
+        }
+
+        p {
+            margin-bottom: 2rem;
+        }
+
+        ul.list-inline {
+            margin-bottom: 2rem;
+        }
+
+        img {
+            margin-bottom: 2rem;
+        }
+    }
+
+    .close-modal {
+        position: absolute;
+        top: 1.5rem;
+        right: 1.5rem;
+        width: 3rem;
+        height: 3rem;
+        cursor: pointer;
+        background-color: transparent;
+
+        &:hover {
+            opacity: 0.3;
+        }
+    }
+}

data/after_templates/application/printspeak/app/assets/stylesheets/home/sections/_team.scss

@@ -0,0 +1,24 @@
+//
+// Team section styling
+//
+
+.team-member {
+    margin-bottom: 3rem;
+    text-align: center;
+
+    img {
+        width: 14rem;
+        height: 14rem;
+        border: 0.5rem solid fade-out($black, 0.9);
+    }
+
+    h4 {
+        margin-top: 1.5rem;
+        margin-bottom: 0;
+    }
+}
+
+// Brand images for client section
+.img-brand {
+    height: 2.75rem;
+}

data/after_templates/application/printspeak/app/assets/stylesheets/home/sections/_timeline.scss

@@ -0,0 +1,214 @@
+//
+// Timeline section styling
+//
+
+.timeline {
+    position: relative;
+    padding: 0;
+    list-style: none;
+
+    &:before {
+        position: absolute;
+        top: 0;
+        bottom: 0;
+        left: 40px;
+        width: 2px;
+        margin-left: -1.5px;
+        content: "";
+        background-color: $gray-200;
+    }
+
+    >li {
+        position: relative;
+        min-height: 50px;
+        margin-bottom: 50px;
+
+        &:after,
+        &:before {
+            display: table;
+            content: " ";
+        }
+
+        &:after {
+            clear: both;
+        }
+
+        .timeline-panel {
+            position: relative;
+            float: right;
+            width: 100%;
+            padding: 0 20px 0 100px;
+            text-align: left;
+
+            &:before {
+                right: auto;
+                left: -15px;
+                border-right-width: 15px;
+                border-left-width: 0;
+            }
+
+            &:after {
+                right: auto;
+                left: -14px;
+                border-right-width: 14px;
+                border-left-width: 0;
+            }
+        }
+
+        .timeline-image {
+            position: absolute;
+            z-index: 100;
+            left: 0;
+            width: 80px;
+            height: 80px;
+            margin-left: 0;
+            text-align: center;
+            color: white;
+            border: 7px solid $gray-200;
+            border-radius: 100%;
+            background-color: $primary;
+
+            h4 {
+                font-size: 10px;
+                line-height: 14px;
+                margin-top: 12px;
+            }
+        }
+
+        &.timeline-inverted>.timeline-panel {
+            float: right;
+            padding: 0 20px 0 100px;
+            text-align: left;
+
+            &:before {
+                right: auto;
+                left: -15px;
+                border-right-width: 15px;
+                border-left-width: 0;
+            }
+
+            &:after {
+                right: auto;
+                left: -14px;
+                border-right-width: 14px;
+                border-left-width: 0;
+            }
+        }
+
+        &:last-child {
+            margin-bottom: 0;
+        }
+    }
+
+    .timeline-heading {
+        h4 {
+            margin-top: 0;
+            color: inherit;
+
+            &.subheading {
+                text-transform: none;
+            }
+        }
+    }
+
+    .timeline-body {
+
+        >ul,
+        >p {
+            margin-bottom: 0;
+        }
+    }
+}
+
+@include media-breakpoint-up(md) {
+    .timeline {
+        &:before {
+            left: 50%;
+        }
+
+        >li {
+            min-height: 100px;
+            margin-bottom: 100px;
+
+            .timeline-panel {
+                float: left;
+                width: 41%;
+                padding: 0 20px 20px 30px;
+                text-align: right;
+            }
+
+            .timeline-image {
+                left: 50%;
+                width: 100px;
+                height: 100px;
+                margin-left: -50px;
+
+                h4 {
+                    font-size: 13px;
+                    line-height: 18px;
+                    margin-top: 16px;
+                }
+            }
+
+            &.timeline-inverted>.timeline-panel {
+                float: right;
+                padding: 0 30px 20px 20px;
+                text-align: left;
+            }
+        }
+    }
+}
+
+@include media-breakpoint-up(lg) {
+    .timeline {
+        >li {
+            min-height: 150px;
+
+            .timeline-panel {
+                padding: 0 20px 20px;
+            }
+
+            .timeline-image {
+                width: 150px;
+                height: 150px;
+                margin-left: -75px;
+
+                h4 {
+                    font-size: 18px;
+                    line-height: 26px;
+                    margin-top: 30px;
+                }
+            }
+
+            &.timeline-inverted>.timeline-panel {
+                padding: 0 20px 20px;
+            }
+        }
+    }
+}
+
+@include media-breakpoint-up(xl) {
+    .timeline {
+        >li {
+            min-height: 170px;
+
+            .timeline-panel {
+                padding: 0 20px 20px 100px;
+            }
+
+            .timeline-image {
+                width: 170px;
+                height: 170px;
+                margin-left: -85px;
+
+                h4 {
+                    margin-top: 40px;
+                }
+            }
+
+            &.timeline-inverted>.timeline-panel {
+                padding: 0 100px 20px 20px;
+            }
+        }
+    }
+}

data/after_templates/application/printspeak/app/assets/stylesheets/home/styles.scss

@@ -0,0 +1,24 @@
+//
+// Styles
+//
+
+// Import variables
+@import "./variables.scss";
+
+// Import Bootstrap
+@import "bootstrap/scss/bootstrap.scss";
+
+// Global CSS
+@import "./global.scss";
+
+// Components
+@import "./components/buttons.scss";
+@import "./components/navbar.scss";
+
+// Sections
+@import "./sections/masthead.scss";
+@import "./sections/portfolio.scss";
+@import "./sections/timeline.scss";
+@import "./sections/team.scss";
+@import "./sections/contact.scss";
+@import "./sections/footer.scss";

data/after_templates/application/printspeak/app/assets/stylesheets/home/variables/_colors.scss

@@ -0,0 +1,15 @@
+//
+// Colors
+//
+
+// Override Bootstrap color variables
+
+$yellow: #ffc800;
+
+// Override Bootstrap state colors variables
+
+$primary: $yellow;
+
+// Override Bootstrap contrast ratio
+
+$min-contrast-ratio: 1.5;

data/after_templates/application/printspeak/app/assets/stylesheets/home/variables/_typography.scss

@@ -0,0 +1,54 @@
+//
+// Typography
+//
+
+// Override the default Bootstrap base font family
+// 
+// Roboto Slab is being used below and is brought in
+// via Google fonts in the head of src/pug/index.pug.
+// The fonts listed afterwards are fallbacks.
+
+$font-family-base: "Roboto Slab",
+-apple-system,
+BlinkMacSystemFont,
+"Segoe UI",
+Roboto,
+"Helvetica Neue",
+Arial,
+sans-serif,
+"Apple Color Emoji",
+"Segoe UI Emoji",
+"Segoe UI Symbol",
+"Noto Color Emoji";
+
+// Override the default Bootstrap headings font family
+// 
+// Montserrat is being used below and is brought in
+// via Google fonts in the head of src/pug/index.pug.
+// The fonts listed afterwards are fallbacks.
+
+$headings-font-family: "Montserrat",
+-apple-system,
+BlinkMacSystemFont,
+"Segoe UI",
+Roboto,
+"Helvetica Neue",
+Arial,
+sans-serif,
+"Apple Color Emoji",
+"Segoe UI Emoji",
+"Segoe UI Symbol",
+"Noto Color Emoji";
+
+// Create a subheadings font family
+
+$subheadings-font-family: $font-family-base;
+
+// Override Bootstrap default headings variables
+
+$headings-font-weight: 700;
+$headings-letter-spacing: 0.0625em;
+
+// Override default Bootstrap line height variables
+
+$line-height-lg: 1.75;

data/after_templates/application/printspeak/app/controllers/home_controller.rb

@@ -0,0 +1,7 @@
+class HomeController < ApplicationController
+  def index
+  end
+
+  def some_action
+  end
+end