From 951425adb95c25262ad4868172fe0a9a5ce55c82 Mon Sep 17 00:00:00 2001 From: DiegoMorales Date: Tue, 27 Sep 2022 17:16:48 -0500 Subject: [PATCH 1/7] Mobile design --- assets/styles/components/_hero.scss | 48 ++++++ assets/styles/components/_main.scss | 95 ++++++++++++ assets/styles/modules/_app.scss | 17 +++ assets/styles/modules/_breakpoints.scss | 15 +- assets/styles/modules/_mixins.scss | 31 ++++ assets/styles/modules/_typography.scss | 4 + assets/styles/modules/_variables.scss | 2 + assets/styles/styles.css | 190 +++++++++++++++++++++++- assets/styles/styles.css.map | 2 +- assets/styles/styles.scss | 1 + index.html | 151 ++++++++++++++++++- 11 files changed, 547 insertions(+), 9 deletions(-) diff --git a/assets/styles/components/_hero.scss b/assets/styles/components/_hero.scss index e69de29..40c1570 100644 --- a/assets/styles/components/_hero.scss +++ b/assets/styles/components/_hero.scss @@ -0,0 +1,48 @@ +@import "../modules/variables"; +@import "../modules/breakpoints"; +@import "../modules/mixins"; + +.header-container { + margin-top: 100px; + margin-bottom: 100px; + + &__hero { + display: grid; + gap: 30px; + + &__home { + width: 100%; + display: flex; + flex-direction: column; + padding-left: 20px; + align-items: left; + + &__icon-title { + display: flex; + flex-direction: row; + + ion-icon { + position: relative; + width: 42px; + margin-right: 15px; + top: 7px; + font-size: 40px; + } + } + + h1 { + font-family: $title-font; + font-size: 40px; + font-weight: 600; + } + + p { + font-family: $title-font; + font-size: 25px; + font-weight: 300; + } + + } + + } +} diff --git a/assets/styles/components/_main.scss b/assets/styles/components/_main.scss index e69de29..482b753 100644 --- a/assets/styles/components/_main.scss +++ b/assets/styles/components/_main.scss @@ -0,0 +1,95 @@ +@import "../modules/variables"; +@import "../modules/breakpoints"; +@import "../modules/mixins"; + + +.main-container { + margin: 0; + padding: 0; + + &__use-container { + padding-top: 100px; + padding-bottom: 100px; + background-color: $background; + text-align: center; + + &__first-section { + + h2 { + font-size: 36px; + margin-bottom: 18px; + } + + p { + font-size: 16px; + line-height: 1.6em; + } + + &__light-container { + @extend %light-container; + + &__link-a { + @extend %link-a; + } + } + } + + } + + &__opt-container { + margin: 0; + padding-top: 100px; + padding-bottom: 100px; + + &__article-container { + padding-top: 100px; + padding-bottom: 100px; + + &__info { + text-align: left; + padding: 0 16px; + + h2 { + margin-bottom: 18px; + } + + p { + font-size: 16px; + line-height: 1.6em; + } + + &__dark-container { + @extend %dark-container; + + a { + @extend %link-a; + } + + code { + color: $colorDark; + } + } + } + + &__image { + padding: 1rem; + } + } + } + +} + +.footer-section { + width: 100%; + height: 24rem; + background-color: $colorDark; + padding: 100px 0; + margin-top: 100px; + + &__text { + text-align: center; + padding: 30px 50px; + color: $colorLight; + } + +} \ No newline at end of file diff --git a/assets/styles/modules/_app.scss b/assets/styles/modules/_app.scss index cdfd8ae..f825e99 100644 --- a/assets/styles/modules/_app.scss +++ b/assets/styles/modules/_app.scss @@ -6,3 +6,20 @@ text-decoration: none; text-rendering: optimizeLegibility; } + +img { + width: 100%; + border-radius: 10px; + box-shadow: 0 10px 10px 0 rgba(0, 0, 0, 0.15); +} + +code { + border-radius: 5px; + padding: 3px; + background-color: #F2F2F2; + color: #3C3C3C; +} + +header, main { + padding: 20px; +} \ No newline at end of file diff --git a/assets/styles/modules/_breakpoints.scss b/assets/styles/modules/_breakpoints.scss index bbbea70..b64331d 100644 --- a/assets/styles/modules/_breakpoints.scss +++ b/assets/styles/modules/_breakpoints.scss @@ -1,8 +1,13 @@ //BREAKPOINTS MOBILE FIRST -@import "variables"; -// Medium devices (tablets, 768px and up) -@media (min-width: 768px) {} +@mixin viewport-medium { + @media(min-width: 768px) { + @content; + } +} -// Large devices (desktops, 992px and up) -@media (min-width: 992px) {} +@mixin viewport-large { + @media(min-width: 1366px) { + @content; + } +} diff --git a/assets/styles/modules/_mixins.scss b/assets/styles/modules/_mixins.scss index e69de29..2235021 100644 --- a/assets/styles/modules/_mixins.scss +++ b/assets/styles/modules/_mixins.scss @@ -0,0 +1,31 @@ +@mixin text($size, $color, $weight) { + font-size: $size; + color: $color; + font-weight: $weight; +} + +%link-a { + font-family: SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace; +} + +%light-container { + width: 100%; + font-size: 14px; + border-radius: 4px; + padding: 1em; + margin-top: 1em; + margin-bottom: 2em; + background: white; + padding: 10px auto; +} + +%dark-container { + width: 100%; + font-size: 14px; + border-radius: 4px; + padding: 1em; + margin-top: 1em; + margin-bottom: 2em; + background: #EBEEF0; + padding: 10px auto; +} diff --git a/assets/styles/modules/_typography.scss b/assets/styles/modules/_typography.scss index f6d5096..bdf4f76 100644 --- a/assets/styles/modules/_typography.scss +++ b/assets/styles/modules/_typography.scss @@ -1,5 +1,9 @@ @import url('https://rsms.me/inter/inter.css'); html { font-family: 'Inter', sans-serif; } + +@import url('https://fonts.googleapis.com/css2?family=Work+Sans:wght@100;200;300;400;500;600;700&display=swap'); +$title-font: 'Work Sans', sans-serif; + @supports (font-variation-settings: normal) { html { font-family: 'Inter var', sans-serif; } } diff --git a/assets/styles/modules/_variables.scss b/assets/styles/modules/_variables.scss index 62b9166..4b8bd9a 100644 --- a/assets/styles/modules/_variables.scss +++ b/assets/styles/modules/_variables.scss @@ -1,2 +1,4 @@ $colorLight: #fff; $colorDark: #000; + +$background: #F4F7FC; \ No newline at end of file diff --git a/assets/styles/styles.css b/assets/styles/styles.css index 84eb7fe..c6b0ca4 100644 --- a/assets/styles/styles.css +++ b/assets/styles/styles.css @@ -1,4 +1,5 @@ @import url("https://rsms.me/inter/inter.css"); +@import url("https://fonts.googleapis.com/css2?family=Work+Sans:wght@100;200;300;400;500;600;700&display=swap"); * { box-sizing: border-box; margin: 0; @@ -8,6 +9,49 @@ text-rendering: optimizeLegibility; } +img { + width: 100%; + border-radius: 10px; + box-shadow: 0 10px 10px 0 rgba(0, 0, 0, 0.15); +} + +code { + border-radius: 5px; + padding: 3px; + background-color: #F2F2F2; + color: #3C3C3C; +} + +header, main { + padding: 20px; +} + +.main-container__opt-container__article-container__info__dark-container a, .main-container__use-container__first-section__light-container__link-a { + font-family: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; +} + +.main-container__use-container__first-section__light-container { + width: 100%; + font-size: 14px; + border-radius: 4px; + padding: 1em; + margin-top: 1em; + margin-bottom: 2em; + background: white; + padding: 10px auto; +} + +.main-container__opt-container__article-container__info__dark-container { + width: 100%; + font-size: 14px; + border-radius: 4px; + padding: 1em; + margin-top: 1em; + margin-bottom: 2em; + background: #EBEEF0; + padding: 10px auto; +} + html { font-family: "Inter", sans-serif; } @@ -17,5 +61,149 @@ html { font-family: "Inter var", sans-serif; } } +.main-container__opt-container__article-container__info__dark-container a, .main-container__use-container__first-section__light-container__link-a { + font-family: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; +} + +.main-container__use-container__first-section__light-container { + width: 100%; + font-size: 14px; + border-radius: 4px; + padding: 1em; + margin-top: 1em; + margin-bottom: 2em; + background: white; + padding: 10px auto; +} -/*# sourceMappingURL=styles.css.map */ +.main-container__opt-container__article-container__info__dark-container { + width: 100%; + font-size: 14px; + border-radius: 4px; + padding: 1em; + margin-top: 1em; + margin-bottom: 2em; + background: #EBEEF0; + padding: 10px auto; +} + +.main-container { + margin: 0; + padding: 0; +} +.main-container__use-container { + padding-top: 100px; + padding-bottom: 100px; + background-color: #F4F7FC; + text-align: center; +} +.main-container__use-container__first-section h2 { + font-size: 36px; + margin-bottom: 18px; +} +.main-container__use-container__first-section p { + font-size: 16px; + line-height: 1.6em; +} +.main-container__opt-container { + margin: 0; + padding-top: 100px; + padding-bottom: 100px; +} +.main-container__opt-container__article-container { + padding-top: 100px; + padding-bottom: 100px; +} +.main-container__opt-container__article-container__info { + text-align: left; + padding: 0 16px; +} +.main-container__opt-container__article-container__info h2 { + margin-bottom: 18px; +} +.main-container__opt-container__article-container__info p { + font-size: 16px; + line-height: 1.6em; +} +.main-container__opt-container__article-container__info__dark-container code { + color: #000; +} +.main-container__opt-container__article-container__image { + padding: 1rem; +} + +.footer-section { + width: 100%; + height: 24rem; + background-color: #000; + padding: 100px 0; + margin-top: 100px; +} +.footer-section__text { + text-align: center; + padding: 30px 50px; + color: #fff; +} + +.main-container__use-container__first-section__light-container__link-a, .main-container__opt-container__article-container__info__dark-container a { + font-family: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; +} + +.main-container__use-container__first-section__light-container { + width: 100%; + font-size: 14px; + border-radius: 4px; + padding: 1em; + margin-top: 1em; + margin-bottom: 2em; + background: white; + padding: 10px auto; +} + +.main-container__opt-container__article-container__info__dark-container { + width: 100%; + font-size: 14px; + border-radius: 4px; + padding: 1em; + margin-top: 1em; + margin-bottom: 2em; + background: #EBEEF0; + padding: 10px auto; +} + +.header-container { + margin-top: 100px; + margin-bottom: 100px; +} +.header-container__hero { + display: grid; + gap: 30px; +} +.header-container__hero__home { + width: 100%; + display: flex; + flex-direction: column; + padding-left: 20px; + align-items: left; +} +.header-container__hero__home__icon-title { + display: flex; + flex-direction: row; +} +.header-container__hero__home__icon-title ion-icon { + position: relative; + width: 42px; + margin-right: 15px; + top: 7px; + font-size: 40px; +} +.header-container__hero__home h1 { + font-family: "Work Sans", sans-serif; + font-size: 40px; + font-weight: 600; +} +.header-container__hero__home p { + font-family: "Work Sans", sans-serif; + font-size: 25px; + font-weight: 300; +}/*# sourceMappingURL=styles.css.map */ \ No newline at end of file diff --git a/assets/styles/styles.css.map b/assets/styles/styles.css.map index f39486f..8fc344a 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"],"names":[],"mappings":"AAAQ;ACAR;EACE;EACA;EACA;EACA;EACA;EACA;;;ADLF;EAAO;;;AACP;EACE;IAAO","file":"styles.css"} \ No newline at end of file +{"version":3,"sources":["modules/_typography.scss","modules/_app.scss","styles.css","modules/_mixins.scss","components/_main.scss","modules/_variables.scss","components/_hero.scss"],"names":[],"mappings":"AAAQ,8CAAA;AAGA,+GAAA;ACHR;EACE,sBAAA;EACA,SAAA;EACA,UAAA;EACA,UAAA;EACA,qBAAA;EACA,kCAAA;ACGF;;ADAA;EACE,WAAA;EACA,mBAAA;EACA,6CAAA;ACGF;;ADAA;EACE,kBAAA;EACA,YAAA;EACA,yBAAA;EACA,cAAA;ACGF;;ADAA;EACE,aAAA;ACGF;;ACpBA;EACI,iGAAA;ADuBJ;;ACpBA;EACI,WAAA;EACA,eAAA;EACA,kBAAA;EACA,YAAA;EACA,eAAA;EACA,kBAAA;EACA,iBAAA;EACA,kBAAA;ADuBJ;;ACpBA;EACI,WAAA;EACA,eAAA;EACA,kBAAA;EACA,YAAA;EACA,eAAA;EACA,kBAAA;EACA,mBAAA;EACA,kBAAA;ADuBJ;;AFnDA;EAAO,gCAAA;AEuDP;;AFlDA;EACE;IAAO,oCAAA;EEsDP;AACF;ACxDA;EACI,iGAAA;AD0DJ;;ACvDA;EACI,WAAA;EACA,eAAA;EACA,kBAAA;EACA,YAAA;EACA,eAAA;EACA,kBAAA;EACA,iBAAA;EACA,kBAAA;AD0DJ;;ACvDA;EACI,WAAA;EACA,eAAA;EACA,kBAAA;EACA,YAAA;EACA,eAAA;EACA,kBAAA;EACA,mBAAA;EACA,kBAAA;AD0DJ;;AElFA;EACI,SAAA;EACA,UAAA;AFqFJ;AEnFI;EACI,kBAAA;EACA,qBAAA;EACA,yBCTK;EDUL,kBAAA;AFqFR;AEjFY;EACI,eAAA;EACA,mBAAA;AFmFhB;AEhFY;EACI,eAAA;EACA,kBAAA;AFkFhB;AEpEI;EACI,SAAA;EACA,kBAAA;EACA,qBAAA;AFsER;AEpEQ;EACI,kBAAA;EACA,qBAAA;AFsEZ;AEpEY;EACI,gBAAA;EACA,eAAA;AFsEhB;AEpEgB;EACI,mBAAA;AFsEpB;AEnEgB;EACI,eAAA;EACA,kBAAA;AFqEpB;AE3DoB;EACI,WCnEZ;AHgIZ;AExDY;EACI,aAAA;AF0DhB;;AEnDA;EACI,WAAA;EACA,aAAA;EACA,sBCnFQ;EDoFR,gBAAA;EACA,iBAAA;AFsDJ;AEpDI;EACI,kBAAA;EACA,kBAAA;EACA,WC3FK;AHiJb;;AC3IA;EACI,iGAAA;AD8IJ;;AC3IA;EACI,WAAA;EACA,eAAA;EACA,kBAAA;EACA,YAAA;EACA,eAAA;EACA,kBAAA;EACA,iBAAA;EACA,kBAAA;AD8IJ;;AC3IA;EACI,WAAA;EACA,eAAA;EACA,kBAAA;EACA,YAAA;EACA,eAAA;EACA,kBAAA;EACA,mBAAA;EACA,kBAAA;AD8IJ;;AIvKA;EACI,iBAAA;EACA,oBAAA;AJ0KJ;AIxKI;EACI,aAAA;EACA,SAAA;AJ0KR;AIxKQ;EACI,WAAA;EACA,aAAA;EACA,sBAAA;EACA,kBAAA;EACA,iBAAA;AJ0KZ;AIxKY;EACI,aAAA;EACA,mBAAA;AJ0KhB;AIxKgB;EACI,kBAAA;EACA,WAAA;EACA,kBAAA;EACA,QAAA;EACA,eAAA;AJ0KpB;AItKY;EACI,oCN7BH;EM8BG,eAAA;EACA,gBAAA;AJwKhB;AIrKY;EACI,oCNnCH;EMoCG,eAAA;EACA,gBAAA;AJuKhB","file":"styles.css"} \ No newline at end of file diff --git a/assets/styles/styles.scss b/assets/styles/styles.scss index 43949c9..107f11c 100644 --- a/assets/styles/styles.scss +++ b/assets/styles/styles.scss @@ -8,3 +8,4 @@ // COMPONENTS @import "components/main.scss"; @import "components/hero.scss"; + diff --git a/index.html b/index.html index 747a38f..cb1c195 100644 --- a/index.html +++ b/index.html @@ -1,12 +1,159 @@ + + + + + + Sass Project + -

Hello world!

+
+
+
+
+ +

Lorem Picsum

+
+

The Lorem Ipsum for photos

+
+
+ image +
+
+
+ +
+
+
+

Easy to use, stylish placeholders

+

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

+
+ https://picsum.photos/200/300 +
+

To get a square image, just add the size

+
+ https://picsum.photos/200/300 +
+
+
+ +
+ + + + + + + + +
+
+

Advance Usage

+

You may combine any of the options above.

+

For example, to get a specific image that is grayscale and blurred

+
+ https://picsum.photos/id/870/200/300?grayscale&blur=2 +
+ +

To request multiple images of the same size in your browser, add the random query to + prevent the images from being cached

+
+ <img src="https://picsum.photos/200/300?random=1"> + <img src="https://picsum.photos/200/300?random=2"> +
+ +

If you need a file ending, you can add .jpg to the end of the url.

+
+ https://picsum.photos/200/300.jpg +
+ +

To get an image in the WebP format, you can add .webp to the end of the url.

+
+ https://picsum.photos/200/300.webp +
+
+ +
+ image +
+
+
+ +
+ + + + - + + \ No newline at end of file From e8a682efd890769bf233d98a9d6f17e9fc84b5b4 Mon Sep 17 00:00:00 2001 From: DiegoMorales Date: Thu, 29 Sep 2022 16:45:45 -0500 Subject: [PATCH 2/7] Tablet design --- assets/styles/components/_hero.scss | 12 ++++++++++++ assets/styles/components/_main.scss | 9 +++++++++ assets/styles/styles.css | 23 +++++++++++++++++++++++ assets/styles/styles.css.map | 2 +- index.html | 14 +++++++------- 5 files changed, 52 insertions(+), 8 deletions(-) diff --git a/assets/styles/components/_hero.scss b/assets/styles/components/_hero.scss index 40c1570..bae2417 100644 --- a/assets/styles/components/_hero.scss +++ b/assets/styles/components/_hero.scss @@ -6,6 +6,12 @@ margin-top: 100px; margin-bottom: 100px; + @include viewport-medium { + text-align: center; + padding: 50px 120px; + margin: 100px auto; + } + &__hero { display: grid; gap: 30px; @@ -17,9 +23,14 @@ padding-left: 20px; align-items: left; + @include viewport-medium { + align-items: center; + } + &__icon-title { display: flex; flex-direction: row; + /* justify-content: left; */ ion-icon { position: relative; @@ -37,6 +48,7 @@ } p { + margin: 10px; font-family: $title-font; font-size: 25px; font-weight: 300; diff --git a/assets/styles/components/_main.scss b/assets/styles/components/_main.scss index 482b753..f1fbba7 100644 --- a/assets/styles/components/_main.scss +++ b/assets/styles/components/_main.scss @@ -41,6 +41,11 @@ padding-top: 100px; padding-bottom: 100px; + /* @include viewport-medium { + padding: 50px 120px; + margin: 100px auto; + } */ + &__article-container { padding-top: 100px; padding-bottom: 100px; @@ -73,6 +78,10 @@ &__image { padding: 1rem; + + @include viewport-medium { + width: 70%; + } } } } diff --git a/assets/styles/styles.css b/assets/styles/styles.css index c6b0ca4..955f4ec 100644 --- a/assets/styles/styles.css +++ b/assets/styles/styles.css @@ -109,6 +109,10 @@ html { margin: 0; padding-top: 100px; padding-bottom: 100px; + /* @include viewport-medium { + padding: 50px 120px; + margin: 100px auto; + } */ } .main-container__opt-container__article-container { padding-top: 100px; @@ -131,6 +135,11 @@ html { .main-container__opt-container__article-container__image { padding: 1rem; } +@media (min-width: 768px) { + .main-container__opt-container__article-container__image { + width: 70%; + } +} .footer-section { width: 100%; @@ -175,6 +184,13 @@ html { margin-top: 100px; margin-bottom: 100px; } +@media (min-width: 768px) { + .header-container { + text-align: center; + padding: 50px 120px; + margin: 100px auto; + } +} .header-container__hero { display: grid; gap: 30px; @@ -186,9 +202,15 @@ html { padding-left: 20px; align-items: left; } +@media (min-width: 768px) { + .header-container__hero__home { + align-items: center; + } +} .header-container__hero__home__icon-title { display: flex; flex-direction: row; + /* justify-content: left; */ } .header-container__hero__home__icon-title ion-icon { position: relative; @@ -203,6 +225,7 @@ html { font-weight: 600; } .header-container__hero__home p { + margin: 10px; font-family: "Work Sans", sans-serif; font-size: 25px; font-weight: 300; diff --git a/assets/styles/styles.css.map b/assets/styles/styles.css.map index 8fc344a..fe290f1 100644 --- a/assets/styles/styles.css.map +++ b/assets/styles/styles.css.map @@ -1 +1 @@ -{"version":3,"sources":["modules/_typography.scss","modules/_app.scss","styles.css","modules/_mixins.scss","components/_main.scss","modules/_variables.scss","components/_hero.scss"],"names":[],"mappings":"AAAQ,8CAAA;AAGA,+GAAA;ACHR;EACE,sBAAA;EACA,SAAA;EACA,UAAA;EACA,UAAA;EACA,qBAAA;EACA,kCAAA;ACGF;;ADAA;EACE,WAAA;EACA,mBAAA;EACA,6CAAA;ACGF;;ADAA;EACE,kBAAA;EACA,YAAA;EACA,yBAAA;EACA,cAAA;ACGF;;ADAA;EACE,aAAA;ACGF;;ACpBA;EACI,iGAAA;ADuBJ;;ACpBA;EACI,WAAA;EACA,eAAA;EACA,kBAAA;EACA,YAAA;EACA,eAAA;EACA,kBAAA;EACA,iBAAA;EACA,kBAAA;ADuBJ;;ACpBA;EACI,WAAA;EACA,eAAA;EACA,kBAAA;EACA,YAAA;EACA,eAAA;EACA,kBAAA;EACA,mBAAA;EACA,kBAAA;ADuBJ;;AFnDA;EAAO,gCAAA;AEuDP;;AFlDA;EACE;IAAO,oCAAA;EEsDP;AACF;ACxDA;EACI,iGAAA;AD0DJ;;ACvDA;EACI,WAAA;EACA,eAAA;EACA,kBAAA;EACA,YAAA;EACA,eAAA;EACA,kBAAA;EACA,iBAAA;EACA,kBAAA;AD0DJ;;ACvDA;EACI,WAAA;EACA,eAAA;EACA,kBAAA;EACA,YAAA;EACA,eAAA;EACA,kBAAA;EACA,mBAAA;EACA,kBAAA;AD0DJ;;AElFA;EACI,SAAA;EACA,UAAA;AFqFJ;AEnFI;EACI,kBAAA;EACA,qBAAA;EACA,yBCTK;EDUL,kBAAA;AFqFR;AEjFY;EACI,eAAA;EACA,mBAAA;AFmFhB;AEhFY;EACI,eAAA;EACA,kBAAA;AFkFhB;AEpEI;EACI,SAAA;EACA,kBAAA;EACA,qBAAA;AFsER;AEpEQ;EACI,kBAAA;EACA,qBAAA;AFsEZ;AEpEY;EACI,gBAAA;EACA,eAAA;AFsEhB;AEpEgB;EACI,mBAAA;AFsEpB;AEnEgB;EACI,eAAA;EACA,kBAAA;AFqEpB;AE3DoB;EACI,WCnEZ;AHgIZ;AExDY;EACI,aAAA;AF0DhB;;AEnDA;EACI,WAAA;EACA,aAAA;EACA,sBCnFQ;EDoFR,gBAAA;EACA,iBAAA;AFsDJ;AEpDI;EACI,kBAAA;EACA,kBAAA;EACA,WC3FK;AHiJb;;AC3IA;EACI,iGAAA;AD8IJ;;AC3IA;EACI,WAAA;EACA,eAAA;EACA,kBAAA;EACA,YAAA;EACA,eAAA;EACA,kBAAA;EACA,iBAAA;EACA,kBAAA;AD8IJ;;AC3IA;EACI,WAAA;EACA,eAAA;EACA,kBAAA;EACA,YAAA;EACA,eAAA;EACA,kBAAA;EACA,mBAAA;EACA,kBAAA;AD8IJ;;AIvKA;EACI,iBAAA;EACA,oBAAA;AJ0KJ;AIxKI;EACI,aAAA;EACA,SAAA;AJ0KR;AIxKQ;EACI,WAAA;EACA,aAAA;EACA,sBAAA;EACA,kBAAA;EACA,iBAAA;AJ0KZ;AIxKY;EACI,aAAA;EACA,mBAAA;AJ0KhB;AIxKgB;EACI,kBAAA;EACA,WAAA;EACA,kBAAA;EACA,QAAA;EACA,eAAA;AJ0KpB;AItKY;EACI,oCN7BH;EM8BG,eAAA;EACA,gBAAA;AJwKhB;AIrKY;EACI,oCNnCH;EMoCG,eAAA;EACA,gBAAA;AJuKhB","file":"styles.css"} \ No newline at end of file +{"version":3,"sources":["modules/_typography.scss","modules/_app.scss","styles.css","modules/_mixins.scss","components/_main.scss","modules/_variables.scss","modules/_breakpoints.scss","components/_hero.scss"],"names":[],"mappings":"AAAQ,8CAAA;AAGA,+GAAA;ACHR;EACE,sBAAA;EACA,SAAA;EACA,UAAA;EACA,UAAA;EACA,qBAAA;EACA,kCAAA;ACGF;;ADAA;EACE,WAAA;EACA,mBAAA;EACA,6CAAA;ACGF;;ADAA;EACE,kBAAA;EACA,YAAA;EACA,yBAAA;EACA,cAAA;ACGF;;ADAA;EACE,aAAA;ACGF;;ACpBA;EACI,iGAAA;ADuBJ;;ACpBA;EACI,WAAA;EACA,eAAA;EACA,kBAAA;EACA,YAAA;EACA,eAAA;EACA,kBAAA;EACA,iBAAA;EACA,kBAAA;ADuBJ;;ACpBA;EACI,WAAA;EACA,eAAA;EACA,kBAAA;EACA,YAAA;EACA,eAAA;EACA,kBAAA;EACA,mBAAA;EACA,kBAAA;ADuBJ;;AFnDA;EAAO,gCAAA;AEuDP;;AFlDA;EACE;IAAO,oCAAA;EEsDP;AACF;ACxDA;EACI,iGAAA;AD0DJ;;ACvDA;EACI,WAAA;EACA,eAAA;EACA,kBAAA;EACA,YAAA;EACA,eAAA;EACA,kBAAA;EACA,iBAAA;EACA,kBAAA;AD0DJ;;ACvDA;EACI,WAAA;EACA,eAAA;EACA,kBAAA;EACA,YAAA;EACA,eAAA;EACA,kBAAA;EACA,mBAAA;EACA,kBAAA;AD0DJ;;AElFA;EACI,SAAA;EACA,UAAA;AFqFJ;AEnFI;EACI,kBAAA;EACA,qBAAA;EACA,yBCTK;EDUL,kBAAA;AFqFR;AEjFY;EACI,eAAA;EACA,mBAAA;AFmFhB;AEhFY;EACI,eAAA;EACA,kBAAA;AFkFhB;AEpEI;EACI,SAAA;EACA,kBAAA;EACA,qBAAA;EAEA;;;KAAA;AFwER;AEnEQ;EACI,kBAAA;EACA,qBAAA;AFqEZ;AEnEY;EACI,gBAAA;EACA,eAAA;AFqEhB;AEnEgB;EACI,mBAAA;AFqEpB;AElEgB;EACI,eAAA;EACA,kBAAA;AFoEpB;AE1DoB;EACI,WCxEZ;AHoIZ;AEvDY;EACI,aAAA;AFyDhB;AIrII;EF2EQ;IAIQ,UAAA;EF0DlB;AACF;;AEnDA;EACI,WAAA;EACA,aAAA;EACA,sBC5FQ;ED6FR,gBAAA;EACA,iBAAA;AFsDJ;AEpDI;EACI,kBAAA;EACA,kBAAA;EACA,WCpGK;AH0Jb;;ACpJA;EACI,iGAAA;ADuJJ;;ACpJA;EACI,WAAA;EACA,eAAA;EACA,kBAAA;EACA,YAAA;EACA,eAAA;EACA,kBAAA;EACA,iBAAA;EACA,kBAAA;ADuJJ;;ACpJA;EACI,WAAA;EACA,eAAA;EACA,kBAAA;EACA,YAAA;EACA,eAAA;EACA,kBAAA;EACA,mBAAA;EACA,kBAAA;ADuJJ;;AKhLA;EACI,iBAAA;EACA,oBAAA;ALmLJ;AItLI;ECCJ;IAKQ,kBAAA;IACA,mBAAA;IACA,kBAAA;ELoLN;AACF;AKlLI;EACI,aAAA;EACA,SAAA;ALoLR;AKlLQ;EACI,WAAA;EACA,aAAA;EACA,sBAAA;EACA,kBAAA;EACA,iBAAA;ALoLZ;AIxMI;ECeI;IAQQ,mBAAA;ELqLd;AACF;AKnLY;EACI,aAAA;EACA,mBAAA;EACA,2BAAA;ALqLhB;AKnLgB;EACI,kBAAA;EACA,WAAA;EACA,kBAAA;EACA,QAAA;EACA,eAAA;ALqLpB;AKjLY;EACI,oCPxCH;EOyCG,eAAA;EACA,gBAAA;ALmLhB;AKhLY;EACI,YAAA;EACA,oCP/CH;EOgDG,eAAA;EACA,gBAAA;ALkLhB","file":"styles.css"} \ No newline at end of file diff --git a/index.html b/index.html index cb1c195..dca71b9 100644 --- a/index.html +++ b/index.html @@ -24,7 +24,7 @@

Lorem Picsum

The Lorem Ipsum for photos

- image + image
@@ -40,7 +40,7 @@

Easy to use, stylish placeholders

To get a square image, just add the size

- https://picsum.photos/200/300 + https://picsum.photos/200/300
@@ -57,7 +57,7 @@

Specific Image

- image + image
@@ -73,7 +73,7 @@

Static Random Image

- image + image
@@ -87,7 +87,7 @@

Grayscale

- image + image
@@ -108,7 +108,7 @@

Blur

- image + image
@@ -140,7 +140,7 @@

Advance Usage

- image + image
From 49cdbafea25954bbf9ae43b6c15a34dc8d9326fc Mon Sep 17 00:00:00 2001 From: DiegoMorales Date: Fri, 30 Sep 2022 16:05:53 -0500 Subject: [PATCH 3/7] Desktop design --- assets/styles/components/_hero.scss | 5 ++++ assets/styles/components/_main.scss | 42 ++++++++++++++++++++++++---- assets/styles/styles.css | 43 ++++++++++++++++++++++++++--- assets/styles/styles.css.map | 2 +- 4 files changed, 82 insertions(+), 10 deletions(-) diff --git a/assets/styles/components/_hero.scss b/assets/styles/components/_hero.scss index bae2417..10601bf 100644 --- a/assets/styles/components/_hero.scss +++ b/assets/styles/components/_hero.scss @@ -16,6 +16,11 @@ display: grid; gap: 30px; + @include viewport-large { + text-align: center; + grid-template-columns: repeat(2, 1fr); + } + &__home { width: 100%; display: flex; diff --git a/assets/styles/components/_main.scss b/assets/styles/components/_main.scss index f1fbba7..86897d1 100644 --- a/assets/styles/components/_main.scss +++ b/assets/styles/components/_main.scss @@ -13,8 +13,18 @@ background-color: $background; text-align: center; + @include viewport-large { + display: flex; + flex-direction: row; + justify-content: center; + } + &__first-section { + @include viewport-large { + width: 45%; + } + h2 { font-size: 36px; margin-bottom: 18px; @@ -41,15 +51,31 @@ padding-top: 100px; padding-bottom: 100px; - /* @include viewport-medium { - padding: 50px 120px; - margin: 100px auto; - } */ + /* display: flex; + flex-direction: column; + justify-content: center; */ + &__article-container { padding-top: 100px; padding-bottom: 100px; + @include viewport-large { + display: grid; + grid-template-columns: repeat(2, 1fr); + grid-template-areas: "text image"; + place-items: center; + + padding: 100px 50px; + + &:nth-child(even) { + .main-container__opt-container__article-container__image { + grid-area: text; + } + } + + } + &__info { text-align: left; padding: 0 16px; @@ -76,18 +102,24 @@ } } + &__image { padding: 1rem; @include viewport-medium { width: 70%; } + + @include viewport-large { + width: 80%; + padding: 0; + } } } } - } + .footer-section { width: 100%; height: 24rem; diff --git a/assets/styles/styles.css b/assets/styles/styles.css index 955f4ec..b44d33e 100644 --- a/assets/styles/styles.css +++ b/assets/styles/styles.css @@ -97,6 +97,18 @@ html { background-color: #F4F7FC; text-align: center; } +@media (min-width: 1366px) { + .main-container__use-container { + display: flex; + flex-direction: row; + justify-content: center; + } +} +@media (min-width: 1366px) { + .main-container__use-container__first-section { + width: 45%; + } +} .main-container__use-container__first-section h2 { font-size: 36px; margin-bottom: 18px; @@ -109,15 +121,26 @@ html { margin: 0; padding-top: 100px; padding-bottom: 100px; - /* @include viewport-medium { - padding: 50px 120px; - margin: 100px auto; - } */ + /* display: flex; + flex-direction: column; + justify-content: center; */ } .main-container__opt-container__article-container { padding-top: 100px; padding-bottom: 100px; } +@media (min-width: 1366px) { + .main-container__opt-container__article-container { + display: grid; + grid-template-columns: repeat(2, 1fr); + grid-template-areas: "text image"; + place-items: center; + padding: 100px 50px; + } + .main-container__opt-container__article-container:nth-child(even) .main-container__opt-container__article-container__image { + grid-area: text; + } +} .main-container__opt-container__article-container__info { text-align: left; padding: 0 16px; @@ -140,6 +163,12 @@ html { width: 70%; } } +@media (min-width: 1366px) { + .main-container__opt-container__article-container__image { + width: 80%; + padding: 0; + } +} .footer-section { width: 100%; @@ -195,6 +224,12 @@ html { display: grid; gap: 30px; } +@media (min-width: 1366px) { + .header-container__hero { + text-align: center; + grid-template-columns: repeat(2, 1fr); + } +} .header-container__hero__home { width: 100%; display: flex; diff --git a/assets/styles/styles.css.map b/assets/styles/styles.css.map index fe290f1..7e8a81b 100644 --- a/assets/styles/styles.css.map +++ b/assets/styles/styles.css.map @@ -1 +1 @@ -{"version":3,"sources":["modules/_typography.scss","modules/_app.scss","styles.css","modules/_mixins.scss","components/_main.scss","modules/_variables.scss","modules/_breakpoints.scss","components/_hero.scss"],"names":[],"mappings":"AAAQ,8CAAA;AAGA,+GAAA;ACHR;EACE,sBAAA;EACA,SAAA;EACA,UAAA;EACA,UAAA;EACA,qBAAA;EACA,kCAAA;ACGF;;ADAA;EACE,WAAA;EACA,mBAAA;EACA,6CAAA;ACGF;;ADAA;EACE,kBAAA;EACA,YAAA;EACA,yBAAA;EACA,cAAA;ACGF;;ADAA;EACE,aAAA;ACGF;;ACpBA;EACI,iGAAA;ADuBJ;;ACpBA;EACI,WAAA;EACA,eAAA;EACA,kBAAA;EACA,YAAA;EACA,eAAA;EACA,kBAAA;EACA,iBAAA;EACA,kBAAA;ADuBJ;;ACpBA;EACI,WAAA;EACA,eAAA;EACA,kBAAA;EACA,YAAA;EACA,eAAA;EACA,kBAAA;EACA,mBAAA;EACA,kBAAA;ADuBJ;;AFnDA;EAAO,gCAAA;AEuDP;;AFlDA;EACE;IAAO,oCAAA;EEsDP;AACF;ACxDA;EACI,iGAAA;AD0DJ;;ACvDA;EACI,WAAA;EACA,eAAA;EACA,kBAAA;EACA,YAAA;EACA,eAAA;EACA,kBAAA;EACA,iBAAA;EACA,kBAAA;AD0DJ;;ACvDA;EACI,WAAA;EACA,eAAA;EACA,kBAAA;EACA,YAAA;EACA,eAAA;EACA,kBAAA;EACA,mBAAA;EACA,kBAAA;AD0DJ;;AElFA;EACI,SAAA;EACA,UAAA;AFqFJ;AEnFI;EACI,kBAAA;EACA,qBAAA;EACA,yBCTK;EDUL,kBAAA;AFqFR;AEjFY;EACI,eAAA;EACA,mBAAA;AFmFhB;AEhFY;EACI,eAAA;EACA,kBAAA;AFkFhB;AEpEI;EACI,SAAA;EACA,kBAAA;EACA,qBAAA;EAEA;;;KAAA;AFwER;AEnEQ;EACI,kBAAA;EACA,qBAAA;AFqEZ;AEnEY;EACI,gBAAA;EACA,eAAA;AFqEhB;AEnEgB;EACI,mBAAA;AFqEpB;AElEgB;EACI,eAAA;EACA,kBAAA;AFoEpB;AE1DoB;EACI,WCxEZ;AHoIZ;AEvDY;EACI,aAAA;AFyDhB;AIrII;EF2EQ;IAIQ,UAAA;EF0DlB;AACF;;AEnDA;EACI,WAAA;EACA,aAAA;EACA,sBC5FQ;ED6FR,gBAAA;EACA,iBAAA;AFsDJ;AEpDI;EACI,kBAAA;EACA,kBAAA;EACA,WCpGK;AH0Jb;;ACpJA;EACI,iGAAA;ADuJJ;;ACpJA;EACI,WAAA;EACA,eAAA;EACA,kBAAA;EACA,YAAA;EACA,eAAA;EACA,kBAAA;EACA,iBAAA;EACA,kBAAA;ADuJJ;;ACpJA;EACI,WAAA;EACA,eAAA;EACA,kBAAA;EACA,YAAA;EACA,eAAA;EACA,kBAAA;EACA,mBAAA;EACA,kBAAA;ADuJJ;;AKhLA;EACI,iBAAA;EACA,oBAAA;ALmLJ;AItLI;ECCJ;IAKQ,kBAAA;IACA,mBAAA;IACA,kBAAA;ELoLN;AACF;AKlLI;EACI,aAAA;EACA,SAAA;ALoLR;AKlLQ;EACI,WAAA;EACA,aAAA;EACA,sBAAA;EACA,kBAAA;EACA,iBAAA;ALoLZ;AIxMI;ECeI;IAQQ,mBAAA;ELqLd;AACF;AKnLY;EACI,aAAA;EACA,mBAAA;EACA,2BAAA;ALqLhB;AKnLgB;EACI,kBAAA;EACA,WAAA;EACA,kBAAA;EACA,QAAA;EACA,eAAA;ALqLpB;AKjLY;EACI,oCPxCH;EOyCG,eAAA;EACA,gBAAA;ALmLhB;AKhLY;EACI,YAAA;EACA,oCP/CH;EOgDG,eAAA;EACA,gBAAA;ALkLhB","file":"styles.css"} \ No newline at end of file +{"version":3,"sources":["modules/_typography.scss","modules/_app.scss","styles.css","modules/_mixins.scss","components/_main.scss","modules/_variables.scss","modules/_breakpoints.scss","components/_hero.scss"],"names":[],"mappings":"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","file":"styles.css"} \ No newline at end of file From b05841a2b73a852093a6c9b475963d6ab63255d5 Mon Sep 17 00:00:00 2001 From: Diego Morales <66025179+Choklitos21@users.noreply.github.com> Date: Fri, 30 Sep 2022 16:08:07 -0500 Subject: [PATCH 4/7] Create CNAME --- CNAME | 1 + 1 file changed, 1 insertion(+) create mode 100644 CNAME diff --git a/CNAME b/CNAME new file mode 100644 index 0000000..b68fe9f --- /dev/null +++ b/CNAME @@ -0,0 +1 @@ +choklitos21.com.co \ No newline at end of file From 22f00fbcfd6fa4de178cfb2c4c776fa382cd37ff Mon Sep 17 00:00:00 2001 From: Diego Morales <66025179+Choklitos21@users.noreply.github.com> Date: Fri, 30 Sep 2022 16:08:18 -0500 Subject: [PATCH 5/7] Delete CNAME --- CNAME | 1 - 1 file changed, 1 deletion(-) delete mode 100644 CNAME diff --git a/CNAME b/CNAME deleted file mode 100644 index b68fe9f..0000000 --- a/CNAME +++ /dev/null @@ -1 +0,0 @@ -choklitos21.com.co \ No newline at end of file From 79d504ab5781872b650459e34ec9bcd6f44b80bd Mon Sep 17 00:00:00 2001 From: DiegoMorales Date: Fri, 30 Sep 2022 16:20:49 -0500 Subject: [PATCH 6/7] viewport fixed, images centered --- assets/styles/components/_main.scss | 3 +++ assets/styles/styles.css | 2 ++ assets/styles/styles.css.map | 2 +- index.html | 1 + 4 files changed, 7 insertions(+), 1 deletion(-) diff --git a/assets/styles/components/_main.scss b/assets/styles/components/_main.scss index 86897d1..30d65f3 100644 --- a/assets/styles/components/_main.scss +++ b/assets/styles/components/_main.scss @@ -59,6 +59,8 @@ &__article-container { padding-top: 100px; padding-bottom: 100px; + display: grid; + place-items: center; @include viewport-large { display: grid; @@ -104,6 +106,7 @@ &__image { + padding: 1rem; @include viewport-medium { diff --git a/assets/styles/styles.css b/assets/styles/styles.css index b44d33e..aa63785 100644 --- a/assets/styles/styles.css +++ b/assets/styles/styles.css @@ -128,6 +128,8 @@ html { .main-container__opt-container__article-container { padding-top: 100px; padding-bottom: 100px; + display: grid; + place-items: center; } @media (min-width: 1366px) { .main-container__opt-container__article-container { diff --git a/assets/styles/styles.css.map b/assets/styles/styles.css.map index 7e8a81b..1a112e2 100644 --- a/assets/styles/styles.css.map +++ b/assets/styles/styles.css.map @@ -1 +1 @@ -{"version":3,"sources":["modules/_typography.scss","modules/_app.scss","styles.css","modules/_mixins.scss","components/_main.scss","modules/_variables.scss","modules/_breakpoints.scss","components/_hero.scss"],"names":[],"mappings":"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","file":"styles.css"} \ No newline at end of file +{"version":3,"sources":["modules/_typography.scss","modules/_app.scss","styles.css","modules/_mixins.scss","components/_main.scss","modules/_variables.scss","modules/_breakpoints.scss","components/_hero.scss"],"names":[],"mappings":"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","file":"styles.css"} \ No newline at end of file diff --git a/index.html b/index.html index dca71b9..b21faa9 100644 --- a/index.html +++ b/index.html @@ -3,6 +3,7 @@ + From 48b2ee43b091e525235a99402d7abb5a29d29409 Mon Sep 17 00:00:00 2001 From: DiegoMorales Date: Fri, 30 Sep 2022 16:23:39 -0500 Subject: [PATCH 7/7] viewport fixed, images centered --- assets/styles/components/_main.scss | 8 +-- index.html | 91 +++++++++++++++-------------- 2 files changed, 51 insertions(+), 48 deletions(-) diff --git a/assets/styles/components/_main.scss b/assets/styles/components/_main.scss index 30d65f3..4224959 100644 --- a/assets/styles/components/_main.scss +++ b/assets/styles/components/_main.scss @@ -67,7 +67,7 @@ grid-template-columns: repeat(2, 1fr); grid-template-areas: "text image"; place-items: center; - + padding: 100px 50px; &:nth-child(even) { @@ -77,7 +77,7 @@ } } - + &__info { text-align: left; padding: 0 16px; @@ -104,9 +104,9 @@ } } - + &__image { - + padding: 1rem; @include viewport-medium { diff --git a/index.html b/index.html index b21faa9..24c0bbd 100644 --- a/index.html +++ b/index.html @@ -41,7 +41,8 @@

Easy to use, stylish placeholders

To get a square image, just add the size

- https://picsum.photos/200/300 + https://picsum.photos/200/300
@@ -65,12 +66,13 @@

Specific Image

Static Random Image

-

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

-
- https://picsum.photos/seed/picsum/200/300 -
+

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

+
+ https://picsum.photos/seed/picsum/200/300 +
@@ -81,10 +83,10 @@

Static Random Image

Grayscale

-

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

-
- https://picsum.photos/200/300?grayscale -
+

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

+
+ https://picsum.photos/200/300?grayscale +
@@ -95,17 +97,17 @@

Grayscale

Blur

-

Get a blurred image by appending ?blur to the end of the url

-
- https://picsum.photos/200/300/?blur -
- -

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

-
- https://picsum.photos/200/300/?blur=2 -
+

Get a blurred image by appending ?blur to the end of the url

+
+ https://picsum.photos/200/300/?blur +
+ +

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

+
+ https://picsum.photos/200/300/?blur=2 +
@@ -116,28 +118,29 @@

Blur

Advance Usage

-

You may combine any of the options above.

-

For example, to get a specific image that is grayscale and blurred

-
- https://picsum.photos/id/870/200/300?grayscale&blur=2 -
- -

To request multiple images of the same size in your browser, add the random query to - prevent the images from being cached

-
- <img src="https://picsum.photos/200/300?random=1"> - <img src="https://picsum.photos/200/300?random=2"> -
- -

If you need a file ending, you can add .jpg to the end of the url.

-
- https://picsum.photos/200/300.jpg -
- -

To get an image in the WebP format, you can add .webp to the end of the url.

-
- https://picsum.photos/200/300.webp -
+

You may combine any of the options above.

+

For example, to get a specific image that is grayscale and blurred

+
+ https://picsum.photos/id/870/200/300?grayscale&blur=2 +
+ +

To request multiple images of the same size in your browser, add the random + query to + prevent the images from being cached

+
+ <img src="https://picsum.photos/200/300?random=1"> + <img src="https://picsum.photos/200/300?random=2"> +
+ +

If you need a file ending, you can add .jpg to the end of the url.

+
+ https://picsum.photos/200/300.jpg +
+ +

To get an image in the WebP format, you can add .webp to the end of the url.

+
+ https://picsum.photos/200/300.webp +