-
Notifications
You must be signed in to change notification settings - Fork 9
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
set up connection to airtable to collect member info, about page done…
… except for the carousel of images (v buggy)
- Loading branch information
Showing
11 changed files
with
624 additions
and
3 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,310 @@ | ||
| //undefined stuff that was in main branch | ||
| $bt-navbar-height: 58px; | ||
| $bt-light-text: #8A8A8A; | ||
| $bt-base-text: #383838; | ||
| $bt-light-grey: #A0A0A0; | ||
|
|
||
|
|
||
|
|
||
| .about { | ||
| padding-top: $bt-navbar-height; | ||
|
|
||
| .aboutOurTeam { | ||
| text-align: center; | ||
|
|
||
| p { | ||
| color: $bt-light-text; | ||
| line-height: 1.75; | ||
| width: 500px; | ||
|
|
||
| @media (max-width: 768px) { | ||
| width: 300px; | ||
| } | ||
| } | ||
| } | ||
|
|
||
| .group { | ||
| display: flex; | ||
| justify-content: center; | ||
| width: 100%; | ||
| position: relative; | ||
| overflow: hidden; | ||
|
|
||
| .aboutCarousel { | ||
| /* Make the width of the flexbox equal the sum of the width of its items */ | ||
| display: inline-flex; | ||
| flex-direction: row; | ||
| justify-content: center; | ||
|
|
||
| &.aboutCarouselSlideLeft { | ||
| transition: transform 1s ease; | ||
| transform: translateX(-20%); | ||
| } | ||
|
|
||
| &.aboutCarouselSlideRight { | ||
| transition: transform 1s ease; | ||
| transform: translateX(20%); | ||
| } | ||
|
|
||
| .aboutCarouselItem { | ||
| display: none; | ||
| transition: filter 1s ease, transform 1s ease; | ||
|
|
||
| &.aboutCarouselActive { | ||
| display: block; | ||
| transform: translateX(0) scale(0.9); | ||
| filter: brightness(0.35); | ||
| } | ||
|
|
||
| &.aboutCarouselActivePrev { | ||
| @extend .aboutCarouselActive; | ||
| } | ||
|
|
||
| order: 0; | ||
|
|
||
| &.aboutCarouselActiveFirst { | ||
| @extend .aboutCarouselActive; | ||
| order: 1; | ||
| } | ||
|
|
||
| &.aboutCarouselActiveSecond { | ||
| @extend .aboutCarouselActive; | ||
| order: 2; | ||
| transform: scale(1); | ||
| filter: brightness(1); | ||
| } | ||
|
|
||
| &.aboutCarouselActiveThird { | ||
| @extend .aboutCarouselActive; | ||
| order: 3; | ||
| } | ||
|
|
||
| &.aboutCarouselActiveNext { | ||
| @extend .aboutCarouselActive; | ||
| order: 4; | ||
| } | ||
|
|
||
| &.focus-in { | ||
| transform: scale(1); | ||
| filter: brightness(1); | ||
| } | ||
|
|
||
| &.focus-out { | ||
| transform: scale(0.9); | ||
| filter: brightness(0.35); | ||
| } | ||
|
|
||
| >img { | ||
| border-radius: 3px; | ||
| width: 100%; | ||
| height: 100%; | ||
| object-fit: cover; | ||
| } | ||
|
|
||
| @media (min-width: 1024px) { | ||
| .aboutCarouselItem { | ||
| height: 400px; | ||
| width: 711px; | ||
| } | ||
| } | ||
|
|
||
| @media (min-width: 768px) and (max-width: 1023px) { | ||
| .aboutCarouselItem { | ||
| height: 300px; | ||
| width: 533px; | ||
| } | ||
| } | ||
|
|
||
| @media (max-width: 767px) { | ||
| .aboutCarouselItem { | ||
| height: 200px; | ||
| width: 356px; | ||
| } | ||
| } | ||
| } | ||
|
|
||
| // remove scroll bar | ||
| -ms-overflow-style: none; | ||
| /* Internet Explorer 10+ */ | ||
| scrollbar-width: none; | ||
| /* Firefox */ | ||
| } | ||
|
|
||
| .aboutCarouselArrow { | ||
| position: absolute; | ||
|
|
||
| top: calc(50% - 24px); | ||
|
|
||
| display: grid; | ||
| place-items: center; | ||
|
|
||
| height: 48px; | ||
| width: 48px; | ||
|
|
||
| border: none; | ||
|
|
||
| border-radius: 50%; | ||
|
|
||
| background-color: rgba(white, 0.75); | ||
|
|
||
| transition: background-color 0.15s ease-in-out; | ||
|
|
||
| color: #383838; | ||
|
|
||
| &:hover { | ||
| background-color: white; | ||
| } | ||
| } | ||
|
|
||
| .aboutCarouselNext { | ||
| @extend .aboutCarouselArrow; | ||
|
|
||
| right: calc(15% - 48px); | ||
| } | ||
|
|
||
| .aboutCarouselPrev { | ||
| @extend .aboutCarouselArrow; | ||
|
|
||
| left: calc(15% - 48px); | ||
| } | ||
| } | ||
|
|
||
|
|
||
|
|
||
| // remove scroll bar | ||
| .group::-webkit-scrollbar { | ||
| /* Safari and Chrome */ | ||
| display: none; | ||
| } | ||
|
|
||
| .values { | ||
|
|
||
| margin-bottom: 80px; | ||
|
|
||
| @media (min-width: 1024px) { | ||
| width: 900px; | ||
| } | ||
|
|
||
|
|
||
| @media (max-width: 767px) { | ||
| width: 400px; | ||
| } | ||
|
|
||
| >h5 { | ||
|
|
||
| margin-bottom: 40px; | ||
| text-align: center; | ||
|
|
||
| font-weight: bold; | ||
| font-size: 24px; | ||
| width: 100%; | ||
|
|
||
| @media (max-width: 768px) { | ||
| // Mobile | ||
| font-size: 20px; | ||
| } | ||
| } | ||
|
|
||
| .valueCol { | ||
| margin-bottom: 20px; | ||
|
|
||
| display: flex; | ||
| flex-direction: row; | ||
|
|
||
| @media (max-width: 767px) { | ||
| flex-direction: column; | ||
|
|
||
| >div:not(:last-child) { | ||
| margin-bottom: 20px; // For horizontal layout | ||
| // margin-bottom: 10px; // For vertical layout, comment out the margin-right | ||
| } | ||
| } | ||
|
|
||
|
|
||
|
|
||
|
|
||
|
|
||
|
|
||
| .value { | ||
| height: 100%; | ||
| padding: 0 20px; | ||
|
|
||
| .valueContent { | ||
| height: 100%; | ||
| border-radius: 4px; | ||
| border: solid 2px #6d6a7238; | ||
| padding: 20px 10px; | ||
|
|
||
| display: flex; | ||
| flex-direction: column; | ||
| align-items: center; | ||
|
|
||
| >h6 { | ||
| font-size: 18px; | ||
| font-weight: bold; | ||
| margin: 20px 0 10px; | ||
| } | ||
|
|
||
| >p { | ||
| text-align: center; | ||
| width: 95%; | ||
| line-height: 1.75; | ||
| color: #8a8a8a; | ||
| } | ||
| } | ||
| } | ||
| } | ||
| } | ||
|
|
||
| // should move somewhere else??? | ||
| .releasesHeadingButton { | ||
| justify-content: center; | ||
| margin-top: 20px; | ||
| margin-bottom: 64px; | ||
|
|
||
| input { | ||
| overflow: visible; | ||
| margin-right: 10px; | ||
| border: solid 1px #cfcfcf; | ||
| text-indent: 10px; | ||
| color: $bt-base-text; | ||
| border-radius: 4px; | ||
| width: 280px; | ||
|
|
||
| &::placeholder { | ||
| color: $bt-light-grey; | ||
| } | ||
| } | ||
| } | ||
|
|
||
| .joinPic { | ||
| width: 800px; | ||
| margin-bottom: 28px; | ||
|
|
||
| @media (max-width: 768px) { | ||
| // Mobile | ||
| width: 95%; | ||
| } | ||
| } | ||
|
|
||
|
|
||
| .navLink { | ||
| background-color: #e1e1e16b; | ||
| } | ||
|
|
||
| display: flex; | ||
| flex-direction: column; | ||
| align-items: center; | ||
|
|
||
| .title { | ||
| font-weight: bold; | ||
| color: $bt-base-text; | ||
| font-size: 24px; | ||
|
|
||
| @media (max-width: 768px) { | ||
| // Mobile | ||
| font-size: 30px; | ||
| } | ||
|
|
||
| } | ||
| } |
Oops, something went wrong.