From 960fd765722b25f2dc7df2063bc129895c920fa6 Mon Sep 17 00:00:00 2001 From: Arjun Date: Fri, 27 Jan 2023 07:22:49 +0530 Subject: [PATCH 1/4] =?UTF-8?q?=F0=9F=94=B2=20Fix=20inconsistency=20in=20s?= =?UTF-8?q?olution?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- flex/07-flex-layout-2/solution/solution.css | 84 +++++++++++---------- 1 file changed, 43 insertions(+), 41 deletions(-) diff --git a/flex/07-flex-layout-2/solution/solution.css b/flex/07-flex-layout-2/solution/solution.css index 3ca1867..fe622fd 100644 --- a/flex/07-flex-layout-2/solution/solution.css +++ b/flex/07-flex-layout-2/solution/solution.css @@ -1,87 +1,89 @@ body { - font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif; - margin: 0; - min-height: 100vh; + font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, + Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif; + margin: 0; + min-height: 100vh; } .header { - height: 72px; - background: darkmagenta; - color: white; + height: 72px; + background: darkmagenta; + color: white; } .footer { - height: 72px; - background: #eee; - color: darkmagenta; + height: 72px; + background: #eee; + color: darkmagenta; } .sidebar { - width: 300px; - background: royalblue; + width: 300px; + background: royalblue; } .card { - border: 1px solid #eee; - box-shadow: 2px 4px 16px rgba(0,0,0,.06); - border-radius: 4px; + border: 1px solid #eee; + box-shadow: 2px 4px 16px rgba(0, 0, 0, 0.06); + border-radius: 4px; } /* SOLUTION */ body { - display: flex; - flex-direction: column; + display: flex; + flex-direction: column; } .header { - display: flex; - align-items: center; - padding: 0 16px; - font-size: 32px; - font-weight: 900; + display: flex; + align-items: center; + padding: 0 16px; + font-size: 32px; + font-weight: 900; } .body { - flex: 1; - display: flex; + flex: 1; + display: flex; } .sidebar { - flex-shrink: 0; - padding: 16px; + flex-shrink: 0; + box-sizing: border-box; + padding: 16px; } ul { - list-style-type: none; - margin: 0; - padding: 0; + list-style-type: none; + margin: 0; + padding: 0; } li { - margin-bottom: 16px; + margin-bottom: 16px; } a { - color: white; - text-decoration: none; - font-size: 24px; + color: white; + text-decoration: none; + font-size: 24px; } .container { - padding: 32px; - display: flex; - flex-wrap: wrap; + padding: 32px; + display: flex; + flex-wrap: wrap; } .card { - padding: 16px; - margin: 16px; - width: 300px; + padding: 16px; + margin: 16px; + width: 300px; } .footer { - display: flex; - align-items: center; - justify-content: center; + display: flex; + align-items: center; + justify-content: center; } From 03f4e594a8e037994c303457af76965729c86c67 Mon Sep 17 00:00:00 2001 From: Arjun Date: Mon, 30 Jan 2023 11:21:03 +0530 Subject: [PATCH 2/4] =?UTF-8?q?Revert=20"=F0=9F=94=B2=20Fix=20inconsistenc?= =?UTF-8?q?y=20in=20solution"?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit This reverts commit 960fd765722b25f2dc7df2063bc129895c920fa6. --- flex/07-flex-layout-2/solution/solution.css | 84 ++++++++++----------- 1 file changed, 41 insertions(+), 43 deletions(-) diff --git a/flex/07-flex-layout-2/solution/solution.css b/flex/07-flex-layout-2/solution/solution.css index fe622fd..3ca1867 100644 --- a/flex/07-flex-layout-2/solution/solution.css +++ b/flex/07-flex-layout-2/solution/solution.css @@ -1,89 +1,87 @@ body { - font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, - Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif; - margin: 0; - min-height: 100vh; + font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif; + margin: 0; + min-height: 100vh; } .header { - height: 72px; - background: darkmagenta; - color: white; + height: 72px; + background: darkmagenta; + color: white; } .footer { - height: 72px; - background: #eee; - color: darkmagenta; + height: 72px; + background: #eee; + color: darkmagenta; } .sidebar { - width: 300px; - background: royalblue; + width: 300px; + background: royalblue; } .card { - border: 1px solid #eee; - box-shadow: 2px 4px 16px rgba(0, 0, 0, 0.06); - border-radius: 4px; + border: 1px solid #eee; + box-shadow: 2px 4px 16px rgba(0,0,0,.06); + border-radius: 4px; } /* SOLUTION */ body { - display: flex; - flex-direction: column; + display: flex; + flex-direction: column; } .header { - display: flex; - align-items: center; - padding: 0 16px; - font-size: 32px; - font-weight: 900; + display: flex; + align-items: center; + padding: 0 16px; + font-size: 32px; + font-weight: 900; } .body { - flex: 1; - display: flex; + flex: 1; + display: flex; } .sidebar { - flex-shrink: 0; - box-sizing: border-box; - padding: 16px; + flex-shrink: 0; + padding: 16px; } ul { - list-style-type: none; - margin: 0; - padding: 0; + list-style-type: none; + margin: 0; + padding: 0; } li { - margin-bottom: 16px; + margin-bottom: 16px; } a { - color: white; - text-decoration: none; - font-size: 24px; + color: white; + text-decoration: none; + font-size: 24px; } .container { - padding: 32px; - display: flex; - flex-wrap: wrap; + padding: 32px; + display: flex; + flex-wrap: wrap; } .card { - padding: 16px; - margin: 16px; - width: 300px; + padding: 16px; + margin: 16px; + width: 300px; } .footer { - display: flex; - align-items: center; - justify-content: center; + display: flex; + align-items: center; + justify-content: center; } From befceeb1e9819c6883583ad5a9c824ee4108d07f Mon Sep 17 00:00:00 2001 From: Arjun Date: Mon, 30 Jan 2023 11:40:47 +0530 Subject: [PATCH 3/4] =?UTF-8?q?=F0=9F=94=B2=20Fix=20inconsistency=20in=20s?= =?UTF-8?q?olution=20with=20correct=20formatting?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- flex/07-flex-layout-2/solution/solution.css | 1 + 1 file changed, 1 insertion(+) diff --git a/flex/07-flex-layout-2/solution/solution.css b/flex/07-flex-layout-2/solution/solution.css index 3ca1867..eb082a3 100644 --- a/flex/07-flex-layout-2/solution/solution.css +++ b/flex/07-flex-layout-2/solution/solution.css @@ -50,6 +50,7 @@ body { .sidebar { flex-shrink: 0; padding: 16px; + box-sizing: border-box; } ul { From ea9fb9815f35690cd1fc79189c92d0aaa30a8879 Mon Sep 17 00:00:00 2001 From: Arjun Date: Tue, 31 Jan 2023 12:57:09 +0530 Subject: [PATCH 4/4] Move Border box to the non solution part --- flex/07-flex-layout-2/solution/solution.css | 2 +- flex/07-flex-layout-2/style.css | 1 + 2 files changed, 2 insertions(+), 1 deletion(-) diff --git a/flex/07-flex-layout-2/solution/solution.css b/flex/07-flex-layout-2/solution/solution.css index eb082a3..6355f53 100644 --- a/flex/07-flex-layout-2/solution/solution.css +++ b/flex/07-flex-layout-2/solution/solution.css @@ -19,6 +19,7 @@ body { .sidebar { width: 300px; background: royalblue; + box-sizing: border-box; } .card { @@ -50,7 +51,6 @@ body { .sidebar { flex-shrink: 0; padding: 16px; - box-sizing: border-box; } ul { diff --git a/flex/07-flex-layout-2/style.css b/flex/07-flex-layout-2/style.css index 7516f6b..6caf04c 100644 --- a/flex/07-flex-layout-2/style.css +++ b/flex/07-flex-layout-2/style.css @@ -19,6 +19,7 @@ body { .sidebar { width: 300px; background: royalblue; + box-sizing: border-box; } .card {