Skip to content

Instantly share code, notes, and snippets.

View nfreear's full-sized avatar

Nick Freear nfreear

47 followers · 165 following
View GitHub Profile
@nfreear
nfreear / skip-link.js.html
Last active September 7, 2022 16:53
A Javascript skip link that works on desktop and mobile.
@nfreear
nfreear / sharing-widget.css.html
Created July 21, 2022 07:51
Sharing widget CSS + HTML
<!doctype html><title> Sharing widget </title>
<!--<template>-->
<style>
ul {
list-style: none;
line-height: 1;
margin: 0;
padding: 0;
}
@nfreear
nfreear / g-translate.js.html
Created July 20, 2022 08:06
G-Translate menu
<!doctype html><html lang="en"> <title> Google Translate </title>
<style>
[id] .goog-te-gadget,
[id] .goog-te-gadget .goog-logo-link {
color: #444;
font-size: .85rem;
}
.goog-te-gadget select.goog-te-combo {
font-size: 1rem;
@nfreear
nfreear / svg-switch.html
Last active July 2, 2022 17:11
SVG switch test | https://developer.mozilla.org/en-US/docs/Web/SVG/Element/switch
<!doctype html><html lang="en"> <title> SVG switch test </title>
<style>
:root {
--my-size: 2rem;
}
body {
font: 1rem/1.5 sans-serif;
}
@nfreear
nfreear / loading-spinner.css.html
Last active June 25, 2022 13:12
A spinner animation using CSS ':before' and 'border-top'
<!doctype html><html lang="en"> <title> Spinner animation </title>
<script> console.time('my-timer') </script>
<style>
body { font: 1rem sans-serif; margin: auto; max-width: 32rem; }
button { font: inherit; padding: .3rem 1rem; }
:root {
--my-spinner-size: 5rem;
@nfreear
nfreear / ebook-seach.js.html
Created June 17, 2022 16:39
E-Book Search - using <my-search> custom element
<!doctype html>
<html lang="en">
<title> E-Book Search </title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
* {
border-radius: .2rem;
outline-offset: .15rem;
@nfreear
nfreear / my-dark-mode.js.html
Last active June 11, 2022 14:32
My-dark-mode / user theme switcher
<!doctype html> <title> Dark mode </title>
<meta name="color-scheme" content="dark light">
<style>
:root {
color-scheme: light dark; /* both supported */
}
* {
@nfreear
nfreear / date-picker-calendar.js.html
Created June 8, 2022 19:23
Date-picker / Calendar custom element/ Web component
<!doctype html> <title> Date picker calendar </title>
<style>
body { font: 1rem/1.7 sans-serif; margin: 1rem auto; max-width: 36rem; }
table { border: 1px solid #ddd; line-height: 2; X-width: 99%; }
th, td { border: 1px solid #ddd; min-width: 3.5rem; text-align: center; }
th { background: #eee; color: #444; }
button, summary { cursor: pointer; font: inherit; padding: .2rem .5rem; }
summary { border: 1px solid #ccc; display: inline-block; }
@nfreear
nfreear / my-nav.css.js.html
Last active June 5, 2022 12:18
Responsive navigation component - <my-nav>
<!doctype html> <title> my-nav </title>
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"><!-- -->
<style>
:root {
--my-nav-color: navy;
--my-nav-bg-color: #f9f9f9;
--my-nav-border: 1px solid #ddd;
--my-nav-mobile-width: 8rem;
@nfreear
nfreear / text-captcha.js.html
Created May 31, 2022 19:06
Text captcha test | https://textcaptcha.com/
<!doctype html> <title> Text captcha test </title>
<style>
body { font: 1rem sans-serif; margin: 1rem auto; max-width: 33rem; }
form, input, output, button {
border: 1px solid #bbb;
border-radius: .2rem;
font: inherit;
padding: .4rem 1rem;