Minima responsività e ombra al logo

main-old
Antonio De Lucreziis 3 years ago
parent 647d192ee7
commit 514973852c

@ -24,29 +24,6 @@
--shadow-1: 0 0 16px 0 #00000018; --shadow-1: 0 0 16px 0 #00000018;
} }
body.dark-mode {
--bg: #282828;
--fg: #6eac4d;
--bg-dark: hsl(10, 10%, 20%);
--bg-darker: hsl(10, 10%, 17%);
--bg-darker-2: #1d2021;
--accent-1: #154d24;
--accent-1-fg: #278542;
--card-date: #928374;
--card-content: #d4be98;
--font-sf: 'Inter', sans-serif;
--font-weight-light: 300;
--font-weight-normal: 400;
--font-weight-medium: 500;
--font-weight-bold: 700;
--shadow-1: 0 0 16px 0 #16182077;
}
* { * {
box-sizing: border-box; box-sizing: border-box;
} }
@ -85,11 +62,12 @@ body {
nav { nav {
margin: 1rem 0; margin: 1rem 0;
display: grid; display: flex;
grid-template-columns: auto 1fr; flex-wrap: wrap;
gap: 1rem; gap: 1rem;
align-items: center; align-items: center;
justify-content: center;
font-weight: var(--font-weight-medium); font-weight: var(--font-weight-medium);
color: var(--accent-1-fg); color: var(--accent-1-fg);
@ -131,6 +109,7 @@ nav .nav-logo {
nav .nav-logo img { nav .nav-logo img {
width: 150px; width: 150px;
filter: drop-shadow(0 0 4px rgba(0, 0, 0, 0.5));
} }
nav .nav-main { nav .nav-main {
@ -354,3 +333,8 @@ a:hover {
text-decoration: underline; text-decoration: underline;
} }
/* Responsiveness */
@media screen and (max-width: 950px) {
}

@ -0,0 +1,27 @@
body.dark-mode {
--bg: #282828;
--fg: #6eac4d;
--bg-dark: hsl(10, 10%, 20%);
--bg-darker: hsl(10, 10%, 17%);
--bg-darker-2: #1d2021;
--accent-1: #154d24;
--accent-1-fg: #278542;
--card-date: #928374;
--card-content: #d4be98;
--font-sf: 'Inter', sans-serif;
--font-weight-light: 300;
--font-weight-normal: 400;
--font-weight-medium: 500;
--font-weight-bold: 700;
--shadow-1: 0 0 16px 0 #16182077;
}
.dark-mode nav .nav-logo img {
filter: drop-shadow(0 0 4px rgba(0, 0, 0, 0.4));
}

@ -58,8 +58,8 @@
}); });
</script> </script>
<link rel="stylesheet" href="/assets/style.css"> <link rel="stylesheet" href="/assets/style.css">
<link rel="stylesheet" href="/assets/theme-dark.css">
</head> </head>
<body> <body>

@ -3,7 +3,6 @@
{{define "title"}}PHC &bull; Utenti &bull; phc.dm.xxxxx.xx{{end}} {{define "title"}}PHC &bull; Utenti &bull; phc.dm.xxxxx.xx{{end}}
{{define "body"}} {{define "body"}}
<section> <section>
<h2> <h2>
<img class="icons8" src="https://img.icons8.com/ios-filled/50/000000/find-user-male.png" /> <img class="icons8" src="https://img.icons8.com/ios-filled/50/000000/find-user-male.png" />
@ -24,7 +23,6 @@
<!-- Dummy data --> <!-- Dummy data -->
</div> </div>
</section> </section>
<script> <script>
document.addEventListener('DOMContentLoaded', ({ }) => { document.addEventListener('DOMContentLoaded', ({ }) => {
const $userList = document.querySelector('.user-list'); const $userList = document.querySelector('.user-list');

Loading…
Cancel
Save