-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
[refactor] make clean up edits (#25)
* navbar underline, rename about image, modify nonprofit styling * use higher res sponsor images * shift schedule id, extend animation, add faq breakpoint, modify npo styles * optimize about images * add sponsor links * update npo styling * prep sections for graphics * address underline styles
- Loading branch information
Showing
25 changed files
with
212 additions
and
131 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
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 |
|---|---|---|
| @@ -1,30 +1,37 @@ | ||
| <section> | ||
| <section> | ||
| <h4 id="contact">CONTACT US</h4> | ||
| <div class="spacer"></div> | ||
| <div class="row"> | ||
| <h3>Any other </h3><h2>questions?</h2> | ||
| </div> | ||
| <div class="spacer"></div> | ||
| <p class="description">We are here to help you! Please check the FAQ first; | ||
| If your question is not already answered, you can reach us at | ||
| <a class="email" href="mailto:[email protected]">[email protected]</a>.<br> | ||
| <br> | ||
| Please email <a class="email" href="mailto:[email protected]">[email protected]</a> | ||
| if you need a particular accommodation. | ||
| Note that requests made less than 24 hours before the event will likely not be accommodated. | ||
| <p class="description"> | ||
| We are here to help you! Please check the FAQ first; If your question is not | ||
| already answered, you can reach us at | ||
| <a class="email" href="mailto:[email protected]" | ||
| >[email protected]</a | ||
| >.<br /> | ||
| <br /> | ||
| Please email <a class="email" href="mailto:[email protected]" | ||
| >[email protected]</a | ||
| > | ||
| if you need a particular accommodation. Note that requests made less than 24 | ||
| hours before the event will likely not be accommodated. | ||
| </p> | ||
| </section> | ||
|
|
||
| <style lang="scss"> | ||
| section { | ||
| position: relative; | ||
| display: flex; | ||
| flex-direction: column; | ||
| align-items: center; | ||
| align-items: center; | ||
| text-align: center; | ||
| width: 46.5rem; | ||
| margin: 0 auto; | ||
| padding: 0 20%; | ||
| padding-top: 10.75rem; | ||
| } | ||
|
|
||
| div.spacer { | ||
| height: 1.5rem; | ||
| } | ||
|
|
@@ -39,6 +46,7 @@ | |
| } | ||
|
|
||
| a.email { | ||
| text-decoration-line: underline; // the underline is too close to the text... | ||
| text-decoration-line: underline; // the underline is too close to the text... | ||
| text-underline-offset: 2px; | ||
| } | ||
| </style> | ||
| </style> | ||
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
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
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
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
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 |
|---|---|---|
| @@ -1,46 +1,87 @@ | ||
| --- | ||
| interface Props { | ||
| name: string; | ||
| description: string; | ||
| image: string; | ||
| startColor: string; | ||
| endColor: string; | ||
| url?: string; | ||
| } | ||
| const { name, description, image, startColor, endColor, url } = Astro.props; | ||
| --- | ||
|
|
||
| <a class="card" href={url || "#"} target="_blank"> | ||
| <h3> | ||
| {name} | ||
| </h3> | ||
| {description} | ||
| </a> | ||
| <div class="card"> | ||
| <div class="bg"></div> | ||
| <a href={url || null} target="_blank"> | ||
| <h3> | ||
| {name} | ||
| </h3> | ||
| <p> | ||
| {description} | ||
| </p> | ||
| </a> | ||
| </div> | ||
|
|
||
| <style lang="scss" define:vars={{ image: `url(${image})`, startColor, endColor }}> | ||
| <style | ||
| lang="scss" | ||
| define:vars={{ image: `url(${image})`, startColor, endColor }} | ||
| > | ||
| @use '../styles/breakpoints'; | ||
| @use '../styles/colors'; | ||
|
|
||
| .card { | ||
| background-image: linear-gradient(var(--startColor), var(--endColor)), var(--image); | ||
| background-size: cover; | ||
| background-position: center; | ||
| border-radius: 12px; | ||
| padding: 32px; | ||
| display: flex; | ||
| flex-direction: column; | ||
| justify-content: flex-end; | ||
| gap: 12px; | ||
| padding-top: 180px; | ||
| height: 360px; | ||
| color: white; | ||
| font-weight: 400; | ||
| line-height: 100%; | ||
| } | ||
|
|
||
| .card:hover { | ||
| transform: scale(1.05); | ||
| transition: transform .225s ease-in-out; | ||
| } | ||
|
|
||
| .card:hover > h3 { | ||
| text-decoration: underline; | ||
| position: relative; | ||
| overflow: hidden; | ||
| border-radius: 12px; | ||
|
|
||
| .bg { | ||
| position: absolute; | ||
| top: 0; | ||
| left: 0; | ||
| z-index: -1; | ||
| width: 100%; | ||
| height: 100%; | ||
| background-image: linear-gradient(var(--startColor), var(--endColor)), | ||
| var(--image); | ||
| background-size: cover; | ||
| background-position: center; | ||
| transition: transform 0.225s ease-in-out; | ||
| } | ||
|
|
||
| &:hover > .bg { | ||
| transform: scale(1.05); | ||
| } | ||
|
|
||
| a { | ||
| width: 100%; | ||
| padding-top: 160px; | ||
| padding: 32px; | ||
| display: flex; | ||
| flex-direction: column; | ||
| justify-content: flex-end; | ||
| gap: 12px; | ||
| color: white; | ||
| font-weight: 400; | ||
| line-height: 100%; | ||
|
|
||
| @media (min-width: breakpoints.$laptop) { | ||
| padding-top: 0; | ||
| aspect-ratio: 10 / 9; | ||
| } | ||
| } | ||
|
|
||
| &:hover > h3 { | ||
| text-decoration: underline; | ||
| } | ||
| } | ||
|
|
||
| h3 { | ||
| font-family: "new-spirit", serif; | ||
| font-family: 'new-spirit', serif; | ||
| line-height: 1; | ||
| } | ||
| </style> | ||
|
|
||
| p { | ||
| font-weight: 400; | ||
| } | ||
| </style> |
Oops, something went wrong.