diff --git a/task_1_html_css/src/card.css b/task_1_html_css/src/card.css
index d44516a..3526896 100644
--- a/task_1_html_css/src/card.css
+++ b/task_1_html_css/src/card.css
@@ -1,5 +1,5 @@
/* new */
-body {
+.card-body {
display: flex;
justify-content: space-between;
}
diff --git a/task_1_html_css/src/card.html b/task_1_html_css/src/card.html
index 7586676..ab61c61 100644
--- a/task_1_html_css/src/card.html
+++ b/task_1_html_css/src/card.html
@@ -9,7 +9,7 @@
-
+
How to start?
diff --git a/task_1_html_css/src/index.html b/task_1_html_css/src/index.html
index a283215..ddf7406 100644
--- a/task_1_html_css/src/index.html
+++ b/task_1_html_css/src/index.html
@@ -5,6 +5,7 @@
Document
+
@@ -113,6 +114,7 @@
+
A card with a table
diff --git a/task_1_html_css/src/layout.css b/task_1_html_css/src/layout.css
index d3f0f5f..56b1d33 100644
--- a/task_1_html_css/src/layout.css
+++ b/task_1_html_css/src/layout.css
@@ -1,17 +1,46 @@
-:root {
-}
-
body {
overflow: hidden;
color: black;
+ /* else defaults to have padding nonzero */
+ padding: 0;
+
+ display: grid;
+ grid-template-columns: 1fr 8fr;
+ grid-template-rows: 1fr 8fr 1fr;
+ grid-template-areas:
+ "sidebar header"
+ "sidebar main"
+ "footer footer";
+
}
+/* I only found out using the "large" display as a base is
+ * a bad practice after writing this. I realize this is suboptimal.
+ */
+@media screen and (width <= 500px) {
+ /* new sidebar size for small display */
+ body {
+ grid-template-columns: 12% 1fr;
+ }
+ /* make text in sidebar vanish on small display */
+ body > section > ul > li > a > span {
+ display: none;
+ }
+}
+
+
body > section {
border-right: 1px solid var(--border-color);
+ grid-area: sidebar;
& ul {
list-style-type: none;
padding-inline-start: 0;
+ padding: 1rem;
+
+ & li {
+ padding: 0.5rem;
+ }
& li > a {
color: #999;
@@ -27,20 +56,47 @@ body > section {
body > header {
border-bottom: 1px solid var(--border-color);
+ grid-area: header;
+
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ padding: 0.5rem;
+
& h1 {
font-size: 1.75rem;
margin: 0;
flex-grow: 1;
}
+ /* icons */
+ & i {
+ padding: 0.25rem;
+ }
}
body > main {
grid-area: main;
+ display: flex;
+ flex-wrap: wrap;
+ justify-content: flex-start;
+
+ /* I'm unsure on how to do this without using margins */
+ & article {
+ margin-left: 1rem;
+ margin-top: 1rem;
+ }
+
height: calc(100vh - 100px);
overflow-y: scroll;
}
body > footer {
+ grid-area: footer;
+ padding: 0.5rem;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+
border-top: 1px solid var(--border-color);
background-color: #f0f0f0;
}