mirror of
https://github.com/prurigro/hypothetical.git
synced 2024-11-09 11:16:39 -05:00
Upgrade to bootstrap 4 for the public site
This commit is contained in:
parent
d25acd9027
commit
b1ef53f845
7 changed files with 50 additions and 34 deletions
3
gulpfile.js
vendored
3
gulpfile.js
vendored
|
@ -45,7 +45,8 @@ const jsPublic = [
|
||||||
// Javascript libraries for the public site
|
// Javascript libraries for the public site
|
||||||
const jsPublicLibs = [
|
const jsPublicLibs = [
|
||||||
"bower_components/jquery/dist/jquery.js",
|
"bower_components/jquery/dist/jquery.js",
|
||||||
"bower_components/bootstrap-sass/assets/javascripts/bootstrap.js",
|
"node_modules/popper.js/dist/umd/popper.js",
|
||||||
|
"node_modules/bootstrap/dist/js/bootstrap.js",
|
||||||
"node_modules/gsap/src/uncompressed/TweenMax.js",
|
"node_modules/gsap/src/uncompressed/TweenMax.js",
|
||||||
"node_modules/what-input/dist/what-input.js"
|
"node_modules/what-input/dist/what-input.js"
|
||||||
];
|
];
|
||||||
|
|
|
@ -13,6 +13,7 @@
|
||||||
"babel-plugin-transform-runtime": "^6.23.0",
|
"babel-plugin-transform-runtime": "^6.23.0",
|
||||||
"babel-preset-env": "^1.6.1",
|
"babel-preset-env": "^1.6.1",
|
||||||
"babelify": "^8.0.0",
|
"babelify": "^8.0.0",
|
||||||
|
"bootstrap": "^4.0.0-beta.3",
|
||||||
"browserify": "^14.5.0",
|
"browserify": "^14.5.0",
|
||||||
"es6-promise": "^4.1.1",
|
"es6-promise": "^4.1.1",
|
||||||
"gsap": "^1.20.3",
|
"gsap": "^1.20.3",
|
||||||
|
@ -26,6 +27,7 @@
|
||||||
"gulp-strip-debug": "^1.1.0",
|
"gulp-strip-debug": "^1.1.0",
|
||||||
"gulp-uglify": "^3.0.0",
|
"gulp-uglify": "^3.0.0",
|
||||||
"gulp-util": "^3.0.8",
|
"gulp-util": "^3.0.8",
|
||||||
|
"popper": "^1.0.1",
|
||||||
"vinyl-buffer": "^1.0.0",
|
"vinyl-buffer": "^1.0.0",
|
||||||
"vinyl-source-stream": "^1.1.0",
|
"vinyl-source-stream": "^1.1.0",
|
||||||
"vue": "^2.5.8",
|
"vue": "^2.5.8",
|
||||||
|
|
29
resources/assets/sass/_var.scss
vendored
29
resources/assets/sass/_var.scss
vendored
|
@ -1,14 +1,25 @@
|
||||||
//
|
|
||||||
// Overrides
|
|
||||||
//
|
|
||||||
|
|
||||||
$grid-float-breakpoint: 768px;
|
|
||||||
$grid-float-breakpoint-max: ($grid-float-breakpoint - 1px);
|
|
||||||
|
|
||||||
//
|
//
|
||||||
// Custom Variables
|
// Custom Variables
|
||||||
//
|
//
|
||||||
|
|
||||||
|
// Overrides
|
||||||
|
$grid-breakpoints: (
|
||||||
|
xs: 0px,
|
||||||
|
sm: 576px,
|
||||||
|
md: 768px,
|
||||||
|
lg: 992px,
|
||||||
|
xl: 1200px,
|
||||||
|
xxl: 1600px
|
||||||
|
);
|
||||||
|
|
||||||
|
$container-max-widths: (
|
||||||
|
sm: 540px,
|
||||||
|
md: 720px,
|
||||||
|
lg: 960px,
|
||||||
|
xl: 1140px,
|
||||||
|
xxl: 1540px
|
||||||
|
);
|
||||||
|
|
||||||
// Colours
|
// Colours
|
||||||
$c-text: #111; // text
|
$c-text: #111; // text
|
||||||
$c-text-light: #fff; // light text
|
$c-text-light: #fff; // light text
|
||||||
|
@ -28,3 +39,7 @@ $nav-link-count: 2;
|
||||||
$nav-height-desktop: 60px;
|
$nav-height-desktop: 60px;
|
||||||
$nav-height-mobile: 50px;
|
$nav-height-mobile: 50px;
|
||||||
$nav-link-height-mobile: 50px;
|
$nav-link-height-mobile: 50px;
|
||||||
|
|
||||||
|
// Breakpoints
|
||||||
|
$nav-desktop-min: 768px;
|
||||||
|
$nav-mobile-max: ($nav-desktop-min - 1px);
|
||||||
|
|
11
resources/assets/sass/app.scss
vendored
11
resources/assets/sass/app.scss
vendored
|
@ -3,7 +3,7 @@
|
||||||
@import "_fonts";
|
@import "_fonts";
|
||||||
|
|
||||||
// Libraries
|
// Libraries
|
||||||
@import "bootstrap-sass/assets/stylesheets/_bootstrap.scss";
|
@import "bootstrap/scss/bootstrap.scss";
|
||||||
|
|
||||||
// Supplementary
|
// Supplementary
|
||||||
@import "sections/**/*.scss";
|
@import "sections/**/*.scss";
|
||||||
|
@ -27,7 +27,10 @@
|
||||||
|
|
||||||
html {
|
html {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
&.no-scroll { overflow-y: hidden; }
|
|
||||||
|
&.no-scroll {
|
||||||
|
overflow-y: hidden;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
body {
|
body {
|
||||||
|
@ -42,11 +45,11 @@ body {
|
||||||
min-height: 100vh;
|
min-height: 100vh;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
|
|
||||||
@media (max-width: $grid-float-breakpoint-max) {
|
@media (max-width: $nav-mobile-max) {
|
||||||
padding-top: $nav-height-mobile;
|
padding-top: $nav-height-mobile;
|
||||||
}
|
}
|
||||||
|
|
||||||
@media (min-width: $grid-float-breakpoint) {
|
@media (min-width: $nav-desktop-min) {
|
||||||
padding-top: $nav-height-desktop;
|
padding-top: $nav-height-desktop;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
27
resources/assets/sass/sections/_nav.scss
vendored
27
resources/assets/sass/sections/_nav.scss
vendored
|
@ -13,7 +13,7 @@
|
||||||
height: $nav-height-mobile;
|
height: $nav-height-mobile;
|
||||||
background-color: $c-base;
|
background-color: $c-base;
|
||||||
|
|
||||||
@media (min-width: $grid-float-breakpoint) {
|
@media (min-width: $nav-desktop-min) {
|
||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -85,7 +85,7 @@
|
||||||
opacity: 1;
|
opacity: 1;
|
||||||
transition: max-height 500ms;
|
transition: max-height 500ms;
|
||||||
|
|
||||||
@media (max-width: $grid-float-breakpoint-max) {
|
@media (max-width: $nav-mobile-max) {
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
z-index: 100;
|
z-index: 100;
|
||||||
position: relative;
|
position: relative;
|
||||||
|
@ -96,7 +96,7 @@
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@media (min-width: $grid-float-breakpoint) {
|
@media (min-width: $nav-desktop-min) {
|
||||||
display: flex;
|
display: flex;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: $nav-height-desktop;
|
height: $nav-height-desktop;
|
||||||
|
@ -105,12 +105,12 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
&-wrapper {
|
&-wrapper {
|
||||||
@media (max-width: $grid-float-breakpoint-max) {
|
@media (max-width: $nav-mobile-max) {
|
||||||
overflow-y: auto;
|
overflow-y: auto;
|
||||||
max-height: calc(100vh - #{$nav-height-mobile});
|
max-height: calc(100vh - #{$nav-height-mobile});
|
||||||
}
|
}
|
||||||
|
|
||||||
@media (min-width: $grid-float-breakpoint) {
|
@media (min-width: $nav-desktop-min) {
|
||||||
padding: 0px $grid-gutter-width 0px (($grid-gutter-width / 2) + $desktop-logo-width + $logo-offset);
|
padding: 0px $grid-gutter-width 0px (($grid-gutter-width / 2) + $desktop-logo-width + $logo-offset);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -121,7 +121,7 @@
|
||||||
font-size: 14px;
|
font-size: 14px;
|
||||||
text-transform: uppercase;
|
text-transform: uppercase;
|
||||||
|
|
||||||
@media (max-width: $grid-float-breakpoint-max) {
|
@media (max-width: $nav-mobile-max) {
|
||||||
display: block;
|
display: block;
|
||||||
height: $nav-link-height-mobile;
|
height: $nav-link-height-mobile;
|
||||||
padding: 0px 10px;
|
padding: 0px 10px;
|
||||||
|
@ -134,7 +134,7 @@
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@media (min-width: $grid-float-breakpoint) {
|
@media (min-width: $nav-desktop-min) {
|
||||||
padding: 5px 20px;
|
padding: 5px 20px;
|
||||||
transition: color 150ms;
|
transition: color 150ms;
|
||||||
|
|
||||||
|
@ -147,11 +147,9 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
&:not(.active):hover {
|
&:not(.active):hover {
|
||||||
@media (min-width: $grid-float-breakpoint) {
|
|
||||||
color: darken($c-text-light, 5%);
|
color: darken($c-text-light, 5%);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
|
||||||
|
|
||||||
&:hover, &:focus {
|
&:hover, &:focus {
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
|
@ -187,22 +185,19 @@
|
||||||
|
|
||||||
&-logo {
|
&-logo {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
|
top: ($nav-height-mobile / 2);
|
||||||
left: $logo-offset;
|
left: $logo-offset;
|
||||||
transform: translateY(-50%);
|
transform: translateY(-50%);
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
width: $desktop-logo-width;
|
|
||||||
|
|
||||||
@media (max-width: $grid-float-breakpoint-max) {
|
|
||||||
top: ($nav-height-mobile / 2);
|
|
||||||
width: $mobile-logo-width;
|
width: $mobile-logo-width;
|
||||||
}
|
|
||||||
|
|
||||||
@media (min-width: $grid-float-breakpoint) {
|
@media (min-width: $nav-desktop-min) {
|
||||||
top: ($nav-height-desktop / 2);
|
top: ($nav-height-desktop / 2);
|
||||||
|
width: $desktop-logo-width;
|
||||||
}
|
}
|
||||||
|
|
||||||
img {
|
img {
|
||||||
@include img-responsive;
|
@include img-fluid;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -2,13 +2,13 @@
|
||||||
<div class="contact-page-component">
|
<div class="contact-page-component">
|
||||||
<div class="container">
|
<div class="container">
|
||||||
<div class="row">
|
<div class="row">
|
||||||
<div class="col-xs-12 col-md-8 col-md-offset-2">
|
<div class="col col-md-8 offset-md-2">
|
||||||
<h1>Contact</h1>
|
<h1>Contact</h1>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="row">
|
<div class="row">
|
||||||
<div class="col-xs-12 col-md-8 col-md-offset-2">
|
<div class="col col-md-8 offset-md-2">
|
||||||
<div id="contact-form">
|
<div id="contact-form">
|
||||||
<form action="#" method="POST" accept-charset="UTF-8" @submit.prevent="submit">
|
<form action="#" method="POST" accept-charset="UTF-8" @submit.prevent="submit">
|
||||||
<input type="text" v-model="form.name" name="name" placeholder="Name" />
|
<input type="text" v-model="form.name" name="name" placeholder="Name" />
|
||||||
|
|
|
@ -4,13 +4,13 @@
|
||||||
<div class="contact-page-component">
|
<div class="contact-page-component">
|
||||||
<div class="container">
|
<div class="container">
|
||||||
<div class="row">
|
<div class="row">
|
||||||
<div class="col-xs-12 col-md-8 col-md-offset-2">
|
<div class="col col-md-8 offset-md-2">
|
||||||
<h1>Contact</h1>
|
<h1>Contact</h1>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="row">
|
<div class="row">
|
||||||
<div class="col-xs-12 col-md-8 col-md-offset-2">
|
<div class="col col-md-8 offset-md-2">
|
||||||
<form action="#" method="POST" accept-charset="UTF-8">
|
<form action="#" method="POST" accept-charset="UTF-8">
|
||||||
<input type="hidden" name="_token" value="{{ csrf_token() }}" />
|
<input type="hidden" name="_token" value="{{ csrf_token() }}" />
|
||||||
<input type="text" name="name" placeholder="Name" />
|
<input type="text" name="name" placeholder="Name" />
|
||||||
|
|
Loading…
Reference in a new issue