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">
</head>
<body>
<main class="container">
<h1 class="header">infinifi</h1>
<h2>infinite lo-fi music in the background</h2>
<div class="button-container">
<button id="play-btn" class="button">play</button>
</div>
</main>
<div class="container">
<main>
<h1 class="header">infinifi</h1>
<h2>infinite lo-fi music in the background</h2>
<div class="button-container">
<button id="play-btn" class="button">play</button>
</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>
</body>
</html>

64
web/style.css
View File

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