From eb5884b878db051393af08bee5ac62fd009dcec2 Mon Sep 17 00:00:00 2001 From: RobinB27 Date: Tue, 7 Oct 2025 16:26:06 +0200 Subject: [PATCH] Task2 --- task_1_html_css/src/card.css | 2 +- task_1_html_css/src/card.html | 2 +- task_1_html_css/src/index.html | 2 ++ task_1_html_css/src/layout.css | 62 ++++++++++++++++++++++++++++++++-- 4 files changed, 63 insertions(+), 5 deletions(-) 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; }