mirror of
https://github.com/prurigro/hypothetical.git
synced 2024-11-22 07:54:11 -05:00
Upgrade to bootstrap 4 for the public site
This commit is contained in:
Kevin MacMartin
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
|
||||
const jsPublicLibs = [
|
||||
"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/what-input/dist/what-input.js"
|
||||
];
|
||||
|
|
|
|||
|
|
@ -13,6 +13,7 @@
|
|||
"babel-plugin-transform-runtime": "^6.23.0",
|
||||
"babel-preset-env": "^1.6.1",
|
||||
"babelify": "^8.0.0",
|
||||
"bootstrap": "^4.0.0-beta.3",
|
||||
"browserify": "^14.5.0",
|
||||
"es6-promise": "^4.1.1",
|
||||
"gsap": "^1.20.3",
|
||||
|
|
@ -26,6 +27,7 @@
|
|||
"gulp-strip-debug": "^1.1.0",
|
||||
"gulp-uglify": "^3.0.0",
|
||||
"gulp-util": "^3.0.8",
|
||||
"popper": "^1.0.1",
|
||||
"vinyl-buffer": "^1.0.0",
|
||||
"vinyl-source-stream": "^1.1.0",
|
||||
"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
|
||||
//
|
||||
|
||||
// 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
|
||||
$c-text: #111; // text
|
||||
$c-text-light: #fff; // light text
|
||||
|
|
@ -28,3 +39,7 @@ $nav-link-count: 2;
|
|||
$nav-height-desktop: 60px;
|
||||
$nav-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";
|
||||
|
||||
// Libraries
|
||||
@import "bootstrap-sass/assets/stylesheets/_bootstrap.scss";
|
||||
@import "bootstrap/scss/bootstrap.scss";
|
||||
|
||||
// Supplementary
|
||||
@import "sections/**/*.scss";
|
||||
|
|
@ -27,7 +27,10 @@
|
|||
|
||||
html {
|
||||
width: 100%;
|
||||
&.no-scroll { overflow-y: hidden; }
|
||||
|
||||
&.no-scroll {
|
||||
overflow-y: hidden;
|
||||
}
|
||||
}
|
||||
|
||||
body {
|
||||
|
|
@ -42,11 +45,11 @@ body {
|
|||
min-height: 100vh;
|
||||
flex-direction: column;
|
||||
|
||||
@media (max-width: $grid-float-breakpoint-max) {
|
||||
@media (max-width: $nav-mobile-max) {
|
||||
padding-top: $nav-height-mobile;
|
||||
}
|
||||
|
||||
@media (min-width: $grid-float-breakpoint) {
|
||||
@media (min-width: $nav-desktop-min) {
|
||||
padding-top: $nav-height-desktop;
|
||||
}
|
||||
|
||||
|
|
|
|||
31
resources/assets/sass/sections/_nav.scss
vendored
31
resources/assets/sass/sections/_nav.scss
vendored
|
|
@ -13,7 +13,7 @@
|
|||
height: $nav-height-mobile;
|
||||
background-color: $c-base;
|
||||
|
||||
@media (min-width: $grid-float-breakpoint) {
|
||||
@media (min-width: $nav-desktop-min) {
|
||||
display: none;
|
||||
}
|
||||
|
||||
|
|
@ -85,7 +85,7 @@
|
|||
opacity: 1;
|
||||
transition: max-height 500ms;
|
||||
|
||||
@media (max-width: $grid-float-breakpoint-max) {
|
||||
@media (max-width: $nav-mobile-max) {
|
||||
overflow: hidden;
|
||||
z-index: 100;
|
||||
position: relative;
|
||||
|
|
@ -96,7 +96,7 @@
|
|||
}
|
||||
}
|
||||
|
||||
@media (min-width: $grid-float-breakpoint) {
|
||||
@media (min-width: $nav-desktop-min) {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
height: $nav-height-desktop;
|
||||
|
|
@ -105,12 +105,12 @@
|
|||
}
|
||||
|
||||
&-wrapper {
|
||||
@media (max-width: $grid-float-breakpoint-max) {
|
||||
@media (max-width: $nav-mobile-max) {
|
||||
overflow-y: auto;
|
||||
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);
|
||||
}
|
||||
|
||||
|
|
@ -121,7 +121,7 @@
|
|||
font-size: 14px;
|
||||
text-transform: uppercase;
|
||||
|
||||
@media (max-width: $grid-float-breakpoint-max) {
|
||||
@media (max-width: $nav-mobile-max) {
|
||||
display: block;
|
||||
height: $nav-link-height-mobile;
|
||||
padding: 0px 10px;
|
||||
|
|
@ -134,7 +134,7 @@
|
|||
}
|
||||
}
|
||||
|
||||
@media (min-width: $grid-float-breakpoint) {
|
||||
@media (min-width: $nav-desktop-min) {
|
||||
padding: 5px 20px;
|
||||
transition: color 150ms;
|
||||
|
||||
|
|
@ -147,9 +147,7 @@
|
|||
}
|
||||
|
||||
&:not(.active):hover {
|
||||
@media (min-width: $grid-float-breakpoint) {
|
||||
color: darken($c-text-light, 5%);
|
||||
}
|
||||
color: darken($c-text-light, 5%);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -187,22 +185,19 @@
|
|||
|
||||
&-logo {
|
||||
position: absolute;
|
||||
top: ($nav-height-mobile / 2);
|
||||
left: $logo-offset;
|
||||
transform: translateY(-50%);
|
||||
display: inline-block;
|
||||
width: $desktop-logo-width;
|
||||
width: $mobile-logo-width;
|
||||
|
||||
@media (max-width: $grid-float-breakpoint-max) {
|
||||
top: ($nav-height-mobile / 2);
|
||||
width: $mobile-logo-width;
|
||||
}
|
||||
|
||||
@media (min-width: $grid-float-breakpoint) {
|
||||
@media (min-width: $nav-desktop-min) {
|
||||
top: ($nav-height-desktop / 2);
|
||||
width: $desktop-logo-width;
|
||||
}
|
||||
|
||||
img {
|
||||
@include img-responsive;
|
||||
@include img-fluid;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -2,13 +2,13 @@
|
|||
<div class="contact-page-component">
|
||||
<div class="container">
|
||||
<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>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<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">
|
||||
<form action="#" method="POST" accept-charset="UTF-8" @submit.prevent="submit">
|
||||
<input type="text" v-model="form.name" name="name" placeholder="Name" />
|
||||
|
|
|
|||
|
|
@ -4,13 +4,13 @@
|
|||
<div class="contact-page-component">
|
||||
<div class="container">
|
||||
<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>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<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">
|
||||
<input type="hidden" name="_token" value="{{ csrf_token() }}" />
|
||||
<input type="text" name="name" placeholder="Name" />
|
||||
|
|
|
|||
Loading…
Reference in a new issue