infrastructure/conference-website
1
1
Fork 1
Code Issues 14 Pull Requests Releases Activity

UI: 2024 Hero component options #103971

Merged
Márton Lente merged 66 commits from ui/2024-hero-options into main 2024-09-24 13:00:31 +02:00
Conversation 3 Commits 66 Files Changed 2 +130 -123
18 changed files with 130 additions and 123 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files
Showing only changes of commit 8bc02a5f5f - Show all commits

2
conference_main/static/conference_main/styles/_albums.sass
View File

@ -29,7 +29,7 @@
.album-info
@extend .p-4
text-shadow: 2px 2px 0 rgba(black, .33), 2px 2px 15px rgba(black, .9)
text-shadow: .2rem .2rem 0 rgba(black, .33), .2rem .2rem var(--spacer) rgba(black, .9)
bottom: 0
color: $white
left: 0

15
conference_main/static/conference_main/styles/_attendee.sass
View File

@ -1,7 +1,8 @@
// TODO: optional change all explicit size values to modular sizing calculations
.attendees
--grid-items-width: 150px
--grid-items-width: 15.0rem
--grid-items-per-row: 2
--grid-gap-size: 20px
--grid-gap-size: 2.0rem
display: grid
gap: var(--grid-gap-size)
@ -62,10 +63,10 @@
line-height: 1
.attendee-portrait
--attendee-portrait-size: 90px
--attendee-portrait-size: 9.0rem
+media-sm
--attendee-portrait-size: 90px
--attendee-portrait-size: 9.0rem
height: var(--attendee-portrait-size)
+margin(auto, x)
@ -78,17 +79,17 @@
filter: unset
&.size-md
--attendee-portrait-size: 80px
--attendee-portrait-size: calc(var(--spacer) * 5)
+media-sm
--attendee-portrait-size: 110px
--fs-lg: clamp(1.2rem, 1.5vw + 1rem, 18px)
&.size-lg
--attendee-portrait-size: 150px
--attendee-portrait-size: 15.0rem
+media-sm
--attendee-portrait-size: 180px
--attendee-portrait-size: 18.0rem
img

7
conference_main/static/conference_main/styles/_event.sass
View File

@ -11,6 +11,7 @@
&:last-child
border: none
// TODO: cleanup remove rule unused
.event-name
font-size: 2vh
line-height: 1em
@ -78,13 +79,13 @@
align-items: center
background-color: var(--color-info-bg)
border-radius: var(--border-radius)
box-shadow: 1px 2px 5px rgba(0, 0, 0, .1)
box-shadow: .1rem .2rem var(--spacer-1) rgba(0, 0, 0, .1)
color: var(--color-info)
content: 'UNDER REVIEW'
display: flex
font-size: 10px
+fw-bold
position: absolute
padding: 2px 10px 0 10px
padding: .2rem var(--spacer-2) 0 var(--spacer-2)
top: -7px
right: -5px
right: calc(var(--spacer-1) * -1)

5
conference_main/static/conference_main/styles/_footer.sass
View File

@ -15,6 +15,7 @@ footer
flex-direction: row
> ul
align-items: center
+list-unstyled
display: flex
flex-direction: column
@ -47,9 +48,9 @@ footer
+fw-normal
.footer-logo
margin-top: -2px
margin-top: -.2rem
svg
fill: var(--text-color-tertiary)
height: auto
max-width: 60px
max-width: var(--spacer-5)

6
conference_main/static/conference_main/styles/_homepage.sass
View File

@ -3,8 +3,10 @@
.bcon-logo
text-shadow: none
// TODO: Revise logo img size for BCON 2024. Set sizing by height
img
max-width: 300px
max-width: 30.0rem
.bcon-date,
.bcon-place
@ -22,7 +24,7 @@
.location-map
background-color: var(--color-bg)
border-radius: var(--border-radius)
height: 420px
height: 42.0rem
iframe
border-radius: var(--border-radius)

8
conference_main/static/conference_main/styles/_icons.sass
View File

@ -1,9 +1,9 @@
.icon
max-width: 1rem
max-width: var(--spacer)
position: relative
width: 1rem
width: var(--spacer)
*
max-width: 1rem
max-width: var(--spacer)
position: relative
width: 1rem
width: var(--spacer)

2
conference_main/static/conference_main/styles/_live.sass
View File

@ -11,5 +11,5 @@
iframe
@extend .rounded
@extend .pt-3
height: 450px
height: 44.8rem
width: 100%

2
conference_main/static/conference_main/styles/_messages.sass
View File

@ -11,7 +11,7 @@
.message-preview-content
flex: 1
margin-left: 1rem
+margin(3, left)
opacity: .6
overflow: hidden
text-overflow: ellipsis

4
conference_main/static/conference_main/styles/_navigation.sass
View File

@ -46,7 +46,7 @@ body.is-scrolled
white-space: nowrap
span
margin: -2px 0
margin: -.2rem 0
+fw-bold
.navbar-brand
@ -54,7 +54,7 @@ body.is-scrolled
img
@extend .img-fluid
max-height: 22px
max-height: var(--spacer-4)
image-rendering: optimize-contrast
image-rendering: -webkit-optimize-contrast

18
conference_main/static/conference_main/styles/_panel.sass
View File

@ -13,7 +13,7 @@
background-color: hsla(210deg, 16%, 43%, .1)
border-bottom: 3px solid hsla(210deg, 16%, 3%, .7)
display: grid
gap: 1rem
gap: var(--spacer)
grid-template-columns: 8% 60% 12% 20%
+padding(2, y)
@ -154,7 +154,7 @@
.board-logo
img
max-height: 1.8rem
max-height: calc(var(--spacer) * 2)
.panel-social
column-count: 3
@ -168,22 +168,22 @@
align-content: center
background-image: linear-gradient(45deg, hsl(197, 100%, 37%), hsl(197, 100%, 67%))
border-radius: var(--border-radius)
box-shadow: inset 0 -2px 0 0 black
box-shadow: inset 0 -.2rem 0 0 black
+margin(1)
display: flex
justify-content: space-between
text-shadow: 1px 1px 3px rgba(black, .2), 2px 2px 20px rgba(black, .2)
text-shadow: .1rem .1rem var(--spacer-1) rgba(black, .2), .2rem .2rem 2.0rem rgba(black, .2)
ul
background-color: hsl(0, 0%, 5%)
column-count: 2
column-gap: 2px
column-gap: .2rem
+list-unstyled
margin: 0
padding: 0
.social-tweet
border-bottom: 2px solid black
border-bottom: .2rem solid black
border-radius: var(--border-radius-lg)
break-inside: avoid
color: hsl(210deg, 16%, 84%)
@ -200,7 +200,7 @@
color: white
.tw-media img
box-shadow: 0 0 5px 0 rgba(black, .2)
box-shadow: 0 0 var(--spacer-1) 0 rgba(black, .2)
img
max-height: 40vh
@ -221,8 +221,8 @@
img
border-radius: var(--border-radius-lg)
min-width: 28px
width: 28px
min-width: calc(var(--spacer) * 2)
width: calc(var(--spacer) * 2)
.tw-date
margin-left: auto

77
conference_main/static/conference_main/styles/_schedule.sass
View File

@ -3,7 +3,6 @@ $col-time-width: 8%
.schedule-container
.event-speakers
+margin(1, y)
line-height: 16px
.schedule-container+footer
margin-top: 0
@ -26,7 +25,7 @@ $col-time-width: 8%
align-items: baseline
.btn-group
gap: .33rem
gap: var(--spacer-1)
.btn-toggle
border-radius: var(--border-radius)
@ -39,7 +38,7 @@ $col-time-width: 8%
display: flex
flex-direction: column
flex-wrap: wrap
gap: .33rem
gap: var(--spacer-1)
@include media-breakpoint-up(lg)
flex-direction: row
@ -57,23 +56,23 @@ $col-time-width: 8%
&.toggle
i
border-radius: 5px
border-radius: var(--spacer)
background-color: white
color: currentColor
height: 14px
height: var(--spacer)
+margin(1, right)
position: relative
transition: background-color ease-in-out var(--transition-speed), box-shadow ease-in-out var(--transition-speed)
width: 14px
width: var(--spacer)
&:before
font-weight: bold
left: -5px
left: calc(var(--spacer-1) * -1)
opacity: 0
transform: scale(0)
position: relative
transition: opacity ease-in-out var(--transition-speed), transform ease-in-out var(--transition-speed)
top: -5px
top: calc(var(--spacer-1) * -1)
input:checked
&~label i
@ -139,7 +138,7 @@ $col-time-width: 8%
background-color: var(--color-accent-bg-hover)
.schedule-day-toggles
gap: .5rem
gap: var(--spacer-1)
+padding(2, y)
position: sticky
top: 0
@ -150,7 +149,7 @@ $col-time-width: 8%
body.is-scrolled
.schedule-day-toggles
box-shadow: 0 10px 30px rgba(black, .1)
box-shadow: 0 var(--spacer) calc(var(--spacer) * 2) rgba(black, .1)
position: fixed
.days-header
@ -218,6 +217,7 @@ body.is-scrolled
.row-rulers-lg
@include media-breakpoint-up(lg)
+padding(3, y)
// TODO: revise border top height
border-top: calc(var(--border-width) * 2) solid rgba(black, .05)
.col-rulers
@ -296,9 +296,10 @@ body.is-scrolled
/* Vertical schedule scrolls to this during conference days. */
.time-line-break
scroll-margin-top: 3.33rem
scroll-margin-top: calc(var(--spacer) * 2)
+media-lg
scroll-margin-top: 5.66rem
scroll-margin-top: calc(var(--spacer) * 3.5)
.time-header-lg
@extend .col-time
@ -334,10 +335,10 @@ body.is-scrolled
@extend .col-day
@extend .row-rulers
@extend .row-rulers-lg
scroll-margin-top: 3.33rem
scroll-margin-top: calc(var(--spacer) * 2)
+media-lg
scroll-margin-top: 6.33rem
scroll-margin-top: calc(var(--spacer) * 4)
&[data-completely-no-events]
display: none
@ -360,17 +361,17 @@ body.is-scrolled
/* Current-time slot. */
&.happening-now
background-color: var(--color-accent-bg)
box-shadow: 0 0 0 3px inset var(--color-accent-bg-hover)
box-shadow: 0 0 0 var(--spacer-1) inset var(--color-accent-bg-hover)
position: relative
/* Draw an horizontal line across the entire schedule. */
&:before
background-color: var(--color-accent)
content: ''
height: 3px
height: var(--spacer-1)
left: -50%
position: absolute
top: -3px
top: calc(var(--spacer-1) * -1)
transform: translateX(-50%)
width: 300vw
@ -456,7 +457,7 @@ body.is-scrolled
/* Ongoing events.. */
&.happening-now
background-color: white !important
box-shadow: 0 5px 15px var(--color-accent-bg-hover), 0 0 20px rgba(white, .5)
box-shadow: 0 var(--spacer-1) var(--spacer) var(--color-accent-bg-hover), 0 0 2.0rem rgba(white, .5)
.event-name
color: black
@ -468,13 +469,13 @@ body.is-scrolled
visibility: visible
&.is-overlapping
box-shadow: 0px 1px 4px 0px rgba(0,0,0,0.35), 0px 15px 20px -1px rgba(0,0,0,0.025)
top: 10px
box-shadow: 0 .1rem var(--spacer-1) 0 rgba(0,0,0,0.35), 0 var(--spacer) 2.0rem -.1rem rgba(0,0,0,0.025)
top: var(--spacer-2)
&+.is-overlapping
top: 20px
top: 2.0rem
.event-name
line-height: 22px
line-height: var(--spacer-4)
.event-details
display: flex
@ -509,7 +510,8 @@ body.is-scrolled
display: none
+media-xl
--thumbnail-width: 150px
--thumbnail-width: 15.0rem
border-bottom-left-radius: var(--border-radius-lg)
border-top-left-radius: var(--border-radius-lg)
border-top-right-radius: 0
@ -537,9 +539,9 @@ body.is-scrolled
.event-border
background-color: var(--color-bg)
border-radius: 99rem
border-radius: calc(var(--spacer) * 10)
+margin(2, top)
height: 4px
height: var(--spacer-1)
position: absolute
width: 100%
@ -554,7 +556,8 @@ body.is-scrolled
align-items: center
display: flex
flex-wrap: wrap
gap: .5rem
gap: var(--spacer-1)
line-height: var(--spacer-4)
+list-unstyled
margin-bottom: 0
width: 100%
@ -577,19 +580,19 @@ body.is-scrolled
background-color: red
border-radius: 50%
display: none
height: 12px
left: .25rem
height: 1.2rem
left: var(--spacer-1)
position: absolute
top: .25rem
top: var(--spacer-1)
visibility: hidden
width: 12px
width: 1.2rem
.event-speakers
color: var(--text-color-secondary)
.event-tags
color: var(--text-color-secondary)
gap: 1rem
gap: var(--spacer)
.event-category
&-workshop, &-tutorial
@ -610,12 +613,12 @@ body.is-scrolled
/* Horizontal display. */
.schedule-container.horizontal
--channel-height: 124px
--channel-separator: 2px solid hsla(210deg, 16%, 43%, .2)
--channel-height: calc(var(--spacer) * 9)
--channel-separator: .2rem solid hsla(210deg, 16%, 43%, .2)
--time-slots-height: 40px
--time-line-hour: 6px 0 0 0 hsla(210deg, 16%, 43%, .1)
--time-line-halfhour: 2px dotted hsla(210deg, 16%, 43%, .2)
--time-slots-height: calc(var(--spacer) * 2.5)
--time-line-hour: .6rem 0 0 0 hsla(210deg, 16%, 43%, .1)
--time-line-halfhour: .2rem dotted hsla(210deg, 16%, 43%, .2)
left: 0
overflow: hidden
@ -756,7 +759,7 @@ body.is-scrolled
color: white
strong
left: 1rem
left: var(--spacer)
position: sticky
/* 30min mark on each hour. */

6
conference_main/static/conference_main/styles/_sponsors.sass
View File

@ -1,7 +1,7 @@
.sponsors-container
--sponsor-level-1-max-size: 300px
--sponsor-level-2-max-size: 265px
--sponsor-level-3-max-size: 215px
--sponsor-level-1-max-size: calc(var(--spacer) * 18.75)
--sponsor-level-2-max-size: calc(var(--spacer) * 16.75)
--sponsor-level-3-max-size: calc(var(--spacer) * 13.5)
background-color: var(--color-bg)
border-top: var(--border-width) solid var(--color-bg-tertiary)

34
conference_main/static/conference_main/styles/_utils.sass
View File

@ -50,7 +50,7 @@
content: ' '
=box-shadow-card
box-shadow: rgba(0,0,0,0.05) 0px 1px 4px 0px, rgba(0,0,0,0.025) 0px 15px 20px -1px
box-shadow: rgba(0,0,0,0.05) 0 .1rem var(--spacer-1) 0, rgba(0,0,0,0.025) 0 var(--spacer) 2.0rem -.1rem
=box-card
+box-shadow-card
@ -155,28 +155,28 @@
=list-bullets
ul
padding-left: 20px
padding-left: 2.0rem
list-style: none
li:before
content: '·'
font-weight: 400
position: relative
left: -10px
left: -1.0rem
@mixin button($background-color, $text-color, $filled: false, $type: false)
background-color: transparent
border: none
border-radius: var(--border-radius-lg)
box-shadow: inset 0 0 0 2px $text-color
box-shadow: inset 0 0 0 .2rem $text-color
color: $text-color !important
display: inline-block
padding:
bottom: 7px
left: 20px
right: 20px
top: 7px
bottom: var(--spacer-2)
left: 2.0rem
right: 2.0rem
top: var(--spacer-2)
position: relative
text-decoration: none !important
transition: color 250ms ease-out, background-color 150ms ease-in-out, box-shadow 150ms ease-in-out
@ -184,24 +184,24 @@
@if $filled
background-color: $background-color
box-shadow: inset 0 0 0 2px darken($background-color, 6%)
box-shadow: inset 0 0 0 .2rem darken($background-color, 6%)
&:focus
color: white !important
&:hover
background-color: rgba($background-color, .1)
box-shadow: inset 0 0 0 2px lighten($text-color, 10%)
box-shadow: inset 0 0 0 .2rem lighten($text-color, 10%)
color: lighten($text-color, 5%)
cursor: pointer
text-decoration: none
@if $filled
background-color: lighten($background-color, 10%)
box-shadow: inset 0 0 0 1px lighten($background-color, 5%)
box-shadow: inset 0 0 0 .1rem lighten($background-color, 5%)
&:active, &:focus
box-shadow: inset 0 0 0 1px lighten($background-color, 10%)
box-shadow: inset 0 0 0 .1rem lighten($background-color, 10%)
background-color: rgba($background-color, .3)
color: hsl(hue($text-color), 100%, 85%)
@ -214,11 +214,11 @@
i
display: inline-block
margin-right: 10px
min-width: 16px
+margin(2, right)
min-width: var(--spacer)
svg
max-width: 12px
max-width: 1.2rem
small
font-size: .6em
@ -232,8 +232,8 @@
=input-text-generic
border: thin solid $gray-600
border-radius: 3px
padding: 10px
border-radius: var(--spacer-1)
+padding(2)
=inputs-generic
textarea,

14
conference_main/static/conference_main/styles/bcon20la/_buttons.scss
View File

@ -1,28 +1,28 @@
.btn {
background: rgba(black, .25);
border: 2px solid $neon-green;
box-shadow: -5px 5px 10px 0px rgba($neon-green-glow, 0.5), inset -5px 5px 10px 0px rgba($neon-green-glow, 0.5);
border: .2rem solid $neon-green;
box-shadow: calc(var(--spacer-1) * -1) var(--spacer-1) var(--spacer-2) 0 rgba($neon-green-glow, 0.5), inset calc(var(--spacer-1) * -1) var(--spacer-1) var(--spacer-2) 0 rgba($neon-green-glow, 0.5);
border-color: $neon-green!important;
color: white;
&:hover, &:focus, &:active{
background: rgba(black, .25);
background-color:rgba(black, .25)!important;
border-color: $neon-green!important;
box-shadow: 0px 0px 15px 0px rgba($neon-green-glow, 0.75), inset 0px 0px 15px 0px rgba($neon-green-glow, 0.75)!important;
box-shadow: 0 0 var(--spacer) 0 rgba($neon-green-glow, 0.75), inset 0 0 var(--spacer) 0 rgba($neon-green-glow, 0.75)!important;
text-decoration: none;
border: 2px solid $neon-green;
border: .2rem solid $neon-green;
}
&.btn-secondary {
border-color: $neon-pink;
box-shadow: -5px 5px 10px 0px rgba($neon-pink-glow, 0.5), inset -5px 5px 10px 0px rgba($neon-pink-glow, 0.5);
box-shadow: calc(var(--spacer-1) * -1) var(--spacer-1) var(--spacer-2) 0 rgba($neon-pink-glow, 0.5), inset calc(var(--spacer-1) * -1) var(--spacer-1) var(--spacer-2) 0 rgba($neon-pink-glow, 0.5);
border-color: $neon-pink!important;
&:hover, &:focus, &:active{
background: rgba(black, .25)!important;
background-color:rgba(black, .25)!important;
border-color: $neon-pink!important;
box-shadow: 0px 0px 15px 0px rgba($neon-pink-glow, 0.75), inset 0px 0px 15px 0px rgba($neon-pink-glow, 0.75)!important;
box-shadow: 0 0 var(--spacer) 0 rgba($neon-pink-glow, 0.75), inset 0 0 var(--spacer) 0 rgba($neon-pink-glow, 0.75)!important;
text-decoration: none;
border: 2px solid $neon-pink;
border: .2rem solid $neon-pink;
}
}
}

12
conference_main/static/conference_main/styles/bcon20la/_cards.scss
View File

@ -1,7 +1,7 @@
.card {
background: rgba(black, 0.25);
border: 2px solid $neon-green;
box-shadow: -5px 5px 10px 0px rgba($neon-green-glow, 0.5), inset -5px 5px 10px 0px rgba($neon-green-glow, 0.5);
border: .2rem solid $neon-green;
box-shadow: calc(var(--spacer-1) * -1) var(--spacer-1) var(--spacer-2) 0 rgba($neon-green-glow, 0.5), inset calc(var(--spacer-1) * -1) var(--spacer-1) var(--spacer-2) 0 rgba($neon-green-glow, 0.5);
color: white;
a {
@ -13,8 +13,8 @@
}
&.card-yellow {
border: 2px solid $neon-yellow;
box-shadow: -5px 5px 10px 0px rgba($neon-yellow-glow, 0.5), inset -5px 5px 10px 0px rgba($neon-yellow-glow, 0.5);
border: .2rem solid $neon-yellow;
box-shadow: calc(var(--spacer-1) * -1) var(--spacer-1) var(--spacer-2) 0 rgba($neon-yellow-glow, 0.5), inset calc(var(--spacer-1) * -1) var(--spacer-1) var(--spacer-2) 0 rgba($neon-yellow-glow, 0.5);
a {
&:not(.btn) {
&:hover {
@ -25,8 +25,8 @@
}
&.card-pink {
border: 2px solid $neon-pink;
box-shadow: -5px 5px 10px 0px rgba($neon-pink-glow, 0.5), inset -5px 5px 10px 0px rgba($neon-pink-glow, 0.5);
border: .2rem solid $neon-pink;
box-shadow: calc(var(--spacer-1) * -1) var(--spacer-1) var(--spacer-2) 0 rgba($neon-pink-glow, 0.5), inset calc(var(--spacer-1) * -1) var(--spacer-1) var(--spacer-2) 0 rgba($neon-pink-glow, 0.5);
a {
&:not(.btn) {
&:hover {

6
conference_main/static/conference_main/styles/bcon20la/_header.scss
View File

@ -1,11 +1,11 @@
.full-height-header{
height: calc(100vh - 40px);
height: calc(100vh - var(--spacer) * 2.5);
}
.jumbotron{
background-attachment: fixed;
background-position: top center;
padding: 90px 0 0;
padding: 9.0rem 0 0;
.container{
height: 100%;
}
@ -13,7 +13,7 @@
display: flex;
justify-content: flex-end;
flex-direction: column;
min-height: 90px;
min-height: 9.0rem;
background-position: top center;
.hero-overlay{
background-position: top center;

14
conference_main/static/conference_main/styles/fullscreen.sass
View File

@ -17,13 +17,13 @@ body
.dz-preview
position: relative
display: inline-block
width: 120px
width: calc(var(--spacer) * 7.5)
margin: 0.5em
.dz-progress
display: block
height: 15px
border: 1px solid #aaa
height: var(--spacer)
border: .1rem solid #aaa
.dz-upload
display: block
@ -45,11 +45,11 @@ body
.dz-error-mark, .dz-success-mark
position: absolute
display: none
top: 30px
width: 54px
height: 58px
top: calc(var(--spacer) * 2)
width: 5.4rem
height: 5.8rem
left: 50%
margin-left: -27px
margin-left: calc(var(--spacer) * -2)
#photo-upload
width: 100vw

21
conference_main/static/conference_main/styles/main.sass
View File

@ -21,7 +21,6 @@ $font-path: '/static/assets/fonts'
--body-color-bg: #e9ecef
--color-bg: var(--body-color-bg)
--navbar-bg: #1e1e1e
--navbar-primary-height: 45px
--table-border-color: var(--color-bg-tertiary)
--table-row-bg-color: var(--color-bg-secondary)
@ -34,10 +33,10 @@ $font-path: '/static/assets/fonts'
--color-cat-panel-bg: hsl(58deg, 40%, 86%)
--color-cat-roundtable: hsl(203deg, 19%, 55%)
--page-with-header-content-offset: 10rem
--page-with-header-content-offset: calc(var(--spacer) * 10)
+media-sm
--page-with-header-content-offset: 8rem
--page-with-header-content-offset: calc(var(--spacer) * 8)
body.is-scrolled
.navbar
@ -52,13 +51,13 @@ body.is-scrolled
z-index: 1
.hero-compact
max-height: 180px
max-height: calc(var(--spacer) * 11.25)
min-height: initial
.btn-float-right
position: absolute
right: 2rem
top: 1rem
right: calc(var(--spacer) * 2)
top: var(--spacer)
z-index: var(--zindex-fixed)
.video-container
@ -118,13 +117,13 @@ button.going-star
.vote-stars-login
@extend .btn
padding: 0.3rem !important
margin-bottom: 0.5rem
+margin(1, bottom)
padding: var(--spacer-1) !important
.favorite-star-login
@extend .btn
padding: 0.3rem $spacer !important
margin-bottom: 0.5rem
+margin(1, bottom)
padding: var(--spacer-1) $spacer !important
.vote-stars
// We use flex and order to arrange the stars in the right order. This is
@ -167,9 +166,9 @@ button.going-star
background: rgba(0, 0, 0, 0.5)
.hero-content
+padding(5, top)
position: relative
z-index: 10
padding-top: 5rem
.flatpage
+padding(3)