From f46088af27b447a5a11ca51b20fd78ea569df818 Mon Sep 17 00:00:00 2001 From: JohanCarrillo Date: Thu, 29 Sep 2022 12:28:25 -0500 Subject: [PATCH 1/3] mobile finished --- assets/styles/modules/_app.scss | 103 ++++++++++++++++-- assets/styles/modules/_breakpoints.scss | 6 +- assets/styles/styles.css | 93 ++++++++++++++++ assets/styles/styles.css.map | 2 +- index.html | 137 ++++++++++++++++++++++-- 5 files changed, 323 insertions(+), 18 deletions(-) diff --git a/assets/styles/modules/_app.scss b/assets/styles/modules/_app.scss index cdfd8ae..cb186c5 100644 --- a/assets/styles/modules/_app.scss +++ b/assets/styles/modules/_app.scss @@ -1,8 +1,99 @@ * { - box-sizing: border-box; - margin: 0; - outline: 0; - padding: 0; - text-decoration: none; - text-rendering: optimizeLegibility; + box-sizing: border-box; + margin: 0; + outline: 0; + padding: 0; + text-decoration: none; + text-rendering: optimizeLegibility; +} + +h1, +h2, +h3 { + margin-bottom: 10%; + padding-top: 5%; +} + +h1, +h2 { + text-align: center; +} + +h3 { + text-align: left; +} + +#first-cell { + margin-top: 10vh; +} + +#first-cell > p, +#second-cell > p { + text-align: center; +} + +#second-cell > a { + text-align: center; + background-color: white; + margin-bottom: 10%; +} + +#second-cell { + margin-bottom: 10vh; +} + +main { + padding-left: 5%; + padding-right: 5%; + text-align: left; + display: grid; + grid-template-columns: 100%; +} + +.text-container { + width: 90%; + display: flex; + flex-direction: column; + justify-content: center; +} +.text-container > p { + width: 100%; + font-size: 0.95rem; + margin-bottom: 10px; +} +.text-container > a, +#second-cell { + background-color: rgb(172, 215, 255); + padding-bottom: 3%; +} + +.text-container > a { + border-radius: 5%; + padding: 5%; +} + +.img-container { + width: 90%; + text-align: center; +} + +img { + margin-top: 5vh; + margin-bottom: 15vh; + width: 100%; + height: auto; + border-radius: 5%; + box-shadow: 0 13px 20px -5px rgba(21, 21, 39, 0.726); +} + +footer { + height: 20vh; + width: 90%; + background-color: black; + color: white; + text-align: center; + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; } diff --git a/assets/styles/modules/_breakpoints.scss b/assets/styles/modules/_breakpoints.scss index bbbea70..10eaa78 100644 --- a/assets/styles/modules/_breakpoints.scss +++ b/assets/styles/modules/_breakpoints.scss @@ -2,7 +2,9 @@ @import "variables"; // Medium devices (tablets, 768px and up) -@media (min-width: 768px) {} +@media (min-width: 768px) { +} // Large devices (desktops, 992px and up) -@media (min-width: 992px) {} +@media (min-width: 992px) { +} diff --git a/assets/styles/styles.css b/assets/styles/styles.css index 84eb7fe..7b13492 100644 --- a/assets/styles/styles.css +++ b/assets/styles/styles.css @@ -8,6 +8,99 @@ text-rendering: optimizeLegibility; } +h1, +h2, +h3 { + margin-bottom: 10%; + padding-top: 5%; +} + +h1, +h2 { + text-align: center; +} + +h3 { + text-align: left; +} + +#first-cell { + margin-top: 10vh; +} + +#first-cell > p, +#second-cell > p { + text-align: center; +} + +#second-cell > a { + text-align: center; + background-color: white; + margin-bottom: 10%; +} + +#second-cell { + margin-bottom: 10vh; +} + +main { + padding-left: 5%; + padding-right: 5%; + text-align: left; + display: grid; + grid-template-columns: 100%; +} + +.text-container { + width: 90%; + display: flex; + flex-direction: column; + justify-content: center; +} + +.text-container > p { + width: 100%; + font-size: 0.95rem; + margin-bottom: 10px; +} + +.text-container > a, +#second-cell { + background-color: rgb(172, 215, 255); + padding-bottom: 3%; +} + +.text-container > a { + border-radius: 5%; + padding: 5%; +} + +.img-container { + width: 90%; + text-align: center; +} + +img { + margin-top: 5vh; + margin-bottom: 15vh; + width: 100%; + height: auto; + border-radius: 5%; + box-shadow: 0 13px 20px -5px rgba(21, 21, 39, 0.726); +} + +footer { + height: 20vh; + width: 90%; + background-color: black; + color: white; + text-align: center; + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; +} + html { font-family: "Inter", sans-serif; } diff --git a/assets/styles/styles.css.map b/assets/styles/styles.css.map index f39486f..6066c61 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,"sourceRoot":"","sources":["modules/_typography.scss","modules/_app.scss"],"names":[],"mappings":"AAAQ;ACAR;EACC;EACA;EACA;EACA;EACA;EACA;;;AAGD;AAAA;AAAA;EAGC;EACA;;;AAGD;AAAA;EAEC;;;AAGD;EACC;;;AAGD;EACC;;;AAGD;AAAA;EAEC;;;AAGD;EACC;EACA;EACA;;;AAGD;EACC;;;AAGD;EACC;EACA;EACA;EACA;EACA;;;AAGD;EACC;EACA;EACA;EACA;;;AAED;EACC;EACA;EACA;;;AAED;AAAA;EAEC;EACA;;;AAGD;EACC;EACA;;;AAGD;EACC;EACA;;;AAGD;EACC;EACA;EACA;EACA;EACA;EACA;;;AAGD;EACC;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;ADhGD;EAAO;;;AACP;EACE;IAAO","file":"styles.css"} \ No newline at end of file diff --git a/index.html b/index.html index 747a38f..c07f3c8 100644 --- a/index.html +++ b/index.html @@ -1,12 +1,131 @@ - - - - - Sass Project - - -

Hello world!

- + + + + + + Sass Project + + +
+
+

Hello world!

+

Lorem ipsum dolor sit amet, consectetur adipiscing elit

+
+
+ random image +
+ +
+

This is a Title

+

+ Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do + eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad + minim veniam, quis nostrud exercitation ullamco laboris nisi ut + aliquip ex ea commodo consequat. +

+ http://thisisalink.com +
+ +
+

This is a Title

+

+ Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do + eiusmod tempor incididunt ut labore et dolore magna aliqua. +

+ http://thisisalink.com +

+ Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris + nisi ut aliquip ex ea commodo consequat. +

+
+
+ random image +
+ +
+

This is a Title

+

+ Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do + eiusmod tempor incididunt ut labore et dolore magna aliqua. +

+ http://thisisalink.com +
+
+ random image +
+ +
+

This is a Title

+

+ Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do + eiusmod tempor incididunt ut labore et dolore magna aliqua. +

+ http://thisisalink.com +
+
+ random image +
+ +
+

This is a Title

+

+ Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do + eiusmod tempor incididunt ut labore et dolore magna aliqua. +

+ http://thisisalink.com +

+ Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris + nisi ut aliquip ex ea commodo consequat. +

+
+
+ random image +
+ +
+

This is a Title

+

+ Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do + eiusmod tempor incididunt ut labore et dolore magna aliqua. +

+ http://thisisalink.com +
+
+ random image +
+ +
+

This is a Title

+

+ Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do + eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad + minim veniam, quis nostrud exercitation ullamco laboris nisi ut + aliquip ex ea commodo consequat. +

+ http://thisisalink.com +
+
+ random image +
+ + +
+ From fe0014c9075a2a51c67e9f9ad935f550b4246958 Mon Sep 17 00:00:00 2001 From: JohanCarrillo Date: Fri, 30 Sep 2022 10:17:19 -0500 Subject: [PATCH 2/3] tablet finished --- assets/styles/modules/_app.scss | 2 ++ assets/styles/modules/_breakpoints.scss | 13 +++++++++++++ assets/styles/styles.css | 15 +++++++++++++++ assets/styles/styles.css.map | 2 +- 4 files changed, 31 insertions(+), 1 deletion(-) diff --git a/assets/styles/modules/_app.scss b/assets/styles/modules/_app.scss index cb186c5..b1e8b44 100644 --- a/assets/styles/modules/_app.scss +++ b/assets/styles/modules/_app.scss @@ -5,6 +5,7 @@ padding: 0; text-decoration: none; text-rendering: optimizeLegibility; + text-align: center; } h1, @@ -48,6 +49,7 @@ main { text-align: left; display: grid; grid-template-columns: 100%; + border: 1px red solid; } .text-container { diff --git a/assets/styles/modules/_breakpoints.scss b/assets/styles/modules/_breakpoints.scss index 10eaa78..ae19ce4 100644 --- a/assets/styles/modules/_breakpoints.scss +++ b/assets/styles/modules/_breakpoints.scss @@ -3,6 +3,19 @@ // Medium devices (tablets, 768px and up) @media (min-width: 768px) { + body { + display: flex; + justify-content: center; + } + .double-column-cell { + // margin-left: -5vw; + width: 100%; + } + + main { + width: 700px; + height: auto; + } } // Large devices (desktops, 992px and up) diff --git a/assets/styles/styles.css b/assets/styles/styles.css index 7b13492..1102278 100644 --- a/assets/styles/styles.css +++ b/assets/styles/styles.css @@ -6,6 +6,7 @@ padding: 0; text-decoration: none; text-rendering: optimizeLegibility; + text-align: center; } h1, @@ -49,6 +50,7 @@ main { text-align: left; display: grid; grid-template-columns: 100%; + border: 1px red solid; } .text-container { @@ -101,6 +103,19 @@ footer { justify-content: center; } +@media (min-width: 768px) { + body { + display: flex; + justify-content: center; + } + .double-column-cell { + width: 100%; + } + main { + width: 700px; + height: auto; + } +} html { font-family: "Inter", sans-serif; } diff --git a/assets/styles/styles.css.map b/assets/styles/styles.css.map index 6066c61..8425691 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;EACC;EACA;EACA;EACA;EACA;EACA;;;AAGD;AAAA;AAAA;EAGC;EACA;;;AAGD;AAAA;EAEC;;;AAGD;EACC;;;AAGD;EACC;;;AAGD;AAAA;EAEC;;;AAGD;EACC;EACA;EACA;;;AAGD;EACC;;;AAGD;EACC;EACA;EACA;EACA;EACA;;;AAGD;EACC;EACA;EACA;EACA;;;AAED;EACC;EACA;EACA;;;AAED;AAAA;EAEC;EACA;;;AAGD;EACC;EACA;;;AAGD;EACC;EACA;;;AAGD;EACC;EACA;EACA;EACA;EACA;EACA;;;AAGD;EACC;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;ADhGD;EAAO;;;AACP;EACE;IAAO","file":"styles.css"} \ No newline at end of file +{"version":3,"sourceRoot":"","sources":["modules/_typography.scss","modules/_app.scss","modules/_breakpoints.scss"],"names":[],"mappings":"AAAQ;ACAR;EACC;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGD;AAAA;AAAA;EAGC;EACA;;;AAGD;AAAA;EAEC;;;AAGD;EACC;;;AAGD;EACC;;;AAGD;AAAA;EAEC;;;AAGD;EACC;EACA;EACA;;;AAGD;EACC;;;AAGD;EACC;EACA;EACA;EACA;EACA;EACA;;;AAGD;EACC;EACA;EACA;EACA;;;AAED;EACC;EACA;EACA;;;AAED;AAAA;EAEC;EACA;;;AAGD;EACC;EACA;;;AAGD;EACC;EACA;;;AAGD;EACC;EACA;EACA;EACA;EACA;EACA;;;AAGD;EACC;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AC/FD;EACC;IACC;IACA;;EAED;IAEC;;EAGD;IACC;IACA;;;AFfF;EAAO;;;AACP;EACE;IAAO","file":"styles.css"} \ No newline at end of file From a0511ee34e5c894cc8d0dfeeb80e6b3d70dc0128 Mon Sep 17 00:00:00 2001 From: JohanCarrillo Date: Fri, 30 Sep 2022 10:42:41 -0500 Subject: [PATCH 3/3] desktop finished --- assets/styles/modules/_app.scss | 5 ++--- assets/styles/modules/_breakpoints.scss | 25 +++++++++++++++++++++ assets/styles/styles.css | 29 ++++++++++++++++++++++--- assets/styles/styles.css.map | 2 +- 4 files changed, 54 insertions(+), 7 deletions(-) diff --git a/assets/styles/modules/_app.scss b/assets/styles/modules/_app.scss index b1e8b44..888e658 100644 --- a/assets/styles/modules/_app.scss +++ b/assets/styles/modules/_app.scss @@ -5,7 +5,6 @@ padding: 0; text-decoration: none; text-rendering: optimizeLegibility; - text-align: center; } h1, @@ -49,7 +48,6 @@ main { text-align: left; display: grid; grid-template-columns: 100%; - border: 1px red solid; } .text-container { @@ -90,7 +88,7 @@ img { footer { height: 20vh; - width: 90%; + width: 100%; background-color: black; color: white; text-align: center; @@ -98,4 +96,5 @@ footer { flex-direction: column; align-items: center; justify-content: center; + gap: 5px; } diff --git a/assets/styles/modules/_breakpoints.scss b/assets/styles/modules/_breakpoints.scss index ae19ce4..db9efea 100644 --- a/assets/styles/modules/_breakpoints.scss +++ b/assets/styles/modules/_breakpoints.scss @@ -20,4 +20,29 @@ // Large devices (desktops, 992px and up) @media (min-width: 992px) { + main { + padding-left: 5%; + padding-right: 5%; + text-align: left; + display: grid; + grid-template-columns: 50% 50%; + grid-area: "left rigth" "double" "left rigth" "left rigth" "left rigth" + "left rigth" "left rigth" "left rigth" "footer"; + width: 990px; + height: auto; + margin-top: 20vh; + } + + #second-cell, + footer { + grid-column: 1 / span 2; + } + + #first-cell { + margin-top: 0; + } + #first-cell > p, + h1 { + text-align: start; + } } diff --git a/assets/styles/styles.css b/assets/styles/styles.css index 1102278..7cc8bec 100644 --- a/assets/styles/styles.css +++ b/assets/styles/styles.css @@ -6,7 +6,6 @@ padding: 0; text-decoration: none; text-rendering: optimizeLegibility; - text-align: center; } h1, @@ -50,7 +49,6 @@ main { text-align: left; display: grid; grid-template-columns: 100%; - border: 1px red solid; } .text-container { @@ -93,7 +91,7 @@ img { footer { height: 20vh; - width: 90%; + width: 100%; background-color: black; color: white; text-align: center; @@ -101,6 +99,7 @@ footer { flex-direction: column; align-items: center; justify-content: center; + gap: 5px; } @media (min-width: 768px) { @@ -116,6 +115,30 @@ footer { height: auto; } } +@media (min-width: 992px) { + main { + padding-left: 5%; + padding-right: 5%; + text-align: left; + display: grid; + grid-template-columns: 50% 50%; + grid-area: "left rigth" "double" "left rigth" "left rigth" "left rigth" "left rigth" "left rigth" "left rigth" "footer"; + width: 990px; + height: auto; + margin-top: 20vh; + } + #second-cell, +footer { + grid-column: 1/span 2; + } + #first-cell { + margin-top: 0; + } + #first-cell > p, +h1 { + text-align: start; + } +} html { font-family: "Inter", sans-serif; } diff --git a/assets/styles/styles.css.map b/assets/styles/styles.css.map index 8425691..f2adb38 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"],"names":[],"mappings":"AAAQ;ACAR;EACC;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGD;AAAA;AAAA;EAGC;EACA;;;AAGD;AAAA;EAEC;;;AAGD;EACC;;;AAGD;EACC;;;AAGD;AAAA;EAEC;;;AAGD;EACC;EACA;EACA;;;AAGD;EACC;;;AAGD;EACC;EACA;EACA;EACA;EACA;EACA;;;AAGD;EACC;EACA;EACA;EACA;;;AAED;EACC;EACA;EACA;;;AAED;AAAA;EAEC;EACA;;;AAGD;EACC;EACA;;;AAGD;EACC;EACA;;;AAGD;EACC;EACA;EACA;EACA;EACA;EACA;;;AAGD;EACC;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AC/FD;EACC;IACC;IACA;;EAED;IAEC;;EAGD;IACC;IACA;;;AFfF;EAAO;;;AACP;EACE;IAAO","file":"styles.css"} \ No newline at end of file +{"version":3,"sourceRoot":"","sources":["modules/_typography.scss","modules/_app.scss","modules/_breakpoints.scss"],"names":[],"mappings":"AAAQ;ACAR;EACC;EACA;EACA;EACA;EACA;EACA;;;AAGD;AAAA;AAAA;EAGC;EACA;;;AAGD;AAAA;EAEC;;;AAGD;EACC;;;AAGD;EACC;;;AAGD;AAAA;EAEC;;;AAGD;EACC;EACA;EACA;;;AAGD;EACC;;;AAGD;EACC;EACA;EACA;EACA;EACA;;;AAGD;EACC;EACA;EACA;EACA;;;AAED;EACC;EACA;EACA;;;AAED;AAAA;EAEC;EACA;;;AAGD;EACC;EACA;;;AAGD;EACC;EACA;;;AAGD;EACC;EACA;EACA;EACA;EACA;EACA;;;AAGD;EACC;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AC9FD;EACC;IACC;IACA;;EAED;IAEC;;EAGD;IACC;IACA;;;AAKF;EACC;IACC;IACA;IACA;IACA;IACA;IACA;IAEA;IACA;IACA;;EAGD;AAAA;IAEC;;EAGD;IACC;;EAED;AAAA;IAEC;;;AF5CF;EAAO;;;AACP;EACE;IAAO","file":"styles.css"} \ No newline at end of file