mirror of
https://github.com/Retrospring/retrospring.git
synced 2025-03-15 18:39:58 +01:00
Refactor jumbotron styles
This commit is contained in:
parent
5550dd9100
commit
05efd4a42e
8 changed files with 90 additions and 96 deletions
|
@ -9,4 +9,5 @@ $list-group-border-width: 0;
|
|||
|
||||
:root {
|
||||
--background: #f0edf4;
|
||||
--primary-text: #ffffff;
|
||||
}
|
|
@ -60,6 +60,8 @@ body { padding-top: 50px; }
|
|||
display: none
|
||||
}
|
||||
|
||||
@import "components/jumbotron";
|
||||
|
||||
@import "base";
|
||||
|
||||
@import "font-awesome";
|
||||
|
|
|
@ -36,28 +36,6 @@ body {
|
|||
margin-bottom: 1.5em;
|
||||
}
|
||||
|
||||
.j2-jumbo {
|
||||
background-color: darken($navbar-inverse-bg, 10%);
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.j2-jumbo h1, .j2-jumbo h2, .j2-jumbo h3, .j2-jumbo h4, .j2-jumbo h5, .j2-jumbo h6 {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.j2-jumbo a, .j2-jumbo a:hover {
|
||||
color: #fff;
|
||||
opacity: 0.6;
|
||||
}
|
||||
|
||||
.j2-jumbo a:hover {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.j2-jumbo a .btn {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.smiles {
|
||||
margin-bottom: 7px;
|
||||
}
|
||||
|
@ -162,29 +140,6 @@ body {
|
|||
border-bottom-right-radius: 2px;
|
||||
}
|
||||
|
||||
.frontpage {
|
||||
margin-top: -50px;
|
||||
height: 100vh;
|
||||
display: table;
|
||||
}
|
||||
|
||||
.frontpage-scroll {
|
||||
display: block;
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
margin: 0 auto;
|
||||
padding: 20px;
|
||||
text-align: center;
|
||||
z-index: 1000;
|
||||
font-size: 32px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.frontpage-content {
|
||||
display: table-cell;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.frontpage-features {
|
||||
padding-top: 20px;
|
||||
padding-bottom: 10px;
|
||||
|
@ -229,47 +184,10 @@ body {
|
|||
margin: 10px;
|
||||
}
|
||||
|
||||
.btn-register {
|
||||
opacity: 1 !important;
|
||||
background: transparent;
|
||||
color: #fff;
|
||||
border: 4px #fff solid;
|
||||
border-radius: 4px;
|
||||
transition: background-color .25s ease-in-out;
|
||||
|
||||
&:hover {
|
||||
background-color: #fff;
|
||||
color: darken($navbar-inverse-bg, 10%) !important;
|
||||
transition: background-color .25s ease-in-out;
|
||||
}
|
||||
}
|
||||
|
||||
.lead {
|
||||
margin-bottom: 3px;
|
||||
}
|
||||
|
||||
.particle-jumbotron {
|
||||
padding: 0px;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.particle-content {
|
||||
position: relative;
|
||||
top: 0;
|
||||
padding-top: 48px;
|
||||
padding-bottom: 48px;
|
||||
padding-left: 30px;
|
||||
padding-right: 30px;
|
||||
}
|
||||
|
||||
#particles {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.icon-showcase {
|
||||
font-size: 78px;
|
||||
text-align: center;
|
||||
|
|
73
app/assets/stylesheets/components/_jumbotron.scss
Normal file
73
app/assets/stylesheets/components/_jumbotron.scss
Normal file
|
@ -0,0 +1,73 @@
|
|||
.jumbotron {
|
||||
$this: &;
|
||||
display: flex;
|
||||
background-color: var(--primary);
|
||||
color: var(--primary-text);
|
||||
text-align: center;
|
||||
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
h4,
|
||||
h5,
|
||||
h6 {
|
||||
color: var(--primary-text);
|
||||
}
|
||||
|
||||
a:not(.btn) {
|
||||
color: var(--primary-text);
|
||||
opacity: 0.6;
|
||||
|
||||
&:hover {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.btn {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
&__scroller {
|
||||
display: block;
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
margin: 0 auto;
|
||||
padding: 20px;
|
||||
text-align: center;
|
||||
z-index: 1000;
|
||||
font-size: 32px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
&__content {
|
||||
width: 100%;
|
||||
align-self: center;
|
||||
}
|
||||
|
||||
&--frontpage {
|
||||
margin-top: -50px;
|
||||
height: 100vh;
|
||||
}
|
||||
|
||||
&--particles {
|
||||
padding: 0px;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
width: 100%;
|
||||
|
||||
#{$this}__particles {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
#{$this}__content {
|
||||
position: relative;
|
||||
top: 0;
|
||||
padding-top: 48px;
|
||||
padding-bottom: 48px;
|
||||
padding-left: 30px;
|
||||
padding-right: 30px;
|
||||
}
|
||||
}
|
||||
}
|
|
@ -1,7 +1,7 @@
|
|||
- provide(:title, generate_title("Discover"))
|
||||
.jumbotron.j2-jumbo.text-center.particle-jumbotron
|
||||
#particles
|
||||
.particle-content
|
||||
.jumbotron.jumbotron--particles
|
||||
#particles.jumbotron__particles
|
||||
.jumbotron__content
|
||||
%h1= t 'views.discover.title'
|
||||
%p= t('views.discover.subtitle', app_title: APP_CONFIG['site_name'])
|
||||
.container
|
||||
|
|
|
@ -1,7 +1,7 @@
|
|||
- provide(:title, generate_title("About"))
|
||||
.jumbotron.j2-jumbo.text-center.particle-jumbotron
|
||||
#particles
|
||||
.particle-content
|
||||
.jumbotron.jumbotron--particles
|
||||
#particles.jumbotron__particles
|
||||
.jumbotron__content
|
||||
%h1= APP_CONFIG['site_name']
|
||||
%p= t 'views.about.subtitle'
|
||||
.container
|
||||
|
|
|
@ -1,7 +1,7 @@
|
|||
- provide(:title, generate_title("Frequently Asked Questions"))
|
||||
.jumbotron.j2-jumbo.text-center.particle-jumbotron
|
||||
#particles
|
||||
.particle-content
|
||||
.jumbotron.jumbotron--particles
|
||||
#particles.jumbotron__particles
|
||||
.jumbotron__content
|
||||
%h1 Frequently Asked Questions
|
||||
%p
|
||||
Everything you want to know about
|
||||
|
|
|
@ -1,16 +1,16 @@
|
|||
- provide(:title, "#{APP_CONFIG['site_name']}")
|
||||
.jumbotron.j2-jumbo.text-center.particle-jumbotron.frontpage
|
||||
.frontpage-scroll
|
||||
.jumbotron.jumbotron--particles.jumbotron--frontpage
|
||||
.jumbotron__scroller
|
||||
%a.arctic_scroll{href: "#content", data: {offset: "-80"} }
|
||||
%i.fa.fa-chevron-down
|
||||
#particles
|
||||
.particle-content.frontpage-content
|
||||
#particles.jumbotron__particles
|
||||
.jumbotron__content
|
||||
.container
|
||||
= render 'layouts/messages'
|
||||
%h1= APP_CONFIG['site_name']
|
||||
%p= t 'views.front.subtitle'
|
||||
%p
|
||||
%a.btn.btn-register.btn-lg{href: url_for(new_user_registration_path)}
|
||||
%a.btn.btn-outline-light.btn-lg{href: url_for(new_user_registration_path)}
|
||||
Register now
|
||||
%small
|
||||
Already a member?
|
||||
|
|
Loading…
Reference in a new issue