Update .gitignore to remove public/ and *.css entries; add new styles.css file for improved layout and design. The new CSS file includes styles for body, image container, images, descriptions, and navigation elements, enhancing the overall user interface.

This commit is contained in:
2024-12-28 10:46:48 -05:00
parent ac4cd9cba6
commit 09a34e2f38
2 changed files with 76 additions and 2 deletions

76
public/styles.css Normal file
View File

@@ -0,0 +1,76 @@
body {
margin: 0;
padding: 0;
height: 100vh;
background: #000;
font-family: "Courier New", Courier, monospace;
color: white;
display: flex;
justify-content: center;
align-items: center;
overflow: hidden;
}
.image-container {
position: relative;
height: 100vh;
width: auto;
display: flex;
justify-content: center;
align-items: center;
}
img {
height: 100vh;
width: auto;
display: block;
position: relative;
}
@media (max-aspect-ratio: 1/1) {
img {
height: auto;
width: 100vw;
}
}
.description {
position: absolute;
bottom: 20px;
left: 20px;
max-width: 80%;
text-align: left;
mix-blend-mode: hard-light;
color: white;
margin: 0;
font-size: 16px;
letter-spacing: 0.5px;
line-height: 1.4;
opacity: 0.7;
}
.navigation {
position: fixed;
bottom: 50%;
left: 0;
right: 0;
display: flex;
justify-content: space-between;
padding: 0 40px;
pointer-events: none;
}
.navigation a {
text-decoration: none;
color: white;
mix-blend-mode: difference;
font-size: 24px;
pointer-events: auto;
opacity: 0.7;
transition: opacity 0.3s ease;
padding: 20px;
}
.navigation a:hover {
opacity: 1;
}