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>
|
<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
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