beenull/simple-note
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

added no javascript support

Browse source
This commit is contained in:
westtle 2024-02-13 18:17:31 +07:00
parent 46e73cf978
commit 079990d51e
2 changed files with 49 additions and 0 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

17
assets/styles/no-js.css Normal file
View 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
View file

@ -51,6 +51,9 @@
<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/simple-note.css">
<!-- No JS Fallback -->
<noscript><link rel="stylesheet" type="text/css" href="./assets/styles/no-js.css"></noscript>
</head>
<body class="-flex -flex-column -flex-grow">
<aside class="settings" data-expanded="false">
@ -114,6 +117,30 @@
</a>
</li>
</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>
<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">
<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>
<!-- 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>
</section>
</main>