99 | Subscribe to Be Notified When We Launch
100 | You're going to want in on this!
101 |
111 |
112 |
129 |
130 |
131 |
--------------------------------------------------------------------------------
/lessons/04-flexbox-responsive-variable-width-content/src/sass/_buttons.scss:
--------------------------------------------------------------------------------
1 | .button {
2 | display: inline-flex;
3 | align-items: center;
4 | justify-content: center;
5 | min-width: 10ch;
6 | min-height: 44px;
7 | padding: 0 1.5em;
8 | transition: 180ms all ease-in-out;
9 | border: none;
10 | border-radius: $border-radius/2;
11 | background-color: theme-color(primary);
12 | color: #fff;
13 | font-family: $headline-font-family;
14 | font-size: 1.125rem;
15 | line-height: 1.1;
16 | letter-spacing: 0.03em;
17 | text-align: center;
18 | text-decoration: none;
19 | cursor: pointer;
20 |
21 | &:focus {
22 | outline: none;
23 | box-shadow: 0 0 0 3px scale-color(theme-color(primary), $lightness: -30%);
24 | }
25 |
26 | &--secondary {
27 | background-color: theme-color(secondary);
28 |
29 | &:focus {
30 | box-shadow: 0 0 0 3px
31 | scale-color(theme-color(secondary), $lightness: -40%);
32 | }
33 | }
34 |
35 | &--small {
36 | min-height: 34px;
37 | padding: 0.25em 0.75em;
38 | font-size: 1rem;
39 | }
40 | }
41 |
--------------------------------------------------------------------------------
/lessons/04-flexbox-responsive-variable-width-content/src/sass/_forms.scss:
--------------------------------------------------------------------------------
1 | input:not([type="hidden"]) {
2 | border-radius: $border-radius/2;
3 | border: 1px solid scale-color(theme-color(gray), $lightness: 10%);
4 | min-height: 44px;
5 | padding: 0.25em 0.5em;
6 | transition: 280ms box-shadow ease-in-out;
7 | color: inherit;
8 |
9 | &:focus {
10 | outline: none;
11 | box-shadow: 0 0 0 3px scale-color(theme-color(secondary), $lightness: 30%);
12 | }
13 | }
14 |
15 | label {
16 | font-family: $headline-font-family;
17 | color: theme-color(secondary);
18 | font-weight: 700;
19 | font-size: $lead-font-size * 0.75;
20 | }
21 |
--------------------------------------------------------------------------------
/lessons/04-flexbox-responsive-variable-width-content/src/sass/_layout.scss:
--------------------------------------------------------------------------------
1 | // Components
2 | .navbar {
3 | justify-content: space-between;
4 | padding: $unit * 2 $unit * 3;
5 | }
6 |
7 | header.display-grid {
8 | grid-gap: $unit * 4;
9 |
10 | @media (min-width: 60rem) {
11 | grid-auto-flow: column;
12 | }
13 | }
14 |
15 | figure {
16 | margin: 0;
17 | height: 90vh;
18 | background-color: scale-color(theme-color(primary), $lightness: 30%);
19 |
20 | img {
21 | object-fit: cover;
22 | max-height: 60vh;
23 | width: 80vw;
24 | border-radius: $unit;
25 | box-shadow: 2px 10px 20px 0px rgba(black, 0.3);
26 | }
27 |
28 | figcaption {
29 | color: #fff;
30 | }
31 | }
32 |
33 | .site-footer {
34 | background-color: mix(#fff, theme-color(primary), 90%);
35 | padding-top: $unit * 2;
36 | padding-bottom: $unit * 2;
37 |
38 | ul li + li {
39 | margin-top: $unit;
40 | }
41 | }
42 |
43 | // Display
44 | .display-flex {
45 | display: flex;
46 |
47 | &--wrap {
48 | flex-wrap: wrap;
49 | }
50 |
51 | &--row-gap {
52 | > * {
53 | margin: $unit !important;
54 | }
55 | }
56 | }
57 |
58 | .display-grid {
59 | display: grid;
60 | grid-gap: $unit * 2;
61 |
62 | &--columns {
63 | grid-auto-flow: column;
64 | }
65 |
66 | &--placecenter {
67 | place-content: center;
68 | }
69 | }
70 |
71 | .alignitems--center {
72 | align-items: center;
73 | }
74 |
75 | .justifycontent--center {
76 | justify-content: center;
77 | }
78 |
79 | .container {
80 | max-width: 80rem;
81 | padding-left: $unit * 3;
82 | padding-right: $unit * 3;
83 | }
84 |
85 | // Utilities
86 | .list-unstyled {
87 | list-style: none;
88 | margin: 0;
89 | padding: 0;
90 | }
91 |
--------------------------------------------------------------------------------
/lessons/04-flexbox-responsive-variable-width-content/src/sass/_reset.scss:
--------------------------------------------------------------------------------
1 | /*
2 | * [Modified] Modern CSS Reset
3 | * @link https://github.com/hankchizljaw/modern-css-reset
4 | */
5 |
6 | /* Box sizing rules */
7 | *,
8 | *::before,
9 | *::after {
10 | box-sizing: border-box;
11 | }
12 |
13 | /* Remove default margin */
14 | body,
15 | h1,
16 | h2,
17 | h3,
18 | h4,
19 | h5,
20 | h6 {
21 | margin: 0;
22 | }
23 |
24 | html {
25 | scroll-behavior: smooth;
26 | }
27 |
28 | /* Set core body defaults */
29 | body {
30 | min-height: 100vh;
31 | color: theme-color(text);
32 | font-family: $font-family;
33 | font-size: 100%;
34 | line-height: 1.5;
35 | text-rendering: optimizeSpeed;
36 | }
37 |
38 | /* Make images easier to work with */
39 | img {
40 | display: block;
41 | max-width: 100%;
42 | }
43 |
44 | /* Inherit fonts for inputs and buttons */
45 | input,
46 | button,
47 | textarea,
48 | select {
49 | font: inherit;
50 | }
51 |
52 | /* Remove all animations and transitions for people that prefer not to see them */
53 | @media (prefers-reduced-motion: reduce) {
54 | * {
55 | animation-duration: 0.01ms !important;
56 | animation-iteration-count: 1 !important;
57 | transition-duration: 0.01ms !important;
58 | scroll-behavior: auto !important;
59 | }
60 |
61 | html {
62 | scroll-behavior: initial;
63 | }
64 | }
65 |
--------------------------------------------------------------------------------
/lessons/04-flexbox-responsive-variable-width-content/src/sass/_theme.scss:
--------------------------------------------------------------------------------
1 | $color-primary: #171392 !default;
2 | $color-secondary: #d92d7a !default;
3 | $color-background: #f9f9f9 !default;
4 |
5 | $brand-colors: (
6 | primary: $color-primary,
7 | secondary: $color-secondary,
8 | ) !default;
9 |
10 | $color-body: scale-color(
11 | $color-primary,
12 | $lightness: -30%,
13 | $saturation: -50%
14 | ) !default;
15 |
16 | $color-gray: mix(#767676, $color-body, 70%) !default;
17 |
18 | $colors: map-merge(
19 | $brand-colors,
20 | (
21 | text: $color-body,
22 | background: $color-background,
23 | light: #fff,
24 | dark: rgba(black, 0.87),
25 | gray: $color-gray,
26 | )
27 | );
28 |
29 | @function theme-color($key) {
30 | @return map-get($colors, $key);
31 | }
32 |
33 | $unit: 8px;
34 | $link-color: theme-color(primary) !default;
35 | $border-radius: $unit !default;
36 |
37 | $font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial,
38 | sans-serif, Apple Color Emoji, Segoe UI Emoji;
39 | $headline-font-family: "Merriweather", serif;
40 | $strong-font-weight: 600 !default;
41 | $h1-font-size: 4.2rem !default;
42 | $h2-font-size: 3.15rem !default;
43 | $h3-font-size: 2rem !default;
44 | $h4-font-size: 1.35rem !default;
45 | $text-font-size: 1.15rem !default;
46 | $lead-font-size: 1.35rem !default;
47 |
48 | $spacing: (
49 | sm: 1rem,
50 | md: 3rem,
51 | lg: 6rem,
52 | ) !default;
53 |
--------------------------------------------------------------------------------
/lessons/04-flexbox-responsive-variable-width-content/src/sass/_typography.scss:
--------------------------------------------------------------------------------
1 | $typography-variants: h1, h2, h3, h4;
2 |
3 | @each $type in $typography-variants {
4 | #{$type},
5 | .#{$type} {
6 | font-family: $headline-font-family;
7 | font-weight: 700;
8 | line-height: 1.15;
9 | margin-bottom: 0.65em;
10 | }
11 | }
12 |
13 | h1,
14 | .h1 {
15 | font-size: $h1-font-size;
16 | font-weight: 900;
17 | }
18 |
19 | h2,
20 | .h2 {
21 | font-size: $h2-font-size;
22 | }
23 |
24 | h3,
25 | .h3 {
26 | font-size: $h3-font-size;
27 | }
28 |
29 | h4,
30 | .h4 {
31 | font-size: $h4-font-size;
32 | color: theme-color(gray);
33 | }
34 |
35 | p,
36 | li {
37 | font-size: $text-font-size;
38 | }
39 |
40 | p {
41 | margin: 0 0 1rem;
42 | }
43 |
44 | article > ul > li + li {
45 | margin-top: 1rem;
46 | }
47 |
48 | strong {
49 | font-weight: $strong-font-weight;
50 | }
51 |
52 | a:not(.button) {
53 | color: $link-color;
54 | }
55 |
56 | .lead {
57 | font-family: $headline-font-family;
58 | font-size: $lead-font-size;
59 | color: theme-color(gray);
60 | letter-spacing: 0.01em;
61 | margin-bottom: 1em;
62 | line-height: 1.3;
63 | }
64 |
--------------------------------------------------------------------------------
/lessons/04-flexbox-responsive-variable-width-content/src/sass/_utilities.scss:
--------------------------------------------------------------------------------
1 | $alignments: center !default;
2 |
3 | @each $alignment in $alignments {
4 | .text-align--#{$alignment} {
5 | text-align: #{$alignment};
6 |
7 | @if ($alignment == "center") {
8 | > a {
9 | align-self: center !important;
10 | }
11 | }
12 | }
13 | }
14 |
15 | .mx-auto {
16 | margin-right: auto;
17 | margin-left: auto;
18 | }
19 |
20 | @each $key, $unit in $spacing {
21 | .my-#{$key} {
22 | margin-top: $unit;
23 | margin-bottom: $unit;
24 | }
25 |
26 | .mt-#{$key} {
27 | margin-top: $unit;
28 | }
29 | }
30 |
31 | .mb-none {
32 | margin-bottom: 0;
33 | }
34 |
--------------------------------------------------------------------------------
/lessons/04-flexbox-responsive-variable-width-content/src/sass/style.scss:
--------------------------------------------------------------------------------
1 | @import "theme";
2 | @import "reset";
3 | @import "layout";
4 | @import "typography";
5 | @import "buttons";
6 | @import "forms";
7 | @import "utilities";
8 |
--------------------------------------------------------------------------------
/lessons/05-grid-autofit-columns/README.md:
--------------------------------------------------------------------------------
1 | # Create a Landing Page with CSS Grid and Flexbox
2 |
3 | ## Use CSS Grid auto-fit For Responsive Column Layout
4 |
5 | > We'll complete our landing page styles by using CSS grid `auto-fit` in conjunction with the grid functions `repeat` and `minmax`. The result will be a responsive column layout that wraps when content shrinks below the minimum acceptable width. We'll also see how grid and flexbox can be used together by using flexbox to align the content of grid items. Finally, we'll view the fully completed landing page and reflect on how and why grid and flexbox were each used.
6 |
7 | ## Development Scripts
8 |
9 | **`npm run develop`**
10 |
11 | > Serve with hot reload at localhost:1337
12 |
13 | **`npm run build`**
14 |
15 | > Generate minified, autoprefixed CSS for production
16 |
17 | Use this as the "Publish command" if needed by hosting such as Netlify.
18 |
19 | **`npm run serve`**
20 |
21 | > Serve latest build files at localhost:1337
22 |
--------------------------------------------------------------------------------
/lessons/05-grid-autofit-columns/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "05-grid-autofit-columns",
3 | "description": "",
4 | "version": "0.1.0",
5 | "main": "public/index.html",
6 | "author": "5t3ph",
7 | "scripts": {
8 | "scss": "node-sass src/sass/style.scss public/css/style.css",
9 | "css": "postcss public/css/*.css -u autoprefixer cssnano -r -m",
10 | "copy:html": "copyfiles -u 1 ./src/*.html ./src/**/*.html public",
11 | "copy:images": "copyfiles -u 1 ./src/images/* public",
12 | "copy": "npm run copy:html & npm run copy:images",
13 | "watch:images": "onchange 'src/images/*' -- npm run copy:images",
14 | "watch:html": "onchange 'src/*.html' 'src/**/*.html' -- npm run copy:html",
15 | "watch:sass": "node-sass --watch src/sass -o public/css",
16 | "watch": "npm run watch:images & npm run watch:html & npm run watch:sass",
17 | "serve": "browser-sync start --server public --files public --port 1337",
18 | "develop": "npm run copy && npm run scss ; npm run watch & npm run serve",
19 | "build": "npm run copy && npm run scss ; npm run css"
20 | },
21 | "dependencies": {
22 | "autoprefixer": "^9.5.0",
23 | "browser-sync": "^2.26.3",
24 | "copyfiles": "^2.1.0",
25 | "cssnano": "^4.1.10",
26 | "node-sass": "^4.11.0",
27 | "onchange": "^7.0.1",
28 | "postcss-cli": "^7.1.1"
29 | },
30 | "browserslist": [
31 | "last 2 versions"
32 | ]
33 | }
34 |
--------------------------------------------------------------------------------
/lessons/05-grid-autofit-columns/src/images/image.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/5t3ph/course-grid-flexbox-landing-page/60e0180c50a3adf87fe6d72b993ca12eb1382f51/lessons/05-grid-autofit-columns/src/images/image.jpg
--------------------------------------------------------------------------------
/lessons/05-grid-autofit-columns/src/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
105 | Subscribe to Be Notified When We Launch
106 | You're going to want in on this!
107 |
117 |
118 |
135 |
136 |
137 |
--------------------------------------------------------------------------------
/lessons/05-grid-autofit-columns/src/sass/_buttons.scss:
--------------------------------------------------------------------------------
1 | .button {
2 | display: inline-flex;
3 | align-items: center;
4 | justify-content: center;
5 | min-width: 10ch;
6 | min-height: 44px;
7 | padding: 0 1.5em;
8 | transition: 180ms all ease-in-out;
9 | border: none;
10 | border-radius: $border-radius/2;
11 | background-color: theme-color(primary);
12 | color: #fff;
13 | font-family: $headline-font-family;
14 | font-size: 1.125rem;
15 | line-height: 1.1;
16 | letter-spacing: 0.03em;
17 | text-align: center;
18 | text-decoration: none;
19 | cursor: pointer;
20 |
21 | &:focus {
22 | outline: none;
23 | box-shadow: 0 0 0 3px scale-color(theme-color(primary), $lightness: -30%);
24 | }
25 |
26 | &--secondary {
27 | background-color: theme-color(secondary);
28 |
29 | &:focus {
30 | box-shadow: 0 0 0 3px
31 | scale-color(theme-color(secondary), $lightness: -40%);
32 | }
33 | }
34 |
35 | &--small {
36 | min-height: 34px;
37 | padding: 0.25em 0.75em;
38 | font-size: 1rem;
39 | }
40 | }
41 |
--------------------------------------------------------------------------------
/lessons/05-grid-autofit-columns/src/sass/_forms.scss:
--------------------------------------------------------------------------------
1 | input:not([type="hidden"]) {
2 | border-radius: $border-radius/2;
3 | border: 1px solid scale-color(theme-color(gray), $lightness: 10%);
4 | min-height: 44px;
5 | padding: 0.25em 0.5em;
6 | transition: 280ms box-shadow ease-in-out;
7 | color: inherit;
8 |
9 | &:focus {
10 | outline: none;
11 | box-shadow: 0 0 0 3px scale-color(theme-color(secondary), $lightness: 30%);
12 | }
13 | }
14 |
15 | label {
16 | font-family: $headline-font-family;
17 | color: theme-color(secondary);
18 | font-weight: 700;
19 | font-size: $lead-font-size * 0.75;
20 | }
21 |
--------------------------------------------------------------------------------
/lessons/05-grid-autofit-columns/src/sass/_layout.scss:
--------------------------------------------------------------------------------
1 | // Components
2 | .navbar {
3 | justify-content: space-between;
4 | padding: $unit * 2 $unit * 3;
5 | }
6 |
7 | header.display-grid {
8 | grid-gap: $unit * 4;
9 |
10 | @media (min-width: 60rem) {
11 | grid-auto-flow: column;
12 | }
13 | }
14 |
15 | figure {
16 | margin: 0;
17 | height: 90vh;
18 | background-color: scale-color(theme-color(primary), $lightness: 30%);
19 |
20 | img {
21 | object-fit: cover;
22 | max-height: 60vh;
23 | width: 80vw;
24 | border-radius: $unit;
25 | box-shadow: 2px 10px 20px 0px rgba(black, 0.3);
26 | }
27 |
28 | figcaption {
29 | color: #fff;
30 | }
31 | }
32 |
33 | blockquote {
34 | margin: 0;
35 |
36 | img {
37 | margin-bottom: $unit * 2;
38 | object-fit: cover;
39 | width: 8rem;
40 | height: 8rem;
41 | border-radius: 50%;
42 | border: 3px solid theme-color(secondary);
43 | }
44 |
45 | p {
46 | font-size: $h4-font-size;
47 | max-width: 20ch;
48 | }
49 |
50 | cite {
51 | color: theme-color(gray);
52 | }
53 | }
54 |
55 | aside {
56 | background-color: scale-color(theme-color(secondary), $lightness: 90%);
57 | padding: $unit * 4 $unit * 2;
58 | border-radius: $unit;
59 |
60 | h3 {
61 | color: theme-color(secondary);
62 | }
63 | }
64 |
65 | .site-footer {
66 | background-color: mix(#fff, theme-color(primary), 90%);
67 | padding-top: $unit * 2;
68 | padding-bottom: $unit * 2;
69 |
70 | ul li + li {
71 | margin-top: $unit;
72 | }
73 | }
74 |
75 | // Display
76 | .display-flex {
77 | display: flex;
78 |
79 | &--wrap {
80 | flex-wrap: wrap;
81 | }
82 |
83 | &--row-gap {
84 | > * {
85 | margin: $unit !important;
86 | }
87 | }
88 | }
89 |
90 | .display-grid {
91 | display: grid;
92 | grid-gap: $unit * 2;
93 |
94 | &--columns {
95 | grid-auto-flow: column;
96 | }
97 |
98 | &--placecenter {
99 | place-content: center;
100 | }
101 |
102 | &--autofit-columns {
103 | grid-template-columns: repeat(auto-fit, minmax(30ch, 1fr));
104 | }
105 |
106 | &--center-stack {
107 | grid-gap: $unit * 4;
108 |
109 | > * {
110 | display: flex;
111 | flex-direction: column;
112 | text-align: center;
113 | align-items: center;
114 | }
115 | }
116 | }
117 |
118 | .alignitems--center {
119 | align-items: center;
120 | }
121 |
122 | .justifycontent--center {
123 | justify-content: center;
124 | }
125 |
126 | .container {
127 | max-width: 80rem;
128 | padding-left: $unit * 3;
129 | padding-right: $unit * 3;
130 | }
131 |
132 | // Utilities
133 | .list-unstyled {
134 | list-style: none;
135 | margin: 0;
136 | padding: 0;
137 | }
138 |
--------------------------------------------------------------------------------
/lessons/05-grid-autofit-columns/src/sass/_reset.scss:
--------------------------------------------------------------------------------
1 | /*
2 | * [Modified] Modern CSS Reset
3 | * @link https://github.com/hankchizljaw/modern-css-reset
4 | */
5 |
6 | /* Box sizing rules */
7 | *,
8 | *::before,
9 | *::after {
10 | box-sizing: border-box;
11 | }
12 |
13 | /* Remove default margin */
14 | body,
15 | h1,
16 | h2,
17 | h3,
18 | h4,
19 | h5,
20 | h6 {
21 | margin: 0;
22 | }
23 |
24 | html {
25 | scroll-behavior: smooth;
26 | }
27 |
28 | /* Set core body defaults */
29 | body {
30 | min-height: 100vh;
31 | color: theme-color(text);
32 | font-family: $font-family;
33 | font-size: 100%;
34 | line-height: 1.5;
35 | text-rendering: optimizeSpeed;
36 | }
37 |
38 | /* Make images easier to work with */
39 | img {
40 | display: block;
41 | max-width: 100%;
42 | }
43 |
44 | /* Inherit fonts for inputs and buttons */
45 | input,
46 | button,
47 | textarea,
48 | select {
49 | font: inherit;
50 | }
51 |
52 | /* Remove all animations and transitions for people that prefer not to see them */
53 | @media (prefers-reduced-motion: reduce) {
54 | * {
55 | animation-duration: 0.01ms !important;
56 | animation-iteration-count: 1 !important;
57 | transition-duration: 0.01ms !important;
58 | scroll-behavior: auto !important;
59 | }
60 |
61 | html {
62 | scroll-behavior: initial;
63 | }
64 | }
65 |
--------------------------------------------------------------------------------
/lessons/05-grid-autofit-columns/src/sass/_theme.scss:
--------------------------------------------------------------------------------
1 | $color-primary: #171392 !default;
2 | $color-secondary: #d92d7a !default;
3 | $color-background: #f9f9f9 !default;
4 |
5 | $brand-colors: (
6 | primary: $color-primary,
7 | secondary: $color-secondary,
8 | ) !default;
9 |
10 | $color-body: scale-color(
11 | $color-primary,
12 | $lightness: -30%,
13 | $saturation: -50%
14 | ) !default;
15 |
16 | $color-gray: mix(#767676, $color-body, 70%) !default;
17 |
18 | $colors: map-merge(
19 | $brand-colors,
20 | (
21 | text: $color-body,
22 | background: $color-background,
23 | light: #fff,
24 | dark: rgba(black, 0.87),
25 | gray: $color-gray,
26 | )
27 | );
28 |
29 | @function theme-color($key) {
30 | @return map-get($colors, $key);
31 | }
32 |
33 | $unit: 8px;
34 | $link-color: theme-color(primary) !default;
35 | $border-radius: $unit !default;
36 |
37 | $font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial,
38 | sans-serif, Apple Color Emoji, Segoe UI Emoji;
39 | $headline-font-family: "Merriweather", serif;
40 | $strong-font-weight: 600 !default;
41 | $h1-font-size: 4.2rem !default;
42 | $h2-font-size: 3.15rem !default;
43 | $h3-font-size: 2rem !default;
44 | $h4-font-size: 1.35rem !default;
45 | $text-font-size: 1.15rem !default;
46 | $lead-font-size: 1.35rem !default;
47 |
48 | $spacing: (
49 | sm: 1rem,
50 | md: 3rem,
51 | lg: 6rem,
52 | ) !default;
53 |
--------------------------------------------------------------------------------
/lessons/05-grid-autofit-columns/src/sass/_typography.scss:
--------------------------------------------------------------------------------
1 | $typography-variants: h1, h2, h3, h4;
2 |
3 | @each $type in $typography-variants {
4 | #{$type},
5 | .#{$type} {
6 | font-family: $headline-font-family;
7 | font-weight: 700;
8 | line-height: 1.15;
9 | margin-bottom: 0.65em;
10 | }
11 | }
12 |
13 | h1,
14 | .h1 {
15 | font-size: $h1-font-size;
16 | font-weight: 900;
17 | }
18 |
19 | h2,
20 | .h2 {
21 | font-size: $h2-font-size;
22 | }
23 |
24 | h3,
25 | .h3 {
26 | font-size: $h3-font-size;
27 | }
28 |
29 | h4,
30 | .h4 {
31 | font-size: $h4-font-size;
32 | color: theme-color(gray);
33 | }
34 |
35 | p,
36 | li {
37 | font-size: $text-font-size;
38 | }
39 |
40 | p {
41 | margin: 0 0 1rem;
42 | }
43 |
44 | article > ul > li + li {
45 | margin-top: 1rem;
46 | }
47 |
48 | strong {
49 | font-weight: $strong-font-weight;
50 | }
51 |
52 | a:not(.button) {
53 | color: $link-color;
54 | }
55 |
56 | .lead {
57 | font-family: $headline-font-family;
58 | font-size: $lead-font-size;
59 | color: theme-color(gray);
60 | letter-spacing: 0.01em;
61 | margin-bottom: 1em;
62 | line-height: 1.3;
63 | }
64 |
--------------------------------------------------------------------------------
/lessons/05-grid-autofit-columns/src/sass/_utilities.scss:
--------------------------------------------------------------------------------
1 | $alignments: center !default;
2 |
3 | @each $alignment in $alignments {
4 | .text-align--#{$alignment} {
5 | text-align: #{$alignment};
6 |
7 | @if ($alignment == "center") {
8 | > a {
9 | align-self: center !important;
10 | }
11 | }
12 | }
13 | }
14 |
15 | .mx-auto {
16 | margin-right: auto;
17 | margin-left: auto;
18 | }
19 |
20 | @each $key, $unit in $spacing {
21 | .my-#{$key} {
22 | margin-top: $unit;
23 | margin-bottom: $unit;
24 | }
25 |
26 | .mt-#{$key} {
27 | margin-top: $unit;
28 | }
29 | }
30 |
31 | .mb-none {
32 | margin-bottom: 0;
33 | }
34 |
--------------------------------------------------------------------------------
/lessons/05-grid-autofit-columns/src/sass/style.scss:
--------------------------------------------------------------------------------
1 | @import "theme";
2 | @import "reset";
3 | @import "layout";
4 | @import "typography";
5 | @import "buttons";
6 | @import "forms";
7 | @import "utilities";
8 |
--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "slug": "grid-flexbox-landing-page",
3 | "private": true,
4 | "repository": "https://github.com/5t3ph/course-grid-flexbox-landing-page",
5 | "workspaces": [
6 | "lessons/*"
7 | ],
8 | "scripts": {
9 | "start": "aux() { yarn workspace:log \"$(cd lessons && ls -d *\"$1\"* | head -1)\" develop; }; aux",
10 | "build": "aux() { yarn workspace:log \"$(cd lessons && ls -d *\"$1\"* | head -1)\" build; }; aux",
11 | "workspace:log": "aux() { echo \"Running $2 in $1.\" && yarn workspace \"$@\"; }; aux",
12 | "clean:node_modules": "find . -name node_modules | xargs rm -rf",
13 | "latest": "yarn upgrade-interactive --latest && yarn upgrade -L"
14 | }
15 | }
16 |
--------------------------------------------------------------------------------
50 |