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

Format

Browse Source
This commit is contained in:
Janis Hutz
2025-10-07 18:12:58 +02:00
parent 24258962c4
commit 8c095cb3fc
9 changed files with 1369 additions and 872 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
task_1_html_css/src/card.css
View File

@@ -76,6 +76,7 @@ article {
& footer {
border-top: 1px solid var(--border-color);
& ul {
padding: 0;
list-style: none;
@@ -83,18 +84,22 @@ article {
/* I realize how janky this is, but it works. */
display: flex;
justify-content: space-between;
& li {
display: flex;
align-items: center;
justify-content: space-between;
width: 100%;
}
& li:not(:has(+ li)) {
justify-content: center;
}
& li:has(+ li)::before {
content: "";
}
& li:has(+ li)::after {
content: "|";
}

16
task_1_html_css/src/card.html
View File

@@ -1,5 +1,6 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
@@ -9,6 +10,7 @@
<script src="./main.ts" type="module"></script>
</head>
<body class="card-body">
<article>
<header>
@@ -21,10 +23,7 @@
<ol>
<li>
Look at the
<a
href="https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Flexbox"
>mdn docs</a
>
<a href="https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Flexbox">mdn docs</a>
</li>
<li>Start with the inner components.</li>
<li>Do not be afraid to nest flex boxes.</li>
@@ -38,14 +37,10 @@
</p>
<ul>
<li>
<a href="https://developer.mozilla.org/en-US/docs/Web/CSS/:has"
><code>:has</code></a
>
<a href="https://developer.mozilla.org/en-US/docs/Web/CSS/:has"><code>:has</code></a>
</li>
<li>
<a href="https://developer.mozilla.org/en-US/docs/Web/CSS/:not"
><code>:not</code></a
>
<a href="https://developer.mozilla.org/en-US/docs/Web/CSS/:not"><code>:not</code></a>
</li>
<li>
Or try another approach, there are many ways in css to achieve the
@@ -143,4 +138,5 @@
</footer>
</article>
</body>
</html>

19
task_1_html_css/src/contact.html
View File

@@ -1,5 +1,6 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta content="IE=edge" http-equiv="X-UA-Compatible" />
@@ -10,6 +11,7 @@
<script src="./main.ts" type="module"></script>
</head>
<body>
<header>
<h1>Contact</h1>
@@ -18,24 +20,16 @@
<section>
<ul>
<li>
<a href="/" title="Home"
><i class="fa-solid fa-home"></i> <span>Home</span></a
>
<a href="/" title="Home"><i class="fa-solid fa-home"></i> <span>Home</span></a>
</li>
<li>
<a href="/" title="Dashboard"
><i class="fa-solid fa-dashboard"></i> <span>Dashboard</span></a
>
<a href="/" title="Dashboard"><i class="fa-solid fa-dashboard"></i> <span>Dashboard</span></a>
</li>
<li>
<a href="/" title="Profile"
><i class="fa-solid fa-user"></i> <span>Profile</span></a
>
<a href="/" title="Profile"><i class="fa-solid fa-user"></i> <span>Profile</span></a>
</li>
<li>
<a href="./contact.html" title="Contact"
><i class="fa-solid fa-message"></i> <span>Contact</span></a
>
<a href="./contact.html" title="Contact"><i class="fa-solid fa-message"></i> <span>Contact</span></a>
</li>
</ul>
</section>
@@ -95,4 +89,5 @@
<div>Made with <i class="fa-solid fa-heart"></i> by David Sichau</div>
</footer>
</body>
</html>

32
task_1_html_css/src/index.html
View File

@@ -1,5 +1,6 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta content="IE=edge" http-equiv="X-UA-Compatible" />
@@ -11,6 +12,7 @@
<script src="./main.ts" type="module"></script>
</head>
<body>
<header>
<h1>Open data explorer</h1>
@@ -21,24 +23,16 @@
<section>
<ul>
<li>
<a href="/" title="Home"
><i class="fa-solid fa-home"></i> <span>Home</span></a
>
<a href="/" title="Home"><i class="fa-solid fa-home"></i> <span>Home</span></a>
</li>
<li>
<a href="/" title="Dashboard"
><i class="fa-solid fa-dashboard"></i> <span>Dashboard</span></a
>
<a href="/" title="Dashboard"><i class="fa-solid fa-dashboard"></i> <span>Dashboard</span></a>
</li>
<li>
<a href="/" title="Profile"
><i class="fa-solid fa-user"></i> <span>Profile</span></a
>
<a href="/" title="Profile"><i class="fa-solid fa-user"></i> <span>Profile</span></a>
</li>
<li>
<a href="./contact.html" title="Contact"
><i class="fa-solid fa-message"></i> <span>Contact</span></a
>
<a href="./contact.html" title="Contact"><i class="fa-solid fa-message"></i> <span>Contact</span></a>
</li>
</ul>
</section>
@@ -56,10 +50,7 @@
<ol>
<li>
Look at the
<a
href="https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Flexbox"
>mdn docs</a
>
<a href="https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Flexbox">mdn docs</a>
</li>
<li>Start with the inner components.</li>
<li>Do not be afraid to nest flex boxes.</li>
@@ -73,14 +64,10 @@
</p>
<ul>
<li>
<a href="https://developer.mozilla.org/en-US/docs/Web/CSS/:has"
><code>:has</code></a
>
<a href="https://developer.mozilla.org/en-US/docs/Web/CSS/:has"><code>:has</code></a>
</li>
<li>
<a href="https://developer.mozilla.org/en-US/docs/Web/CSS/:not"
><code>:not</code></a
>
<a href="https://developer.mozilla.org/en-US/docs/Web/CSS/:not"><code>:not</code></a>
</li>
<li>
Or try another approach, there are many ways in css to achieve the
@@ -195,4 +182,5 @@
<div>Made with <i class="fa-solid fa-heart"></i> by David Sichau</div>
</footer>
</body>
</html>

10
task_1_html_css/src/layout.css
View File

@@ -35,14 +35,17 @@ ul {
}
@media screen and (width <=700px) {
/* 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;
}
form {
width: 100%;
}
@@ -65,15 +68,18 @@ body > main > form {
grid-template-columns: 1fr 2fr;
grid-template-rows: 1fr 1fr 1fr 1fr 1fr;
grid-auto-flow: row;
& li {
display: flex;
flex-direction: column;
margin: 1rem;
& h2 {
font-size: large;
color: cornflowerblue;
font-weight: normal;
}
& input {
padding: 5px;
border-width: 2px;
@@ -81,6 +87,7 @@ body > main > form {
border-color: rgb(219, 207, 207);
border-radius: 5px;
}
& button {
width: 10rem;
margin: 5px;
@@ -88,6 +95,7 @@ body > main > form {
border: none;
border-radius: 10px;
}
& div {
padding: 0.5rem;
}
@@ -114,6 +122,7 @@ body > section {
font-size: 14px;
text-decoration: none;
}
& li>a:hover {
color: black;
}
@@ -135,6 +144,7 @@ body > header {
margin: 0;
flex-grow: 1;
}
/* icons */
& i {
padding: 0.25rem;

1074
task_1_html_css/src/package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

2
task_1_html_css/src/package.json
View File

@@ -11,7 +11,7 @@
"devDependencies": {
"prettier": "^3.0.1",
"typescript": "^5.1.6",
"vite": "^4.4.9"
"vite": "^7.1.9"
},
"dependencies": {
"@fortawesome/fontawesome-free": "^6.4.2",

3
task_1_html_css/src/vite.config.js
View File

@@ -1,7 +1,6 @@
export default {
'server': {
'host': '0.0.0.0',
'port': 5173,
'port': 8080,
},
};