Skip to content

Instantly share code, notes, and snippets.

@roachhd

roachhd/README.md

Last active November 19, 2020 14:56
Show Gist options
  • Star 8 You must be signed in to star a gist
  • Fork 3 You must be signed in to fork a gist
  • Save roachhd/698db516c17bb130c495 to your computer and use it in GitHub Desktop.
Save roachhd/698db516c17bb130c495 to your computer and use it in GitHub Desktop.
Download ZIP
Ode To Dan : Quick switch Themes with javascript
Raw
README.md

A simple clone of Dan Edens' blog with the day/night persistent toggle ❤️

<script>
// Toggle night theme
var d = document.documentElement,
    t = document.querySelectorAll(".js--toggle-lights")[0],
    m = localStorage.getItem("nightmode");

if(m == "true") {
  d.classList.add("night-mode");
}

t.addEventListener("click", function(){
  if(d.classList.contains("night-mode")) {
    d.classList.remove("night-mode");
    localStorage.setItem("nightmode", "false");
  } else {
    d.classList.add("night-mode");
    localStorage.setItem("nightmode", "true");
  }
});
<script>
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>About | Katie Ball, Designer</title>
<meta name="viewport" content="initial-scale=1" />
<meta name="p:domain_verify" content="aa712630840b421410cce3b56d2dc764" />
<meta property="og:title" content="About"/>
<meta property="og:site_name" content="Katie Ball, Designer"/>
<meta property="og:url" content="/"/>
<meta property="og:description" content=""/>
<link rel="stylesheet" href="/style.css">
<!-- Touch icon -->
<link rel="apple-touch-icon" href="/apple-touch-icon.png" />
<!-- Favicon -->
<link rel="shortcut icon" href="/favicon.png" />
<!-- Type, y'all -->
<script type="text/javascript" src="//use.typekit.net/dkj5obg.js"></script>
<script type="text/javascript">try{Typekit.load();}catch(e){}</script>
<!-- RSS, brotha
<link rel="alternate" type="application/rss+xml" title="RSS" href="/feed.xml" />
-->
<!-- You know, rather than reading the source like a chump, you can see it all on GitHub like a champ: https://github.com/roachhd/ode-to-dan/ -->
</head>
<body>
<header class="wrap site__header" role="banner">
<a class="site__title o--b o--p" href="/" title="Daniel T. Eden, Designer • Home">
katie L Ball, Designer
</a>
<nav class="site__nav" role="navigation">
<ul class="nav delta">
<li><a href="/blog/">Blog</a></li>
<li><a href="/books/">Books</a></li>
<li><a href="/portfolio/">Portfolio</a></li>
<li><a href="/quotes/">Quotes</a></li>
<li class="f--r meta spit--v"><span class="js--toggle-lights">☼</span></li>
</ul>
</nav>
</header>
<main class="wrap site__content page" role="main">
<article class="grid hentry">
<header class="page__header grid__col grid__col--4-of-6 grid__col--centered promo">
<h1 class="page__title">About</h1>
</header>
<div class=" page__content grid__col grid__col--4-of-6 grid__col--centered">
<p>My name is Daniel Eden, and I’m a designer. I specialise in web and interaction design, and have a strong passion for typography—on and off the web. I like <a href="/portfolio">scratching my own itch</a> and <a href="/blog">writing</a> about design, courage, and lack thereof. I also like Disney, dogs, and looking up.</p>
<p>I’m currently working in San Francisco for <a href="http://dropbox.com">Dropbox</a> as a Designer. If you want to, you can view and download <a href="https://www.dropbox.com/s/kq431p4ey1b1ayu/R%C3%A9sum%C3%A9.pdf">my résumé</a>.</p>
<p>I talk about the things I love (and—more often—the things I hate) on <a href="http://twitter.com/_dte">Twitter</a>. I publish my most recent works-in-progress for critique on <a href="http://dribbble.com/dte">Dribbble.</a> I write code and put it on <a href="https://github.com/daneden/">GitHub</a>. Nothing out of the ordinary.</p>
<p>I’m marrying a talented artist and animator named <a href="http://twitter.com/iamemliy">Emily</a> quite soon. We’re both from Manchester, <span class="caps">UK.</span> She likes horror movies. I do not.</p>
<p>If you want to have a chat, you can always email me at <a href="mailto:dan.eden@me.com">dan.eden@me.com</a>.</p>
<p>One last thing; the source code for my entire site is available to view over <a href="https://github.com/daneden/daneden.me">on GitHub</a>. Take a look, suggest improvements, and stay curious.</p>
</div>
</article>
</main>
<footer class="wrap site__footer" role="contentinfo">
<div class="grid">
<section class="small isle--v grid__col grid__col--3-of-6 p-author vcard">
<h4>About</h4>
<p class="o--mz">My name is <span class="fn">Daniel Eden</span>. I’m a designer from Manchester, <span class="caps">UK</span> currently living and working in San Francisco.</p>
</section>
<section class="small isle--v grid__col grid__col--3-of-6">
<h4>Colophon</h4>
<p class="o--mz">Designed, developed, and maintained by <a href="/about">Daniel Eden</a>. Hosted by <a title="RamNode" href="https://clientarea.ramnode.com/aff.php?aff=088">RamNode</a>. Set in Leitura News and Franklin Gothic <span class="caps">URW</span>, delivered by Typekit. Check the <a href="/styleguide/">style guide</a>. View <a href="https://github.com/daneden/daneden.me">the source</a>.</p>
</section>
</div>
</footer>
<div class="footer__copyright wrap small isle--v">
<p>© 2014 Daniel Eden, unless otherwise noted.</p>
</div>
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-googles-2', 'daneden.me');
ga('send', 'pageview');
</script>
<script src="/assets/picturefill-efd83b0d5fe6dac095659da29c71c601.js"></script>
<script>
// Toggle night theme
var d = document.documentElement,
t = document.querySelectorAll(".js--toggle-lights")[0],
m = localStorage.getItem("nightmode");
if(m == "true") {
d.classList.add("night-mode");
}
t.addEventListener("click", function(){
if(d.classList.contains("night-mode")) {
d.classList.remove("night-mode");
localStorage.setItem("nightmode", "false");
} else {
d.classList.add("night-mode");
localStorage.setItem("nightmode", "true");
}
});
</script>
</body>
</html>
Raw
style.css
html,:root{font-family:"leitura-news", Georgia, serif;font-size:112.5%;line-height:1.55556;-ms-text-size-adjust:none;-webkit-text-size-adjust:none;text-size-adjust:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-webkit-font-feature-settings:"liga" 1, "onum" 1, "kern" 1;-moz-font-feature-settings:"liga" 1, "onum" 1, "kern" 1;font-feature-settings:"liga" 1, "onum" 1, "kern" 1;-webkit-font-kerning:normal;-moz-font-kerning:normal;font-kerning:normal;background-color:#fff;color:#3d464d}@media (max-width: 860px){html,:root{font-size:101.25%}}@media (max-width: 500px){html,:root{font-size:90%}}html.night-mode,:root.night-mode{background-color:#1d1f21;color:#999a9b}*{margin:0;padding:0;box-sizing:border-box;position:relative}img{max-width:100%}ul,ol{padding-left:1.4em;overflow:hidden}header,main,footer,p,table,figure,blockquote,pre,ul,ol,h1,.alpha,h2,.beta{margin-bottom:1.55556rem}picture{display:block}li ol,li ul{margin-bottom:0}.o--b{display:block}.o--p{margin-bottom:1.55556rem}.o--mz{margin-bottom:0}.o--z{z-index:100}.unl{padding-left:0;list-style:none}.f--l{float:left}.f--r{float:right}.grid__col--1-of-6{width:16.66667%}.grid__col--push-1-of-6{margin-left:16.66667%}.grid__col--pull-1-of-6{margin-left:-16.66667%}.grid__col--5-of-6{width:83.33333%}.grid__col--push-5-of-6{margin-left:83.33333%}.grid__col--pull-5-of-6{margin-left:-83.33333%}.grid{list-style:none;margin-left:-1.55556rem}.grid .grid__col--6-of-6{width:100%}.grid .grid__col--3-of-6{width:50%}.grid .grid__col--2-of-6{width:33.33333%}.grid .grid__col--4-of-6{width:66.66667%}.grid .grid__col--push-6-of-6{margin-left:100%}.grid .grid__col--push-3-of-6{margin-left:50%}.grid .grid__col--push-2-of-6{margin-left:33.33333%}.grid .grid__col--push-4-of-6{margin-left:66.66667%}.grid .grid__col--pull-6-of-6{margin-left:-100%}.grid .grid__col--pull-3-of-6{margin-left:-50%}.grid .grid__col--pull-2-of-6{margin-left:-33.33333%}.grid .grid__col--pull-4-of-6{margin-left:-66.66667%}.grid .grid__col{box-sizing:border-box;display:inline-block;margin-right:-.25em;min-height:1px;padding-left:1.55556rem;vertical-align:top}@media screen and (max-width: 600px){.grid .grid__col{display:block;margin-left:0;margin-right:0;padding-left:0;width:auto}}.grid .grid__col--centered{display:block;margin-left:auto;margin-right:auto}@media screen and (max-width: 600px){.grid{margin-left:0;width:auto}}.grid .grid__col--d-first{float:left}.grid .grid__col--d-last{float:right}.grid.grid--no-gutter{margin-left:0;width:100%}.grid.grid--no-gutter *{padding-left:0}.grid.grid--no-gutter .grid__col--span-all{margin-left:0;width:100%}.grid .grid__col--ab{vertical-align:bottom}.grid .grid__col--am{vertical-align:middle}.wrap{max-width:50rem;margin:0 auto}body{padding:1.55556rem}.island{padding:1.55556rem}.island--v{padding-top:1.55556rem;padding-bottom:1.55556rem}.isle,.highlight pre{padding:0.77778rem}.isle--v,.footer__copyright{padding-top:0.77778rem;padding-bottom:0.77778rem}.spit,.js--toggle-lights{padding:0.38889rem}.spit--v,.site__nav a{padding-top:0.38889rem;padding-bottom:0.38889rem}.nav,.nav ul,.nav ol{list-style:none;padding-left:0}.nav li,.nav a,.nav ul li,.nav ul a,.nav ol li,.nav ol a{display:inline-block}h1,.alpha{font-weight:800;font-size:2.5rem;line-height:1}@media (max-width: 500px){h1,.alpha{font-size:2rem}}h2,.beta{font-family:"franklin-gothic-urw", Geneva, Verdana, san-serif;font-size:1.5rem;font-weight:700}*+h2,*+.beta{padding-top:1.55556rem}h3,.gamma{margin-bottom:0.77778rem;font-family:"franklin-gothic-urw", Geneva, Verdana, san-serif;font-size:1rem;font-weight:700}h4,.delta{margin-bottom:0.77778rem;font-family:"franklin-gothic-urw", Geneva, Verdana, san-serif;font-weight:400}small,.small,figcaption,.footnotes,.footer__copyright{font-size:.8em}.mega{font-size:2.5rem;line-height:1.55556;font-weight:200}.sans{font-family:"franklin-gothic-urw", Geneva, Verdana, san-serif}.meta,.footnotes{color:#727375}a,a:visited,.js--toggle-lights{color:inherit;cursor:pointer}a:hover,.js--toggle-lights:hover{color:#cb5c42}figcaption{font-family:"franklin-gothic-urw", Geneva, Verdana, san-serif;color:#727375}.night-mode figcaption{color:#77797a}hr,.footnotes:before{border:0;border-bottom:2px solid #d0d2d4;width:6rem;padding-top:1.55556rem;margin-top:-2px;margin-right:auto;margin-bottom:3.11111rem;margin-left:auto}.night-mode hr,.night-mode .footnotes:before{border-bottom-color:#393b3f}mark{background-color:transparent;color:#cb5c42}blockquote{padding:0 1.55556rem;color:#727375;border-left:2px solid #cb5c42}.promo{text-align:center}.caps{-webkit-font-feature-settings:"c2sc" 1, "smcp" 1;-moz-font-feature-settings:"c2sc" 1, "smcp" 1;font-feature-settings:"c2sc" 1, "smcp" 1}sup,sub{vertical-align:baseline;top:-0.4em}sub{top:0.4em}figure img,picture img{display:block;width:100%;margin-bottom:0.77778rem}@media (min-width: 600px){.alignleft{float:left;width:50%;margin-left:-25%;margin-right:1.55556rem}}@media (min-width: 600px){.alignright{float:right;width:50%;margin-right:-25%;margin-left:1.55556rem}}@media (min-width: 600px){.imgbleed{width:150%;margin-left:-25%}}html,:root{font-family:"leitura-news", Georgia, serif;font-size:112.5%;line-height:1.55556;-ms-text-size-adjust:none;-webkit-text-size-adjust:none;text-size-adjust:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-webkit-font-feature-settings:"liga" 1, "onum" 1, "kern" 1;-moz-font-feature-settings:"liga" 1, "onum" 1, "kern" 1;font-feature-settings:"liga" 1, "onum" 1, "kern" 1;-webkit-font-kerning:normal;-moz-font-kerning:normal;font-kerning:normal;background-color:#fff;color:#3d464d}@media (max-width: 860px){html,:root{font-size:101.25%}}@media (max-width: 500px){html,:root{font-size:90%}}html.night-mode,:root.night-mode{background-color:#1d1f21;color:#999a9b}code,pre{font:85%/1.647058824 "Source Code Pro", Menlo, Consolas, monospace}.highlight pre{max-width:100%;overflow:scroll;border-radius:.25em;background-color:#fafcfd;box-shadow:inset 0 0 0 1px rgba(0,0,0,0.1)}.highlight pre .hll{background-color:#ffc}.highlight pre .c{color:#aaa;font-style:italic}.highlight pre .err{color:#f00;background-color:#f0a0a0}.highlight pre .k{color:#00a}.highlight pre .cm{color:#aaa;font-style:italic}.highlight pre .cp{color:#4c8317}.highlight pre .c1{color:#aaa;font-style:italic}.highlight pre .cs{color:#00a;font-style:italic}.highlight pre .gd{color:#a00}.highlight pre .ge{font-style:italic}.highlight pre .gr{color:#a00}.highlight pre .gh{color:#000080;font-weight:bold}.highlight pre .gi{color:#0a0}.highlight pre .go{color:#888}.highlight pre .gp{color:#555}.highlight pre .gs{font-weight:bold}.highlight pre .gu{color:#800080;font-weight:bold}.highlight pre .gt{color:#a00}.highlight pre .kc{color:#00a}.highlight pre .kd{color:#00a}.highlight pre .kn{color:#00a}.highlight pre .kp{color:#00a}.highlight pre .kr{color:#00a}.highlight pre .kt{color:#0aa}.highlight pre .m{color:#099}.highlight pre .s{color:#a50}.highlight pre .na{color:#1e90ff}.highlight pre .nb{color:#0aa}.highlight pre .nc{color:#0a0;text-decoration:underline}.highlight pre .no{color:#a00}.highlight pre .nd{color:#888}.highlight pre .ni{color:#800000;font-weight:bold}.highlight pre .nf{color:#0a0}.highlight pre .nn{color:#0aa;text-decoration:underline}.highlight pre .nt{color:#1e90ff;font-weight:bold}.highlight pre .nv{color:#a00}.highlight pre .ow{color:#00a}.highlight pre .w{color:#bbb}.highlight pre .mf{color:#099}.highlight pre .mh{color:#099}.highlight pre .mi{color:#099}.highlight pre .mo{color:#099}.highlight pre .sb{color:#a50}.highlight pre .sc{color:#a50}.highlight pre .sd{color:#a50}.highlight pre .s2{color:#a50}.highlight pre .se{color:#a50}.highlight pre .sh{color:#a50}.highlight pre .si{color:#a50}.highlight pre .sx{color:#a50}.highlight pre .sr{color:#099}.highlight pre .s1{color:#a50}.highlight pre .ss{color:#00a}.highlight pre .bp{color:#0aa}.highlight pre .vc{color:#a00}.highlight pre .vg{color:#a00}.highlight pre .vi{color:#a00}.highlight pre .il{color:#099}.site__header{margin-bottom:3.11111rem}.site__title{font-weight:400;text-decoration:none}.site__title:hover{color:inherit}.site__title span{margin-bottom:0}.site__nav{border-top:1px solid #d0d2d4}.night-mode .site__nav{border-top-color:#393b3f}.site__nav ul{overflow:visible}.site__nav li{margin-top:-1px}.site__nav li+li{margin-left:1rem}.site__nav a{text-decoration:none;color:#727375;border-top:1px solid transparent}.night-mode .site__nav a{color:#77797a}.site__nav a.active{color:#cb5c42;border-top-color:#cb5c42}.site__nav a:hover{color:#cb5c42}.js--toggle-lights{font-family:sans-serif}.posts__list .beta{margin-bottom:0}.posts__list a{text-decoration:none}p:empty{display:none}.hentry{margin-bottom:6.22222rem}@media (max-width: 860px){.hentry{margin-left:0}}.post__header,.page__header{margin-bottom:4.66667rem}@media (max-width: 860px) and (min-width: 600px){.post__content.grid__col,.page__content.grid__col,.post__header.grid__col,.page__header.grid__col{display:block;padding-left:0;margin-left:auto;margin-right:auto}}.home__avatar{shape-outside:url("/uploads/2014/09/sketch-portrait-large.png");shape-margin:20px}.footnote,.footnote:visited{padding:.15em;color:#cb5c42;text-decoration:none}.footnote:hover,.footnote:visited:hover{text-decoration:underline}.footnotes:before{content:'';display:block}.footnotes :last-child{margin-bottom:0}.footnotes :target{color:#3d464d}.site__footer{border-top:1px solid #d0d2d4}.night-mode .site__footer{border-top-color:#393b3f}.site__footer section{position:static}.site__footer section+section:before{content:none;content:normal}@media screen and (min-width: 700px){.site__footer section+section:before{content:'';position:absolute;width:1px;margin-left:-0.77778rem;top:0;bottom:0;background-color:#d0d2d4}.night-mode .site__footer section+section:before{background-color:#393b3f}}.footer__copyright{border-top:1px solid #d0d2d4}.night-mode .footer__copyright{border-top-color:#393b3f}
↑
@fagci
Copy link

fagci commented Aug 22, 2019

Instead of document.querySelectorAll(".js--toggle-lights")[0] you can use document.querySelector(".js--toggle-lights") that is faster

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment