style.scss 5.73 KB
Newer Older
Cole Bemis's avatar
Cole Bemis committed
1 2
---
---
Cole Bemis's avatar
Cole Bemis committed
3 4 5 6 7 8 9

/* Variables */

$color-primary: #000;
$color-text-primary: rgba($color-primary, 0.9);
$color-text-secondary: rgba($color-primary, 0.5);
$color-border: rgba($color-primary, 0.1);
Cole Bemis's avatar
Cole Bemis committed
10
$color-accent: #0090FF;
11 12
$color-accent-lighter: rgba($color-accent, 0.5);
$color-accent-darker: #0086EC;
Cole Bemis's avatar
Cole Bemis committed
13 14 15

$transition-duration: 200ms;
$border-radius: 0.375rem;
Cole Bemis's avatar
Cole Bemis committed
16

Cole Bemis's avatar
Cole Bemis committed
17 18
/* Mixins */

Cole Bemis's avatar
Cole Bemis committed
19
@mixin for-tablet-portrait-up {
Cole Bemis's avatar
Cole Bemis committed
20 21 22 23 24
  @media (min-width: 640px) {
    @content;
  }
}

Cole Bemis's avatar
Cole Bemis committed
25 26 27 28 29 30
@mixin for-tablet-landscape-up {
  @media (min-width: 900px) {
    @content;
   }
}

Cole Bemis's avatar
Cole Bemis committed
31 32 33 34 35 36 37 38 39 40 41 42 43
/* General */

html {
  box-sizing: border-box;
}

*, *:before, *:after {
  box-sizing: inherit;
}

body {
  margin: 0;
  font-family: "Rubik", sans-serif;
Cole Bemis's avatar
Cole Bemis committed
44
  line-height: 1.3;
Cole Bemis's avatar
Cole Bemis committed
45
  -webkit-font-smoothing: antialiased;
46
  -moz-osx-font-smoothing: grayscale;
Cole Bemis's avatar
Cole Bemis committed
47
  color: $color-text-primary;
Cole Bemis's avatar
Cole Bemis committed
48 49 50 51 52 53 54 55 56 57 58
}

a {
  text-decoration: none;
  color: currentColor;
}

.section {
  display: flex;
  flex-direction: column;
  align-items: center;
Cole Bemis's avatar
Cole Bemis committed
59
  padding: 4rem 0;
Cole Bemis's avatar
Cole Bemis committed
60 61 62
}

.container {
Cole Bemis's avatar
Cole Bemis committed
63
  width: 85%;
Cole Bemis's avatar
Cole Bemis committed
64 65 66 67 68 69
  max-width: 64rem;
}

.button {
  display: inline-block;
  padding: 1rem 1.5rem;
Cole Bemis's avatar
Cole Bemis committed
70 71 72 73
  border-radius: $border-radius;
  font-size: 0.875rem;
  text-transform: uppercase;
  letter-spacing: 1px;
74 75 76 77
  transition:
    color $transition-duration,
    background-color $transition-duration,
    box-shadow $transition-duration;
Cole Bemis's avatar
Cole Bemis committed
78 79 80
}

.button-primary {
81
  color: white;
Cole Bemis's avatar
Cole Bemis committed
82
  background-color: $color-accent;
83 84 85 86

  &:hover {
    background-color: $color-accent-darker;
  }
Cole Bemis's avatar
Cole Bemis committed
87 88 89
}

.button-secondary {
Cole Bemis's avatar
Cole Bemis committed
90
  color: $color-accent;
91 92 93 94 95
  box-shadow: inset 0 0 0 1px $color-accent-lighter;

  &:hover {
    box-shadow: inset 0 0 0 1px $color-accent;
  }
Cole Bemis's avatar
Cole Bemis committed
96 97 98 99 100 101 102
}

/* Header */

.header {
  text-align: center;

Cole Bemis's avatar
Cole Bemis committed
103
  @include for-tablet-portrait-up {
Cole Bemis's avatar
Cole Bemis committed
104 105 106 107 108 109 110 111 112
    text-align: left;
  }
}

.header-container {
  display: flex;
  flex-direction: column;
  justify-content: space-between;

Cole Bemis's avatar
Cole Bemis committed
113
  @include for-tablet-portrait-up {
Cole Bemis's avatar
Cole Bemis committed
114 115 116 117 118 119 120 121 122 123 124 125 126
    flex-direction: row;
    align-items: center;
  }
}

.title {
  margin: 0 0 0.5rem;
  font-size: 2rem;
  font-weight: 300;
}

.description {
  margin: 0;
Cole Bemis's avatar
Cole Bemis committed
127
  color: $color-text-secondary;
Cole Bemis's avatar
Cole Bemis committed
128 129 130 131 132 133 134
}

.header-button-group {
  display: flex;
  flex-direction: column;
  margin-top: 4rem;

Cole Bemis's avatar
Cole Bemis committed
135
  @include for-tablet-portrait-up {
Cole Bemis's avatar
Cole Bemis committed
136 137 138 139 140 141 142 143 144 145 146
    flex-direction: row-reverse;
    margin-top: 0;

    .button {
      margin-left: 1rem;
    }
  }

  .button + .button {
    margin-top: 1rem;

Cole Bemis's avatar
Cole Bemis committed
147
    @include for-tablet-portrait-up {
Cole Bemis's avatar
Cole Bemis committed
148 149 150 151
      margin-top: 0;
    }
  }
}
Cole Bemis's avatar
Cole Bemis committed
152

153 154
/* Icons */

Cole Bemis's avatar
Cole Bemis committed
155 156 157 158 159
.icons {
  padding: 3rem 0;
  background: #f5f5f5;
}

Cole Bemis's avatar
Cole Bemis committed
160 161 162 163 164 165
.icons-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

Cole Bemis's avatar
Cole Bemis committed
166 167
.feather-icon {
  display: inline-block;
Cole Bemis's avatar
Cole Bemis committed
168 169
  position: relative;
  box-sizing: content-box;
Cole Bemis's avatar
Cole Bemis committed
170 171
  width: 1.5rem;
  height: 1.5rem;
Cole Bemis's avatar
Cole Bemis committed
172 173
  margin: 0.25rem;
  padding: 0.75rem;
Cole Bemis's avatar
Cole Bemis committed
174
  stroke-width: 2px;
Cole Bemis's avatar
Cole Bemis committed
175 176
  outline: none;
  cursor: pointer;
Cole Bemis's avatar
Cole Bemis committed
177

Cole Bemis's avatar
Cole Bemis committed
178 179 180 181
  @include for-tablet-portrait-up {
    margin: 0.5rem;
  }

Cole Bemis's avatar
Cole Bemis committed
182 183 184 185 186 187 188 189
  > svg {
    width: 100%;
    height: 100%;
    stroke: currentColor;
    stroke-width: inherit;
  }
}

Cole Bemis's avatar
Cole Bemis committed
190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207 208 209 210 211 212 213 214 215 216 217 218 219 220 221 222 223 224 225 226 227 228 229 230 231 232 233 234 235 236 237 238 239 240 241 242 243 244 245 246 247 248 249 250 251 252 253 254 255 256
.tooltip {
  display: flex;
  flex-direction: column;
  position: absolute;
  top: calc(100% + 15px);
  left: 50%;
  min-width: 8rem;
  transform: translateX(-50%) scale(0.75);
  transform-origin: 50% 0;
  color: #fff;
  background-color: #424242;
  text-align: center;
  border-radius: 0.375rem;
  opacity: 0;
  visibility: hidden;
  z-index: 10;
  cursor: default;
  transition:
    transform $transition-duration,
    opacity $transition-duration,
    visibility $transition-duration;

  @include for-tablet-portrait-up {
    min-width: 12rem;
  }

  .feather-icon:focus & {
    transform: translateX(-50%) scale(1);
    opacity: 1;
    visibility: visible;
  }
}

.tooltip::before {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  left: 50%;
  transform: translate(-50%, -15px);
  width: 36px;
  height: 20px;
  background-image: url("assets/tooltip-arrow.svg");
  background-size: 100%;
}

.tooltip-icon-name {
  display: inline-block;
  margin: 0;
  padding: 1rem 1.5rem;
}

.tooltip-download {
  display: inline-block;
  padding: 1rem 1.5rem;
  background-color: #212121;
  border-radius: 0 0 0.375rem 0.375rem;
  font-size: 0.875rem;
  text-transform: uppercase;
  letter-spacing: 1px;
  transition: background-color $transition-duration;

  &:hover {
    background-color: #000;
  }
}

Cole Bemis's avatar
Cole Bemis committed
257 258 259 260 261 262 263 264 265 266 267 268 269 270 271
/* Request */

.request-container {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.request-heading {
  margin: 0 0 1.5rem;
  font-size: 1.25rem;
  font-weight: 400;
  text-align: center;
}

Cole Bemis's avatar
Cole Bemis committed
272 273 274 275
/* Footer */

.footer {
  padding: 1rem 0;
Cole Bemis's avatar
Cole Bemis committed
276
  border-top: 1px solid $color-border;
Cole Bemis's avatar
Cole Bemis committed
277

Cole Bemis's avatar
Cole Bemis committed
278
  @include for-tablet-landscape-up {
Cole Bemis's avatar
Cole Bemis committed
279 280 281 282 283
    padding: 4rem 0;
  }
}

.footer a {
Cole Bemis's avatar
Cole Bemis committed
284
  transition: color $transition-duration;
Cole Bemis's avatar
Cole Bemis committed
285

Cole Bemis's avatar
Cole Bemis committed
286 287
  &:hover {
    color: $color-accent;
Cole Bemis's avatar
Cole Bemis committed
288 289 290 291 292 293 294 295 296 297 298 299
  }
}

.footer-container {
  display: flex;
  flex-direction: column;
}

.footer-main {
  display: flex;
  flex-direction: column;

Cole Bemis's avatar
Cole Bemis committed
300 301 302 303 304
  @include for-tablet-landscape-up {
    flex-direction: row-reverse;
    justify-content: space-between;
    margin-bottom: 1rem;
  }
Cole Bemis's avatar
Cole Bemis committed
305 306 307
}

.footer-links {
Cole Bemis's avatar
Cole Bemis committed
308 309
  display: flex;
  flex-direction: column;
Cole Bemis's avatar
Cole Bemis committed
310 311 312
  margin: 0;
  padding: 0;
  list-style: none;
Cole Bemis's avatar
Cole Bemis committed
313
  color: $color-text-secondary;
Cole Bemis's avatar
Cole Bemis committed
314 315 316 317 318 319 320

  @include for-tablet-landscape-up {
    flex-direction: row;
  }
}

.footer-link {
Cole Bemis's avatar
Cole Bemis committed
321 322 323 324
  border-bottom: 1px solid $color-border;
  font-size: 0.875rem;
  text-transform: uppercase;
  letter-spacing: 1px;
Cole Bemis's avatar
Cole Bemis committed
325 326 327 328 329 330 331 332 333 334 335 336

  @include for-tablet-landscape-up {
    border-bottom: none;
    margin-left: 2rem;
  }

  a {
    display: inline-block;
    width: 100%;
    padding: 1rem 0;

    @include for-tablet-landscape-up {
Cole Bemis's avatar
Cole Bemis committed
337
      padding: 0;
Cole Bemis's avatar
Cole Bemis committed
338 339 340 341 342 343 344 345 346 347 348 349 350
    }
  }
}

.made-with-love {
  margin: 2rem 0 1rem;
  text-align: center;

  @include for-tablet-landscape-up {
    margin: 0;
  }
}

Cole Bemis's avatar
Cole Bemis committed
351
.version {
Cole Bemis's avatar
Cole Bemis committed
352 353 354
  margin: 0 0 1rem;
  font-size: 0.875rem;
  text-align: center;
Cole Bemis's avatar
Cole Bemis committed
355
  color: $color-text-secondary;
Cole Bemis's avatar
Cole Bemis committed
356 357 358 359 360 361

  @include for-tablet-landscape-up {
    align-self: flex-start;
    margin: 0;
  }
}