Partially migrate to pico v2
This commit is contained in:
parent
a6faa1ebe8
commit
a512704a7d
GPG Key ID:
D3DCFAA8A4560BE0
Binary file not shown.
10
package.json
10
package.json
|
|
@ -1,6 +1,6 @@
|
|||
{
|
||||
"name": "@fwdekker/template",
|
||||
"version": "3.6.4",
|
||||
"version": "9.9.9",
|
||||
"description": "The base template for pages on fwdekker.com.",
|
||||
"author": "Florine W. Dekker",
|
||||
"license": "MIT",
|
||||
|
|
@ -24,7 +24,7 @@
|
|||
"deploy": "grunt deploy"
|
||||
},
|
||||
"dependencies": {
|
||||
"@picocss/pico": "^1.5.10"
|
||||
"@picocss/pico": "^2.0.3"
|
||||
},
|
||||
"devDependencies": {
|
||||
"grunt": "^1.6.1",
|
||||
|
|
@ -35,9 +35,9 @@
|
|||
"grunt-focus": "^1.0.0",
|
||||
"grunt-webpack": "^6.0.0",
|
||||
"ts-loader": "^9.5.1",
|
||||
"ts-node": "^10.9.1",
|
||||
"typescript": "^5.3.2",
|
||||
"webpack": "^5.89.0",
|
||||
"ts-node": "^10.9.2",
|
||||
"typescript": "^5.3.3",
|
||||
"webpack": "^5.90.2",
|
||||
"webpack-cli": "^5.1.4"
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
@import "../../../node_modules/@picocss/pico/css/pico.css";
|
||||
@import "../../../node_modules/@picocss/pico/css/pico.blue.css";
|
||||
@import "snippets/overrides.css";
|
||||
|
||||
@import "snippets/colors.css";
|
||||
|
|
|
|||
|
|
@ -1,41 +1,41 @@
|
|||
/* pico.css overrides, based on https://picocss.com/docs/customization.html */
|
||||
/* pico.css overrides, based on https://picocss.com/docs/css-variables */
|
||||
|
||||
/* Light (default) */
|
||||
.fwd-nav,
|
||||
[data-theme="light"],
|
||||
:root:not([data-theme="dark"]) {
|
||||
--primary: rgb(0, 51, 204) !important;
|
||||
--primary-hover: rgb(0, 61, 245) !important;
|
||||
--primary-focus: rgba(0, 41, 163, 0.125) !important;
|
||||
--primary-focus-opaque: rgb(0, 41, 163) !important;
|
||||
--primary-focus-dark: rgb(0, 29, 114) !important;
|
||||
--primary-inverse: white !important;
|
||||
--pico-primary: #0033cc !important;
|
||||
--pico-primary-hover: #003df5 !important;
|
||||
--pico-primary-focus: rgba(0, 41, 163, 0.125) !important;
|
||||
--pico-primary-focus-opaque: #0029a3 !important;
|
||||
--pico-primary-focus-dark: #001d72 !important;
|
||||
--pico-primary-inverse: white !important;
|
||||
}
|
||||
|
||||
/* Dark (auto) */
|
||||
@media only screen and (prefers-color-scheme: dark) {
|
||||
:root:not([data-theme="light"]):not(.fwd-nav) {
|
||||
--primary: #1e88e5 !important;
|
||||
--primary-hover: #2196f3 !important;
|
||||
--primary-focus: rgba(30, 136, 229, 0.25) !important;
|
||||
--primary-focus-opaque: rgb(30, 136, 229) !important;
|
||||
--primary-inverse: white !important;
|
||||
--pico-primary: #1e88e5 !important;
|
||||
--pico-primary-hover: #2196f3 !important;
|
||||
--pico-primary-focus: rgba(30, 136, 229, 0.25) !important;
|
||||
--pico-primary-focus-opaque: #1e88e5 !important;
|
||||
--pico-primary-inverse: white !important;
|
||||
}
|
||||
}
|
||||
|
||||
/* Dark (forced) */
|
||||
:root[data-theme="dark"]:not(.fwd-nav) {
|
||||
--primary: #1e88e5 !important;
|
||||
--primary-hover: #2196f3 !important;
|
||||
--primary-focus: rgba(30, 136, 229, 0.25) !important;
|
||||
--primary-focus-opaque: rgb(30, 136, 229) !important;
|
||||
--primary-inverse: white !important;
|
||||
--pico-primary: #1e88e5 !important;
|
||||
--pico-primary-hover: #2196f3 !important;
|
||||
--pico-primary-focus: rgba(30, 136, 229, 0.25) !important;
|
||||
--pico-primary-focus-opaque: #1e88e5 !important;
|
||||
--pico-primary-inverse: white !important;
|
||||
}
|
||||
|
||||
/* Common */
|
||||
:root {
|
||||
--form-element-active-border-color: var(--primary) !important;
|
||||
--form-element-focus-color: var(--primary-focus) !important;
|
||||
--switch-color: var(--primary-inverse) !important;
|
||||
--switch-checked-background-color: var(--primary) !important;
|
||||
--pico-form-element-active-border-color: var(--pico-primary) !important;
|
||||
--pico-form-element-focus-color: var(--pico-primary-focus) !important;
|
||||
--pico-switch-color: var(--pico-primary-inverse) !important;
|
||||
--pico-switch-checked-background-color: var(--pico-primary) !important;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -7,15 +7,15 @@ a[target="_blank"]::after {
|
|||
margin-left: 0.25rem;
|
||||
|
||||
/* Image from https://icons.getbootstrap.com/icons/box-arrow-up-right/. MIT License. */
|
||||
--mask-image: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='UTF-8'%3F%3E%3Csvg fill='currentColor' viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M8.636 3.5a.5.5 0 0 0-.5-.5H1.5A1.5 1.5 0 0 0 0 4.5v10A1.5 1.5 0 0 0 1.5 16h10a1.5 1.5 0 0 0 1.5-1.5V7.864a.5.5 0 0 0-1 0V14.5a.5.5 0 0 1-.5.5h-10a.5.5 0 0 1-.5-.5v-10a.5.5 0 0 1 .5-.5h6.636a.5.5 0 0 0 .5-.5z' fill-rule='evenodd'/%3E%3Cpath d='M16 .5a.5.5 0 0 0-.5-.5h-5a.5.5 0 0 0 0 1h3.793L6.146 9.146a.5.5 0 1 0 .708.708L15 1.707V5.5a.5.5 0 0 0 1 0v-5z' fill-rule='evenodd'/%3E%3C/svg%3E%0A");
|
||||
-webkit-mask-image: var(--mask-image);
|
||||
--fwd-mask-image: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='UTF-8'%3F%3E%3Csvg fill='currentColor' viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M8.636 3.5a.5.5 0 0 0-.5-.5H1.5A1.5 1.5 0 0 0 0 4.5v10A1.5 1.5 0 0 0 1.5 16h10a1.5 1.5 0 0 0 1.5-1.5V7.864a.5.5 0 0 0-1 0V14.5a.5.5 0 0 1-.5.5h-10a.5.5 0 0 1-.5-.5v-10a.5.5 0 0 1 .5-.5h6.636a.5.5 0 0 0 .5-.5z' fill-rule='evenodd'/%3E%3Cpath d='M16 .5a.5.5 0 0 0-.5-.5h-5a.5.5 0 0 0 0 1h3.793L6.146 9.146a.5.5 0 1 0 .708.708L15 1.707V5.5a.5.5 0 0 0 1 0v-5z' fill-rule='evenodd'/%3E%3C/svg%3E%0A");
|
||||
-webkit-mask-image: var(--fwd-mask-image);
|
||||
-webkit-mask-size: cover;
|
||||
mask-image: var(--mask-image);
|
||||
mask-image: var(--fwd-mask-image);
|
||||
mask-size: cover;
|
||||
background-repeat: no-repeat no-repeat;
|
||||
background-position: center center;
|
||||
background-size: cover;
|
||||
background-color: var(--primary);
|
||||
background-color: var(--pico-primary);
|
||||
|
||||
content: "";
|
||||
}
|
||||
|
|
@ -38,31 +38,32 @@ a[target="_blank"]::after {
|
|||
}
|
||||
}
|
||||
|
||||
|
||||
/* Container with sidebar, e.g. for table of contents */
|
||||
@media (min-width: 992px) {
|
||||
:root {
|
||||
--aside-width: 200px;
|
||||
--fwd-aside-width: 200px;
|
||||
}
|
||||
|
||||
.grid-with-sidebar {
|
||||
display: grid;
|
||||
grid-column-gap: calc(var(--block-spacing-horizontal) * 3);
|
||||
grid-template-columns: var(--aside-width) auto;
|
||||
grid-column-gap: calc(var(--pico-block-spacing-horizontal) * 3);
|
||||
grid-template-columns: var(--fwd-aside-width) auto;
|
||||
}
|
||||
|
||||
.grid-with-sidebar aside {
|
||||
max-width: var(--aside-width);
|
||||
max-width: var(--fwd-aside-width);
|
||||
}
|
||||
|
||||
.grid-with-sidebar aside .sticky {
|
||||
position: sticky;
|
||||
top: var(--block-spacing-vertical);
|
||||
top: var(--pico-block-spacing-vertical);
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 992px) {
|
||||
.grid-with-sidebar aside {
|
||||
margin-bottom: var(--block-spacing-vertical);
|
||||
margin-bottom: var(--pico-block-spacing-vertical);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -84,6 +85,12 @@ header.fwd-header a[href="."] {
|
|||
}
|
||||
|
||||
|
||||
/* Main */
|
||||
main.container {
|
||||
padding-top: calc(var(--pico-block-spacing-vertical) * 2);
|
||||
}
|
||||
|
||||
|
||||
/* Footer */
|
||||
footer.fwd-footer #fwd-footer-version {
|
||||
float: right;
|
||||
|
|
|
|||
|
|
@ -1,3 +1,13 @@
|
|||
:root {
|
||||
/* Colors taken from https://isabelcastillo.com/error-info-messages-css */
|
||||
--fwd-invalid-color: #d8000c;
|
||||
--fwd-valid-color: #4f8a10;
|
||||
|
||||
--pico-form-element-invalid-border-color: var(--fwd-invalid-color) !important;
|
||||
--pico-form-element-valid-border-color: var(--fwd-valid-color) !important;
|
||||
}
|
||||
|
||||
|
||||
/* Status card */
|
||||
.status-card {
|
||||
font-weight: bold;
|
||||
|
|
@ -6,44 +16,46 @@
|
|||
|
||||
.status-card output {
|
||||
display: block;
|
||||
margin-right: var(--block-spacing-horizontal);
|
||||
margin-right: var(--pico-block-spacing-horizontal);
|
||||
}
|
||||
|
||||
.status-card .close {
|
||||
position: absolute;
|
||||
right: var(--block-spacing-horizontal);
|
||||
top: calc(var(--block-spacing-vertical) / 2);
|
||||
right: var(--pico-block-spacing-horizontal);
|
||||
top: calc(50% - .5rem);
|
||||
|
||||
width: 1rem;
|
||||
height: 1rem;
|
||||
|
||||
background-image: var(--icon-close);
|
||||
background-image: var(--pico-icon-close);
|
||||
background-position: center;
|
||||
background-size: auto 1rem;
|
||||
background-repeat: no-repeat;
|
||||
|
||||
opacity: .5;
|
||||
transition: opacity var(--transition);
|
||||
transition: opacity var(--pico-transition);
|
||||
}
|
||||
|
||||
.status-card .close:is([aria-current], :hover, :active, :focus) {
|
||||
opacity: 1
|
||||
}
|
||||
|
||||
.status-card.error {
|
||||
/* Colors taken from https://isabelcastillo.com/error-info-messages-css */
|
||||
background-color: #ffbaba;
|
||||
color: var(--fwd-invalid-color);
|
||||
}
|
||||
|
||||
.status-card.info {
|
||||
/* Colors taken from https://isabelcastillo.com/error-info-messages-css */
|
||||
background-color: #bde5f8;
|
||||
color: #00529b;
|
||||
}
|
||||
|
||||
.status-card.error {
|
||||
background-color: var(--form-element-invalid-focus-color);
|
||||
color: var(--form-element-invalid-border-color);
|
||||
}
|
||||
|
||||
.status-card.success {
|
||||
background-color: var(--form-element-valid-focus-color);
|
||||
color: var(--form-element-valid-border-color);
|
||||
/* Colors taken from https://isabelcastillo.com/error-info-messages-css */
|
||||
background-color: #dff2bf;
|
||||
color: var(--fwd-valid-color);
|
||||
}
|
||||
|
||||
.status-card.warning {
|
||||
|
|
@ -58,14 +70,22 @@ label.invalid,
|
|||
*[data-label-for].invalid,
|
||||
input.invalid,
|
||||
*[data-hint-for].invalid {
|
||||
color: var(--form-element-invalid-border-color) !important;
|
||||
color: var(--fwd-invalid-color) !important;
|
||||
}
|
||||
|
||||
input.invalid {
|
||||
border-color: var(--fwd-invalid-color) !important;
|
||||
}
|
||||
|
||||
label.valid,
|
||||
*[data-label-for].valid,
|
||||
input.valid,
|
||||
*[data-hint-for].valid {
|
||||
color: var(--form-element-valid-border-color) !important;
|
||||
color: var(--fwd-valid-color) !important;
|
||||
}
|
||||
|
||||
input.valid {
|
||||
border-color: var(--fwd-valid-color) !important;
|
||||
}
|
||||
|
||||
|
||||
|
|
@ -73,8 +93,7 @@ input.valid,
|
|||
.input-hint {
|
||||
display: block;
|
||||
|
||||
/*noinspection CssUnresolvedCustomProperty*/
|
||||
margin-top: calc(var(--spacing) * -.75);
|
||||
margin-top: calc(var(--pico-spacing) * -.75);
|
||||
}
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -18,7 +18,7 @@ nav.fwd-nav > ul > li {
|
|||
nav.fwd-nav li {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
padding: var(--nav-element-spacing-horizontal);
|
||||
padding: var(--pico-nav-element-spacing-horizontal);
|
||||
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
|
@ -63,7 +63,7 @@ nav.fwd-nav > ul > li > ul {
|
|||
/* Colors and optional styling */
|
||||
nav.fwd-nav,
|
||||
nav.fwd-nav ul {
|
||||
background-color: var(--primary);
|
||||
background-color: var(--pico-primary);
|
||||
}
|
||||
|
||||
nav.fwd-nav li.fwd-nav-separator {
|
||||
|
|
@ -71,19 +71,20 @@ nav.fwd-nav li.fwd-nav-separator {
|
|||
}
|
||||
|
||||
nav.fwd-nav li:where(:active, :focus-within, :hover, .fwd-nav-active) {
|
||||
background-color: var(--primary-focus-dark);
|
||||
background-color: var(--pico-primary-focus-dark);
|
||||
}
|
||||
|
||||
nav.fwd-nav li.fwd-nav-highlighted:not(:where(:active, :focus-within, :hover, .fwd-nav-active)) {
|
||||
background-color: var(--primary-focus-opaque);
|
||||
background-color: var(--pico-primary-focus-opaque);
|
||||
}
|
||||
|
||||
nav.fwd-nav a {
|
||||
color: var(--primary-inverse);
|
||||
color: var(--pico-primary-inverse);
|
||||
--pico-text-decoration: none !important;
|
||||
}
|
||||
|
||||
nav.fwd-nav a::after {
|
||||
background-color: var(--primary-inverse);
|
||||
background-color: var(--pico-primary-inverse);
|
||||
}
|
||||
|
||||
/* Logo */
|
||||
|
|
@ -94,20 +95,20 @@ nav.fwd-nav #logo {
|
|||
nav.fwd-nav #logo::before {
|
||||
display: inline-block;
|
||||
|
||||
width: calc(1em * var(--line-height));
|
||||
height: calc(1em * var(--line-height));
|
||||
width: calc(1em * var(--pico-line-height));
|
||||
height: calc(1em * var(--pico-line-height));
|
||||
margin-right: 0.25rem;
|
||||
vertical-align: top;
|
||||
|
||||
--mask-image: url("https://fwdekker.com/favicon.png");
|
||||
-webkit-mask-image: var(--mask-image);
|
||||
--fwd-mask-image: url("https://fwdekker.com/favicon.png");
|
||||
-webkit-mask-image: var(--fwd-mask-image);
|
||||
-webkit-mask-size: cover;
|
||||
mask-image: var(--mask-image);
|
||||
mask-image: var(--fwd-mask-image);
|
||||
mask-size: cover;
|
||||
background-repeat: no-repeat no-repeat;
|
||||
background-position: center center;
|
||||
background-size: cover;
|
||||
background-color: var(--primary-inverse);
|
||||
background-color: var(--pico-primary-inverse);
|
||||
|
||||
content: "";
|
||||
}
|
||||
|
|
@ -116,13 +117,13 @@ nav.fwd-nav #logo::before {
|
|||
nav.fwd-nav #fwd-nav-hamburger-label {
|
||||
height: fit-content;
|
||||
margin: 0;
|
||||
padding: calc(var(--nav-element-spacing-horizontal) + var(--nav-link-spacing-vertical));
|
||||
padding: calc(var(--pico-nav-element-spacing-horizontal) + var(--pico-nav-link-spacing-vertical));
|
||||
|
||||
color: var(--primary-inverse);
|
||||
color: var(--pico-primary-inverse);
|
||||
}
|
||||
|
||||
nav.fwd-nav #fwd-nav-hamburger-label:where(:active, :focus-within, :hover, .fwd-nav-active) {
|
||||
background-color: var(--primary-focus-dark);
|
||||
background-color: var(--pico-primary-focus-dark);
|
||||
}
|
||||
|
||||
@media (min-width: 576px) {
|
||||
|
|
|
|||
|
|
@ -1,19 +1,6 @@
|
|||
/* pico.css: Improved text contrast (see also picocss/pico#276) */
|
||||
:root {
|
||||
--code-color: var(--color) !important;
|
||||
}
|
||||
|
||||
:root[data-theme="light"] {
|
||||
--muted-color: hsl(205deg, 15%, 41%) !important;
|
||||
}
|
||||
|
||||
:root[data-theme="dark"] {
|
||||
--muted-color: hsl(205deg, 12%, 59%) !important;
|
||||
}
|
||||
|
||||
/* pico.css: Bold <label> and <th>, except for checkbox/radio labels */
|
||||
:root {
|
||||
--form-label-font-weight: bold;
|
||||
--pico-form-label-font-weight: bold;
|
||||
}
|
||||
|
||||
tr th {
|
||||
|
|
@ -24,72 +11,8 @@ input:where([type="checkbox"], [type="radio"]) + label {
|
|||
font-weight: normal;
|
||||
}
|
||||
|
||||
/* pico.css: Halve header margins */
|
||||
h1 {
|
||||
--typography-spacing-vertical: 1.5rem;
|
||||
}
|
||||
|
||||
h2 {
|
||||
--typography-spacing-vertical: 1.3125rem;
|
||||
}
|
||||
|
||||
h3 {
|
||||
--typography-spacing-vertical: 1.125rem;
|
||||
}
|
||||
|
||||
h4 {
|
||||
--typography-spacing-vertical: 0.937rem;
|
||||
}
|
||||
|
||||
h5 {
|
||||
--typography-spacing-vertical: 0.84375rem;
|
||||
}
|
||||
|
||||
h6 {
|
||||
--typography-spacing-vertical: 0.75rem;
|
||||
}
|
||||
|
||||
/* pico.css: Reduce `article` margins */
|
||||
article {
|
||||
margin: calc(var(--block-spacing-vertical) / 2) 0;
|
||||
|
||||
padding-top: calc(var(--block-spacing-vertical) / 2);
|
||||
padding-bottom: calc(var(--block-spacing-vertical) / 2);
|
||||
}
|
||||
|
||||
article > header,
|
||||
article > footer {
|
||||
padding-top: calc(var(--block-spacing-vertical) / 2);
|
||||
padding-bottom: calc(var(--block-spacing-vertical) / 2);
|
||||
}
|
||||
|
||||
article > header {
|
||||
margin-top: calc(var(--block-spacing-vertical) / -2);
|
||||
margin-bottom: calc(var(--block-spacing-vertical) / 2);
|
||||
}
|
||||
|
||||
article > footer {
|
||||
margin-top: calc(var(--block-spacing-vertical) / 2);
|
||||
margin-bottom: calc(var(--block-spacing-vertical) / -2);
|
||||
}
|
||||
|
||||
article > footer > form > article {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
article > header > hgroup,
|
||||
article > header > h1,
|
||||
article > header > h2,
|
||||
article > header > h3,
|
||||
article > header > h4,
|
||||
article > header > h5,
|
||||
article > header > h6,
|
||||
article > footer > hgroup,
|
||||
article > footer > h1,
|
||||
article > footer > h2,
|
||||
article > footer > h3,
|
||||
article > footer > h4,
|
||||
article > footer > h5,
|
||||
article > footer > h6 {
|
||||
article hgroup {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -31,54 +31,53 @@
|
|||
<nav id="nav"></nav>
|
||||
<main class="container grid-with-sidebar">
|
||||
<aside>
|
||||
Table of contents test
|
||||
Table of contents overflow test
|
||||
</aside>
|
||||
<div role="document">
|
||||
<header class="fwd-header">
|
||||
<hgroup>
|
||||
<h1><a href=".">Test</a></h1>
|
||||
<h2>A test page</h2>
|
||||
</hgroup>
|
||||
</header>
|
||||
|
||||
<article id="global-status-card" class="status-card hidden">
|
||||
<output></output>
|
||||
<a class="close" href="#" aria-label="Close"></a>
|
||||
</article>
|
||||
|
||||
<section>
|
||||
<header class="fwd-header">
|
||||
<hgroup>
|
||||
<h1><a href=".">Test</a></h1>
|
||||
<h2>A test page</h2>
|
||||
</hgroup>
|
||||
</header>
|
||||
|
||||
<article id="global-status-card" class="status-card hidden">
|
||||
<output></output>
|
||||
<a class="close" href="#" aria-label="Close"></a>
|
||||
</article>
|
||||
|
||||
<h1>Test</h1>
|
||||
<h1>Subheader</h1>
|
||||
<p>This <a href="./" target="_blank">is an external link</a> in a sentence.</p>
|
||||
<p>These are some more contents.</p>
|
||||
<p>These are the page contents.</p>
|
||||
<p><code>This is a code block</code></p>
|
||||
|
||||
|
||||
<article>
|
||||
<header>
|
||||
<hgroup>
|
||||
<h2>Log in</h2>
|
||||
<h3>Already have an account? Welcome back!</h3>
|
||||
</hgroup>
|
||||
</header>
|
||||
<form id="test-form" data-status-card="test-status-card" novalidate>
|
||||
<article id="test-status-card" class="status-card hidden">
|
||||
<output>Congrats!</output>
|
||||
<a class="close" href="#" aria-label="Close"></a>
|
||||
</article>
|
||||
|
||||
<label for="test-email">Email</label>
|
||||
<input id="test-email" type="email" name="email" autocomplete="on" />
|
||||
<small id="test-email-hint" data-hint-for="test-email" data-hint="Test hint"></small>
|
||||
|
||||
<label for="test-password">Password</label>
|
||||
<input id="test-password" type="password" name="password" />
|
||||
<small id="test-password-hint" data-hint-for="test-password"></small>
|
||||
|
||||
<button id="login-button">Log in</button>
|
||||
</form>
|
||||
</article>
|
||||
</section>
|
||||
|
||||
<article>
|
||||
<header>
|
||||
<hgroup>
|
||||
<h2>Log in</h2>
|
||||
<p>Already have an account? Welcome back!</p>
|
||||
</hgroup>
|
||||
</header>
|
||||
<form id="test-form" data-status-card="test-status-card" novalidate>
|
||||
<article id="test-status-card" class="status-card hidden">
|
||||
<output>Congrats!</output>
|
||||
<a class="close" href="#" aria-label="Close"></a>
|
||||
</article>
|
||||
|
||||
<label for="test-email">Email</label>
|
||||
<input id="test-email" type="email" name="email" autocomplete="on" />
|
||||
<small id="test-email-hint" data-hint-for="test-email" data-hint="Test hint"></small>
|
||||
|
||||
<label for="test-password">Password</label>
|
||||
<input id="test-password" type="password" name="password" />
|
||||
<small id="test-password-hint" data-hint-for="test-password"></small>
|
||||
|
||||
<button id="login-button">Log in</button>
|
||||
</form>
|
||||
</article>
|
||||
<footer id="footer"></footer>
|
||||
</div>
|
||||
</main>
|
||||
|
|
|
|||
Loading…
Reference in New Issue