summaryrefslogtreecommitdiff
path: root/public/css/_sass/layout/hero.sass
blob: d988040b3ae15882791ea023e88ccd487f787dff (plain) (blame)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
// Main container

.hero
  align-items: stretch
  display: flex
  flex-direction: column
  justify-content: space-between
  .navbar
    background: none
  .tabs
    ul
      border-bottom: none
  // Colors
  @each $name, $pair in $colors
    $color: nth($pair, 1)
    $color-invert: nth($pair, 2)
    &.is-#{$name}
      background-color: $color
      color: $color-invert
      a:not(.button):not(.dropdown-item):not(.tag),
      strong
        color: inherit
      .title
        color: $color-invert
      .subtitle
        color: rgba($color-invert, 0.9)
        a:not(.button),
        strong
          color: $color-invert
      .navbar-menu
        +touch
          background-color: $color
      .navbar-item,
      .navbar-link
        color: rgba($color-invert, 0.7)
      a.navbar-item,
      .navbar-link
        &:hover,
        &.is-active
          background-color: darken($color, 5%)
          color: $color-invert
      .tabs
        a
          color: $color-invert
          opacity: 0.9
          &:hover
            opacity: 1
        li
          &.is-active a
            opacity: 1
        &.is-boxed,
        &.is-toggle
          a
            color: $color-invert
            &:hover
              background-color: rgba($black, 0.1)
          li.is-active a
            &,
            &:hover
              background-color: $color-invert
              border-color: $color-invert
              color: $color
      // Modifiers
      &.is-bold
        $gradient-top-left: darken(saturate(adjust-hue($color, -10deg), 10%), 10%)
        $gradient-bottom-right: lighten(saturate(adjust-hue($color, 10deg), 5%), 5%)
        background-image: linear-gradient(141deg, $gradient-top-left 0%, $color 71%, $gradient-bottom-right 100%)
        +mobile
          .navbar-menu
            background-image: linear-gradient(141deg, $gradient-top-left 0%, $color 71%, $gradient-bottom-right 100%)
      // Responsiveness
      // +mobile
      //   .nav-toggle
      //     span
      //       background-color: $color-invert
      //     &:hover
      //       background-color: rgba($black, 0.1)
      //     &.is-active
      //       span
      //         background-color: $color-invert
      //   .nav-menu
      //     .nav-item
      //       border-top-color: rgba($color-invert, 0.2)
  // Sizes
  &.is-small
    .hero-body
      padding-bottom: 1.5rem
      padding-top: 1.5rem
  &.is-medium
    +tablet
      .hero-body
        padding-bottom: 9rem
        padding-top: 9rem
  &.is-large
    +tablet
      .hero-body
        padding-bottom: 18rem
        padding-top: 18rem
  &.is-halfheight,
  &.is-fullheight,
  &.is-fullheight-with-navbar
    .hero-body
      align-items: center
      display: flex
      & > .container
        flex-grow: 1
        flex-shrink: 1
  &.is-halfheight
    min-height: 50vh
  &.is-fullheight
    min-height: 100vh

// Components

.hero-video
  @extend %overlay
  overflow: hidden
  video
    left: 50%
    min-height: 100%
    min-width: 100%
    position: absolute
    top: 50%
    transform: translate3d(-50%, -50%, 0)
  // Modifiers
  &.is-transparent
    opacity: 0.3
  // Responsiveness
  +mobile
    display: none

.hero-buttons
  margin-top: 1.5rem
  // Responsiveness
  +mobile
    .button
      display: flex
      &:not(:last-child)
        margin-bottom: 0.75rem
  +tablet
    display: flex
    justify-content: center
    .button:not(:last-child)
      margin-right: 1.5rem

// Containers

.hero-head,
.hero-foot
  flex-grow: 0
  flex-shrink: 0

.hero-body
  flex-grow: 1
  flex-shrink: 0
  padding: 3rem 1.5rem