typography.scss 2.4 KB
Newer Older
Danilo Woznica's avatar
Danilo Woznica committed
1 2
body,
input,
3 4
button,
pre {
5 6 7 8 9
  font-size: $font-size;
  font-family: $font-family;
  color: $grey;
}

Martin Schoeler's avatar
Martin Schoeler committed
10 11 12 13
bold {
  font-weight: bold;
}

14 15
.display--big {
  line-height: 1.2;
16
  font-size: 2em;
17
  font-weight: 700;
18 19 20
  letter-spacing: 0.5px;
  color: $space;

21 22 23 24 25
  @media screen and (min-width: $tablet) {
    font-size: 2.75em;
  }

  margin-bottom: 0.4em;
26 27 28 29
}

.display {
  font-size: 2em;
30
  line-height: 1.3;
31
  font-weight: 700;
32 33 34 35 36 37
  letter-spacing: 0.5px;
  color: $space;

  margin-bottom: 0.5em;
}

38 39 40

.display--medium {
  font-size: 1.5em;
41
  margin-bottom: 0;
42
  color: #000;
43 44
}

45
.display--small {
46
  font-size: 1em;
47
  line-height: 1.4;
48
  letter-spacing: 0.5px;
49 50
  color: $space;

51 52 53 54
  @media screen and (min-width: $tablet) {
    font-size: 1.25em;
  }

55 56 57 58 59
  margin-bottom: 0.4em;
}

.text,
p {
Danilo Woznica's avatar
Danilo Woznica committed
60 61
  font-size: $font-size;
  line-height: $font-leading;
62 63 64 65 66

  margin-bottom: 2em;
}

strong {
67
  font-weight: 700;
68 69 70
}

.text--small {
71
  font-size: 0.85em;
72 73 74 75 76 77 78 79 80 81
  font-weight: 500;

  margin-bottom: 2em;
}

.label {
  font-size: 0.75em;
  line-height: 1.5;
  letter-spacing: 0.8px;
  text-transform: uppercase;
82
  font-weight: 700;
83 84 85 86 87

  margin-bottom: 1em;
}

.label--small {
88
  font-size: 0.6rem;
89 90 91 92 93 94 95 96
  line-height: 1.6;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  font-weight: 500;

  margin-bottom: 1em;
}

97 98 99
.tag {
  font-size: 0.6em;
  line-height: 1.6;
100
  font-weight: 700;
101
  letter-spacing: 0.6px;
102 103 104
  text-transform: uppercase;
  border-radius: 2px;
  display: inline-block;
105
  padding: 0.2em 0.85em;
106
  vertical-align: middle;
Danilo Woznica's avatar
Danilo Woznica committed
107 108
  margin-left: 0.8em;
  margin-right: 0.8em;
109 110
}

111
.code {
112 113
  font-size: 0.8em;
  border-radius: 2px;
Danilo Woznica's avatar
Danilo Woznica committed
114
  padding: 0.72em 1em;
115 116
}

117 118 119 120
// Space rules
.display--small + .button {
  margin-top: 2.5em;
}
Danilo Woznica's avatar
Danilo Woznica committed
121 122 123 124

// Helpers
.align--center {
  text-align: center;
Martin Schoeler's avatar
Martin Schoeler committed
125 126 127 128
}

.subtitle {
  width: 45%;
129
  margin: auto;
Martin Schoeler's avatar
Martin Schoeler committed
130 131 132
  @media (max-width: $tablet) {
    width: 75%;
  }
Danilo Woznica's avatar
Danilo Woznica committed
133 134 135 136 137
}

.type--nomargin {
  margin-bottom: 0 !important;
}
138 139 140 141 142 143 144 145 146 147 148 149

.list {
  padding-left: 1em;

  ul {
    padding-left: 1.2em;
  }

  li {
    list-style: disc;
    margin-bottom: .5em;
  }
Martin Schoeler's avatar
Martin Schoeler committed
150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179
}

.number-ordered-list-half {
  list-style: decimal;
  padding: 0 16px;
  margin: 16px 0;
  width: 60%;
  margin: auto;
  @media (max-width: $tablet) {
    width: 90%;
  }
}

.unordered-list-half {
  list-style: initial;
  padding: 0 16px;
  margin: 16px 0;
  width: 60%;
  margin: auto;
  @media (max-width: $tablet) {
    width: 90%;
  }
}

.half-paragraph {
  width: 65%;
  margin: auto;
  @media (max-width: $tablet) {
    width: 100%;
  }
180
}