website-astro/src/styles/_base.scss at 73f231d8afe3a946f534847655bbe8e067f60364 · shipshapecode/website-astro · 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
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
*,
*:after,
*:before {
  box-sizing: border-box;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

a {
  @apply duration-200 text-red transition-all no-underline;

  &:active,
  &:visited {
    @apply text-red;
  }

  &:hover,
  &:focus {
    @apply text-navy;
  }
}

html,
body {
  @apply m-0 p-0 overflow-x-hidden w-full;
}

body {
  @apply bg-white leading-relaxed text-grey-light text-lg;
  font-family: 'Pier Sans', sans-serif;
  font-weight: lighter;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  @apply heading;
}

@media only screen and (max-width: 600px) {
  h1 {
    @apply leading-tight text-5xl;
  }
}

.fill-white {
  path {
    fill: var(--white);
  }
}

.hero {
  padding: 2rem;
}

.learn-more {
  @apply font-normal text-navy;

  svg {
    @apply duration-200 fill-navy ml-1 transition-all;
  }

  &:active,
  &:visited {
    @apply text-navy;
  }

  &:hover,
  &:focus {
    @apply cursor-pointer text-red;

    svg {
      @apply fill-red translate-x-2;

      > * {
        fill: var(--red);
      }
    }
  }
}

.section {
  padding: 5rem 2rem;
}

.section-content {
  @apply max-w-8xl w-full;
}

.blob {
  position: relative;

  &::before {
    background-image: url(/svgs/contact-blob.svg);
    background-position: center top;
    background-repeat: no-repeat;
    background-size: 2072px;
    top: -275px;
    content: '';
    height: 1250px;
    position: absolute;
    width: 100%;
    z-index: 0;
  }

  // @media only screen and (max-width: 1024px) {
  //   &::before {
  //     background-size: cover;
  //     width: 500vw;
  //   }
  // }

  @media only screen and (min-width: 2065px) {
    &::before {
      background-size: 101vw;
      height: 1400px;
      top: -400px;
    }
  }

  @media only screen and (min-width: 2300px) {
    &::before {
      height: calc(1400px + ((100vw - 2300px) * 0.75));
      top: calc(-400px - ((100vw - 2300px) * 0.75));
    }
  }
}