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

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 */
.card-body {
display: flex;
justify-content: space-between;
}
/* 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;
}
/* This is how you do the gaps properly */
gap: 1rem;
padding: 1rem; /* You may also use margin here instead */
}
article {
border: 1px solid var(--border-color);
border-radius: var(--border-radius);
width: 350px;
line-height: 1.5rem;
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);
padding: var(--space);
/* new */
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
& a {
a {
text-decoration: none;
/* new */
display: flex;
align-items: center;
gap: 3px;
}
}
& main {
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 {
img {
width: inherit;
/* new */
border-radius: var(--border-radius);
margin-bottom: -6px;
}
}
& footer {
footer {
border-top: 1px solid var(--border-color);
& ul {
ul {
padding: 0;
list-style: none;
/* new */
/* I realize how janky this is, but it works. */
display: flex;
justify-content: space-between;

2
task_1_html_css/src/card.html
View File

@@ -4,7 +4,7 @@
<head>
<meta charset="UTF-8" />
<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="card.css" rel="stylesheet" />

28
task_1_html_css/src/contact.html
View File

@@ -5,7 +5,7 @@
<meta charset="UTF-8" />
<meta content="IE=edge" http-equiv="X-UA-Compatible" />
<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="layout.css" rel="stylesheet" />
@@ -38,41 +38,41 @@
<form>
<ul>
<li>
<h2>Name</h2>
<label for="name">Name<sup>*</sup></label>
</li>
<li>
<input type="text" placeholder="Jane Doe">
<input type="text" name="name" id="name" required minlength="4" placeholder="Jane Doe">
</li>
<li>
<h2>Email address</h2>
<label for="email">Email address<sup>*</sup></label>
</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>
<h2>Birthday</h2>
<label for="dob">Birthday<sup>*</sup></label>
</li>
<li>
<input type="date" placeholder="">
<input type="date" name="dob" id="dob" required placeholder="">
</li>
<li>
<h2>Do you consent to our terms?</h2>
<label for="terms">Do you consent to our terms?<sup>*</sup></label>
</li>
<li>
<div>
<input type="radio">
<label>Yes</label>
<input type="radio" name="terms" id="yes-1" required value="YES">
<label for="yes-1">Yes</label>
</div>
<div>
<input type="radio">
<label>Yes</label>
<input type="radio" name="terms" id="yes-2" required value="yes">
<label for="yes-2">Yes</label>
</div>
</li>
<li>
<h2>Please provide a joke:</h2>
<label for="joke">Please provide a joke:</label>
</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>

11
task_1_html_css/src/index.html
View File

@@ -5,7 +5,7 @@
<meta charset="UTF-8" />
<meta content="IE=edge" http-equiv="X-UA-Compatible" />
<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="layout.css" rel="stylesheet" />
<link href="card.css" rel="stylesheet" />
@@ -37,14 +37,17 @@
</ul>
</section>
<main>
<main class="card-body">
<article>
<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>
<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>
<main id="special">
<main>
<h1>Here are some tips</h1>
<p>First think about where to you need some flexbox layout.</p>
<ol>

225
task_1_html_css/src/layout.css
View File

@@ -12,124 +12,118 @@ body {
"sidebar main"
"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) {
form {
@media screen and (width > 1000px) {
width: 60%
}
}
@media screen and (width <=1000px) {
form {
width: 80%;
>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 <=700px) {
/* new sidebar size for small display */
body {
grid-template-columns: 12% 1fr;
>input {
width: 100%;
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 > 1000px) {
grid-template-columns: 1fr 2fr;
li {
margin-bottom: 1rem;
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 */
body>section>ul>li>a>span {
>section>ul {
padding: 0.75rem;
>li>a {
font-size: 1.5rem;
>span {
display: none;
}
form {
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;
}
}
}
}
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 {
>header {
border-bottom: 1px solid var(--border-color);
grid-area: header;
@@ -149,25 +143,19 @@ body>header {
& i {
padding: 0.25rem;
}
}
}
body>main {
>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 {
>footer {
grid-area: footer;
padding: 0.5rem;
display: flex;
@@ -176,4 +164,23 @@ body>footer {
border-top: 1px solid var(--border-color);
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;
}