phc
/
website
6
4
Fork 0
Code Issues 6 Pull Requests Projects 1 Releases Wiki Activity

Migliorati bottoni per pagina di login

Browse Source
main
Antonio De Lucreziis 3 years ago
parent c04a161ccc
commit cf21b9a143
4 changed files with 103 additions and 64 deletions
Show Stats Download Patch File Download Diff File

122
public/style.css
Unescape Escape View File

@ -7,7 +7,9 @@
--bg-dark: hsl(220, 5%, 93%);
--bg-darker: hsl(220, 5%, 90%);
--bg-darker-2: #dadada;
--bg-darker-2: #d5d5d5;
--bg-darker-2-1: #c8c8c8;
--bg-darker-3: #c0c0c0;
--accent-1: #278542;
--accent-1-fg: #154d24;
@ -22,6 +24,14 @@
--font-weight-bold: 700;
--shadow-1: 0 0 16px 0 #00000018;
--text-input-bg: #fff;
--bg-darker-2-1: #c8c8c8;
--accent-2-lighter: #5cc969;
--accent-2: #4eaa59;
--accent-2-darker: #2e974c;
--accent-2-darkest: #002d0d;
}
* {
@ -352,49 +362,43 @@ a:hover {
/* Buttons */
button, .button {
font-family: var(--font-sf);
font-weight: var(--font-weight-medium);
font-size: 17px;
background: #278542;
border: none;
height: 2rem;
padding: 0 1rem;
border-right: 5px solid #ecc333;
position: relative;
z-index: 2;
color: #111;
transition: all 100ms ease-in-out;
box-shadow: 0 0 0 0 transparent;
cursor: pointer;
}
button::before, .button::before {
position: absolute;
content: "";
top: -5px;
bottom: -5px;
background: #278542;
width: 100%;
left: 0;
z-index: -1;
border-radius: 2px;
transition: all 100ms ease-in-out;
-webkit-mask-image: radial-gradient(circle at top left, transparent 0, transparent 5px, black 6px), radial-gradient(circle at top right, transparent 0, transparent 5px, black 6px), radial-gradient(circle at bottom left, transparent 0, transparent 5px, black 6px), radial-gradient(circle at bottom right, transparent 0, transparent 5px, black 6px);
-webkit-mask-position: top left, top right, bottom left, bottom right;
-webkit-mask-repeat: no-repeat;
-webkit-mask-size: 50% 50%;
mask-image: radial-gradient(circle at top left, transparent 0, transparent 5px, black 6px), radial-gradient(circle at top right, transparent 0, transparent 5px, black 6px), radial-gradient(circle at bottom left, transparent 0, transparent 5px, black 6px), radial-gradient(circle at bottom right, transparent 0, transparent 5px, black 6px);
mask-position: top left, top right, bottom left, bottom right;
mask-repeat: no-repeat;
mask-size: 50% 50%;
}
button:hover, input[type=submit]:hover, .button:hover {
color: #f22;
box-shadow: 0 4px 13px 0 #00000044;
font-family: var(--font-sf);
font-weight: var(--font-weight-medium);
font-size: 17px;
/* gray variant #b3b3b3 */
border: 1px solid var(--bg-darker-3);
/* gray variant #bfbfbf */
background: var(--bg-darker-2);
/* gray variant #333333 */
color: var(--fg);
height: 2rem;
border-radius: 4px;
padding: 0 1rem;
transition: all 100ms ease-in-out;
box-shadow: 0 4px 8px 0 #00000022;
cursor: pointer;
}
button:hover, .button:hover {
background: var(--bg-darker-2-1);
box-shadow: 0 4px 8px 0 #00000033;
}
button.primary {
border: 1px solid var(--accent-2-darker);
background: var(--accent-2);
color: var(--accent-2-darkest);
}
button.primary:hover {
background: var(--accent-2-lighter);
}
/* Text Fields */
@ -408,7 +412,9 @@ input[type=text], input[type=password] {
font-size: 17px;
background: #fff;
background: var(--text-input-bg);
color: var(--fg);
border-radius: 4px;
border: 1px solid var(--bg-darker-2);
box-shadow: 0 0 8px 0 #00000020;
@ -424,30 +430,32 @@ input[type=password] {
/* Forms */
.field-set {
form .field {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
form .field-set {
display: grid;
grid-template-columns: 1fr 2fr;
grid-template-columns: auto 1fr;
grid-auto-rows: auto;
gap: 0.5rem;
gap: 0.5rem 1rem;
padding: 1rem;
}
.field-set label {
form .field-set label {
grid-column: 1 / 2;
align-self: center;
justify-self: end;
}
.field-set input {
form .field-set input {
grid-column: 2 / 3;
}
.field-set .alone {
grid-column: 1 / 3;
place-self: center;
margin-top: 1rem;
}
/* Pages */
.page-home {

32
public/theme-dark.css
Unescape Escape View File

@ -1,11 +1,13 @@
body.dark-mode {
--bg: #282828;
--fg: #6eac4d;
--fg: #a6cc92;
/* --fg: #6eac4d; */
--bg-dark: hsl(10, 10%, 20%);
--bg-darker: hsl(10, 10%, 17%);
--bg-darker-2: #1d2021;
--bg-darker-3: #101111;
--accent-1: #154d24;
--accent-1-fg: #278542;
@ -20,6 +22,34 @@ body.dark-mode {
--font-weight-bold: 700;
--shadow-1: 0 0 16px 0 #16182077;
--text-input-bg: var(--bg-darker);
--bg-darker-2-1: #c8c8c8;
--accent-2-lighter: #5cc969;
--accent-2: #4eaa59;
--accent-2-darker: #2e974c;
--accent-2-darkest: #002d0d;
}
.dark-mode button {
border: 1px solid var(--bg-darker-2);
background: var(--bg-darker);
color: #afafaf;
}
.dark-mode button:hover {
background: var(--bg-dark);
}
.dark-mode button.primary {
border: 1px solid #113a1c;
background: #1e6732;
color: #b7e3c3;
}
.dark-mode button.primary:hover {
background: #23773a;
}
.dark-mode nav .nav-logo img {

4
views/home.html
Unescape Escape View File

@ -8,7 +8,7 @@
<!-- Non avevo molta fantasia per il nome di questa classe -->
<section class="super">
<div class="block image">
<img src="assets/images/logo-circuit-board.svg" alt="phc-logo">
<img src="/public/images/logo-circuit-board.svg" alt="phc-logo">
</div>
<div class="block text">
<h1>
@ -98,5 +98,5 @@
</div>
</section>
<script src="/assets/home.js"></script>
<script src="/public/home.js"></script>
{{end}}

9
views/login.html
Unescape Escape View File

@ -20,9 +20,10 @@
<input type="text" name="username" id="login-username">
<label for="login-password">Password:</label>
<input type="password" name="password" id="login-password">
<button class="alone">Accedi</button>
<input type="password" name="password" id="login-password">
</div>
<div class="field">
<button class="primary">Accedi</button>
</div>
</form>
</div>
@ -35,7 +36,7 @@
email all'indirizzo <a href="mailto:{{ .Config.Email }}">{{ .Config.Email }}</a>.
</p>
<p>
* In realtà ancora non esiste il modulo
*In realtà il modulo ancora non esiste
</p>
</section>

Write Preview
Loading…
Cancel
Save