css-reference/sass/header.sass at master · NERDSstack/css-reference · GitHub

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
$gradient-start: lighten(adjust-hue($primary, -10deg), 10%)
$gradient-end: lighten(adjust-hue($primary, 10deg), 5%)
$gradient-top: linear-gradient(135deg, $gradient-start 20%, transparent 20%, transparent 80%, $gradient-end 80%)
$gradient-bottom: linear-gradient($primary, lighten($primary, 5%))

.header
  align-items: center
  background: $plum
  color: $plum-dark
  display: flex
  justify-content: flex-start
  padding: 3rem 2rem
  position: relative
  text-align: left

$height: 96px
$width: 486px

.header-figure
  background-image: url("../images/css-reference-title.png")
  background-position: center center
  background-repeat: no-repeat
  background-size: $width $height
  display: inline-block
  height: $height
  overflow: hidden
  text-indent: -290486px
  vertical-align: top
  width: $width
  @media (max-width: 600px)
    background-size: ($width / 2) ($height / 2)
    height: $height / 2
    width: $width / 2

.header-title
  color: $plum-invert
  font-size: 1.4rem
  font-weight: $weight-bold
  margin-top: 2rem
  text-shadow: 0 2px 4px rgba(#000, 0.1)

.header-subtitle
  color: $plum-light
  max-width: 40em
  a
    border-bottom: 1px solid rgba($plum-light, 0.2)
    color: $plum-light
    &:hover
      border-bottom-color: $plum-light
      color: $plum-light
  strong
    color: $plum-light

.back
  align-items: center
  background: $link
  color: $link-invert
  display: flex
  font-size: 0.8rem
  justify-content: flex-start
  padding: 1rem 1.2rem
  strong
    color: inherit
    margin-left: 1em
  &:hover
    background: $alpha
    color: $plum
    .icon:before,
    .icon:after
      background: $plum

+desktop
  .header
    justify-content: center
    min-height: 400px
    padding: 3rem
    text-align: center