214 lines
9.9 KiB
HTML
214 lines
9.9 KiB
HTML
<head>
|
||
<title>Evan Pratten</title>
|
||
<meta charset="utf-8" />
|
||
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" />
|
||
|
||
<!-- Begin Jekyll SEO tag v2.6.1 -->
|
||
<title>GitHub’s CSS is boring. So I refreshed the design | Evan Pratten</title>
|
||
<meta name="generator" content="Jekyll v3.8.6" />
|
||
<meta property="og:title" content="GitHub’s CSS is boring. So I refreshed the design" />
|
||
<meta property="og:locale" content="en_US" />
|
||
<meta name="description" content="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 Stylus and made a nice little CSS file for it." />
|
||
<meta property="og:description" content="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 Stylus and made a nice little CSS file for it." />
|
||
<link rel="canonical" href="http://0.0.0.0:4000/blog/2019/06/12/styiling-github" />
|
||
<meta property="og:url" content="http://0.0.0.0:4000/blog/2019/06/12/styiling-github" />
|
||
<meta property="og:site_name" content="Evan Pratten" />
|
||
<meta property="og:type" content="article" />
|
||
<meta property="article:published_time" content="2019-06-12T09:09:00-04:00" />
|
||
<script type="application/ld+json">
|
||
{"datePublished":"2019-06-12T09:09:00-04:00","dateModified":"2019-06-12T09:09:00-04:00","@type":"BlogPosting","mainEntityOfPage":{"@type":"WebPage","@id":"http://0.0.0.0:4000/blog/2019/06/12/styiling-github"},"url":"http://0.0.0.0:4000/blog/2019/06/12/styiling-github","description":"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 Stylus and made a nice little CSS file for it.","headline":"GitHub’s CSS is boring. So I refreshed the design","@context":"https://schema.org"}</script>
|
||
<!-- End Jekyll SEO tag -->
|
||
|
||
|
||
|
||
<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-11-30 11:30:39 -0500
|
||
</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>
|
||
|
||
<!-- Twitter embeds -->
|
||
<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
|
||
|
||
|
||
</body> |