eth-janishutz/fundamentals-of-webengineering
1
0
Fork 0
mirror of https://github.com/janishutz/fundamentals-of-webengineering.git synced 2025-11-25 05:44:24 +00:00
Code Issues Packages Projects Releases Wiki Activity

Task2

Browse Source
This commit is contained in:
RobinB27
2025-10-07 16:26:06 +02:00
parent d5e78c7333
commit eb5884b878
4 changed files with 63 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
task_1_html_css/src/card.css
View File

@@ -1,5 +1,5 @@
/* new */ /* new */
body { .card-body {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
} }

2
task_1_html_css/src/card.html
View File

@@ -9,7 +9,7 @@
<script src="./main.ts" type="module"></script> <script src="./main.ts" type="module"></script>
</head> </head>
<body> <body class="card-body">
<article> <article>
<header> <header>
<h1>How to start?</h1> <h1>How to start?</h1>

2
task_1_html_css/src/index.html
View File

@@ -5,6 +5,7 @@
<meta content="IE=edge" http-equiv="X-UA-Compatible" /> <meta content="IE=edge" http-equiv="X-UA-Compatible" />
<meta content="width=device-width, initial-scale=1.0" name="viewport" /> <meta content="width=device-width, initial-scale=1.0" name="viewport" />
<title>Document</title> <title>Document</title>
<link href="default.css" rel="stylesheet" />
<link href="layout.css" rel="stylesheet" /> <link href="layout.css" rel="stylesheet" />
<link href="card.css" rel="stylesheet" /> <link href="card.css" rel="stylesheet" />
@@ -113,6 +114,7 @@
</ul> </ul>
</footer> </footer>
</article> </article>
<article> <article>
<header> <header>
<h1>A card with a table</h1> <h1>A card with a table</h1>

62
task_1_html_css/src/layout.css
View File

@@ -1,17 +1,46 @@
:root {
}
body { body {
overflow: hidden; overflow: hidden;
color: black; 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 { body > section {
border-right: 1px solid var(--border-color); border-right: 1px solid var(--border-color);
grid-area: sidebar;
& ul { & ul {
list-style-type: none; list-style-type: none;
padding-inline-start: 0; padding-inline-start: 0;
padding: 1rem;
& li {
padding: 0.5rem;
}
& li > a { & li > a {
color: #999; color: #999;
@@ -27,20 +56,47 @@ body > section {
body > header { body > header {
border-bottom: 1px solid var(--border-color); border-bottom: 1px solid var(--border-color);
grid-area: header;
display: flex;
justify-content: space-between;
align-items: center;
padding: 0.5rem;
& h1 { & h1 {
font-size: 1.75rem; font-size: 1.75rem;
margin: 0; margin: 0;
flex-grow: 1; flex-grow: 1;
} }
/* icons */
& i {
padding: 0.25rem;
}
} }
body > main { body > main {
grid-area: 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); height: calc(100vh - 100px);
overflow-y: scroll; overflow-y: scroll;
} }
body > footer { body > footer {
grid-area: footer;
padding: 0.5rem;
display: flex;
justify-content: center;
align-items: center;
border-top: 1px solid var(--border-color); border-top: 1px solid var(--border-color);
background-color: #f0f0f0; background-color: #f0f0f0;
} }