Skip to content

BrickHack 8 Site - Contact & Footer #1256

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
sjmiller7 merged 4 commits into from
Dec 20, 2021
Merged

BrickHack 8 Site - Contact & Footer #1256

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
197aed6
contact section
sjmiller7 Dec 4, 2021
2f54cb3
fixes
sjmiller7 Dec 10, 2021
5adff61
newline eof
sjmiller7 Dec 17, 2021
d363f34
fixing aspect ratio code
sjmiller7 Dec 19, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 5 additions & 0 deletions assets/bh8/contact-monitor.svg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
57 changes: 30 additions & 27 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -205,34 +205,37 @@ <h2>Frequently Asked Questions</h2>
</section>

<!-- Contact -->
<section id="contact">
<div id="contact-content">
<h2>Contact</h2>
<p>Feel free to let us know of any questions, comments, and/or concerns at <a href="mailto:hello@brickhack.io">hello@brickhack.io</a></p>
<p>Interested in joining our team? <a href="./club.html">Check out our club</a></p>
</div>
<div id="contact-socials">
<a href="https://twitter.com/brickhackrit" target="_blank">
<i class="fab fa-twitter"></i>
</a>
<a href="https://www.facebook.com/brickhackrit" target="_blank">
<i class="fab fa-facebook"></i>
</a>
<a href="https://www.instagram.com/brickhack/" target="_blank">
<i class="fab fa-instagram"></i>
</a>
<a href="https://snapchat.com/add/brickhack" target="_blank">
<i class="fab fa-snapchat"></i>
</a>
</div>
</section>

<!-- Footer -->
<footer>
Comment thread
skyegallup marked this conversation as resolved.
<div id="footer-content">
<div>
<h2>contact us</h2>
<p><a href="mailto:hello@brickhack.io">hello@brickhack.io</a></p>
</div>
<div>
<a href="https://twitter.com/coderit" target="_blank">
<i class="fab fa-twitter"></i>
</a>
<a href="https://www.facebook.com/brickhackrit" target="_blank">
<i class="fab fa-facebook"></i>
</a>
<a href="https://www.instagram.com/code.rit/" target="_blank">
<i class="fab fa-instagram"></i>
</a>
<a href="https://github.com/codeRIT" target="_blank">
<i class="fab fa-github"></i>
</a>
</div>
<div>
<p>
<a href="https://static.mlh.io/docs/mlh-code-of-conduct.pdf">code of conduct</a>
|
<a href="https://www.rit.edu/academicaffairs/policiesmanual/c070" target="_blank">privacy policy</a>
</p>
<p>copyright &#169; 2021 BrickHack Club</p>
</div>
<div id="footer-left">
<p><a href="mailto:hello@brickhack.io">hello@brickhack.io</a></p>
</div>
<div id="footer-right">
<p><a href="https://static.mlh.io/docs/mlh-code-of-conduct.pdf" target="_blank">MLH Code of Conduct</a></p>
<p><a href="https://www.rit.edu/academicaffairs/policiesmanual/c070" target="_blank">Privacy Policy</a></p>
Comment thread
skyegallup marked this conversation as resolved.
<p>Copyright &#169; 2021 BrickHack Club</p>
Comment thread
sjmiller7 marked this conversation as resolved.
Outdated
</div>
</footer>

Expand Down
164 changes: 106 additions & 58 deletions sass/index.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,8 @@ $light-blue: #44C6E6;
$off-white: #F6F8FA;
$darker-blue: #081646;
$orange: #FF9C4A;
$grey: #D0D9E2;

// Typography
:root {
--body-font-size: 1.3rem;
Expand Down Expand Up @@ -347,59 +349,72 @@ section {


// Contact
footer {
width: 100%;
height: 300px;
left: 0;
right: 0;
bottom: 0;
margin-top: 20px;
background-image: url("../assets/footer/footer.svg");
background-repeat: repeat no-repeat;
background-position: bottom center;
background-size: auto 300px;
overflow-x: clip;

#footer-content {
#contact {
padding-bottom: 0;
display: flex;
justify-content: space-between;
flex-direction: row;
min-height: auto;

#contact-content {
width: 50%;
padding-right: 20px;
}

#contact-socials {
align-self: flex-end;
background-image: url("../assets/bh8/contact-monitor.svg");
width: 430px;
max-width: 50%;
height: 330px;
margin-bottom: -2px; // Gets rid of gap between svg and footer
background-size: contain;
background-repeat: no-repeat;
background-position: center bottom;
padding: 1rem 2.5rem 5rem;
display: flex;
flex-direction: column;
justify-content: space-around;
height: 235px;
margin: auto;
padding: 15px;
text-align: center;
justify-content: center;
align-items: center;
flex-wrap: wrap;

h2 {
margin-top: -5px;
margin-bottom: -5px;
}
a {
margin: 1rem;

p {
font-size: 1em;
}
i {
font-size: 2.5rem;
color: $blue;

// FA brand icons
i {
font-size: 3em;
padding: 0px 5px;
color: $blue;
&:hover {
color: $dark-blue;
}
}
}
}
}

a {
display: inline-block;
transition: 0.2s;

i {
transition: 0.2s;
}
// Footer
footer {
background-color: $grey;
padding: 2rem 5rem;
display: flex;
justify-content: space-between;

&:hover i {
transform: translateY(-4px);
}
#footer-left {
padding: 0 1rem 1rem 0;
}

#footer-right {
display: flex;
justify-content: space-between;

p:not(p:last-of-type) {
padding-right: 1rem;
}
}
}


@media screen and (max-width: 1500px) {
// About
#about {
Expand Down Expand Up @@ -438,6 +453,16 @@ footer {
#about #about-content #about-buttons {
width: 100%;
}

// Footer
footer #footer-right {
flex-direction: column;
text-align: right;

p:not(p:last-of-type) {
padding-right: 0;
}
}
}

@media screen and (max-width: 955px) {
Expand Down Expand Up @@ -576,6 +601,23 @@ footer {
}
}
}

// Contact
#contact {
flex-direction: column;

#contact-content {
width: 100%;
padding-right: 0px;
}

#contact-socials {
margin: 2rem auto -2px;
max-width: 75%;
width: 75%;
height: calc((100vw - 10rem) * 0.56); // should be the same as 75% width
Copy link
Copy Markdown
Contributor

@peterkos peterkos Dec 19, 2021

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Why the calc vs. 75vw? (And hwere does 0.56 come from?)

Copy link
Copy Markdown
Contributor Author

@sjmiller7 sjmiller7 Dec 19, 2021

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

In the image's aspect ratio and original desktop styling, the height is ~75% of the width. Lines 367 - 369:

width: 430px;
max-width: 50%;
height: 330px;

I want to maintain this aspect ratio when the width is set to 75% as it is here. There's a few steps that it takes to get to the right number

75% width is not actually 75vw here. It's 75% of the space that the container is allowed to fill. So 100vw minus the padding for the section, which is a total of 7rem. (I mistakenly put 10 in the code here because the desktop section padding adds up to 10rem in width. I will be changing that after I post this comment.) So, to get the 100% value we do 100vw - 7rem

Then, we need to multiply by 75% to get the width of the image. Then by 75% again to get the height to be 75% of the width value. 0.75 * 0.75 is ~0.56

So in the end, getting roughly the same aspect ratio leaves us with a height of (100vw - 7rem) * 0.56

If you double check my work, keep in mind that the box model breakdown in inspect tool shows width of container and padding as seperate. We have the css set to include the padding as a part of the total width value. As I remembered while trying to go back and check my work to explain it.

Actually changing this to 75vw severely messes with it.

When I go to fix the 10rem to 7rem, I will try to clarify my comment a bit more.

Copy link
Copy Markdown
Contributor

@peterkos peterkos Dec 20, 2021

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

It's 75% of the space that the container is allowed to fill.
Ahhhhh I see, I forgot how percents worked lol

In that case I'd suggest making a variable or two. This can be done in general PR as you clarified all the logic here so don't consider this to be a blocker: but maybe

height: calc(((100vw - var(--section-pad)) * (0.75 * 0.75))) // squared to match height and width

(I don't fully understand the 0.75 * 0.75 but I shall take your word for it)

Or you can just link to this comment; I do that a lot when there's a lot of nuances depending on the current state of the code

Copy link
Copy Markdown
Contributor Author

@sjmiller7 sjmiller7 Dec 20, 2021

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I don't fully understand the 0.75 * 0.75

Width of the image is 0.75 * the total possible width (width: 75%)
Height of the image needs to be 75% of the width, aka 0.75 * width aka 0.75 * 0.75 * the total possible width
If that makes sense

The comment in your sample is inaccurate since it's not "to match"

I could add a variable for section padding, but since section padding is probably going to be changed in general pr anyways I agree to save it for then

}
}
}

@media screen and (max-width: 650px) {
Expand Down Expand Up @@ -611,24 +653,30 @@ footer {
}
}

footer {
height: 200px;
background-size: auto 200px;

#footer-content {
height: 157px;

h2 {
font-size: 1.2em;
}
// Contact
#contact #contact-socials {
max-width: 100%;
width: 100%;
height: calc((100vw - 10rem) * 0.75); // should be the same as 75% width
}

p {
font-size: 0.8em;
}
// Footer
footer {
flex-direction: column;

i {
font-size: 2em;
}
#footer-right {
text-align: left;
}
}
}
}

@media screen and (max-width: 475px) {
// Contact
#contact #contact-socials {
justify-content: flex-start;
padding: 0;
margin: 2rem 0;
background-image: none;
Comment thread
sjmiller7 marked this conversation as resolved.
Outdated
height: auto;
}
}