outside the html????

This commit is contained in:
Dario48true 2024-09-23 12:44:46 +02:00
parent d1a38eaa0a
commit 16c451c13d
3 changed files with 80 additions and 81 deletions

View file

@ -2,87 +2,8 @@
<html> <html>
<head> <head>
<title>/</title> <title>/</title>
<style> <link rel="stylesheet" href="/style.css" />
* { <script src="/script.js" />
margin: 0;
padding: 0;
box-sizing: border-box;
background-color: #161925;
}
::selection{
background-color: #00D3A7;
color: #fefefe;
}
html,
body {
height: 100%;
display: flex;
justify-content: center;
align-items: center;
}
.stretch {
width: calc(50vw - 4px);
color: #C3C7D1;
margin-top: 0;
}
.column {
flex-direction: column;
}
.row {
display: flex;
justify-content: space-between;
flex-direction: row;
}
.border {
display: flex;
justify-content: center;
align-items: center;
width: 50vw; /* 50% of the viewport's width */
height: 50vh; /* 50% of the viewport's height */
border: 2px solid white;
flex-direction: row; /* Stack children horizontaly */
justify-content: center; /* Align children to the top */
align-items: flex-start;
}
button {
background-color: #c6262e;
color=black;
border: 1px solid white;
cursor: pointer;
margin-left: auto;
}
button:hover {
background-color: #ed5353;
}
a {
text-decoration: none;
color: #C3C7D1;
}
img {
width: max(min(90%, 100px), 50px);
aspect-ratio: 1/1;
}
.folder {
width: 25%;
}
</style>
<script>
document
.getElementById("path")
.addEventListener("keydown", function (event) {
if (event.code === "Enter") {
window.location.href =
window.location.origin + event.target.value;
}
});
</script>
</head> </head>
<body id="body"> <body id="body">
<div class="border"> <div class="border">

9
site/script.js Normal file
View file

@ -0,0 +1,9 @@
document
.getElementById("path")
.addEventListener("keydown", function(event) {
if (event.code === "Enter") {
window.location.href =
window.location.origin + event.target.value;
}
});

69
site/style.css Normal file
View file

@ -0,0 +1,69 @@
* {
margin: 0;
padding: 0;
box-sizing: border-box;
background-color: #161925;
}
::selection {
background-color: #00d3a7;
color: #fefefe;
}
html,
body {
height: 100%;
display: flex;
justify-content: center;
align-items: center;
}
.stretch {
width: calc(50vw - 4px);
color: #c3c7d1;
margin-top: 0;
}
.column {
flex-direction: column;
}
.row {
display: flex;
justify-content: space-between;
flex-direction: row;
}
.border {
display: flex;
justify-content: center;
align-items: center;
width: 50vw; /* 50% of the viewport's width */
height: 50vh; /* 50% of the viewport's height */
border: 2px solid white;
flex-direction: row; /* Stack children horizontaly */
justify-content: center; /* Align children to the top */
align-items: flex-start;
}
button {
background-color: #c6262e;
color: black;
border: 1px solid white;
cursor: pointer;
margin-left: auto;
}
button:hover {
background-color: #ed5353;
}
a {
text-decoration: none;
color: #c3c7d1;
}
img {
width: max(min(90%, 100px), 50px);
aspect-ratio: 1/1;
}
.folder {
width: 25%;
}