added no javascript support
This commit is contained in:
westtle
parent
46e73cf978
commit
079990d51e
2 changed files with 49 additions and 0 deletions
17
assets/styles/no-js.css
Normal file
17
assets/styles/no-js.css
Normal file
|
|
@ -0,0 +1,17 @@
|
||||||
|
noscript p {
|
||||||
|
margin-top: 0.75rem;
|
||||||
|
font-family: var(--font-1);
|
||||||
|
font-size: 1rem;
|
||||||
|
font-weight: 400;
|
||||||
|
line-height: 1.5;
|
||||||
|
}
|
||||||
|
|
||||||
|
.settings {
|
||||||
|
max-height: 5.875rem;
|
||||||
|
left: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.settings__buttons,
|
||||||
|
.settings__button--toggle-settings { display: none; }
|
||||||
|
|
||||||
|
.settings__buttons--no-js { display: block; }
|
||||||
32
index.html
32
index.html
|
|
@ -51,6 +51,9 @@
|
||||||
<link rel="stylesheet" type="text/css" href="./assets/styles/global.css">
|
<link rel="stylesheet" type="text/css" href="./assets/styles/global.css">
|
||||||
<link rel="stylesheet" type="text/css" href="./assets/styles/settings.css">
|
<link rel="stylesheet" type="text/css" href="./assets/styles/settings.css">
|
||||||
<link rel="stylesheet" type="text/css" href="./assets/styles/simple-note.css">
|
<link rel="stylesheet" type="text/css" href="./assets/styles/simple-note.css">
|
||||||
|
|
||||||
|
<!-- No JS Fallback -->
|
||||||
|
<noscript><link rel="stylesheet" type="text/css" href="./assets/styles/no-js.css"></noscript>
|
||||||
</head>
|
</head>
|
||||||
<body class="-flex -flex-column -flex-grow">
|
<body class="-flex -flex-column -flex-grow">
|
||||||
<aside class="settings" data-expanded="false">
|
<aside class="settings" data-expanded="false">
|
||||||
|
|
@ -114,6 +117,30 @@
|
||||||
</a>
|
</a>
|
||||||
</li>
|
</li>
|
||||||
</ul>
|
</ul>
|
||||||
|
|
||||||
|
<!-- No JS Fallback -->
|
||||||
|
<noscript>
|
||||||
|
<ul class="settings__buttons settings__buttons--no-js">
|
||||||
|
<li class="settings__button-item">
|
||||||
|
<a class="settings__button settings__button--github" aria-labelledby="settings__button-label--github--no-js" rel="noopener" href="https://github.com/westtle/simple-note" target="_blank">
|
||||||
|
<svg class="settings__svg settings__svg--github" role="img" aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
||||||
|
<title>Github Repository</title>
|
||||||
|
<path d="M9 19c-5 1.5-5-2.5-7-3m14 6v-3.87a3.37 3.37 0 0 0-.94-2.61c3.14-.35 6.44-1.54 6.44-7A5.44 5.44 0 0 0 20 4.77 5.07 5.07 0 0 0 19.91 1S18.73.65 16 2.48a13.38 13.38 0 0 0-7 0C6.27.65 5.09 1 5.09 1A5.07 5.07 0 0 0 5 4.77a5.44 5.44 0 0 0-1.5 3.78c0 5.42 3.3 6.61 6.44 7A3.37 3.37 0 0 0 9 18.13V22"></path>
|
||||||
|
</svg>
|
||||||
|
<span id="settings__button-label--github--no-js" class="settings__button-label settings__button-label--github settings__button-label--github--no-js --sr-only">Github Repository (New Tab)</span>
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
<li class="settings__button-item">
|
||||||
|
<a class="settings__button settings__button--westtle" aria-labelledby="settings__button-label--westtle--no-js" rel="noopener" href="https://westtle.github.io" target="_blank">
|
||||||
|
<svg class="settings__svg settings__svg--westtle" role="img" aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="24" height="24" viewBox="0 0 500 500" xml:space="preserve"><g transform="matrix(1 0 0 1 250 250)">
|
||||||
|
<title>westtle's Homepage</title>
|
||||||
|
<rect class="settings__svg-westtle--background" width="500" height="500" fill="#000000" vector-effect="non-scaling-stroke" x="-250" y="-250" rx="0" ry="0" /></g><g transform="matrix(27.64 -1.71 1.71 27.64 255.15 262.17)"><path class="settings__svg-westtle--cat" fill="#ffffff" vector-effect="non-scaling-stroke" stroke-linecap="round" transform="translate(-7, -7)" d="M 3 12 L 4 12 L 4 13 L 3 13 M 3 11 L 4 11 L 4 12 L 3 12 M 4 11 L 5 11 L 5 12 L 4 12 M 4 10 L 5 10 L 5 11 L 4 11 M 4 9 L 5 9 L 5 10 L 4 10 M 3 9 L 4 9 L 4 10 L 3 10 M 2 8 L 3 8 L 3 9 L 2 9 M 1 7 L 2 7 L 2 8 L 1 8 M 0 8 L 1 8 L 1 9 L 0 9 M 1 6 L 2 6 L 2 7 L 1 7 M 1 5 L 2 5 L 2 6 L 1 6 M 1 4 L 2 4 L 2 5 L 1 5 M 0 3 L 1 3 L 1 4 L 0 4 M 2 3 L 3 3 L 3 4 L 2 4 M 2 2 L 3 2 L 3 3 L 2 3 M 3 1 L 4 1 L 4 2 L 3 2 M 4 2 L 5 2 L 5 3 L 4 3 M 5 3 L 6 3 L 6 4 L 5 4 M 6 3 L 7 3 L 7 4 L 6 4 M 7 3 L 8 3 L 8 4 L 7 4 M 8 3 L 9 3 L 9 4 L 8 4 M 9 2 L 10 2 L 10 3 L 9 3 M 10 1 L 11 1 L 11 2 L 10 2 M 11 2 L 12 2 L 12 3 L 11 3 M 11 3 L 12 3 L 12 4 L 11 4 M 12 4 L 13 4 L 13 5 L 12 5 M 13 3 L 14 3 L 14 4 L 13 4 M 12 5 L 13 5 L 13 6 L 12 6 M 12 6 L 13 6 L 13 7 L 12 7 M 12 7 L 13 7 L 13 8 L 12 8 M 13 8 L 14 8 L 14 9 L 13 9 M 11 8 L 12 8 L 12 9 L 11 9 M 10 9 L 11 9 L 11 10 L 10 10 M 9 9 L 10 9 L 10 10 L 9 10 M 8 9 L 9 9 L 9 10 L 8 10 M 7 9 L 8 9 L 8 10 L 7 10 M 6 9 L 7 9 L 7 10 L 6 10 M 5 9 L 6 9 L 6 10 L 5 10 M 9 10 L 10 10 L 10 11 L 9 11 M 9 11 L 10 11 L 10 12 L 9 12 M 9 12 L 10 12 L 10 13 L 9 13" /></g>
|
||||||
|
</svg>
|
||||||
|
<span id="settings__button-label--westtle--no-js" class="settings__button-label settings__button-label--westtle settings__button-label--westtle--no-js --sr-only">westtle's Homepage (New Tab)</span>
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</noscript>
|
||||||
</aside>
|
</aside>
|
||||||
|
|
||||||
<main class="-flex -flex-column -flex-grow">
|
<main class="-flex -flex-column -flex-grow">
|
||||||
|
|
@ -124,6 +151,11 @@
|
||||||
<input id="simple-note__input--title" class="simple-note__input simple-note__input--title" type="text" placeholder="Title..." spellcheck="false">
|
<input id="simple-note__input--title" class="simple-note__input simple-note__input--title" type="text" placeholder="Title..." spellcheck="false">
|
||||||
<label class="simple-note__label simple-note__label--body --sr-only" for="simple-note__input--body">Note Content</label>
|
<label class="simple-note__label simple-note__label--body --sr-only" for="simple-note__input--body">Note Content</label>
|
||||||
<textarea id="simple-note__input--body" class="simple-note__input simple-note__input--body -flex-grow" placeholder="Your content here..." spellcheck="false"></textarea>
|
<textarea id="simple-note__input--body" class="simple-note__input simple-note__input--body -flex-grow" placeholder="Your content here..." spellcheck="false"></textarea>
|
||||||
|
|
||||||
|
<!-- No JS Fallback -->
|
||||||
|
<noscript>
|
||||||
|
<p>Hello, it seems you have JavaScript disabled. This site uses localStorage to save your note on the web. You can still type in here, but if you want your note to be saved, you need to have JavaScript enabled (Unless you're using Firefox since it can remember your input).</p>
|
||||||
|
</noscript>
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
</main>
|
</main>
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue