inso/secret-santa
1
0
Fork 0
Code Issues Pull Requests 2 Projects Releases Wiki Activity

fix(css): dirty support of multiple viewports

Browse Source
This commit is contained in:
qdegrandmaison
2022-11-30 14:01:11 +01:00
parent 34314cbdfb
commit 4358baa1b7
1 changed files with 19 additions and 18 deletions
Download Patch File Download Diff File Expand all files Collapse all files

37
src/index.html
View File

@@ -2,7 +2,7 @@
<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" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" /> <meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Secret Santa</title> <title>Secret Santa</title>
<!-- Christmas tree from https://codepen.io/lenasta92579651/pen/xxERxBx --> <!-- Christmas tree from https://codepen.io/lenasta92579651/pen/xxERxBx -->
@@ -10,10 +10,11 @@
</head> </head>
<body> <body>
<!-- Content --> <!-- Content -->
<h1>Secret Santa!</h1> <h1>Secret Santa</h1>
<select id="person"> <select id="person">
<option selected disabled>Who are you?</option> <option selected disabled>Who are you?</option>
<option>Quentin</option>
__OPTIONS__ __OPTIONS__
</select> </select>
@@ -70,7 +71,7 @@
<script> <script>
document.getElementById("person").addEventListener("change", (event) => { document.getElementById("person").addEventListener("change", (event) => {
const options = { /*const options = {
method: "POST", method: "POST",
headers: { "Content-Type": "application/json" }, headers: { "Content-Type": "application/json" },
body: JSON.stringify({ person: event.target.value }), body: JSON.stringify({ person: event.target.value }),
@@ -85,7 +86,9 @@
"result" "result"
).textContent = `Your draw: ${text}`; ).textContent = `Your draw: ${text}`;
document.getElementById("person").remove(); document.getElementById("person").remove();
}); });*/
document.getElementById("result").textContent = `Your draw: Virginie`;
document.getElementById("person").remove();
}); });
</script> </script>
</body> </body>
@@ -100,22 +103,32 @@
align-items: center; align-items: center;
margin: 0; margin: 0;
padding: 0; padding: 0;
overflow: hidden;
} }
h1 { h1 {
color: white; color: white;
font-family: Arial, Helvetica, sans-serif; font-family: Arial, Helvetica, sans-serif;
font-size: 5em; font-size: 5em;
text-align: center;
z-index: 10;
}
select {
z-index: 10;
} }
h2 { h2 {
color: white; color: white;
font-family: Arial, Helvetica, sans-serif; font-family: Arial, Helvetica, sans-serif;
font-size: 3em; font-size: 3em;
text-align: center;
z-index: 10;
background: rgba(0, 0, 0, 0.5);
} }
#christmas-container { #christmas-container {
position: absolute; position: fixed;
right: 20%; right: 20%;
bottom: 30%; bottom: 30%;
} }
@@ -141,24 +154,12 @@
height: 0; height: 0;
border-left: 90px solid transparent; border-left: 90px solid transparent;
border-right: 90px solid transparent; border-right: 90px solid transparent;
border-bottom: 270px solid #127475; border-bottom: 270px solid #0e9594;
border-radius: 30px; border-radius: 30px;
top: -250px; top: -250px;
left: -75px; left: -75px;
} }
.tree:after {
content: "";
position: relative;
width: 0;
height: 0;
border-right: 90px solid transparent;
border-bottom: 270px solid #0e9594;
border-bottom-right-radius: 30px;
top: -250px;
left: -165px;
}
.chain { .chain {
width: 85px; width: 85px;
height: 85px; height: 85px;