outside the html????
This commit is contained in:
parent
d1a38eaa0a
commit
16c451c13d
3 changed files with 80 additions and 81 deletions
|
@ -2,87 +2,8 @@
|
|||
<html>
|
||||
<head>
|
||||
<title>/</title>
|
||||
<style>
|
||||
* {
|
||||
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>
|
||||
<link rel="stylesheet" href="/style.css" />
|
||||
<script src="/script.js" />
|
||||
</head>
|
||||
<body id="body">
|
||||
<div class="border">
|
||||
|
|
9
site/script.js
Normal file
9
site/script.js
Normal 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
69
site/style.css
Normal 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%;
|
||||
}
|
Loading…
Add table
Add a link
Reference in a new issue