diff --git a/assets/styles/components/_hero.scss b/assets/styles/components/_hero.scss index e69de29..10601bf 100644 --- a/assets/styles/components/_hero.scss +++ b/assets/styles/components/_hero.scss @@ -0,0 +1,65 @@ +@import "../modules/variables"; +@import "../modules/breakpoints"; +@import "../modules/mixins"; + +.header-container { + margin-top: 100px; + margin-bottom: 100px; + + @include viewport-medium { + text-align: center; + padding: 50px 120px; + margin: 100px auto; + } + + &__hero { + display: grid; + gap: 30px; + + @include viewport-large { + text-align: center; + grid-template-columns: repeat(2, 1fr); + } + + &__home { + width: 100%; + display: flex; + flex-direction: column; + 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; + width: 42px; + margin-right: 15px; + top: 7px; + font-size: 40px; + } + } + + h1 { + font-family: $title-font; + font-size: 40px; + font-weight: 600; + } + + 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 e69de29..4224959 100644 --- a/assets/styles/components/_main.scss +++ b/assets/styles/components/_main.scss @@ -0,0 +1,139 @@ +@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; + + @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; + } + + 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; + + /* display: flex; + flex-direction: column; + justify-content: center; */ + + + &__article-container { + padding-top: 100px; + padding-bottom: 100px; + display: grid; + place-items: center; + + @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; + + 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; + + @include viewport-medium { + width: 70%; + } + + @include viewport-large { + width: 80%; + padding: 0; + } + } + } + } +} + + +.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..aa63785 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,209 @@ 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; +} + +.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; +} +@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; +} +.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; + /* display: flex; + flex-direction: column; + justify-content: center; */ +} +.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 { + 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; +} +.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; +} +@media (min-width: 768px) { + .main-container__opt-container__article-container__image { + width: 70%; + } +} +@media (min-width: 1366px) { + .main-container__opt-container__article-container__image { + width: 80%; + padding: 0; + } +} + +.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; +} -/*# sourceMappingURL=styles.css.map */ +.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; +} +@media (min-width: 768px) { + .header-container { + text-align: center; + padding: 50px 120px; + margin: 100px auto; + } +} +.header-container__hero { + 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; + flex-direction: column; + 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; + 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 { + margin: 10px; + 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..1a112e2 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","modules/_breakpoints.scss","components/_hero.scss"],"names":[],"mappings":"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","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..24c0bbd 100644 --- a/index.html +++ b/index.html @@ -1,12 +1,163 @@ + + + + + + + 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