Commit a61f7ebc authored by Julien Palard's avatar Julien Palard
Browse files

Further simplifying front-end.

parent 1cb202d5
This diff is collapsed.
/*! * Start Bootstrap - Grayscale v4.0.0-beta.2 (https://startbootstrap.com/template-overviews/grayscale)
* Copyright 2013-2017 Start Bootstrap
* Licensed under MIT (https://github.com/BlackrockDigital/startbootstrap-grayscale/blob/master/LICENSE)
*/
body{
font-family:Lora,'Helvetica Neue',Helvetica,Arial,sans-serif;
position:relative;
width:100%;
height:100%;
color:#fff;
background-color:#000
}
html{
width:100%;
height:100%
}
h1,h2,h3,h4,h5,h6{
font-family:Cabin,'Helvetica Neue',Helvetica,Arial,sans-serif;
font-weight:700;
margin:0 0 35px;
letter-spacing:1px;
text-transform:uppercase
}
p{
font-size:16px;
line-height:1.5;
margin:0 0 25px
}
@media (min-width:768px){
p{
font-size:18px;
line-height:1.6;
margin:0 0 35px
}
}
a{
-webkit-transition:all .2s ease-in-out;
-moz-transition:all .2s ease-in-out;
transition:all .2s ease-in-out;
color:#42dca3
}
a:focus,a:hover{
text-decoration:none;
color:#1d9b6c
}
#mainNav{
font-family:Cabin,'Helvetica Neue',Helvetica,Arial,sans-serif;
margin-bottom:0;
text-transform:uppercase;
border-bottom:1px solid rgba(255,255,255,.3);
background: #1e2933;
}
#mainNav .navbar-toggler{
font-size:14px;
padding:11px;
color:#fff;
border:1px solid #fff
}
#mainNav .navbar-brand{
font-weight:700
}
#mainNav a{
color:#fff
}
#mainNav .navbar-nav .nav-item{
-webkit-transition:background .3s ease-in-out;
-moz-transition:background .3s ease-in-out;
transition:background .3s ease-in-out
}
#mainNav .navbar-nav .nav-item:hover{
color:fade(white,80%);
outline:0;
}
#mainNav .navbar-nav .nav-item:active,#mainNav .navbar-nav .nav-item:focus{
outline:0;
}
@media (min-width:992px){
#mainNav{
-webkit-transition:background .3s ease-in-out,padding-top .3s ease-in-out,padding-bottom .3s;
-moz-transition:background .3s ease-in-out,padding-top .3s ease-in-out,padding-bottom .3s;
transition:background .3s ease-in-out,padding-top .3s ease-in-out,padding-bottom .3s;
letter-spacing:1px;
border-bottom:none;
}
#mainNav.navbar-shrink{
padding-top:10px;
padding-bottom:10px;
border-bottom:1px solid rgba(255,255,255,.3);
}
#mainNav .nav-link.active{
outline:0;
background-color:rgba(255,255,255,.3)
}
#mainNav .nav-link.active:hover{
color:#fff
}
}
.masthead{
display:table;
width:100%;
height:auto;
padding:200px 0;
text-align:center;
color:#fff;
background:url(../img/intro-bg.jpg) no-repeat bottom center scroll;
background-color:#000;
-webkit-background-size:cover;
-moz-background-size:cover;
-o-background-size:cover;
background-size:cover
}
.masthead .intro-body{
display:table-cell;
vertical-align:middle
}
.masthead .intro-body .brand-heading{
font-size:50px
}
.masthead .intro-body .intro-text{
font-size:18px
}
@media (min-width:768px){
.masthead{
height:100%;
padding:0
}
.masthead .intro-body .brand-heading{
font-size:100px
}
.masthead .intro-body .intro-text{
font-size:22px
}
}
.btn-circle{
font-size:26px;
width:55px;
height:55px;
margin-top:15px;
line-height:45px;
-webkit-transition:background .3s ease-in-out;
-moz-transition:background .3s ease-in-out;
transition:background .3s ease-in-out;
color:#fff;
border:2px solid #fff;
border-radius:100%!important;
background:0 0
}
.btn-circle:focus,.btn-circle:hover{
color:#fff;
outline:0;
background:rgba(255,255,255,.1)
}
.content-section{
padding-top:150px;
padding-bottom:150px
}
.download-section{
color:#fff;
background:url(../img/downloads-bg.jpg) no-repeat center center scroll;
background-color:#000;
-webkit-background-size:cover;
-moz-background-size:cover;
-o-background-size:cover;
background-size:cover
}
#map{
width:100%;
height:300px
}
@media (min-width:992px){
.content-section{
padding-top:200px;
padding-bottom:200px
}
#map{
height:350px
}
}
.btn{
font-family:Cabin,'Helvetica Neue',Helvetica,Arial,sans-serif;
font-weight:400;
-webkit-transition:all .3s ease-in-out;
-moz-transition:all .3s ease-in-out;
transition:all .3s ease-in-out;
text-transform:uppercase;
border-radius:0
}
.btn-default{
color:#42dca3;
border:1px solid #42dca3;
background-color:transparent
}
.btn-default:focus,.btn-default:hover{
color:#000;
border:1px solid #42dca3;
outline:0;
background-color:#42dca3
}
ul.banner-social-buttons{
margin-top:0
}
@media (max-width:1199px){
ul.banner-social-buttons{
margin-top:15px
}
}
@media (max-width:767px){
ul.banner-social-buttons li{
display:block;
margin-bottom:20px;
padding:0
}
ul.banner-social-buttons li:last-child{
margin-bottom:0
}
}
footer{
padding:50px 0
}
footer p{
font-size:14px;
margin:0
}
::-moz-selection{
background:#fcfcfc;
background:rgba(255,255,255,.2);
text-shadow:none
}
::selection{
background:#fcfcfc;
background:rgba(255,255,255,.2);
text-shadow:none
}
img::selection{
background:0 0
}
img::-moz-selection{
background:0 0
}
body{
-webkit-tap-highlight-color:rgba(255,255,255,.2)
}
......@@ -22,8 +22,8 @@ pre {
border-radius: 4px;
}
.intro-body {
background: radial-gradient(black, transparent 70%);
.black-grad {
background: radial-gradient(farthest-corner, black, transparent 70%);
}
.table-hover tbody tr:hover {
......
I hope you love Font Awesome. If you've found it useful, please do me a favor and check out my latest project,
Fort Awesome (https://fortawesome.com). It makes it easy to put the perfect icons on your website. Choose from our awesome,
comprehensive icon sets or copy and paste your own.
Please. Check it out.
-Dave Gandy
This diff is collapsed.
This diff is collapsed.
// Animated Icons
// --------------------------
.@{fa-css-prefix}-spin {
-webkit-animation: fa-spin 2s infinite linear;
animation: fa-spin 2s infinite linear;
}
.@{fa-css-prefix}-pulse {
-webkit-animation: fa-spin 1s infinite steps(8);
animation: fa-spin 1s infinite steps(8);
}
@-webkit-keyframes fa-spin {
0% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(359deg);
transform: rotate(359deg);
}
}
@keyframes fa-spin {
0% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(359deg);
transform: rotate(359deg);
}
}
// Bordered & Pulled
// -------------------------
.@{fa-css-prefix}-border {
padding: .2em .25em .15em;
border: solid .08em @fa-border-color;
border-radius: .1em;
}
.@{fa-css-prefix}-pull-left { float: left; }
.@{fa-css-prefix}-pull-right { float: right; }
.@{fa-css-prefix} {
&.@{fa-css-prefix}-pull-left { margin-right: .3em; }
&.@{fa-css-prefix}-pull-right { margin-left: .3em; }
}
/* Deprecated as of 4.4.0 */
.pull-right { float: right; }
.pull-left { float: left; }
.@{fa-css-prefix} {
&.pull-left { margin-right: .3em; }
&.pull-right { margin-left: .3em; }
}
// Base Class Definition
// -------------------------
.@{fa-css-prefix} {
display: inline-block;
font: normal normal normal @fa-font-size-base/@fa-line-height-base FontAwesome; // shortening font declaration
font-size: inherit; // can't have font-size inherit on line above, so need to override
text-rendering: auto; // optimizelegibility throws things off #1094
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
// Fixed Width Icons
// -------------------------
.@{fa-css-prefix}-fw {
width: (18em / 14);
text-align: center;
}
/*!
* Font Awesome 4.7.0 by @davegandy - http://fontawesome.io - @fontawesome
* License - http://fontawesome.io/license (Font: SIL OFL 1.1, CSS: MIT License)
*/
@import "variables.less";
@import "mixins.less";
@import "path.less";
@import "core.less";
@import "larger.less";
@import "fixed-width.less";
@import "list.less";
@import "bordered-pulled.less";
@import "animated.less";
@import "rotated-flipped.less";
@import "stacked.less";
@import "icons.less";
@import "screen-reader.less";
This diff is collapsed.
// Icon Sizes
// -------------------------
/* makes the font 33% larger relative to the icon container */
.@{fa-css-prefix}-lg {
font-size: (4em / 3);
line-height: (3em / 4);
vertical-align: -15%;
}
.@{fa-css-prefix}-2x { font-size: 2em; }
.@{fa-css-prefix}-3x { font-size: 3em; }
.@{fa-css-prefix}-4x { font-size: 4em; }
.@{fa-css-prefix}-5x { font-size: 5em; }
// List Icons
// -------------------------
.@{fa-css-prefix}-ul {
padding-left: 0;
margin-left: @fa-li-width;
list-style-type: none;
> li { position: relative; }
}
.@{fa-css-prefix}-li {
position: absolute;
left: -@fa-li-width;
width: @fa-li-width;
top: (2em / 14);
text-align: center;
&.@{fa-css-prefix}-lg {
left: (-@fa-li-width + (4em / 14));
}
}
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment