<head>
<title>Evan Pratten</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" />
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<link rel="stylesheet" href="/assets/css/main.css">
<link rel="stylesheet" href="/assets/css/github-syntax.css">
<link href="https://fonts.googleapis.com/css?family=IBM+Plex+Mono:400,400i|IBM+Plex+Sans:100,100i,400,400i,700,700i" rel="stylesheet">
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
</head>
<body>
<div class="site-ctr">
<!-- Navbar -->
<nav class="navbar navbar-dark sticky-top bg-dark navbar-expand-lg">
<!-- Navbar content -->
<!-- <div class="container"> -->
<a class="navbar-brand" href="/">Evan Pratten</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup"
aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNavAltMarkup">
<div class="navbar-nav ml-auto">
<a class="nav-item nav-link" href="/blog">Blog</a>
<a class="nav-item nav-link" href="/projects">Projects</a>
<!-- <a class="nav-item nav-link" href="/documentation">Documentation</a> -->
<a class="nav-item nav-link" href="/about">About</a>
</div>
<!-- </div> -->
</div>
</nav>
<!-- <div style="height:5vh"></div> -->
<!-- Header -->
<!-- <div class="header">
<div class="container">
<div class="content">
</div>
</div>
<div class="header-gap"></div>
</div> -->
<div class="reactive-bg">
<div class="post container">
<h1>GitHub's CSS is boring. So I refreshed the design
</h1>
<h4>
</h4>
<hr>
<p><em>2019-06-12 09:09:00 -0400
</em></p>
<br>
<p>I have been using GitHub since 2017, and have been getting tired of GitHub’s theme. I didn’t need a huge change, just a small refresh. So, to solve this, I whipped out <a href="https://addons.mozilla.org/en-CA/firefox/addon/styl-us/">Stylus</a> and made a nice little CSS file for it.</p>
<h2 id="the-css">The CSS</h2>
<p>Here is the CSS. Feel free to play with it.</p>
<div class="language-css highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="k">@-moz-document</span> <span class="n">url-prefix</span><span class="p">(</span><span class="s1">"https://github.com/"</span><span class="p">)</span> <span class="p">{</span>
<span class="nc">.Header</span> <span class="p">{</span>
<span class="nl">background-color</span><span class="p">:</span> <span class="m">#1a3652</span><span class="p">;</span>
<span class="p">}</span>
<span class="nc">.repohead.experiment-repo-nav</span> <span class="p">{</span>
<span class="nl">background-color</span><span class="p">:</span> <span class="m">#fff</span><span class="p">;</span>
<span class="p">}</span>
<span class="nc">.reponav-item.selected</span> <span class="p">{</span>
<span class="nl">border-color</span><span class="p">:</span> <span class="m">#fff</span> <span class="m">#fff</span> <span class="m">#4a79a8</span><span class="p">;</span>
<span class="p">}</span>
<span class="nc">.btn.hover</span><span class="o">,</span>
<span class="nc">.btn</span><span class="nd">:hover</span><span class="o">,</span>
<span class="nc">.btn</span><span class="o">,</span>
<span class="nc">.btn</span> <span class="p">{</span>
<span class="nl">background-color</span><span class="p">:</span> <span class="m">#fafafa</span><span class="p">;</span>
<span class="nl">background-image</span><span class="p">:</span> <span class="n">linear-gradient</span><span class="p">(</span><span class="m">-180deg</span><span class="p">,</span> <span class="m">#fafafa</span><span class="p">,</span> <span class="m">#fafafa</span> <span class="m">90%</span><span class="p">);</span>
<span class="p">}</span>
<span class="nc">.btn-primary.hover</span><span class="o">,</span>
<span class="nc">.btn-primary</span><span class="nd">:hover</span><span class="o">,</span>
<span class="nc">.btn-primary</span><span class="o">,</span>
<span class="nc">.btn-primary</span> <span class="p">{</span>
<span class="nl">background-color</span><span class="p">:</span> <span class="m">#1aaa55</span><span class="p">;</span>
<span class="nl">background-image</span><span class="p">:</span> <span class="n">linear-gradient</span><span class="p">(</span><span class="m">-180deg</span><span class="p">,</span> <span class="m">#1aaa55</span><span class="p">,</span> <span class="m">#1aaa55</span> <span class="m">90%</span><span class="p">);</span>
<span class="p">}</span>
<span class="nc">.overall-summary</span> <span class="p">{}</span>
<span class="p">}</span>
</code></pre></div></div>
<h2 id="use-it-yourself">Use it yourself</h2>
<p>I put this theme on userstyles.org. You can download and install it by going to <a href="https://userstyles.org/styles/172679/ewpratten-s-githubtheme">my userstyles page</a>.</p>
</div>
</div>
</div>
<!-- <div id="particles-js"></div> -->
<div class="container foot" style="text-align:center;">
<br>
<span class="site-info">
Site design by: <a href="https://retrylife.ca">Evan Pratten</a> |
This site was last updated at: 2019-09-07 13:12:56 -0400
</span>
</div>
<!-- Brython -->
<script src="/assets/js/brython.js"></script>
<script src="/assets/js/brython_stdlib.js"></script>
<script>
function startPY(){
brython();
console.log("Started Python")
}
window.onload = startPY;
</script>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"
integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1"
crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"
integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM"
crossorigin="anonymous"></script>
<!-- Offsets for links -->
<script>
(function ($, window) {
var adjustAnchor = function () {
var $anchor = $(':target'),
fixedElementHeight = 100;
if ($anchor.length > 0) {
window.scrollTo(0, $anchor.offset().top - fixedElementHeight);
}
};
$(window).on('hashchange load', function () {
adjustAnchor();
});
})(jQuery, window);
</script>
<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-74118570-2"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag() { dataLayer.push(arguments); }
gtag('js', new Date());
gtag('config', 'UA-74118570-2');
</script>
<!-- particles -->
<script>
var body = document.body
var particles = document.getElementById("particles-js")
particles.style.height = body.scrollHeight + "px"
console.log(body.scrollHeight)
</script>
<script src="/assets/js/particles.min.js"></script>
<script>
particlesJS.load('particles-js', '/assets/js/particles.json', function () {
console.log('callback - particles.js config loaded');
});
</script>
</body>