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

161
task_1_html_css/src/card.css
View File

@@ -1,103 +1,108 @@
/* new */ /* new */
.card-body { .card-body {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
} }
/* new */ /* new */
article:has(footer) { article:has(footer) {
& main { & main {
& img { & img {
border-radius: var(--border-radius) var(--border-radius) 0 0; border-radius: var(--border-radius) var(--border-radius) 0 0;
}
} }
}
} }
/* new */ /* new */
article:has(header) { article:has(header) {
& main { & main {
& img { & img {
border-radius: 0 0 var(--border-radius) var(--border-radius); border-radius: 0 0 var(--border-radius) var(--border-radius);
}
} }
}
} }
article:has(.card-check:checked) { article:has(.card-check:checked) {
#special { #special {
opacity: 0%; opacity: 0%;
max-height: 0; max-height: 0;
transition: opacity 0.2s, max-height 0.2s ease 0.2s; transition: opacity 0.2s, max-height 0.2s ease 0.2s;
} }
} }
article { article {
border: 1px solid var(--border-color); border: 1px solid var(--border-color);
border-radius: var(--border-radius); border-radius: var(--border-radius);
width: 350px; width: 350px;
line-height: 1.5rem; line-height: 1.5rem;
height: min-content; height: min-content;
& header { & header {
border-bottom: 1px solid var(--border-color); border-bottom: 1px solid var(--border-color);
padding: var(--space); padding: var(--space);
/* new */ /* new */
display: flex;
flex-direction: row;
justify-content: space-between;
& a {
text-decoration: none;
/* new */
display: flex;
align-items: center;
}
}
& main {
padding: var(--space);
width: inherit;
/* Need to use max-height. Only works on explicit values */
max-height: 2000px;
transition: max-height 0.2s ease, opacity 0.2s 0.2s;
/* new */
&:has(img) {
padding: 0;
}
& img {
width: inherit;
/* new */
border-radius: var(--border-radius);
}
}
& footer {
border-top: 1px solid var(--border-color);
& ul {
padding: 0;
list-style: none;
/* new */
/* I realize how janky this is, but it works. */
display: flex;
justify-content: space-between;
& li {
display: flex; display: flex;
align-items: center; flex-direction: row;
justify-content: space-between; justify-content: space-between;
width: 100%;
} & a {
& li:not(:has(+ li)) { text-decoration: none;
justify-content: center; /* new */
} display: flex;
& li:has(+ li)::before { align-items: center;
content: ""; }
} }
& li:has(+ li)::after {
content: "|"; & main {
} padding: var(--space);
width: inherit;
/* Need to use max-height. Only works on explicit values */
max-height: 2000px;
transition: max-height 0.2s ease, opacity 0.2s 0.2s;
/* new */
&:has(img) {
padding: 0;
}
& img {
width: inherit;
/* new */
border-radius: var(--border-radius);
}
}
& footer {
border-top: 1px solid var(--border-color);
& ul {
padding: 0;
list-style: none;
/* new */
/* 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: "|";
}
}
} }
}
} }

236
task_1_html_css/src/card.html
View File

@@ -1,6 +1,7 @@
<!doctype html> <!doctype html>
<html lang="en"> <html lang="en">
<head>
<head>
<meta charset="UTF-8" /> <meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title> <title>Document</title>
@@ -8,139 +9,134 @@
<link href="card.css" rel="stylesheet" /> <link href="card.css" rel="stylesheet" />
<script src="./main.ts" type="module"></script> <script src="./main.ts" type="module"></script>
</head> </head>
<body class="card-body">
<body class="card-body">
<article> <article>
<header> <header>
<h1>How to start?</h1> <h1>How to start?</h1>
<a href="#"><i class="fa fa-solid fa-edit"></i> Edit</a> <a href="#"><i class="fa fa-solid fa-edit"></i> Edit</a>
</header> </header>
<main> <main>
<h1>Here are some tips</h1> <h1>Here are some tips</h1>
<p>First think about where to you need some flexbox layout.</p> <p>First think about where to you need some flexbox layout.</p>
<ol> <ol>
<li> <li>
Look at the Look at the
<a <a href="https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Flexbox">mdn docs</a>
href="https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Flexbox" </li>
>mdn docs</a <li>Start with the inner components.</li>
> <li>Do not be afraid to nest flex boxes.</li>
</li> <li>Start with the header.</li>
<li>Start with the inner components.</li> </ol>
<li>Do not be afraid to nest flex boxes.</li> <h2>How to align the images</h2>
<li>Start with the header.</li> <p>
</ol> We have added some challenge to get the border-radius of the images
<h2>How to align the images</h2> right. Be creative and have a look at the following css selectors and
<p> use them creatively.
We have added some challenge to get the border-radius of the images </p>
right. Be creative and have a look at the following css selectors and <ul>
use them creatively. <li>
</p> <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/:has"><code>:has</code></a>
<ul> </li>
<li> <li>
<a href="https://developer.mozilla.org/en-US/docs/Web/CSS/:has" <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/:not"><code>:not</code></a>
><code>:has</code></a </li>
> <li>
</li> Or try another approach, there are many ways in css to achieve the
<li> desired behaviour.
<a href="https://developer.mozilla.org/en-US/docs/Web/CSS/:not" </li>
><code>:not</code></a </ul>
> <h2>The action menu</h2>
</li> <p>The final challenge.</p>
<li> <ul>
Or try another approach, there are many ways in css to achieve the <li>Think about how to add the separator with css only.</li>
desired behaviour. <li>
</li> What pseudo classes can you use to not add the separator to every
</ul> element?
<h2>The action menu</h2> </li>
<p>The final challenge.</p> <li>
<ul> You might need to combine multiple pseudo classes to achieve the
<li>Think about how to add the separator with css only.</li> desired behaviour.
<li> </li>
What pseudo classes can you use to not add the separator to every </ul>
element? </main>
</li> <footer>
<li> <ul>
You might need to combine multiple pseudo classes to achieve the <li>
desired behaviour. <i class="fa fa-solid fa-user"></i>
</li> </li>
</ul> <li>
</main> <i class="fa fa-solid fa-cogs"></i>
<footer> </li>
<ul> <li>
<li> <i class="fa fa-solid fa-share"></i>
<i class="fa fa-solid fa-user"></i> </li>
</li> </ul>
<li> </footer>
<i class="fa fa-solid fa-cogs"></i>
</li>
<li>
<i class="fa fa-solid fa-share"></i>
</li>
</ul>
</footer>
</article> </article>
<article> <article>
<header> <header>
<h1>A card without a footer</h1> <h1>A card without a footer</h1>
<a href="#"><i class="fa fa-solid fa-edit"></i> Edit</a> <a href="#"><i class="fa fa-solid fa-edit"></i> Edit</a>
</header> </header>
<main> <main>
This card has no footer. This card has no footer.
</main> </main>
</article> </article>
<article> <article>
<main> <main>
This card has no header. This card has no header.
</main> </main>
<footer> <footer>
<ul> <ul>
<li> <li>
<i class="fa fa-solid fa-user"></i> <i class="fa fa-solid fa-user"></i>
</li> </li>
<li> <li>
<i class="fa fa-solid fa-cogs"></i> <i class="fa fa-solid fa-cogs"></i>
</li> </li>
<li> <li>
<i class="fa fa-solid fa-share"></i> <i class="fa fa-solid fa-share"></i>
</li> </li>
</ul> </ul>
</footer> </footer>
</article> </article>
<article> <article>
<header> <header>
<h1>Image with head</h1> <h1>Image with head</h1>
</header> </header>
<main> <main>
<img src="https://picsum.photos/250/300" alt="" /> <img src="https://picsum.photos/250/300" alt="" />
</main> </main>
</article> </article>
<article> <article>
<main> <main>
<img src="https://picsum.photos/250/300" alt="" /> <img src="https://picsum.photos/250/300" alt="" />
</main> </main>
</article> </article>
<article> <article>
<main> <main>
<img src="https://picsum.photos/250/300" alt="" /> <img src="https://picsum.photos/250/300" alt="" />
</main> </main>
<footer> <footer>
<ul> <ul>
<li> <li>
<i class="fa fa-solid fa-user"></i> <i class="fa fa-solid fa-user"></i>
</li> </li>
<li> <li>
<i class="fa fa-solid fa-cogs"></i> <i class="fa fa-solid fa-cogs"></i>
</li> </li>
<li> <li>
<i class="fa fa-solid fa-share"></i> <i class="fa fa-solid fa-share"></i>
</li> </li>
</ul> </ul>
</footer> </footer>
</article> </article>
</body> </body>
</html> </html>

145
task_1_html_css/src/contact.html
View File

@@ -1,6 +1,7 @@
<!doctype html> <!doctype html>
<html lang="en"> <html lang="en">
<head>
<head>
<meta charset="UTF-8" /> <meta charset="UTF-8" />
<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" />
@@ -9,90 +10,84 @@
<link href="layout.css" rel="stylesheet" /> <link href="layout.css" rel="stylesheet" />
<script src="./main.ts" type="module"></script> <script src="./main.ts" type="module"></script>
</head> </head>
<body>
<body>
<header> <header>
<h1>Contact</h1> <h1>Contact</h1>
</header> </header>
<section> <section>
<ul> <ul>
<li> <li>
<a href="/" title="Home" <a href="/" title="Home"><i class="fa-solid fa-home"></i> <span>Home</span></a>
><i class="fa-solid fa-home"></i> <span>Home</span></a </li>
> <li>
</li> <a href="/" title="Dashboard"><i class="fa-solid fa-dashboard"></i> <span>Dashboard</span></a>
<li> </li>
<a href="/" title="Dashboard" <li>
><i class="fa-solid fa-dashboard"></i> <span>Dashboard</span></a <a href="/" title="Profile"><i class="fa-solid fa-user"></i> <span>Profile</span></a>
> </li>
</li> <li>
<li> <a href="./contact.html" title="Contact"><i class="fa-solid fa-message"></i> <span>Contact</span></a>
<a href="/" title="Profile" </li>
><i class="fa-solid fa-user"></i> <span>Profile</span></a </ul>
>
</li>
<li>
<a href="./contact.html" title="Contact"
><i class="fa-solid fa-message"></i> <span>Contact</span></a
>
</li>
</ul>
</section> </section>
<main> <main>
<form> <form>
<ul> <ul>
<li> <li>
<h2>Name</h2> <h2>Name</h2>
</li> </li>
<li> <li>
<input type="text" placeholder="Jane Doe"> <input type="text" placeholder="Jane Doe">
</li> </li>
<li> <li>
<h2>Email address</h2> <h2>Email address</h2>
</li> </li>
<li> <li>
<input type="email" placeholder="jane.doe@example.com"> <input type="email" placeholder="jane.doe@example.com">
</li> </li>
<li> <li>
<h2>Birthday</h2> <h2>Birthday</h2>
</li> </li>
<li> <li>
<input type="date" placeholder=""> <input type="date" placeholder="">
</li> </li>
<li> <li>
<h2>Do you consent to our terms?</h2> <h2>Do you consent to our terms?</h2>
</li> </li>
<li> <li>
<div> <div>
<input type="radio"> <input type="radio">
<label>Yes</label> <label>Yes</label>
</div> </div>
<div> <div>
<input type="radio"> <input type="radio">
<label>Yes</label> <label>Yes</label>
</div> </div>
</li> </li>
<li> <li>
<h2>Please provide a joke:</h2> <h2>Please provide a joke:</h2>
</li> </li>
<li> <li>
<input type="text" placeholder="Go on, get creative."> <input type="text" placeholder="Go on, get creative.">
</li> </li>
<li> <li>
</li> </li>
<li> <li>
<button class="bluebutton">Submit</button> <button class="bluebutton">Submit</button>
<button>Reset</button> <button>Reset</button>
</li> </li>
</ul> </ul>
</form> </form>
</main> </main>
<footer> <footer>
<div>Made with <i class="fa-solid fa-heart"></i> by David Sichau</div> <div>Made with <i class="fa-solid fa-heart"></i> by David Sichau</div>
</footer> </footer>
</body> </body>
</html> </html>

18
task_1_html_css/src/default.css
View File

@@ -1,18 +1,18 @@
:root { :root {
--border-color: #a0a0a0; --border-color: #a0a0a0;
--border-radius: 1rem; --border-radius: 1rem;
--space: 1rem; --space: 1rem;
--primary-color: #1677ff; --primary-color: #1677ff;
--dark-primary-color: #003eb3; --dark-primary-color: #003eb3;
} }
body { body {
padding: var(--space); padding: var(--space);
height: 100vh; height: 100vh;
width: 100vw; width: 100vw;
} }
h1, h1,
p { p {
margin-block: 0.25rem; margin-block: 0.25rem;
} }

330
task_1_html_css/src/index.html
View File

@@ -1,6 +1,7 @@
<!doctype html> <!doctype html>
<html lang="en"> <html lang="en">
<head>
<head>
<meta charset="UTF-8" /> <meta charset="UTF-8" />
<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" />
@@ -10,189 +11,176 @@
<link href="card.css" rel="stylesheet" /> <link href="card.css" rel="stylesheet" />
<script src="./main.ts" type="module"></script> <script src="./main.ts" type="module"></script>
</head> </head>
<body>
<body>
<header> <header>
<h1>Open data explorer</h1> <h1>Open data explorer</h1>
<i class="fa fa-solid fa-user"></i> <i class="fa fa-solid fa-user"></i>
<i class="fa fa-solid fa-bars"></i> <i class="fa fa-solid fa-bars"></i>
</header> </header>
<section> <section>
<ul> <ul>
<li> <li>
<a href="/" title="Home" <a href="/" title="Home"><i class="fa-solid fa-home"></i> <span>Home</span></a>
><i class="fa-solid fa-home"></i> <span>Home</span></a </li>
> <li>
</li> <a href="/" title="Dashboard"><i class="fa-solid fa-dashboard"></i> <span>Dashboard</span></a>
<li> </li>
<a href="/" title="Dashboard" <li>
><i class="fa-solid fa-dashboard"></i> <span>Dashboard</span></a <a href="/" title="Profile"><i class="fa-solid fa-user"></i> <span>Profile</span></a>
> </li>
</li> <li>
<li> <a href="./contact.html" title="Contact"><i class="fa-solid fa-message"></i> <span>Contact</span></a>
<a href="/" title="Profile" </li>
><i class="fa-solid fa-user"></i> <span>Profile</span></a </ul>
>
</li>
<li>
<a href="./contact.html" title="Contact"
><i class="fa-solid fa-message"></i> <span>Contact</span></a
>
</li>
</ul>
</section> </section>
<main> <main>
<article> <article>
<header> <header>
<h1>How to start?</h1> <h1>How to start?</h1>
<a href="#"><i class="fa fa-solid fa-edit"></i> Edit</a> <a href="#"><i class="fa fa-solid fa-edit"></i> Edit</a>
<a href="#"><input type="checkbox" id="card-check" class="card-check"></a> <a href="#"><input type="checkbox" id="card-check" class="card-check"></a>
</header> </header>
<main id="special"> <main id="special">
<h1>Here are some tips</h1> <h1>Here are some tips</h1>
<p>First think about where to you need some flexbox layout.</p> <p>First think about where to you need some flexbox layout.</p>
<ol> <ol>
<li> <li>
Look at the Look at the
<a <a href="https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Flexbox">mdn docs</a>
href="https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Flexbox" </li>
>mdn docs</a <li>Start with the inner components.</li>
> <li>Do not be afraid to nest flex boxes.</li>
</li> <li>Start with the header.</li>
<li>Start with the inner components.</li> </ol>
<li>Do not be afraid to nest flex boxes.</li> <h2>How to align the images</h2>
<li>Start with the header.</li> <p>
</ol> We have added some challenge to get the border-radius of the images
<h2>How to align the images</h2> right. Be creative and have a look at the following css selectors
<p> and use them creatively.
We have added some challenge to get the border-radius of the images </p>
right. Be creative and have a look at the following css selectors <ul>
and use them creatively. <li>
</p> <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/:has"><code>:has</code></a>
<ul> </li>
<li> <li>
<a href="https://developer.mozilla.org/en-US/docs/Web/CSS/:has" <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/:not"><code>:not</code></a>
><code>:has</code></a </li>
> <li>
</li> Or try another approach, there are many ways in css to achieve the
<li> desired behaviour.
<a href="https://developer.mozilla.org/en-US/docs/Web/CSS/:not" </li>
><code>:not</code></a </ul>
> <h2>The action menu</h2>
</li> <p>The final challenge.</p>
<li> <ul>
Or try another approach, there are many ways in css to achieve the <li>Think about how to add the separator with css only.</li>
desired behaviour. <li>
</li> What pseudo classes can you use to not add the separator to every
</ul> element?
<h2>The action menu</h2> </li>
<p>The final challenge.</p> <li>
<ul> You might need to combine multiple pseudo classes to achieve the
<li>Think about how to add the separator with css only.</li> desired behaviour.
<li> </li>
What pseudo classes can you use to not add the separator to every </ul>
element? </main>
</li> <footer>
<li> <ul>
You might need to combine multiple pseudo classes to achieve the <li>
desired behaviour. <i class="fa fa-solid fa-user"></i>
</li> </li>
</ul> <li>
</main> <i class="fa fa-solid fa-cogs"></i>
<footer> </li>
<ul> <li>
<li> <i class="fa fa-solid fa-share"></i>
<i class="fa fa-solid fa-user"></i> </li>
</li> </ul>
<li> </footer>
<i class="fa fa-solid fa-cogs"></i> </article>
</li>
<li>
<i class="fa fa-solid fa-share"></i>
</li>
</ul>
</footer>
</article>
<article> <article>
<header> <header>
<h1>A card with a table</h1> <h1>A card with a table</h1>
<a href="#"><i class="fa fa-solid fa-edit"></i> Edit</a> <a href="#"><i class="fa fa-solid fa-edit"></i> Edit</a>
</header> </header>
<main> <main>
<table> <table>
<thead> <thead>
<tr> <tr>
<th>Key</th> <th>Key</th>
<th>Value</th> <th>Value</th>
</tr> </tr>
</thead> </thead>
<tbody> <tbody>
<tr> <tr>
<td>1</td> <td>1</td>
<td>blub</td> <td>blub</td>
</tr> </tr>
<tr> <tr>
<td>4</td> <td>4</td>
<td>blubber</td> <td>blubber</td>
</tr> </tr>
</tbody> </tbody>
</table> </table>
</main> </main>
<footer> <footer>
<ul> <ul>
<li> <li>
<i class="fa fa-solid fa-user"></i> <i class="fa fa-solid fa-user"></i>
</li> </li>
<li> <li>
<i class="fa fa-solid fa-cogs"></i> <i class="fa fa-solid fa-cogs"></i>
</li> </li>
<li> <li>
<i class="fa fa-solid fa-share"></i> <i class="fa fa-solid fa-share"></i>
</li> </li>
</ul> </ul>
</footer> </footer>
</article> </article>
<article> <article>
<header> <header>
<h1>Image with head</h1> <h1>Image with head</h1>
</header> </header>
<main> <main>
<img src="https://picsum.photos/250/300" alt="" /> <img src="https://picsum.photos/250/300" alt="" />
</main> </main>
</article> </article>
<article> <article>
<main> <main>
<img src="https://picsum.photos/250/300" alt="" /> <img src="https://picsum.photos/250/300" alt="" />
</main> </main>
</article> </article>
<article> <article>
<main> <main>
<img src="https://picsum.photos/250/300" alt="" /> <img src="https://picsum.photos/250/300" alt="" />
</main> </main>
<footer> <footer>
<ul> <ul>
<li> <li>
<i class="fa fa-solid fa-user"></i> <i class="fa fa-solid fa-user"></i>
</li> </li>
<li> <li>
<i class="fa fa-solid fa-cogs"></i> <i class="fa fa-solid fa-cogs"></i>
</li> </li>
<li> <li>
<i class="fa fa-solid fa-share"></i> <i class="fa fa-solid fa-share"></i>
</li> </li>
</ul> </ul>
</footer> </footer>
</article> </article>
</main> </main>
<footer> <footer>
<div>Made with <i class="fa-solid fa-heart"></i> by David Sichau</div> <div>Made with <i class="fa-solid fa-heart"></i> by David Sichau</div>
</footer> </footer>
</body> </body>
</html> </html>

268
task_1_html_css/src/layout.css
View File

@@ -1,169 +1,179 @@
body { body {
overflow: hidden; overflow: hidden;
color: black; color: black;
/* else defaults to have padding nonzero */ /* else defaults to have padding nonzero */
padding: 0; padding: 0;
display: grid; display: grid;
grid-template-columns: 1fr 8fr; grid-template-columns: 1fr 8fr;
grid-template-rows: 1fr 8fr 1fr; grid-template-rows: 1fr 8fr 1fr;
grid-template-areas: grid-template-areas:
"sidebar header" "sidebar header"
"sidebar main" "sidebar main"
"footer footer"; "footer footer";
} }
ul { ul {
/* hide dot on all ul's */ /* hide dot on all ul's */
list-style-type: none; list-style-type: none;
} }
/* I only found out using the "large" display as a base is bad while doing this. /* I only found out using the "large" display as a base is bad while doing this.
* So yes, this is very janky. * So yes, this is very janky.
*/ */
@media screen and (width > 1000px) { @media screen and (width > 1000px) {
form { form {
width: 60% width: 60%
} }
} }
@media screen and (width <= 1000px) { @media screen and (width <=1000px) {
form { form {
width: 80%; width: 80%;
} }
} }
@media screen and (width <= 700px) { @media screen and (width <=700px) {
/* new sidebar size for small display */
body { /* new sidebar size for small display */
grid-template-columns: 12% 1fr; body {
} grid-template-columns: 12% 1fr;
/* make text in sidebar vanish on small display */ }
body > section > ul > li > a > span {
display: none; /* make text in sidebar vanish on small display */
} body>section>ul>li>a>span {
form { display: none;
width: 100%; }
}
form {
width: 100%;
}
} }
.bluebutton { .bluebutton {
background-color: rgb(173, 115, 250); background-color: rgb(173, 115, 250);
color: white; color: white;
} }
.bluebutton:hover { .bluebutton:hover {
background-color: rgb(187, 149, 233) background-color: rgb(187, 149, 233)
} }
body > main > form { body>main>form {
& ul { & ul {
display: grid; display: grid;
grid-template-columns: 1fr 2fr; grid-template-columns: 1fr 2fr;
grid-template-rows: 1fr 1fr 1fr 1fr 1fr; grid-template-rows: 1fr 1fr 1fr 1fr 1fr;
grid-auto-flow: row; grid-auto-flow: row;
& li {
display: flex; & li {
flex-direction: column; display: flex;
margin: 1rem; flex-direction: column;
& h2 { margin: 1rem;
font-size: large;
color: cornflowerblue; & h2 {
font-weight: normal; font-size: large;
} color: cornflowerblue;
& input { font-weight: normal;
padding: 5px; }
border-width: 2px;
border-style: solid; & input {
border-color: rgb(219, 207, 207); padding: 5px;
border-radius: 5px; border-width: 2px;
} border-style: solid;
& button { border-color: rgb(219, 207, 207);
width: 10rem; border-radius: 5px;
margin: 5px; }
padding: 10px;
border: none; & button {
border-radius: 10px; width: 10rem;
} margin: 5px;
& div { padding: 10px;
padding: 0.5rem; border: none;
} border-radius: 10px;
}
& div {
padding: 0.5rem;
}
}
} }
}
} }
body > section { body>section {
border-right: 1px solid var(--border-color); border-right: 1px solid var(--border-color);
grid-area: sidebar; grid-area: sidebar;
& ul { & ul {
list-style-type: none; list-style-type: none;
padding-inline-start: 0; padding-inline-start: 0;
padding: 1rem; padding: 1rem;
& li { & li {
padding: 0.5rem; padding: 0.5rem;
}
& li>a {
color: #999;
font-size: 14px;
text-decoration: none;
}
& li>a:hover {
color: black;
}
}
}
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;
} }
& li > a { /* icons */
color: #999; & i {
font-size: 14px; padding: 0.25rem;
text-decoration: none;
} }
& li > a:hover { }
color: black;
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 > header { body>footer {
border-bottom: 1px solid var(--border-color); grid-area: footer;
padding: 0.5rem;
display: flex;
justify-content: center;
align-items: center;
grid-area: header; border-top: 1px solid var(--border-color);
background-color: #f0f0f0;
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;
} }

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": { "devDependencies": {
"prettier": "^3.0.1", "prettier": "^3.0.1",
"typescript": "^5.1.6", "typescript": "^5.1.6",
"vite": "^4.4.9" "vite": "^7.1.9"
}, },
"dependencies": { "dependencies": {
"@fortawesome/fontawesome-free": "^6.4.2", "@fortawesome/fontawesome-free": "^6.4.2",

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

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