kennethnym/infinifi
1
0
Fork 0
Code Issues 2 Pull Requests 2 Actions Packages Projects Releases Wiki Activity

feat: redesign

Browse Source
This commit is contained in:
Kenneth
2024-07-21 00:22:05 +01:00
parent ce49190066
commit c9a7420414
7 changed files with 54 additions and 28 deletions
Download Patch File Download Diff File Expand all files Collapse all files

BIN
web/images/cat-0.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 922 B

BIN
web/images/cat-1.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 928 B

BIN
web/images/cat-2.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 927 B

BIN
web/images/cat-3.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 932 B

BIN
web/images/eeping-cat.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 919 B

18
web/index.html
View File

@@ -5,13 +5,17 @@
<link rel="stylesheet" href="/style.css"> <link rel="stylesheet" href="/style.css">
</head> </head>
<body> <body>
<main class="container"> <div class="container">
<h1 class="header">infinifi</h1> <main>
<h2>infinite lo-fi music in the background</h2> <h1 class="header">infinifi</h1>
<div class="button-container"> <h2>infinite lo-fi music in the background</h2>
<button id="play-btn" class="button">play</button> <div class="button-container">
</div> <button id="play-btn" class="button">play</button>
</main> </div>
</main>
<img class="cat" src="/images/cat-0.png" />
<img class="eeping-cat" src="/images/eeping-cat.png" />
</div>
<script type="text/javascript" src="/script.js"></script> <script type="text/javascript" src="/script.js"></script>
</body> </body>
</html> </html>

64
web/style.css
View File

@@ -1,6 +1,8 @@
:root { :root {
font-family: monospace; font-family: monospace;
--text: #4c4f69; --text: #4c4f69;
--surface0: #ccd0da;
--surface1: #bcc0cc;
--base: #eff1f5; --base: #eff1f5;
--background-color: #f0f0f0; --background-color: #f0f0f0;
} }
@@ -8,6 +10,7 @@
@media (prefers-color-scheme: dark) { @media (prefers-color-scheme: dark) {
:root { :root {
--text: #cdd6f4; --text: #cdd6f4;
--surface1: #45475a;
--base: #1e1e2e; --base: #1e1e2e;
} }
} }
@@ -18,27 +21,18 @@ body {
} }
body { body {
height: 100vh; width: calc(100% - 4rem - 1px);
height: calc(100vh - 4rem - 1px);
padding: 2rem;
margin: 0; margin: 0;
display: flex; background-color: var(--base);
align-items: center;
justify-content: center;
background-color: #f0f0f0;
opacity: 1; opacity: 1;
background-image: radial-gradient(#000000 0.5px, #f0f0f0 0.5px); background-image: radial-gradient(var(--surface1) 1px, var(--base) 1px);
background-opacity: 0.8;
background-size: 10px 10px; background-size: 10px 10px;
color: var(--text); color: var(--text);
} }
@media (prefers-color-scheme: dark) {
body {
background-color: #1e1e2e;
opacity: 1;
background-image: radial-gradient(#585b70 0.5px, #1e1e2e 0.5px);
background-size: 10px 10px;
}
}
h1, h1,
h2, h2,
h3, h3,
@@ -49,25 +43,53 @@ h6 {
font-weight: 400; font-weight: 400;
} }
main {
display: flex;
flex-direction: column;
align-items: start;
margin: 4rem;
}
.container {
position: relative;
height: 100%;
width: 100%;
display: flex;
align-items: end;
justify-content: start;
border: 1px solid var(--text);
border-radius: 2px;
}
.header { .header {
font-weight: 800; font-weight: 800;
margin-bottom: 1rem; margin-bottom: 1rem;
} }
.container { .cat {
display: flex; position: absolute;
flex-direction: column; bottom: 0px;
align-items: start; right: 10%;
image-rendering: pixelated;
height: 30px;
}
.eeping-cat {
position: absolute;
image-rendering: pixelated;
top: -16px;
right: 50%;
height: 15px;
} }
@media (min-width: 768px) { @media (min-width: 768px) {
.container { main {
width: 80%; width: 80%;
} }
} }
@media (min-width: 1024px) { @media (min-width: 1024px) {
.container { main {
width: 50%; width: 50%;
} }
} }