Skip to content

Chisel apprentice qualities #33

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
changangus merged 5 commits into from
Dec 15, 2021
Merged

Chisel apprentice qualities #33

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
2f2155a
fix: change article tags to divs
auaruss Dec 9, 2021
f9729df
chisel: fix initial spacing and styling for apprentice-qualities comp…
auaruss Dec 9, 2021
051f271
fix: change article tags to divs
auaruss Dec 9, 2021
e458166
refactor: apprentice qualities padding/spacing
Dec 13, 2021
11dd67c
fix: apprentice qualities text positioning fix
auaruss Dec 14, 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
22 changes: 11 additions & 11 deletions __tests__/__snapshots__/snapshot.js.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -203,24 +203,19 @@ exports[`renders homepage unchanged 1`] = `
<div
className="apprentice-qualities__main"
>
<img
alt="The three qualities sparkbox looks for in apprentices: Passion, Character, and Initiative."
className="apprentice-qualities__image"
src="/apprentice-qualities.svg"
/>
<article
<div
className="apprentice-qualities__article"
>
<p
<h2
className="primary apprentice-qualities__article-heading"
>
What we look for
</p>
<h2
</h2>
<h3
className="apprentice-qualities__article-subheading"
>
Qualities of Successful Apprentices
</h2>
</h3>
<div
className="apprentice-qualities__article-text"
>
Expand All @@ -234,7 +229,12 @@ exports[`renders homepage unchanged 1`] = `
We’re looking primarily for those interested in an apprenticeship in web development—frontend, backend, or anything code related. What we’re looking for most, however, are individuals who are excited to make their mark on the web industry. In your application, provide anything and everything you can that will convince us you are that geek.
</p>
</div>
</article>
<img
alt="The three qualities sparkbox looks for in apprentices: Passion, Character, and Initiative."
className="apprentice-qualities__image"
src="/apprentice-qualities.svg"
/>
</div>
</div>
</section>
<section
Expand Down
22 changes: 11 additions & 11 deletions components/apprentice-qualities/apprentice-qualities.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,21 +4,16 @@ import styles from './apprentice-qualities.module.scss';
const ApprenticeQualities = () => (
<section className={styles['apprentice-qualities']}>
<div className={styles['apprentice-qualities__main']}>
<img
src="/apprentice-qualities.svg"
alt="The three qualities sparkbox looks for in apprentices: Passion, Character, and Initiative."
className={styles['apprentice-qualities__image']}
/>
<article className={styles['apprentice-qualities__article']}>
<p className={`${styles.primary} ${styles['apprentice-qualities__article-heading']}`}>
<div className={styles['apprentice-qualities__article']}>
<h2 className={`${styles.primary} ${styles['apprentice-qualities__article-heading']}`}>
What we look for
</p>
<h2 className={
</h2>
<h3 className={
styles['apprentice-qualities__article-subheading']
}
>
Qualities of Successful Apprentices
</h2>
</h3>
<div className={styles['apprentice-qualities__article-text']}>
<p>
We build responsive, standards-compliant, content-focused,
Expand All @@ -41,7 +36,12 @@ const ApprenticeQualities = () => (
provide anything and everything you can that will convince us you are that geek.
</p>
</div>
</article>
<img
src="/apprentice-qualities.svg"
alt="The three qualities sparkbox looks for in apprentices: Passion, Character, and Initiative."
className={styles['apprentice-qualities__image']}
/>
</div>
</div>
</section>
);
Expand Down
54 changes: 37 additions & 17 deletions components/apprentice-qualities/apprentice-qualities.module.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,10 @@
width: $component-width;

&__main {
@include horizontal-section-spacing();
box-sizing: border-box;
Copy link
Copy Markdown
Member

@jonoliver jonoliver Dec 14, 2021

Choose a reason for hiding this comment

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

This is looking great Alice, I think I figured out a simple way to stop the text from floating off to the right on larger screens.

Could we add this CSS to &__main?

    justify-content: right;
    max-width: $max-content-width + ($xlarge-screen-padding * 2);
    margin: auto;

☝️ Setting the max-width this way feels a bit hacky, but absent a bigger refactor to the DOM structure, it it's a simple way to account for the padding with border-box setting.

Copy link
Copy Markdown
Member

@jonoliver jonoliver Dec 14, 2021 •
edited
Loading

Choose a reason for hiding this comment

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

This is looking great Alice, I think I figured out a simple way to stop the text from floating off to the right on larger screens. Here's a screenshot for reference:

Screen Shot 2021-12-14 at 3 22 55 PM

Could we add this CSS to &__main?

    justify-content: right;
    max-width: $max-content-width + ($xlarge-screen-padding * 2);
    margin: auto;

☝️ Setting the max-width this way feels a bit hacky, but absent a bigger refactor to the DOM structure, it it's a simple way to account for the padding with border-box setting.

Copy link
Copy Markdown
Contributor Author

@auaruss auaruss Dec 14, 2021

Choose a reason for hiding this comment

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

Got it!

justify-content: right;
max-width: $max-content-width + ($xlarge-screen-padding * 2);
margin: auto;
}

Expand All @@ -19,8 +23,6 @@
}

&__article {
padding: 1rem;

&-text {
font-style: normal;
font-weight: normal;
Expand All @@ -47,7 +49,7 @@
}
}

@media (min-width: 50rem) {
@media (min-width: 48rem) {
.apprentice-qualities {
min-height: 50rem;
position: relative;
Expand All @@ -60,40 +62,55 @@
background-repeat: repeat-x;
background-size: 20rem;
background-position:
-8rem 0,
2rem 17.4rem,
-8rem 34.7rem;
$medium-screen-padding+8.2rem 0,
$medium-screen-padding+ -1.8rem 17.4rem,
$medium-screen-padding+8.2rem 34.7rem;

&__main {
display: flex;
position: relative;
}

&__image {
order: 1;
display: block;
position: absolute;
left: 1.2rem;
top: 14.4rem;
pointer-events: none;
width: 21.5rem;
top: 6.5rem;
left: -23.75rem;
}

&__article {
padding: 2rem;
display: flex;
flex-direction: column;
position: absolute;
left: 23rem;
left: 25rem;
top: 8rem;
padding-top: 3rem;
padding-right: 3.75rem;

&--heading {
order: 2;
}

&--subheading {
order: 3;
}

&-text {
order: 4;
}
}
}
}

@media (min-width: 70.25rem) {
@media (min-width: 62rem) {
.apprentice-qualities {
background-position:
calc(50% - 16rem) 0,
calc(50% - 6rem) 17.3rem,
calc(50% - 16rem) 34.7rem;
calc(50% - 10rem) 0,
50% 17.3rem,
calc(50% - 10rem) 34.7rem;

&__main {
flex-direction: row;
Expand All @@ -102,14 +119,17 @@
}

&__image {
position: revert;
padding-top: 9.3rem;
position: absolute;
top: 14.3rem;
left: calc(50% - 30.75rem);
}

&__article {
position: revert;
padding-right: 0;
width: 70ch;
max-width: 90ch;
padding: 5rem 0 0 0;
margin-left: 40%;
}
}
}