From cf14567d2b6bc2b69859487d374afb7554c8f9ca Mon Sep 17 00:00:00 2001 From: Juan Date: Wed, 24 Mar 2021 20:15:09 -0500 Subject: [PATCH 1/5] Adding semantic HTML --- assets/styles/components/_header.scss | 1 + assets/styles/components/_hero.scss | 0 assets/styles/components/_main.scss | 3 -- assets/styles/components/_page_images.scss | 5 +++ assets/styles/modules/_variables.scss | 9 +++++ assets/styles/styles.css | 6 ++- assets/styles/styles.css.map | 2 +- assets/styles/styles.scss | 14 +++---- index.html | 46 +++++++++++++++++++++- 9 files changed, 71 insertions(+), 15 deletions(-) create mode 100644 assets/styles/components/_header.scss delete mode 100644 assets/styles/components/_hero.scss delete mode 100644 assets/styles/components/_main.scss create mode 100644 assets/styles/components/_page_images.scss diff --git a/assets/styles/components/_header.scss b/assets/styles/components/_header.scss new file mode 100644 index 0000000..8b13789 --- /dev/null +++ b/assets/styles/components/_header.scss @@ -0,0 +1 @@ + diff --git a/assets/styles/components/_hero.scss b/assets/styles/components/_hero.scss deleted file mode 100644 index e69de29..0000000 diff --git a/assets/styles/components/_main.scss b/assets/styles/components/_main.scss deleted file mode 100644 index 9c2069a..0000000 --- a/assets/styles/components/_main.scss +++ /dev/null @@ -1,3 +0,0 @@ -h1 { - color: $colorDark; -} diff --git a/assets/styles/components/_page_images.scss b/assets/styles/components/_page_images.scss new file mode 100644 index 0000000..a59b007 --- /dev/null +++ b/assets/styles/components/_page_images.scss @@ -0,0 +1,5 @@ +.page_images{ + width: $imageWidth; + height: $imageHeight; + display: flex; +} diff --git a/assets/styles/modules/_variables.scss b/assets/styles/modules/_variables.scss index 62b9166..460994f 100644 --- a/assets/styles/modules/_variables.scss +++ b/assets/styles/modules/_variables.scss @@ -1,2 +1,11 @@ +//Page colors $colorLight: #fff; $colorDark: #000; +$headerColor: #282A36; +$test: pink; + +//All images width and height +$imageWidth: 288px; +$imageHeight: 190px; + +//font sizes diff --git a/assets/styles/styles.css b/assets/styles/styles.css index b24e8b5..485a384 100644 --- a/assets/styles/styles.css +++ b/assets/styles/styles.css @@ -17,8 +17,10 @@ html { font-family: "Inter var", sans-serif; } } -h1 { - color: #000; +.page_images { + width: 288px; + height: 190px; + display: flex; } /*# sourceMappingURL=styles.css.map */ diff --git a/assets/styles/styles.css.map b/assets/styles/styles.css.map index b8df8d2..b02f441 100644 --- a/assets/styles/styles.css.map +++ b/assets/styles/styles.css.map @@ -1 +1 @@ -{"version":3,"sourceRoot":"","sources":["modules/_typography.scss","modules/_app.scss","components/_main.scss"],"names":[],"mappings":"AAAQ;ACAR;EACE;EACA;EACA;EACA;EACA;EACA;;;ADLF;EAAO;;;AACP;EACE;IAAO;;;AEHT;EACE","file":"styles.css"} \ No newline at end of file +{"version":3,"sourceRoot":"","sources":["modules/_typography.scss","modules/_app.scss","components/_page_images.scss","modules/_variables.scss"],"names":[],"mappings":"AAAQ;ACAR;EACE;EACA;EACA;EACA;EACA;EACA;;;ADLF;EAAO;;;AACP;EACE;IAAO;;;AEHT;EACE,OCMW;EDLX,QCMY;EDLZ","file":"styles.css"} \ No newline at end of file diff --git a/assets/styles/styles.scss b/assets/styles/styles.scss index 8909608..70dde8a 100644 --- a/assets/styles/styles.scss +++ b/assets/styles/styles.scss @@ -1,10 +1,10 @@ // CONFIG MODULES -@import "modules/app"; -@import "modules/breakpoints"; -@import "modules/mixins"; -@import "modules/typography"; -@import "modules/variables"; +@import "modules/app.scss"; +@import "modules/breakpoints.scss"; +@import "modules/mixins.scss"; +@import "modules/typography.scss"; +@import "modules/variables.scss"; // COMPONENTS -@import "components/main"; -@import "components/hero"; +@import "components/header.scss"; +@import "components/page_images.scss"; diff --git a/index.html b/index.html index 5ac1c71..087b2fb 100644 --- a/index.html +++ b/index.html @@ -2,12 +2,54 @@ + + Sass Project -

Hello world!

- +
+
+ img +

Lorem ipsum

+

lorem ipsum for photos

+
+ header_image +
+
+

Easy to use, stylish placeholders

+

Just add your desired image size (width & height) after our URL, and you'll get a random image.

+

To get a square image, just add the size.

+
+
+
+

Specify image

+

Get a specific image by adding /id/{image} to the start of the url.

+

You can find a list of all the images here.

+ img +
+
+

Static Random Image

+

Get the same random image every time based on a seed, by adding /seed/{seed} to the start of the url.

+ img +
+
+

Grayscale

+

Get a grayscale image by appending ?grayscale to the end of the url.

+ img +
+
+

Blur

+

You can adjust the amount of blur by providing a number between 1 and 10.

+ img +
+
+

Advanced Usage

+

You may combine any of the options above. For example, to get a specific image that is grayscale and + blurred.

+ img +
+
From f8e651ea3505b0b3078d5318a77d501dc78440c8 Mon Sep 17 00:00:00 2001 From: Juan Date: Thu, 25 Mar 2021 02:58:20 -0500 Subject: [PATCH 2/5] First mobile --- assets/styles/components/_footer.scss | 13 ++ assets/styles/components/_header.scss | 56 +++++++++ assets/styles/components/_main.scss | 72 +++++++++++ assets/styles/components/_page_images.scss | 4 +- assets/styles/modules/_variables.scss | 13 +- assets/styles/styles.css | 135 +++++++++++++++++++++ assets/styles/styles.css.map | 2 +- assets/styles/styles.scss | 2 + index.html | 59 ++++++--- 9 files changed, 336 insertions(+), 20 deletions(-) create mode 100644 assets/styles/components/_footer.scss create mode 100644 assets/styles/components/_main.scss diff --git a/assets/styles/components/_footer.scss b/assets/styles/components/_footer.scss new file mode 100644 index 0000000..0a53c47 --- /dev/null +++ b/assets/styles/components/_footer.scss @@ -0,0 +1,13 @@ +footer{ + display: grid; + background-color: $footerMainColor; + margin-top: 6.25rem; + padding: 6.25rem 0 6.25rem 0; + p{ + color: $footerParaphColor; + display: flex; + flex-direction: column; + justify-content: center; + text-align: center; + } +} \ No newline at end of file diff --git a/assets/styles/components/_header.scss b/assets/styles/components/_header.scss index 8b13789..4cdb1d4 100644 --- a/assets/styles/components/_header.scss +++ b/assets/styles/components/_header.scss @@ -1 +1,57 @@ +#header_container{ + /*display: inline-grid;*/ + display: grid; + padding: 6.25rem 0 6.25rem 0; + place-items: center; + justify-content: center; + img { + padding: 0; + border-radius: 8px; + } + img:last-child{ //IMPORTANTE + height: 200px; + } + img:nth-last-child(1){ //IMPORTANTE + filter: blur(0.2px); + } + figure{ + display: flex; + justify-content: center; + align-items: center; + } +} + +#section_header_container{ + display: flex; + flex-direction: column; + align-items: center; + margin: 1.56rem 1rem 0 1.56rem; + h2{ + margin: 0.75rem 0 0.75rem 0; + font-weight: 300; + } + h1{ + font-weight: 600; + font-size: 2.625rem; + } +} + +#second_header_container{ + padding: 6.25rem 0 6.25rem 0; + background-color: $secondHeaderContainer; + text-align: center; + h1{ + font-weight: 600; + margin-bottom: 0.5em; + font-family: $primaryFontFamily, $secondaryFontFamily; + } + p{ + font-size: 1rem; + line-height: 1.6em; + } + p:nth-last-child(1){ + margin-top: 2.4rem; + } +} + diff --git a/assets/styles/components/_main.scss b/assets/styles/components/_main.scss new file mode 100644 index 0000000..91f39c5 --- /dev/null +++ b/assets/styles/components/_main.scss @@ -0,0 +1,72 @@ +#main_container{ + display: grid; + img { + padding: 0; + border-radius: 8px; + } + .articles_container_one{ + padding: 0 1rem 0 1rem; + margin: 5rem 0 4rem 0; + h2{ + font-weight: 600; + margin-bottom: .75rem; + } + figure{ + img{ + padding: 16px 16px 0 16px; + } + } + } + .articles_container_two{ + padding: 0 1rem 0 1rem; + margin: 5rem 0 4rem 0; + h2{ + margin-bottom: .75rem; + font-weight: 600; + } + figure{ + img{ + padding: 16px 16px 0 16px; + } + } + } + .articles_container_three{ + padding: 0 1rem 0 1rem; + margin: 5rem 0 4rem 0; + h2{ + margin-bottom: .75rem; + font-weight: 600; + } + figure{ + img{ + padding: 16px 16px 0 16px; + } + } + } + .articles_container_four{ + padding: 0 1rem 0 1rem; + margin: 5rem 0 4rem 0; + h2{ + margin-bottom: .75rem; + font-weight: 600; + } + figure{ + img{ + padding: 16px 16px 0 16px; + } + } + } + .articles_container_five{ + padding: 0 1rem 0 1rem; + margin: 5rem 0 4rem 0; + h2{ + margin-bottom: .75rem; + font-weight: 600; + } + figure{ + img{ + padding: 16px 16px 0 16px; + } + } + } +} \ No newline at end of file diff --git a/assets/styles/components/_page_images.scss b/assets/styles/components/_page_images.scss index a59b007..bc4c04a 100644 --- a/assets/styles/components/_page_images.scss +++ b/assets/styles/components/_page_images.scss @@ -1,5 +1,7 @@ .page_images{ width: $imageWidth; height: $imageHeight; - display: flex; + padding: $imagePadding $imagePadding 0 $imagePadding; + justify-content: center; + border-radius: 8px; } diff --git a/assets/styles/modules/_variables.scss b/assets/styles/modules/_variables.scss index 460994f..926da92 100644 --- a/assets/styles/modules/_variables.scss +++ b/assets/styles/modules/_variables.scss @@ -1,11 +1,16 @@ //Page colors -$colorLight: #fff; -$colorDark: #000; $headerColor: #282A36; -$test: pink; +$secondHeaderContainer :#f4f7fc; +$footerMainColor: black; +$footerParaphColor: white; //All images width and height $imageWidth: 288px; $imageHeight: 190px; -//font sizes +//images spaces +$imagePadding: 1rem; + +//font styles +$primaryFontFamily: Roboto; +$secondaryFontFamily: sans-serif; diff --git a/assets/styles/styles.css b/assets/styles/styles.css index 485a384..805e25b 100644 --- a/assets/styles/styles.css +++ b/assets/styles/styles.css @@ -17,10 +17,145 @@ html { font-family: "Inter var", sans-serif; } } +#header_container { + /*display: inline-grid;*/ + display: grid; + padding: 6.25rem 0 6.25rem 0; + place-items: center; + justify-content: center; +} +#header_container img { + padding: 0; + border-radius: 8px; +} +#header_container img:last-child { + height: 200px; +} +#header_container img:nth-last-child(1) { + filter: blur(0.2px); +} +#header_container figure { + display: flex; + justify-content: center; + align-items: center; +} + +#section_header_container { + display: flex; + flex-direction: column; + align-items: center; + margin: 1.56rem 1rem 0 1.56rem; +} +#section_header_container h2 { + margin: 0.75rem 0 0.75rem 0; + font-weight: 300; +} +#section_header_container h1 { + font-weight: 600; + font-size: 2.625rem; +} + +#second_header_container { + padding: 6.25rem 0 6.25rem 0; + background-color: #f4f7fc; + text-align: center; +} +#second_header_container h1 { + font-weight: 600; + margin-bottom: 0.5em; + font-family: Roboto, sans-serif; +} +#second_header_container p { + font-size: 1rem; + line-height: 1.6em; +} +#second_header_container p:nth-last-child(1) { + margin-top: 2.4rem; +} + .page_images { width: 288px; height: 190px; + padding: 1rem 1rem 0 1rem; + justify-content: center; + border-radius: 8px; +} + +#main_container { + display: grid; +} +#main_container img { + padding: 0; + border-radius: 8px; +} +#main_container .articles_container_one { + padding: 0 1rem 0 1rem; + margin: 5rem 0 4rem 0; +} +#main_container .articles_container_one h2 { + font-weight: 600; + margin-bottom: 0.75rem; +} +#main_container .articles_container_one figure img { + padding: 16px 16px 0 16px; +} +#main_container .articles_container_two { + padding: 0 1rem 0 1rem; + margin: 5rem 0 4rem 0; +} +#main_container .articles_container_two h2 { + margin-bottom: 0.75rem; + font-weight: 600; +} +#main_container .articles_container_two figure img { + padding: 16px 16px 0 16px; +} +#main_container .articles_container_three { + padding: 0 1rem 0 1rem; + margin: 5rem 0 4rem 0; +} +#main_container .articles_container_three h2 { + margin-bottom: 0.75rem; + font-weight: 600; +} +#main_container .articles_container_three figure img { + padding: 16px 16px 0 16px; +} +#main_container .articles_container_four { + padding: 0 1rem 0 1rem; + margin: 5rem 0 4rem 0; +} +#main_container .articles_container_four h2 { + margin-bottom: 0.75rem; + font-weight: 600; +} +#main_container .articles_container_four figure img { + padding: 16px 16px 0 16px; +} +#main_container .articles_container_five { + padding: 0 1rem 0 1rem; + margin: 5rem 0 4rem 0; +} +#main_container .articles_container_five h2 { + margin-bottom: 0.75rem; + font-weight: 600; +} +#main_container .articles_container_five figure img { + padding: 16px 16px 0 16px; +} + +footer { + display: grid; + background-color: black; + margin-top: 6.25rem; + padding: 6.25rem 0 6.25rem 0; +} +footer p { + color: white; display: flex; + flex-direction: column; + justify-content: center; + text-align: center; } /*# sourceMappingURL=styles.css.map */ diff --git a/assets/styles/styles.css.map b/assets/styles/styles.css.map index b02f441..6018b20 100644 --- a/assets/styles/styles.css.map +++ b/assets/styles/styles.css.map @@ -1 +1 @@ -{"version":3,"sourceRoot":"","sources":["modules/_typography.scss","modules/_app.scss","components/_page_images.scss","modules/_variables.scss"],"names":[],"mappings":"AAAQ;ACAR;EACE;EACA;EACA;EACA;EACA;EACA;;;ADLF;EAAO;;;AACP;EACE;IAAO;;;AEHT;EACE,OCMW;EDLX,QCMY;EDLZ","file":"styles.css"} \ No newline at end of file +{"version":3,"sourceRoot":"","sources":["modules/_typography.scss","modules/_app.scss","components/_header.scss","modules/_variables.scss","components/_page_images.scss","components/_main.scss","components/_footer.scss"],"names":[],"mappings":"AAAQ;ACAR;EACE;EACA;EACA;EACA;EACA;EACA;;;ADLF;EAAO;;;AACP;EACE;IAAO;;;AEHT;AACE;EACA;EACA;EACA;EACA;;AACA;EACE;EACA;;AAEF;EACE;;AAEF;EACE;;AAEF;EACE;EACA;EACA;;;AAIJ;EACE;EACA;EACA;EACA;;AACA;EACE;EACA;;AAEF;EACE;EACA;;;AAIJ;EACE;EACA,kBCtCsB;EDuCtB;;AACA;EACE;EACA;EACA;;AAEF;EACE;EACA;;AAEF;EACE;;;AEpDJ;EACE,ODMW;ECLX,QDMY;ECLZ;EACA;EACA;;;ACLF;EACE;;AACA;EACE;EACA;;AAEF;EACE;EACA;;AACA;EACE;EACA;;AAGA;EACE;;AAIN;EACE;EACA;;AACA;EACE;EACA;;AAGA;EACE;;AAIN;EACE;EACA;;AACA;EACE;EACA;;AAGA;EACE;;AAIN;EACE;EACA;;AACA;EACE;EACA;;AAGA;EACE;;AAIN;EACE;EACA;;AACA;EACE;EACA;;AAGA;EACE;;;ACnER;EACE;EACA,kBHCgB;EGAhB;EACA;;AACA;EACE,OHFgB;EGGhB;EACA;EACA;EACA","file":"styles.css"} \ No newline at end of file diff --git a/assets/styles/styles.scss b/assets/styles/styles.scss index 70dde8a..0fb6242 100644 --- a/assets/styles/styles.scss +++ b/assets/styles/styles.scss @@ -8,3 +8,5 @@ // COMPONENTS @import "components/header.scss"; @import "components/page_images.scss"; +@import "components/main.scss"; +@import "components/footer.scss"; \ No newline at end of file diff --git a/index.html b/index.html index 087b2fb..5b6a5e0 100644 --- a/index.html +++ b/index.html @@ -11,45 +11,76 @@
- img +

Lorem ipsum

lorem ipsum for photos

- header_image +
+ header_image +
-
+ +

Easy to use, stylish placeholders

Just add your desired image size (width & height) after our URL, and you'll get a random image.

To get a square image, just add the size.

-
-
+ +
+ +

Specify image

Get a specific image by adding /id/{image} to the start of the url.

You can find a list of all the images here.

- img +
+ img +
-
+ +

Static Random Image

Get the same random image every time based on a seed, by adding /seed/{seed} to the start of the url.

- img +
+ img +
-
+ +

Grayscale

Get a grayscale image by appending ?grayscale to the end of the url.

- img +
+ img +
-
+ +

Blur

You can adjust the amount of blur by providing a number between 1 and 10.

- img +
+ img +
-
+ +

Advanced Usage

You may combine any of the options above. For example, to get a specific image that is grayscale and blurred.

- img +
+ img +
+ +
+

Created by David Marby & Nijiko Yonskai

+

Source

+

Having trouble? Poke @DMarby on twitter

+

Images from Unplash

+
From 17d0e1b1781f356b842c86d0608d8f1b26171dd0 Mon Sep 17 00:00:00 2001 From: Juan Date: Fri, 26 Mar 2021 22:24:58 -0500 Subject: [PATCH 3/5] Fixing mobile first --- assets/styles/components/_header.scss | 4 +-- assets/styles/components/_main.scss | 30 ++++++++++------- assets/styles/modules/_breakpoints.scss | 8 ++++- assets/styles/modules/_variables.scss | 6 +++- assets/styles/styles.css | 45 ++++++++++++++++++------- assets/styles/styles.css.map | 2 +- 6 files changed, 66 insertions(+), 29 deletions(-) diff --git a/assets/styles/components/_header.scss b/assets/styles/components/_header.scss index 4cdb1d4..5d63c68 100644 --- a/assets/styles/components/_header.scss +++ b/assets/styles/components/_header.scss @@ -8,9 +8,9 @@ padding: 0; border-radius: 8px; } - img:last-child{ //IMPORTANTE + /* img:last-child{ //IMPORTANTE PREGUNTAR A DAVID height: 200px; - } + }*/ img:nth-last-child(1){ //IMPORTANTE filter: blur(0.2px); } diff --git a/assets/styles/components/_main.scss b/assets/styles/components/_main.scss index 91f39c5..bd2a1d7 100644 --- a/assets/styles/components/_main.scss +++ b/assets/styles/components/_main.scss @@ -8,12 +8,13 @@ padding: 0 1rem 0 1rem; margin: 5rem 0 4rem 0; h2{ - font-weight: 600; margin-bottom: .75rem; + font-weight: 600; } figure{ - img{ - padding: 16px 16px 0 16px; + margin-top: 1rem; + img { + border-radius: 8px; } } } @@ -25,8 +26,9 @@ font-weight: 600; } figure{ - img{ - padding: 16px 16px 0 16px; + margin-top: 1rem; + img { + border-radius: 8px; } } } @@ -38,8 +40,9 @@ font-weight: 600; } figure{ - img{ - padding: 16px 16px 0 16px; + margin-top: 1rem; + img { + border-radius: 8px; } } } @@ -51,12 +54,13 @@ font-weight: 600; } figure{ - img{ - padding: 16px 16px 0 16px; + margin-top: 1rem; + img { + border-radius: 8px; } } } - .articles_container_five{ + .articles_container_one{ padding: 0 1rem 0 1rem; margin: 5rem 0 4rem 0; h2{ @@ -64,9 +68,11 @@ font-weight: 600; } figure{ - img{ - padding: 16px 16px 0 16px; + margin-top: 1rem; + img { + border-radius: 8px; } } } + } \ No newline at end of file diff --git a/assets/styles/modules/_breakpoints.scss b/assets/styles/modules/_breakpoints.scss index 24a485a..b21d65e 100644 --- a/assets/styles/modules/_breakpoints.scss +++ b/assets/styles/modules/_breakpoints.scss @@ -1,7 +1,13 @@ +@import "variables.scss"; //BREAKPOINTS MOBILE FIRST // Medium devices (tablets, 768px and up) -@media (min-width: 768px) {} +@media (min-width: 768px) { + figure .page_images{ + width: $imageNewWidthIpad; + height: $imageNewHeightIpad; + } +} // Large devices (desktops, 992px and up) @media (min-width: 992px) {} diff --git a/assets/styles/modules/_variables.scss b/assets/styles/modules/_variables.scss index 926da92..b136a19 100644 --- a/assets/styles/modules/_variables.scss +++ b/assets/styles/modules/_variables.scss @@ -4,10 +4,14 @@ $secondHeaderContainer :#f4f7fc; $footerMainColor: black; $footerParaphColor: white; -//All images width and height +//375 image sizes $imageWidth: 288px; $imageHeight: 190px; +//768 image sizes +$imageNewWidthIpad: 536px; +$imageNewHeightIpad: 354px; + //images spaces $imagePadding: 1rem; diff --git a/assets/styles/styles.css b/assets/styles/styles.css index 805e25b..64a0d21 100644 --- a/assets/styles/styles.css +++ b/assets/styles/styles.css @@ -8,6 +8,12 @@ text-rendering: optimizeLegibility; } +@media (min-width: 768px) { + figure .page_images { + width: 536px; + height: 354px; + } +} html { font-family: "Inter", sans-serif; } @@ -23,14 +29,14 @@ html { padding: 6.25rem 0 6.25rem 0; place-items: center; justify-content: center; + /* img:last-child{ //IMPORTANTE PREGUNTAR A DAVID + height: 200px; + }*/ } #header_container img { padding: 0; border-radius: 8px; } -#header_container img:last-child { - height: 200px; -} #header_container img:nth-last-child(1) { filter: blur(0.2px); } @@ -93,11 +99,14 @@ html { margin: 5rem 0 4rem 0; } #main_container .articles_container_one h2 { - font-weight: 600; margin-bottom: 0.75rem; + font-weight: 600; +} +#main_container .articles_container_one figure { + margin-top: 1rem; } #main_container .articles_container_one figure img { - padding: 16px 16px 0 16px; + border-radius: 8px; } #main_container .articles_container_two { padding: 0 1rem 0 1rem; @@ -107,8 +116,11 @@ html { margin-bottom: 0.75rem; font-weight: 600; } +#main_container .articles_container_two figure { + margin-top: 1rem; +} #main_container .articles_container_two figure img { - padding: 16px 16px 0 16px; + border-radius: 8px; } #main_container .articles_container_three { padding: 0 1rem 0 1rem; @@ -118,8 +130,11 @@ html { margin-bottom: 0.75rem; font-weight: 600; } +#main_container .articles_container_three figure { + margin-top: 1rem; +} #main_container .articles_container_three figure img { - padding: 16px 16px 0 16px; + border-radius: 8px; } #main_container .articles_container_four { padding: 0 1rem 0 1rem; @@ -129,19 +144,25 @@ html { margin-bottom: 0.75rem; font-weight: 600; } +#main_container .articles_container_four figure { + margin-top: 1rem; +} #main_container .articles_container_four figure img { - padding: 16px 16px 0 16px; + border-radius: 8px; } -#main_container .articles_container_five { +#main_container .articles_container_one { padding: 0 1rem 0 1rem; margin: 5rem 0 4rem 0; } -#main_container .articles_container_five h2 { +#main_container .articles_container_one h2 { margin-bottom: 0.75rem; font-weight: 600; } -#main_container .articles_container_five figure img { - padding: 16px 16px 0 16px; +#main_container .articles_container_one figure { + margin-top: 1rem; +} +#main_container .articles_container_one figure img { + border-radius: 8px; } footer { diff --git a/assets/styles/styles.css.map b/assets/styles/styles.css.map index 6018b20..3e350e6 100644 --- a/assets/styles/styles.css.map +++ b/assets/styles/styles.css.map @@ -1 +1 @@ -{"version":3,"sourceRoot":"","sources":["modules/_typography.scss","modules/_app.scss","components/_header.scss","modules/_variables.scss","components/_page_images.scss","components/_main.scss","components/_footer.scss"],"names":[],"mappings":"AAAQ;ACAR;EACE;EACA;EACA;EACA;EACA;EACA;;;ADLF;EAAO;;;AACP;EACE;IAAO;;;AEHT;AACE;EACA;EACA;EACA;EACA;;AACA;EACE;EACA;;AAEF;EACE;;AAEF;EACE;;AAEF;EACE;EACA;EACA;;;AAIJ;EACE;EACA;EACA;EACA;;AACA;EACE;EACA;;AAEF;EACE;EACA;;;AAIJ;EACE;EACA,kBCtCsB;EDuCtB;;AACA;EACE;EACA;EACA;;AAEF;EACE;EACA;;AAEF;EACE;;;AEpDJ;EACE,ODMW;ECLX,QDMY;ECLZ;EACA;EACA;;;ACLF;EACE;;AACA;EACE;EACA;;AAEF;EACE;EACA;;AACA;EACE;EACA;;AAGA;EACE;;AAIN;EACE;EACA;;AACA;EACE;EACA;;AAGA;EACE;;AAIN;EACE;EACA;;AACA;EACE;EACA;;AAGA;EACE;;AAIN;EACE;EACA;;AACA;EACE;EACA;;AAGA;EACE;;AAIN;EACE;EACA;;AACA;EACE;EACA;;AAGA;EACE;;;ACnER;EACE;EACA,kBHCgB;EGAhB;EACA;;AACA;EACE,OHFgB;EGGhB;EACA;EACA;EACA","file":"styles.css"} \ No newline at end of file +{"version":3,"sourceRoot":"","sources":["modules/_typography.scss","modules/_app.scss","modules/_breakpoints.scss","modules/_variables.scss","components/_header.scss","components/_page_images.scss","components/_main.scss","components/_footer.scss"],"names":[],"mappings":"AAAQ;ACAR;EACE;EACA;EACA;EACA;EACA;EACA;;;ACFF;EACE;IACE,OCKgB;IDJhB,QCKiB;;;AHXrB;EAAO;;;AACP;EACE;IAAO;;;AIHT;AACE;EACA;EACA;EACA;EACA;AAKD;AAAA;AAAA;;AAJC;EACE;EACA;;AAKF;EACE;;AAEF;EACE;EACA;EACA;;;AAIJ;EACE;EACA;EACA;EACA;;AACA;EACE;EACA;;AAEF;EACE;EACA;;;AAIJ;EACE;EACA,kBDtCsB;ECuCtB;;AACA;EACE;EACA;EACA;;AAEF;EACE;EACA;;AAEF;EACE;;;ACpDJ;EACE,OFMW;EELX,QFMY;EELZ;EACA;EACA;;;ACLF;EACE;;AACA;EACE;EACA;;AAEF;EACE;EACA;;AACA;EACE;EACA;;AAEF;EACE;;AACA;EACE;;AAIN;EACE;EACA;;AACA;EACE;EACA;;AAEF;EACE;;AACA;EACE;;AAIN;EACE;EACA;;AACA;EACE;EACA;;AAEF;EACE;;AACA;EACE;;AAIN;EACE;EACA;;AACA;EACE;EACA;;AAEF;EACE;;AACA;EACE;;AAIN;EACE;EACA;;AACA;EACE;EACA;;AAEF;EACE;;AACA;EACE;;;ACxER;EACE;EACA,kBJCgB;EIAhB;EACA;;AACA;EACE,OJFgB;EIGhB;EACA;EACA;EACA","file":"styles.css"} \ No newline at end of file From 96730a41a5c08afca72e0a2e3f601ebb95b2e2f9 Mon Sep 17 00:00:00 2001 From: Juan Date: Fri, 26 Mar 2021 23:06:27 -0500 Subject: [PATCH 4/5] Tablet --- assets/styles/modules/_breakpoints.scss | 32 ++++++++++++++++++++- assets/styles/styles.css | 29 +++++++++++++++++++ assets/styles/styles.css.map | 2 +- index.html | 37 +++++++++++++++---------- 4 files changed, 83 insertions(+), 17 deletions(-) diff --git a/assets/styles/modules/_breakpoints.scss b/assets/styles/modules/_breakpoints.scss index b21d65e..cf2c139 100644 --- a/assets/styles/modules/_breakpoints.scss +++ b/assets/styles/modules/_breakpoints.scss @@ -10,4 +10,34 @@ } // Large devices (desktops, 992px and up) -@media (min-width: 992px) {} +@media (min-width: 992px) { + .article_left{ + margin:0 auto; + height: 50vh; + display: grid; + grid: 100px auto 100px / repeat(2, 50%); + grid-template-areas: + "text image"; + .text_container{ + grid-area: text; + } + .img_container{ + grid-area: image; + } + } + + .article_right{ + margin:0 auto; + height: 50vh; + display: grid; + grid: 100px auto 100px / repeat(2, 50%); + grid-template-areas: + "image text"; + .img_container{ + grid-area: image; + } + .text_container{ + grid-area:text; + } + } +} diff --git a/assets/styles/styles.css b/assets/styles/styles.css index 64a0d21..a14403e 100644 --- a/assets/styles/styles.css +++ b/assets/styles/styles.css @@ -14,6 +14,35 @@ height: 354px; } } +@media (min-width: 992px) { + .article_left { + margin: 0 auto; + height: 50vh; + display: grid; + grid: 100px auto 100px/repeat(2, 50%); + grid-template-areas: "text image"; + } + .article_left .text_container { + grid-area: text; + } + .article_left .img_container { + grid-area: image; + } + + .article_right { + margin: 0 auto; + height: 50vh; + display: grid; + grid: 100px auto 100px/repeat(2, 50%); + grid-template-areas: "image text"; + } + .article_right .img_container { + grid-area: image; + } + .article_right .text_container { + grid-area: text; + } +} html { font-family: "Inter", sans-serif; } diff --git a/assets/styles/styles.css.map b/assets/styles/styles.css.map index 3e350e6..2607560 100644 --- a/assets/styles/styles.css.map +++ b/assets/styles/styles.css.map @@ -1 +1 @@ -{"version":3,"sourceRoot":"","sources":["modules/_typography.scss","modules/_app.scss","modules/_breakpoints.scss","modules/_variables.scss","components/_header.scss","components/_page_images.scss","components/_main.scss","components/_footer.scss"],"names":[],"mappings":"AAAQ;ACAR;EACE;EACA;EACA;EACA;EACA;EACA;;;ACFF;EACE;IACE,OCKgB;IDJhB,QCKiB;;;AHXrB;EAAO;;;AACP;EACE;IAAO;;;AIHT;AACE;EACA;EACA;EACA;EACA;AAKD;AAAA;AAAA;;AAJC;EACE;EACA;;AAKF;EACE;;AAEF;EACE;EACA;EACA;;;AAIJ;EACE;EACA;EACA;EACA;;AACA;EACE;EACA;;AAEF;EACE;EACA;;;AAIJ;EACE;EACA,kBDtCsB;ECuCtB;;AACA;EACE;EACA;EACA;;AAEF;EACE;EACA;;AAEF;EACE;;;ACpDJ;EACE,OFMW;EELX,QFMY;EELZ;EACA;EACA;;;ACLF;EACE;;AACA;EACE;EACA;;AAEF;EACE;EACA;;AACA;EACE;EACA;;AAEF;EACE;;AACA;EACE;;AAIN;EACE;EACA;;AACA;EACE;EACA;;AAEF;EACE;;AACA;EACE;;AAIN;EACE;EACA;;AACA;EACE;EACA;;AAEF;EACE;;AACA;EACE;;AAIN;EACE;EACA;;AACA;EACE;EACA;;AAEF;EACE;;AACA;EACE;;AAIN;EACE;EACA;;AACA;EACE;EACA;;AAEF;EACE;;AACA;EACE;;;ACxER;EACE;EACA,kBJCgB;EIAhB;EACA;;AACA;EACE,OJFgB;EIGhB;EACA;EACA;EACA","file":"styles.css"} \ No newline at end of file +{"version":3,"sourceRoot":"","sources":["modules/_typography.scss","modules/_app.scss","modules/_breakpoints.scss","modules/_variables.scss","components/_header.scss","components/_page_images.scss","components/_main.scss","components/_footer.scss"],"names":[],"mappings":"AAAQ;ACAR;EACE;EACA;EACA;EACA;EACA;EACA;;;ACFF;EACE;IACE,OCKgB;IDJhB,QCKiB;;;ADArB;EACE;IACE;IACA;IACA;IACA;IACA,qBACE;;EACF;IACE;;EAEF;IACE;;;EAIJ;IACE;IACA;IACA;IACA;IACA,qBACE;;EACF;IACE;;EAEF;IACE;;;AFtCN;EAAO;;;AACP;EACE;IAAO;;;AIHT;AACE;EACA;EACA;EACA;EACA;AAKD;AAAA;AAAA;;AAJC;EACE;EACA;;AAKF;EACE;;AAEF;EACE;EACA;EACA;;;AAIJ;EACE;EACA;EACA;EACA;;AACA;EACE;EACA;;AAEF;EACE;EACA;;;AAIJ;EACE;EACA,kBDtCsB;ECuCtB;;AACA;EACE;EACA;EACA;;AAEF;EACE;EACA;;AAEF;EACE;;;ACpDJ;EACE,OFMW;EELX,QFMY;EELZ;EACA;EACA;;;ACLF;EACE;;AACA;EACE;EACA;;AAEF;EACE;EACA;;AACA;EACE;EACA;;AAEF;EACE;;AACA;EACE;;AAIN;EACE;EACA;;AACA;EACE;EACA;;AAEF;EACE;;AACA;EACE;;AAIN;EACE;EACA;;AACA;EACE;EACA;;AAEF;EACE;;AACA;EACE;;AAIN;EACE;EACA;;AACA;EACE;EACA;;AAEF;EACE;;AACA;EACE;;AAIN;EACE;EACA;;AACA;EACE;EACA;;AAEF;EACE;;AACA;EACE;;;ACxER;EACE;EACA,kBJCgB;EIAhB;EACA;;AACA;EACE,OJFgB;EIGhB;EACA;EACA;EACA","file":"styles.css"} \ No newline at end of file diff --git a/index.html b/index.html index 5b6a5e0..6e7bfcc 100644 --- a/index.html +++ b/index.html @@ -33,32 +33,39 @@

Easy to use, stylish placeholders

-
-

Specify image

-

Get a specific image by adding /id/{image} to the start of the url.

-

You can find a list of all the images here.

-
+
+
+

Specify image

+

Get a specific image by adding /id/{image} to the start of the url.

+

You can find a list of all the images here.

+
+
img
+
-
-

Static Random Image

-

Get the same random image every time based on a seed, by adding /seed/{seed} to the start of the url.

-
+
+
+

Static Random Image

+

Get the same random image every time based on a seed, by adding /seed/{seed} to the start of the url.

+
+
img
-
-

Grayscale

-

Get a grayscale image by appending ?grayscale to the end of the url.

-
+
+
+

Grayscale

+

Get a grayscale image by appending ?grayscale to the end of the url.

+
+
img
-
+

Blur

You can adjust the amount of blur by providing a number between 1 and 10.

@@ -66,7 +73,7 @@

Blur

-
+

Advanced Usage

You may combine any of the options above. For example, to get a specific image that is grayscale and blurred.

From 2f7a99e640f6b67ccf1638dd70b0ae7c72bc2fe3 Mon Sep 17 00:00:00 2001 From: Juan Date: Sat, 27 Mar 2021 00:42:24 -0500 Subject: [PATCH 5/5] PC --- assets/styles/components/_main.scss | 63 +++++-------------- assets/styles/modules/_breakpoints.scss | 21 +++++++ assets/styles/styles.css | 81 ++++++++++--------------- assets/styles/styles.css.map | 2 +- index.html | 25 +++++--- 5 files changed, 85 insertions(+), 107 deletions(-) diff --git a/assets/styles/components/_main.scss b/assets/styles/components/_main.scss index bd2a1d7..093e691 100644 --- a/assets/styles/components/_main.scss +++ b/assets/styles/components/_main.scss @@ -1,78 +1,45 @@ -#main_container{ +#main_container { display: grid; + width: 90%; + margin: 0 auto; img { padding: 0; border-radius: 8px; } - .articles_container_one{ - padding: 0 1rem 0 1rem; - margin: 5rem 0 4rem 0; - h2{ - margin-bottom: .75rem; - font-weight: 600; - } - figure{ - margin-top: 1rem; - img { - border-radius: 8px; - } - } - } - .articles_container_two{ + + .articles_container_one, .articles_container_three, .articles_container_five { padding: 0 1rem 0 1rem; margin: 5rem 0 4rem 0; - h2{ + h2 { margin-bottom: .75rem; font-weight: 600; } - figure{ - margin-top: 1rem; - img { - border-radius: 8px; - } - } - } - .articles_container_three{ - padding: 0 1rem 0 1rem; - margin: 5rem 0 4rem 0; - h2{ - margin-bottom: .75rem; - font-weight: 600; + p { + width: 80%; } - figure{ + figure { margin-top: 1rem; img { border-radius: 8px; } } } - .articles_container_four{ + + .articles_container_two, .articles_container_four { padding: 0 1rem 0 1rem; margin: 5rem 0 4rem 0; - h2{ + h2 { margin-bottom: .75rem; font-weight: 600; } - figure{ - margin-top: 1rem; - img { - border-radius: 8px; - } - } - } - .articles_container_one{ - padding: 0 1rem 0 1rem; - margin: 5rem 0 4rem 0; - h2{ - margin-bottom: .75rem; - font-weight: 600; + p { + width: 80%; } - figure{ + figure { margin-top: 1rem; img { border-radius: 8px; } } } - } \ No newline at end of file diff --git a/assets/styles/modules/_breakpoints.scss b/assets/styles/modules/_breakpoints.scss index cf2c139..5e8cab1 100644 --- a/assets/styles/modules/_breakpoints.scss +++ b/assets/styles/modules/_breakpoints.scss @@ -11,6 +11,27 @@ // Large devices (desktops, 992px and up) @media (min-width: 992px) { + + #header_container{ + padding: 0 1rem 0 1rem; + margin: 6rem 0 5rem 0; + height: 50vh; + display: grid; + grid: 100px auto 100px / repeat(2, 50%); + grid-template-areas: + "text image"; + .header_container_text{ + display: flex; + justify-content: space-around; + } + .header_main_img{ + grid-area: image; + } + .header_container_text{ + grid-area: text; + } + } + .article_left{ margin:0 auto; height: 50vh; diff --git a/assets/styles/styles.css b/assets/styles/styles.css index a14403e..6003e3c 100644 --- a/assets/styles/styles.css +++ b/assets/styles/styles.css @@ -15,6 +15,25 @@ } } @media (min-width: 992px) { + #header_container { + padding: 0 1rem 0 1rem; + margin: 6rem 0 5rem 0; + height: 50vh; + display: grid; + grid: 100px auto 100px/repeat(2, 50%); + grid-template-areas: "text image"; + } + #header_container .header_container_text { + display: flex; + justify-content: space-around; + } + #header_container .header_main_img { + grid-area: image; + } + #header_container .header_container_text { + grid-area: text; + } + .article_left { margin: 0 auto; height: 50vh; @@ -118,79 +137,45 @@ html { #main_container { display: grid; + width: 90%; + margin: 0 auto; } #main_container img { padding: 0; border-radius: 8px; } -#main_container .articles_container_one { +#main_container .articles_container_one, #main_container .articles_container_three, #main_container .articles_container_five { padding: 0 1rem 0 1rem; margin: 5rem 0 4rem 0; } -#main_container .articles_container_one h2 { +#main_container .articles_container_one h2, #main_container .articles_container_three h2, #main_container .articles_container_five h2 { margin-bottom: 0.75rem; font-weight: 600; } -#main_container .articles_container_one figure { - margin-top: 1rem; -} -#main_container .articles_container_one figure img { - border-radius: 8px; -} -#main_container .articles_container_two { - padding: 0 1rem 0 1rem; - margin: 5rem 0 4rem 0; -} -#main_container .articles_container_two h2 { - margin-bottom: 0.75rem; - font-weight: 600; +#main_container .articles_container_one p, #main_container .articles_container_three p, #main_container .articles_container_five p { + width: 80%; } -#main_container .articles_container_two figure { +#main_container .articles_container_one figure, #main_container .articles_container_three figure, #main_container .articles_container_five figure { margin-top: 1rem; } -#main_container .articles_container_two figure img { +#main_container .articles_container_one figure img, #main_container .articles_container_three figure img, #main_container .articles_container_five figure img { border-radius: 8px; } -#main_container .articles_container_three { +#main_container .articles_container_two, #main_container .articles_container_four { padding: 0 1rem 0 1rem; margin: 5rem 0 4rem 0; } -#main_container .articles_container_three h2 { +#main_container .articles_container_two h2, #main_container .articles_container_four h2 { margin-bottom: 0.75rem; font-weight: 600; } -#main_container .articles_container_three figure { - margin-top: 1rem; -} -#main_container .articles_container_three figure img { - border-radius: 8px; -} -#main_container .articles_container_four { - padding: 0 1rem 0 1rem; - margin: 5rem 0 4rem 0; -} -#main_container .articles_container_four h2 { - margin-bottom: 0.75rem; - font-weight: 600; -} -#main_container .articles_container_four figure { - margin-top: 1rem; -} -#main_container .articles_container_four figure img { - border-radius: 8px; -} -#main_container .articles_container_one { - padding: 0 1rem 0 1rem; - margin: 5rem 0 4rem 0; -} -#main_container .articles_container_one h2 { - margin-bottom: 0.75rem; - font-weight: 600; +#main_container .articles_container_two p, #main_container .articles_container_four p { + width: 80%; } -#main_container .articles_container_one figure { +#main_container .articles_container_two figure, #main_container .articles_container_four figure { margin-top: 1rem; } -#main_container .articles_container_one figure img { +#main_container .articles_container_two figure img, #main_container .articles_container_four figure img { border-radius: 8px; } diff --git a/assets/styles/styles.css.map b/assets/styles/styles.css.map index 2607560..9b00c59 100644 --- a/assets/styles/styles.css.map +++ b/assets/styles/styles.css.map @@ -1 +1 @@ -{"version":3,"sourceRoot":"","sources":["modules/_typography.scss","modules/_app.scss","modules/_breakpoints.scss","modules/_variables.scss","components/_header.scss","components/_page_images.scss","components/_main.scss","components/_footer.scss"],"names":[],"mappings":"AAAQ;ACAR;EACE;EACA;EACA;EACA;EACA;EACA;;;ACFF;EACE;IACE,OCKgB;IDJhB,QCKiB;;;ADArB;EACE;IACE;IACA;IACA;IACA;IACA,qBACE;;EACF;IACE;;EAEF;IACE;;;EAIJ;IACE;IACA;IACA;IACA;IACA,qBACE;;EACF;IACE;;EAEF;IACE;;;AFtCN;EAAO;;;AACP;EACE;IAAO;;;AIHT;AACE;EACA;EACA;EACA;EACA;AAKD;AAAA;AAAA;;AAJC;EACE;EACA;;AAKF;EACE;;AAEF;EACE;EACA;EACA;;;AAIJ;EACE;EACA;EACA;EACA;;AACA;EACE;EACA;;AAEF;EACE;EACA;;;AAIJ;EACE;EACA,kBDtCsB;ECuCtB;;AACA;EACE;EACA;EACA;;AAEF;EACE;EACA;;AAEF;EACE;;;ACpDJ;EACE,OFMW;EELX,QFMY;EELZ;EACA;EACA;;;ACLF;EACE;;AACA;EACE;EACA;;AAEF;EACE;EACA;;AACA;EACE;EACA;;AAEF;EACE;;AACA;EACE;;AAIN;EACE;EACA;;AACA;EACE;EACA;;AAEF;EACE;;AACA;EACE;;AAIN;EACE;EACA;;AACA;EACE;EACA;;AAEF;EACE;;AACA;EACE;;AAIN;EACE;EACA;;AACA;EACE;EACA;;AAEF;EACE;;AACA;EACE;;AAIN;EACE;EACA;;AACA;EACE;EACA;;AAEF;EACE;;AACA;EACE;;;ACxER;EACE;EACA,kBJCgB;EIAhB;EACA;;AACA;EACE,OJFgB;EIGhB;EACA;EACA;EACA","file":"styles.css"} \ No newline at end of file +{"version":3,"sourceRoot":"","sources":["modules/_typography.scss","modules/_app.scss","modules/_breakpoints.scss","modules/_variables.scss","components/_header.scss","components/_page_images.scss","components/_main.scss","components/_footer.scss"],"names":[],"mappings":"AAAQ;ACAR;EACE;EACA;EACA;EACA;EACA;EACA;;;ACFF;EACE;IACE,OCKgB;IDJhB,QCKiB;;;ADArB;EAEE;IACE;IACA;IACA;IACA;IACA;IACA,qBACE;;EACD;IACE;IACA;;EAEH;IACE;;EAEF;IACE;;;EAIJ;IACE;IACA;IACA;IACA;IACA,qBACE;;EACF;IACE;;EAEF;IACE;;;EAIJ;IACE;IACA;IACA;IACA;IACA,qBACE;;EACF;IACE;;EAEF;IACE;;;AF3DN;EAAO;;;AACP;EACE;IAAO;;;AIHT;AACE;EACA;EACA;EACA;EACA;AAKD;AAAA;AAAA;;AAJC;EACE;EACA;;AAKF;EACE;;AAEF;EACE;EACA;EACA;;;AAIJ;EACE;EACA;EACA;EACA;;AACA;EACE;EACA;;AAEF;EACE;EACA;;;AAIJ;EACE;EACA,kBDtCsB;ECuCtB;;AACA;EACE;EACA;EACA;;AAEF;EACE;EACA;;AAEF;EACE;;;ACpDJ;EACE,OFMW;EELX,QFMY;EELZ;EACA;EACA;;;ACLF;EACE;EACA;EACA;;AACA;EACE;EACA;;AAGF;EACE;EACA;;AACA;EACE;EACA;;AAEF;EACE;;AAEF;EACE;;AACA;EACE;;AAKN;EACE;EACA;;AACA;EACE;EACA;;AAEF;EACE;;AAEF;EACE;;AACA;EACE;;;ACxCR;EACE;EACA,kBJCgB;EIAhB;EACA;;AACA;EACE,OJFgB;EIGhB;EACA;EACA;EACA","file":"styles.css"} \ No newline at end of file diff --git a/index.html b/index.html index 6e7bfcc..ce9ba5e 100644 --- a/index.html +++ b/index.html @@ -8,19 +8,20 @@ Sass Project + +
-
+
-

Lorem ipsum

-

lorem ipsum for photos

+

Lorem ipsum lorem ipsum
for photos

-
+
header_image
@@ -66,18 +67,22 @@

Grayscale

-

Blur

-

You can adjust the amount of blur by providing a number between 1 and 10.

-
+
+

Blur

+

You can adjust the amount of blur by providing a number between 1 and 10.

+
+
img
-

Advanced Usage

-

You may combine any of the options above. For example, to get a specific image that is grayscale and +

+

Advanced Usage

+

You may combine any of the options above. For example, to get a specific image that is grayscale and blurred.

-
+
+
img