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

My changes & improvements

Browse Source
This commit is contained in:
Janis Hutz
2025-10-07 20:35:30 +02:00
parent 8c095cb3fc
commit 689bcfa3d1
5 changed files with 233 additions and 211 deletions
Download Patch File Download Diff File Expand all files Collapse all files

94
task_1_html_css/src/card.css
View File

@@ -1,87 +1,99 @@
/* new */ /* new */
.card-body { .card-body {
display: flex; display: flex;
justify-content: space-between; /* This is how you do the gaps properly */
} gap: 1rem;
padding: 1rem; /* You may also use margin here instead */
/* new */
article:has(footer) {
& main {
& img {
border-radius: var(--border-radius) var(--border-radius) 0 0;
}
}
}
/* new */
article:has(header) {
& main {
& img {
border-radius: 0 0 var(--border-radius) var(--border-radius);
}
}
}
article:has(.card-check:checked) {
#special {
opacity: 0%;
max-height: 0;
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;
height: min-content; height: min-content;
& header { .card-check {
display: none;
}
.card-open-symbol {
font-size: 1.5rem;
rotate: 90deg;
transition: rotate 0.5s;
cursor: pointer;
}
&:has(.card-check:checked) {
>main {
opacity: 0%;
max-height: 0;
transition: opacity 0.2s, max-height 0.2s ease 0.2s;
}
.card-open-symbol {
rotate: 0deg;
}
}
&:has(header) {
main {
img {
border-radius: 0 0 var(--border-radius) var(--border-radius);
}
}
}
&:has(footer) {
main {
img {
border-radius: var(--border-radius) var(--border-radius) 0 0;
}
}
}
header {
line-height: 2rem;
border-bottom: 1px solid var(--border-color); border-bottom: 1px solid var(--border-color);
padding: var(--space); padding: var(--space);
/* new */ /* new */
display: flex; display: flex;
flex-direction: row; flex-direction: row;
justify-content: space-between; justify-content: space-between;
align-items: center;
& a { a {
text-decoration: none; text-decoration: none;
/* new */
display: flex; display: flex;
align-items: center; align-items: center;
gap: 3px;
} }
} }
& main { main {
padding: var(--space); padding: var(--space);
width: inherit; width: inherit;
/* Need to use max-height. Only works on explicit values */
max-height: 2000px; max-height: 2000px;
transition: max-height 0.2s ease, opacity 0.2s 0.2s; transition: max-height 0.2s ease, opacity 0.2s 0.2s;
/* new */
&:has(img) { &:has(img) {
padding: 0; padding: 0;
} }
& img { img {
width: inherit; width: inherit;
/* new */
border-radius: var(--border-radius); border-radius: var(--border-radius);
margin-bottom: -6px;
} }
} }
& footer { footer {
border-top: 1px solid var(--border-color); border-top: 1px solid var(--border-color);
& ul { ul {
padding: 0; padding: 0;
list-style: none; list-style: none;
/* new */
/* I realize how janky this is, but it works. */
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;

2
task_1_html_css/src/card.html
View File

@@ -4,7 +4,7 @@
<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>Cards | Open data explorer</title>
<link href="default.css" rel="stylesheet" /> <link href="default.css" rel="stylesheet" />
<link href="card.css" rel="stylesheet" /> <link href="card.css" rel="stylesheet" />

28
task_1_html_css/src/contact.html
View File

@@ -5,7 +5,7 @@
<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" />
<title>Document</title> <title>Contact</title>
<link href="default.css" rel="stylesheet" /> <link href="default.css" rel="stylesheet" />
<link href="layout.css" rel="stylesheet" /> <link href="layout.css" rel="stylesheet" />
@@ -38,41 +38,41 @@
<form> <form>
<ul> <ul>
<li> <li>
<h2>Name</h2> <label for="name">Name<sup>*</sup></label>
</li> </li>
<li> <li>
<input type="text" placeholder="Jane Doe"> <input type="text" name="name" id="name" required minlength="4" placeholder="Jane Doe">
</li> </li>
<li> <li>
<h2>Email address</h2> <label for="email">Email address<sup>*</sup></label>
</li> </li>
<li> <li>
<input type="email" placeholder="jane.doe@example.com"> <input type="email" name="email" id="email" required placeholder="jane.doe@example.com">
</li> </li>
<li> <li>
<h2>Birthday</h2> <label for="dob">Birthday<sup>*</sup></label>
</li> </li>
<li> <li>
<input type="date" placeholder=""> <input type="date" name="dob" id="dob" required placeholder="">
</li> </li>
<li> <li>
<h2>Do you consent to our terms?</h2> <label for="terms">Do you consent to our terms?<sup>*</sup></label>
</li> </li>
<li> <li>
<div> <div>
<input type="radio"> <input type="radio" name="terms" id="yes-1" required value="YES">
<label>Yes</label> <label for="yes-1">Yes</label>
</div> </div>
<div> <div>
<input type="radio"> <input type="radio" name="terms" id="yes-2" required value="yes">
<label>Yes</label> <label for="yes-2">Yes</label>
</div> </div>
</li> </li>
<li> <li>
<h2>Please provide a joke:</h2> <label for="joke">Please provide a joke:</label>
</li> </li>
<li> <li>
<input type="text" placeholder="Go on, get creative."> <input type="text" name="joke" id="joke" minlength="5" placeholder="Go on, get creative.">
</li> </li>
<li> <li>

11
task_1_html_css/src/index.html
View File

@@ -5,7 +5,7 @@
<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" />
<title>Document</title> <title>Home | Open data explorer</title>
<link href="default.css" rel="stylesheet" /> <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" />
@@ -37,14 +37,17 @@
</ul> </ul>
</section> </section>
<main> <main class="card-body">
<article> <article>
<header> <header>
<input type="checkbox" id="card-check" class="card-check">
<!-- <label for="card-check" class="card-open-symbol">&#9655;</label> -->
<!-- TODO: If using FontAwesome icons, switch to -down and update css -->
<label for="card-check" class="card-open-symbol"><i class="fa-solid fa-caret-right"></i></label>
<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>
</header> </header>
<main id="special"> <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>

213
task_1_html_css/src/layout.css
View File

@@ -12,37 +12,107 @@ body {
"sidebar main" "sidebar main"
"footer footer"; "footer footer";
} >main>form {
margin-top: 20px;
width: 95%;
height: 100%;
ul {
/* hide dot on all ul's */
list-style-type: none;
}
/* I only found out using the "large" display as a base is bad while doing this.
* So yes, this is very janky.
*/
@media screen and (width > 1000px) { @media screen and (width > 1000px) {
form {
width: 60% width: 60%
} }
>ul {
display: grid;
grid-template-columns: 1fr;
grid-template-rows: 1fr 1fr 1fr 1fr 1fr;
grid-auto-flow: row;
max-height: 90%;
li {
margin: 1rem;
margin-bottom: 0;
margin-top: 0;
>label {
font-size: 1.2rem;
color: cornflowerblue;
font-weight: normal;
} }
@media screen and (width <=1000px) { >input {
form { width: 100%;
width: 80%; padding: 5px;
border: solid 2px rgb(219, 207, 207);
border-radius: 5px;
margin-bottom: 10px;
}
button {
width: 10rem;
margin: 5px;
padding: 10px;
border: none;
border-radius: 10px;
cursor: pointer;
transition: background-color 0.5s;
}
div {
padding: 0.5rem;
} }
} }
@media screen and (width <=700px) { @media screen and (width > 1000px) {
grid-template-columns: 1fr 2fr;
/* new sidebar size for small display */ li {
body { margin-bottom: 1rem;
grid-template-columns: 12% 1fr;
input {
margin-bottom: unset;
} }
}
}
}
}
>section {
border-right: 1px solid var(--border-color);
grid-area: sidebar;
ul {
padding-inline-start: 0;
padding: 1rem;
li {
padding: 0.5rem;
>a {
color: #999;
font-size: 0.9rem;
text-decoration: none;
word-break: normal;
}
>a:hover {
color: black;
}
}
}
}
@media screen and (max-width: 1252px) {
grid-template-columns: 4rem 1fr;
/* make text in sidebar vanish on small display */ /* make text in sidebar vanish on small display */
body>section>ul>li>a>span { >section>ul {
padding: 0.75rem;
>li>a {
font-size: 1.5rem;
>span {
display: none; display: none;
} }
@@ -50,86 +120,10 @@ ul {
width: 100%; width: 100%;
} }
} }
.bluebutton {
background-color: rgb(173, 115, 250);
color: white;
}
.bluebutton:hover {
background-color: rgb(187, 149, 233)
}
body>main>form {
& ul {
display: grid;
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;
border-style: solid;
border-color: rgb(219, 207, 207);
border-radius: 5px;
}
& button {
width: 10rem;
margin: 5px;
padding: 10px;
border: none;
border-radius: 10px;
}
& div {
padding: 0.5rem;
}
}
} }
} }
>header {
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;
font-size: 14px;
text-decoration: none;
}
& li>a:hover {
color: black;
}
}
}
body>header {
border-bottom: 1px solid var(--border-color); border-bottom: 1px solid var(--border-color);
grid-area: header; grid-area: header;
@@ -151,23 +145,17 @@ body>header {
} }
} }
body>main { >main {
grid-area: main; grid-area: main;
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
justify-content: flex-start; 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 { >footer {
grid-area: footer; grid-area: footer;
padding: 0.5rem; padding: 0.5rem;
display: flex; display: flex;
@@ -177,3 +165,22 @@ body>footer {
border-top: 1px solid var(--border-color); border-top: 1px solid var(--border-color);
background-color: #f0f0f0; background-color: #f0f0f0;
} }
}
ul {
/* hide dot on all ul's */
list-style-type: none;
}
.bluebutton {
background-color: rgb(173, 115, 250);
color: white;
transition: background-color 0.5s, border-radius 0.5s, color 0.5s;
border-radius: var(--border-radius);
}
.bluebutton:hover {
background-color: rgb(187, 149, 233);
color: rgb(20, 20, 20);
border-radius: 20px;
}