update styles
This commit is contained in:
WinsDominoes
parent
831ca34b99
commit
d80866d434
|
|
@ -13,9 +13,9 @@
|
||||||
--light-nav-darker-shade-color: rgba(0, 0, 0, 0.12);
|
--light-nav-darker-shade-color: rgba(0, 0, 0, 0.12);
|
||||||
--light-card-bg-color: #ffffff;
|
--light-card-bg-color: #ffffff;
|
||||||
--light-card-fg-color: rgba(0, 0, 0, 0.8);
|
--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-fg-color: #ffffff;
|
||||||
--dark-nav-bg-color: #303030;
|
--dark-nav-bg-color: #303030;
|
||||||
--dark-nav-fg-color: #ffffff;
|
--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));
|
color: light-dark(var(--light-fg-color), var(--dark-fg-color));
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -49,6 +48,8 @@ html, body {
|
||||||
padding: 0;
|
padding: 0;
|
||||||
|
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
|
|
||||||
|
background-color: light-dark(var(--light-bg-color), var(--dark-bg-color));
|
||||||
}
|
}
|
||||||
|
|
||||||
h1, h2, h3, h4, h5, h6, p {
|
h1, h2, h3, h4, h5, h6, p {
|
||||||
|
|
@ -81,6 +82,7 @@ header {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 50px;
|
height: 50px;
|
||||||
display: flex;
|
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));
|
box-shadow: 1px 1px 4px 0 light-dark(var(--light-nav-shade-color), var(--dark-nav-shade-color));
|
||||||
align-items: center;
|
align-items: center;
|
||||||
}
|
}
|
||||||
|
|
@ -145,6 +147,7 @@ header {
|
||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
|
row-gap: 1rem;
|
||||||
|
|
||||||
padding: 10px;
|
padding: 10px;
|
||||||
}
|
}
|
||||||
|
|
@ -165,7 +168,7 @@ header {
|
||||||
}
|
}
|
||||||
|
|
||||||
.main-apps > #heading {
|
.main-apps > #heading {
|
||||||
margin: 2rem 0 2rem 0;
|
margin: 2rem 0 1rem 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.app-grid {
|
.app-grid {
|
||||||
|
|
@ -223,6 +226,25 @@ header {
|
||||||
border-radius: 0.75rem;
|
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 */
|
/* Screens smaller than 480 pixels */
|
||||||
@media (max-width: 420px) {
|
@media (max-width: 420px) {
|
||||||
.nav {
|
.nav {
|
||||||
|
|
@ -300,4 +322,10 @@ header {
|
||||||
max-width: 100%;
|
max-width: 100%;
|
||||||
height: 64px;
|
height: 64px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
footer > .info {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
row-gap: 0.5rem;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
15
index.html
15
index.html
|
|
@ -123,7 +123,22 @@
|
||||||
</main>
|
</main>
|
||||||
|
|
||||||
<footer>
|
<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>
|
</footer>
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|
@ -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>
|
||||||
Loading…
Reference in New Issue