| //$color1: rgba(31, 42, 38, 1); |
| $color1: rgba(0, 0, 0, 1); |
| $color2: rgba(223, 219, 244, 1); |
| $color3: rgba(232, 227, 33, 1); |
| $color4: rgba(61, 140, 208, 1); |
| $color5: rgba(173, 35, 101, 1); |
| |
| $break-width: 600px; |
| $mobile: "screen and (max-width: #{$break-width})"; |
| $desktop: "screen and (min-width: #{$break-width})"; |
| |
| .hero { |
| //height: 115vh; |
| color: $color2; |
| background-color: $color1; |
| text-align: center; |
| @media #{$desktop} { padding: 5em; } |
| @media #{$mobile} { padding: 1em; } |
| } |
| |
| * { |
| box-sizing: border-box; |
| // TODO: find what's causing weird top belt |
| margin: 0; |
| padding: 0; |
| } |
| |
| body { |
| width: 100%; |
| height: 100%; |
| margin: 0; |
| background-color: $color1; |
| } |
| |
| main { |
| @media #{$desktop} { width: 60%; } |
| @media #{$mobile} { width: 90%; } |
| margin: 0 auto; |
| } |
| |
| // TODO: Maybe some fun with how text is laid |
| |
| section.starter { |
| border: none !important; |
| @media #{$desktop} { padding: 1em; } |
| @media #{$mobile} { padding: 0em; } |
| } |
| |
| section.starter img { |
| width: 100% |
| } |
| |
| section { |
| color: $color2; |
| //background-color: transparent; |
| // TODO: have some fun with transparency :D |
| background-color: $color1; |
| padding-bottom: 5em; |
| word-wrap: break-word; |
| |
| p { |
| margin: 1em; |
| } |
| |
| h2 { |
| display: inline-block; |
| margin: 1em 1em 1em 0em; |
| padding: .5em; |
| } |
| |
| @media #{$mobile} { |
| margin-bottom: 1em; |
| } |
| |
| @media #{$desktop} { |
| padding: 3em; |
| |
| // TODO: generate this shit |
| &:nth-child(2) { |
| margin: 0em 1em 0em -2em; |
| } |
| |
| &:nth-child(3) { |
| margin: -3em -1em 3em 1em; |
| } |
| |
| &:nth-child(4) { |
| margin: -6em -3em 6em 4em; |
| } |
| |
| &:nth-child(5) { |
| margin: -9em -5em 9em 7em; |
| } |
| |
| &:nth-child(6) { |
| margin: -12em -7em 12em 10em; |
| } |
| |
| &:nth-child(7) { |
| margin: -15em -9em 15em 13em; |
| } |
| } |
| } |
| |
| section:nth-child(even) { |
| h2 { |
| background-color: $color5; |
| } |
| |
| |
| a { |
| color: $color5; |
| |
| &:hover { |
| color: $color4; |
| } |
| } |
| |
| border: 8px solid $color5; |
| } |
| |
| section:nth-child(odd) { |
| h2 { |
| background-color: $color4; |
| } |
| |
| a { |
| color: $color4; |
| |
| &:hover { |
| color: $color5; |
| } |
| } |
| |
| border: 8px solid $color4; |
| } |
| |
| // testing area |
| .acc0 { |
| color: $color4; |
| } |
| |
| .acc1 { |
| color: $color3; |
| } |
| |
| .acc2 { |
| color: $color5; |
| } |
| |
| .hotel-pic |
| { |
| width: 50%; |
| display: block; |
| margin: .5em auto; |
| @media #{$desktop} { width: 50%; } |
| @media #{$mobile} { width: 100%; } |
| } |