update styles

This commit is contained in:
WinsDominoes 2024-05-09 18:36:18 +07:00
parent 831ca34b99
commit d80866d434
3 changed files with 64 additions and 4 deletions

View File

@ -13,9 +13,9 @@
--light-nav-darker-shade-color: rgba(0, 0, 0, 0.12);
--light-card-bg-color: #ffffff;
--light-card-fg-color: rgba(0, 0, 0, 0.8);
--light-card-shade-color: rgba(0, 0, 0, 0.07);
--light-card-shade-color: rgba(0, 0, 0, 0.20);
--dark-bg: #242424;
--dark-bg-color: #242424;
--dark-fg-color: #ffffff;
--dark-nav-bg-color: #303030;
--dark-nav-fg-color: #ffffff;
@ -34,7 +34,6 @@
}
* {
background-color: light-dark(var(--light-bg-color), var(--dark-bg-color));
color: light-dark(var(--light-fg-color), var(--dark-fg-color));
}
@ -49,6 +48,8 @@ html, body {
padding: 0;
box-sizing: border-box;
background-color: light-dark(var(--light-bg-color), var(--dark-bg-color));
}
h1, h2, h3, h4, h5, h6, p {
@ -81,6 +82,7 @@ header {
width: 100%;
height: 50px;
display: flex;
background-color: light-dark(var(--light-bg-color), var(--dark-bg-color));
box-shadow: 1px 1px 4px 0 light-dark(var(--light-nav-shade-color), var(--dark-nav-shade-color));
align-items: center;
}
@ -145,6 +147,7 @@ header {
align-items: center;
justify-content: center;
text-align: center;
row-gap: 1rem;
padding: 10px;
}
@ -165,7 +168,7 @@ header {
}
.main-apps > #heading {
margin: 2rem 0 2rem 0;
margin: 2rem 0 1rem 0;
}
.app-grid {
@ -223,6 +226,25 @@ header {
border-radius: 0.75rem;
}
footer {
background-color: light-dark(var(--light-card-bg-color), var(--dark-card-bg-color));
text-align: center;
margin-top: 1rem;
padding: 1rem 0;
}
footer > .info {
display: flex;
}
footer > .info a:hover {
text-decoration: underline;
}
footer > .info > span {
flex: auto;
}
/* Screens smaller than 480 pixels */
@media (max-width: 420px) {
.nav {
@ -300,4 +322,10 @@ header {
max-width: 100%;
height: 64px;
}
footer > .info {
display: flex;
flex-direction: column;
row-gap: 0.5rem;
}
}

View File

@ -123,6 +123,21 @@
</main>
<footer>
<div class="info">
<span>Made by
<b>
<a href="https://winsdominoes.net">Win</a>
</b>
with ❤️ &
<b>
<a href="https://git.winscloud.net/winsdominoes/winscloud-apps">Open Source</a>
</b>
</span>
<span>
Licensed under the <b><a href="https://www.gnu.org/licenses/gpl-3.0.en.html">GPL-3.0-or-later License</a></b>
</span>
</div>
</footer>
</body>

17
test.html Normal file
View File

@ -0,0 +1,17 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
html, body {
background-color: rgba(0, 0, 0, 0.8);
}
</style>
</head>
<body>
</body>
</html>