Commit 263a0ce9 authored by Korko's avatar Korko
Browse files

Split layout

parent 5d40db31
......@@ -13,11 +13,10 @@ var elixir = require('laravel-elixir');
elixir(function(mix) {
mix.browserify([
'main.js', 'app.js'
], 'public/assets/bundle.js');
mix.sass([
'main.scss'
], 'public/assets/bundle.css', {
'main.js', 'randomForm.js'
], 'public/assets/randomForm.js');
var sassOptions = {
includePaths: [
'./node_modules/bootstrap-sass/assets/stylesheets/',
'./node_modules/font-awesome/scss/',
......@@ -25,7 +24,12 @@ elixir(function(mix) {
'./node_modules/multiple-select/',
'./resources/assets/vendor/bootstrap-languages/'
]
});
};
mix.sass([
'randomForm.scss'
], 'public/assets/randomForm.css', sassOptions);
mix.copy('resources/assets/img', 'public/img');
mix.copy('resources/assets/vendor/bootstrap-languages/languages.png', 'public/assets/img');
mix.copy('node_modules/bootstrap-sass/assets/fonts', 'public/assets/fonts');
......
This diff is collapsed.
This source diff could not be displayed because it is too large. You can view the blob instead.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
......@@ -6,11 +6,58 @@ $icon-font-path: "/assets/fonts/bootstrap/";
$fa-font-path: "/assets/fonts";
@import "font-awesome";
@import "alertify";
@import "languages";
@import "multiple-select";
/*
Sticky Footer Solution
by Steve Hatcher
http://stever.ca
http://www.cssstickyfooter.com
*/
* {margin:0;padding:0;}
/* must declare 0 margins on everything, also for main layout components use padding, not
vertical margins (top and bottom) to add spacing, else those margins get added to total height
and your footer gets pushed down a bit more, creating vertical scroll bars in the browser */
html, body {height: 100%;}
#wrap {min-height: 100%;}
$footer-height: 100px !default;
#main {overflow:auto;
padding-bottom: $footer-height + 15px;} /* must be same height as the footer */
footer {position: relative;
margin-top: -$footer-height - 15px; /* negative value of footer height */
height: $footer-height + 15px;
clear:both;}
footer .inner {padding-bottom: 15px;}
footer .row {height: $footer-height;}
/*Opera Fix*/
body:before {/* thanks to Maleika (Kohoutec)*/
content:"";
height:100%;
float:left;
width:0;
margin-top:-32767px;/* thank you Erik J - negate effect of float*/
}
/* IMPORTANT
You also need to include this conditional style in the <head> of your HTML file to feed this style to IE 6 and lower and 8 and higher.
<!--[if !IE 7]>
<style type="text/css">
#wrap {display:table;height:100%}
</style>
<![endif]-->
*/
/*
Theme Name: MeatKing
......@@ -34,6 +81,7 @@ TABLE OF CONTENTS
/* ==========================================================================
01. General and Typography
========================================================================== */
body {
font-family: 'Kreon', serif;
-webkit-font-smoothing: antialiased;
......@@ -50,7 +98,7 @@ img {
color: #FFF;
text-align: center;
}
.light-wrapper section::before, .light-wrapper section::after {
.light-wrapper section::before, .light-wrapper section::after, .dark-wrapper section::before, .dark-wrapper section::after {
position: absolute;
content: '';
}
......@@ -160,7 +208,6 @@ img {
padding: 12px;
}
/* ==========================================================================
03. Navigation
========================================================================== */
......@@ -191,149 +238,6 @@ img {
text-shadow: none;
}
/* ==========================================================================
04. Parallax
========================================================================== */
.parallax {
background: url(/assets/img/gifts-2.jpg) fixed no-repeat center center;
-moz-background-size: cover;
background-size: cover;
position: relative;
color: #FFF;
}
.parallax .inner {
padding-top: 130px;
padding-bottom: 130px;
}
.parallax.parallax2 {
background-image: url(/assets/img/gifts-3.jpg);
}
/* ==========================================================================
05. What/How
========================================================================== */
.light-wrapper {
background: #fbfbfb;
}
.inner {
padding-top: 100px;
padding-bottom: 100px;
}
.section-title {
font-size: 36px;
line-height: 40px;
text-transform: uppercase;
margin-bottom: 15px;
font-weight: 600;
}
.main.lead {
margin-bottom: 80px;
}
.lead {
font-size: 17px;
line-height: 24px;
font-weight: normal;
text-transform: uppercase;
margin-bottom: 15px;
color: #2e2e2e;
position: relative;
}
.lead:after {
position: absolute;
content: ' ';
background: #ed0121;
width: 80px;
height: 3px;
bottom: -22px;
left: 50%;
margin-left: -40px;
}
.media-body {
width: auto;
text-align: left;
}
.media-heading {
font-weight: bold;
}
.media-body p::first-line {
}
#how div.well {
font-style: italic;
}
/* ==========================================================================
06. Form
========================================================================== */
fieldset > div.form-group {
overflow: visible;
}
.participant .participant-remove-wrapper {
width: 179px;
}
#mailContent, #mailPost {
max-width: 100%;
resize: none;
}
#mailPost {
height: 75px;
}
#smsContent, #mailContent {
border-bottom: 0;
border-bottom-right-radius: 0;
border-bottom-left-radius: 0;
}
#smsPost, #mailPost {
border-top: 0;
border-top-right-radius: 0;
border-top-left-radius: 0;
}
#smsContent, #smsPost {
resize: none;
}
#smsPost {
height: 35px;
}
#form .container {
-webkit-transition: all 0.4s;
-moz-transition: all 0.4s;
-o-transition: all 0.4s;
transition: all 0.4s;
position: relative;
}
#form.success .success-wrapper {
display: block;
}
.col-xs-0 {
width: 1%;
}
.border-left {
border-left: 1px solid #ddd;
}
.border-right {
border-right: 1px solid #ddd;
}
.tip {
font-style: italic;
font-size: 12px;
}
.glyphicon.spinning {
animation: spin 1s infinite linear;
-webkit-animation: spin2 1s infinite linear;
}
button .glyphicon.spinning {
margin-right: 10px;
}
@keyframes spin {
from { transform: scale(1) rotate(0deg); }
to { transform: scale(1) rotate(360deg); }
}
@-webkit-keyframes spin2 {
from { -webkit-transform: rotate(0deg); }
to { -webkit-transform: rotate(360deg); }
}
/* ==========================================================================
07. Footer
========================================================================== */
......@@ -350,12 +254,11 @@ button .glyphicon.spinning {
color: #ed0121;
background: white;
}
footer .inner {
padding-top: 50px;
padding-bottom: 50px;
footer .row {
display: flex;
align-items: center;
}
/* ==========================================================================
08. Responsive styles
========================================================================== */
......@@ -402,20 +305,6 @@ footer .inner {
margin: 0 15px;
}
}
@media (min-width: 992px) {
#contact > fieldset:first-child {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
border-right: 2px solid #ccc;
}
}
@media (max-width: 1199px) {
.participant-remove span:nth-child(2) {
display: none;
}
}
/* ==========================================================================
09. Ribbon
......@@ -423,6 +312,7 @@ footer .inner {
#forkongithub {
display: none;
}
@media screen and (min-width: 768px) {
#forkongithub {
position: fixed;
......
$footer-height: 120px;
@import "layout";
@import "alertify";
@import "multiple-select";
/* ==========================================================================
04. Parallax
========================================================================== */
.parallax {
background: url(/assets/img/gifts-2.jpg) fixed no-repeat center center;
-moz-background-size: cover;
background-size: cover;
position: relative;
color: #FFF;
}
.parallax .inner {
padding-top: 130px;
padding-bottom: 130px;
}
.parallax.parallax2 {
background-image: url(/assets/img/gifts-3.jpg);
}
/* ==========================================================================
05. What/How
========================================================================== */
.light-wrapper {
background: #fbfbfb;
}
.light-wrapper .inner {
padding-top: 100px;
padding-bottom: 100px;
}
.section-title {
font-size: 36px;
line-height: 40px;
text-transform: uppercase;
margin-bottom: 15px;
font-weight: 600;
}
.main.lead {
margin-bottom: 80px;
}
.lead {
font-size: 17px;
line-height: 24px;
font-weight: normal;
text-transform: uppercase;
margin-bottom: 15px;
color: #2e2e2e;
position: relative;
}
.lead:after {
position: absolute;
content: ' ';
background: #ed0121;
width: 80px;
height: 3px;
bottom: -22px;
left: 50%;
margin-left: -40px;
}
.media-body {
width: auto;
text-align: left;
}
.media-heading {
font-weight: bold;
}
.media-body p::first-line {
}
#how div.well {
font-style: italic;
}
/* ==========================================================================
06. Form
========================================================================== */
fieldset > div.form-group {
overflow: visible;
}
.participant .participant-remove-wrapper {
width: 179px;
}
#mailContent, #mailPost {
max-width: 100%;
resize: none;
}
#mailPost {
height: 75px;
}
#smsContent, #mailContent {
border-bottom: 0;
border-bottom-right-radius: 0;
border-bottom-left-radius: 0;
}
#smsPost, #mailPost {
border-top: 0;
border-top-right-radius: 0;
border-top-left-radius: 0;
}
#smsContent, #smsPost {
resize: none;
}
#smsPost {
height: 35px;
}
#form .container {
-webkit-transition: all 0.4s;
-moz-transition: all 0.4s;
-o-transition: all 0.4s;
transition: all 0.4s;
position: relative;
}
#form.success .success-wrapper {
display: block;
}
.col-xs-0 {
width: 1%;
}
.border-left {
border-left: 1px solid #ddd;
}
.border-right {
border-right: 1px solid #ddd;
}
.row.text-only {
line-height: 34px;
}
.tip {
font-style: italic;
font-size: 12px;
}
.glyphicon.spinning {
animation: spin 1s infinite linear;
-webkit-animation: spin2 1s infinite linear;
}
button .glyphicon.spinning {
margin-right: 10px;
}
@keyframes spin {
from { transform: scale(1) rotate(0deg); }
to { transform: scale(1) rotate(360deg); }
}
@-webkit-keyframes spin2 {
from { -webkit-transform: rotate(0deg); }
to { -webkit-transform: rotate(360deg); }
}
/* ==========================================================================
08. Responsive styles
========================================================================== */
@media (min-width: 992px) {
#contact > fieldset:first-child {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
border-right: 2px solid #ccc;
}
}
@media (max-width: 1199px) {
.participant-remove span:nth-child(2) {
display: none;
}
}
<!DOCTYPE html>
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]> <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!-->
<html class="no-js" lang="{{ App::getLocale() }}"> <!--<![endif]-->
<head>
<title>Secret Santa</title>
@extends('templates/layout', ['styles' => '/assets/randomForm.css'])
<link rel="canonical" href="{{ URL::to('/') }}">
<!-- meta -->
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no">
<meta name="description" content="@lang('headers.description')">
<meta name="keywords" content="@lang('headers.keywords')">
<meta name="author" content="Korko <webmaster@secretsanta.fr>">
<!-- opengraph/facebook -->
<meta property="og:title" content="SecretSanta">
<meta property="og:site_name" content="SecretSanta">
<meta property="og:url" content="{{ URL::to('/') }}">
<meta property="og:image" content="{{ URL::asset('assets/img/logo_black.png') }}">
<meta property="og:description" content="@lang('headers.description')">
<meta property="og:type" content="website">
<meta property="og:locale" content="{{ App::getLocale() }}">
<!-- twitter -->
<meta name="twitter:card" content="summary">
<meta name="twitter:site" content="@korkof">
<meta name="twitter:creator" content="Korko">
<meta name="twitter:title" content="SecretSanta">
<meta name="twitter:description" content="@lang('headers.description')">
<meta name="twitter:image" content="{{ URL::asset('assets/img/logo_black.png') }}">
<!-- facebook image -->
<link rel="image_src" href="{{ URL::asset('assets/img/logo_black.png') }}" />
<!-- css -->
<link rel="stylesheet" href="assets/bundle.css" />
@section('header')
@parent
<!-- config js -->
@javascript('maxSms', config('sms.max'))
</head>
<body data-spy="scroll" data-target="#navbar" data-offset="120">
<div id="menu" class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<div class="container">
<nav id="navbar">
<div id="logo">
<a href="#header">
<img src="assets/img/logo.png" alt="" />
</a>
</div>
<ul class="nav navbar-nav hidden-xs">
@stop
@section('navbar')
<li><a href="#what">@lang('form.nav.what')</a></li>
<li><a href="#how">@lang('form.nav.how')</a></li>
<li><a href="#form">@lang('form.nav.go')</a></li>
......@@ -67,19 +22,9 @@
@endforeach
</ul>
</li>
@stop
<!--fix for scroll spy active menu element-->
<li style="display:none;"><a href="#header"></a></li>
</ul>
<ul class="visible-xs list-inline">
@foreach(config('app.domains') as $locale => $domain)
<li><a href="https://{{ $domain }}"><span class="lang-lg" lang="{{ $locale }}"></span></a></li>
@endforeach
</ul>
</nav><!--/.navbar-collapse -->
</div><!-- container -->
</div><!-- menu -->
@section('body')
<div id="header">
<div class="bg-overlay"></div>
<div class="center text-center">
......@@ -124,7 +69,6 @@
<!-- /.container -->
</div><!-- #spacer1 -->
<div id="how" class="light-wrapper">
<section class="ss-style-top"></section>
<div class="container inner">
......@@ -291,26 +235,17 @@
<!-- /.services -->
</div>
<!-- /.container -->
<section class="ss-style-bottom"></section>
</div>
@stop
<footer id="footer" class="dark-wrapper">
<div class="container inner">
<div class="row">
<div class="col-sm-6">
&copy; Copyright SecretSanta.fr 2015
<br/>{!! trans('footer.project', ['author' => '<a class="themeBy" href="https://www.korko.fr">Korko</a>']) !!}
<br/>{!! trans('footer.theme', ['author' => '<a class="themeBy" href="https://www.themewagon.com">ThemeWagon</a>']) !!}
<br/>{!! trans('footer.icons', ['author' => '<a class="themeBy" href="https://www.iconfinder.com/iconsets/doublejdesign-free-icon-handy_color">Double-J Designs</a>']) !!}
</div>
</div>
</div>
<!-- /.container -->
</footer>
@section('copyright')
@parent
<span id="forkongithub" class="hidden-sm"><a href="https://github.com/Korko/SecretSanta" title="Fork me on GitHub">Fork me on GitHub</a></span>
<br/>{!! trans('footer.icons', ['author' => '<a class="themeBy" href="https://www.iconfinder.com/iconsets/doublejdesign-free-icon-handy_color">Double-J Designs</a>']) !!}
@stop
<script type="text/javascript" src="assets/bundle.js"></script>
@section('script')
<script type="text/javascript" src="{{ URL::asset('assets/randomForm.js') }}"></script>
{!! Recaptcha::renderScript(App::getLocale()) !!}
......@@ -319,5 +254,4 @@
alertify.alert("{{ session('message') }}");
</script>
@endif
</body>