evan/ewpratten.com
1
Fork 0
Code Actions
ewpratten.com/blog/styiling-github/index.html
github-actions[bot] 7b4995264b Deploy to GitHub pages
2022-12-18 17:12:33 +00:00

215 lines
7.8 KiB
HTML
Raw Permalink Blame History

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="shortcut icon" type="image/jpg" href="https:&#x2F;&#x2F;branding.ewpratten.com&#x2F;pfp&#x2F;2022&#x2F;460x460.webp" />
<link rel="canonical" href="https:&#x2F;&#x2F;ewpratten.com&#x2F;blog&#x2F;styiling-github&#x2F;" />
<link rel="alternate" type="application/rss+xml" title="RSS" href="https://ewpratten.com/rss.xml">
<meta name="twitter:card" content="summary" />
<meta name="og:site" content="ewpratten.com" />
<meta name="og:site_name" content="Evan Pratten" />
<meta name="og:image"
content="https:&#x2F;&#x2F;branding.ewpratten.com&#x2F;pfp&#x2F;2022&#x2F;460x460.webp" />
<meta property="og:description" content="" />
<meta property="description" content="" />
<meta name="description" content="">
<meta property="og:title" content="GitHub&#x27;s CSS is boring. So I refreshed the design - Evan Pratten" />
<meta property="og:type" content="article" />
<title>GitHub&#x27;s CSS is boring. So I refreshed the design | Evan Pratten</title>
<link rel="stylesheet" href="/global.css">
<link rel="stylesheet" href="/dist/github-markdown-css/github-markdown-light.css" lazyload>
<link rel="stylesheet" href="/styles/bootstrap.css" lazyload>
<link rel="stylesheet" href="/styles/typography.css">
</head>
<body>
<div class="page">
<link rel="stylesheet" href="/styles/components/heading-card.css">
<div class="heading-card">
<div class="profile-photo-container">
<img src="https:&#x2F;&#x2F;branding.ewpratten.com&#x2F;pfp&#x2F;2022&#x2F;460x460.webp" alt="Profile Photo" loading="lazy">
</div>
<div class="text-container">
<h1>Evan Pratten</h1>
<p>Software Developer</p>
</div>
</div>
<div class="container">
<link rel="stylesheet" href="/styles/components/navbar.css">
<div class="ewp-navbar">
<hr>
<ul class="navbar-items">
<li><a href="/">Home</a></li>
<li class="separator">|</li>
<li><a href="/timeline">Timeline</a></li>
<li class="separator">|</li>
<li class="dropdown-center">
<a href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">
More
</a>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="/photography">Photography</a></li>
<li><a class="dropdown-item" href="/contact">Contact</a></li>
</ul>
</li>
</ul>
<hr>
</div>
</div>
<article id="content" class="container markdown-body">
<h1 style="margin-bottom:0;padding-bottom:0;">GitHub&#x27;s CSS is boring. So I refreshed the design</h1>
<em></em>
<br><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 rel="noopener" target="_blank" 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>
<pre data-lang="css" style="background-color:#2b303b;color:#c0c5ce;" class="language-css "><code class="language-css" data-lang="css"><span>@-</span><span style="color:#bf616a;">moz-document url-prefix</span><span style="color:#b48ead;">(&quot;https:</span><span>//</span><span style="color:#b48ead;">github</span><span style="color:#8fa1b3;">.</span><span style="color:#d08770;">com</span><span>/&quot;) {
</span><span>.Header {
</span><span> background-color: </span><span style="color:#96b5b4;">#1a3652</span><span>;
</span><span>}
</span><span>
</span><span style="color:#8fa1b3;">.</span><span style="color:#d08770;">repohead</span><span style="color:#8fa1b3;">.</span><span style="color:#d08770;">experiment-repo-nav </span><span>{
</span><span> background-color: </span><span style="color:#96b5b4;">#fff</span><span>;
</span><span>}
</span><span style="color:#8fa1b3;">.</span><span style="color:#d08770;">reponav-item</span><span style="color:#8fa1b3;">.</span><span style="color:#d08770;">selected </span><span>{
</span><span> border-color: </span><span style="color:#96b5b4;">#fff #fff #4a79a8</span><span>;
</span><span>}
</span><span>
</span><span style="color:#8fa1b3;">.</span><span style="color:#d08770;">btn</span><span style="color:#8fa1b3;">.</span><span style="color:#d08770;">hover</span><span style="color:#b48ead;">,
</span><span style="color:#8fa1b3;">.</span><span style="color:#d08770;">btn</span><span style="color:#8fa1b3;">:</span><span style="color:#b48ead;">hover,
</span><span style="color:#8fa1b3;">.</span><span style="color:#d08770;">btn</span><span style="color:#b48ead;">,
</span><span style="color:#8fa1b3;">.</span><span style="color:#d08770;">btn </span><span>{
</span><span> background-color: </span><span style="color:#96b5b4;">#fafafa</span><span>;
</span><span> background-image: </span><span style="color:#96b5b4;">linear-gradient</span><span>(</span><span style="color:#d08770;">-180deg</span><span>, </span><span style="color:#96b5b4;">#fafafa</span><span>, </span><span style="color:#96b5b4;">#fafafa </span><span style="color:#d08770;">90%</span><span>);
</span><span>}
</span><span>
</span><span style="color:#8fa1b3;">.</span><span style="color:#d08770;">btn-primary</span><span style="color:#8fa1b3;">.</span><span style="color:#d08770;">hover</span><span style="color:#b48ead;">,
</span><span style="color:#8fa1b3;">.</span><span style="color:#d08770;">btn-primary</span><span style="color:#8fa1b3;">:</span><span style="color:#b48ead;">hover,
</span><span style="color:#8fa1b3;">.</span><span style="color:#d08770;">btn-primary</span><span style="color:#b48ead;">,
</span><span style="color:#8fa1b3;">.</span><span style="color:#d08770;">btn-primary </span><span>{
</span><span> background-color: </span><span style="color:#96b5b4;">#1aaa55</span><span>;
</span><span> background-image: </span><span style="color:#96b5b4;">linear-gradient</span><span>(</span><span style="color:#d08770;">-180deg</span><span>, </span><span style="color:#96b5b4;">#1aaa55</span><span>, </span><span style="color:#96b5b4;">#1aaa55 </span><span style="color:#d08770;">90%</span><span>);
</span><span>}
</span><span>
</span><span style="color:#8fa1b3;">.</span><span style="color:#d08770;">overall-summary </span><span>{}
</span><span>}
</span></code></pre>
<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 rel="noopener" target="_blank" href="https://userstyles.org/styles/172679/ewpratten-s-githubtheme">my userstyles page</a>.</p>
</article>
<link rel="stylesheet" href="/styles/components/footer.css">
<div class="footer">
<br>
<span class="gray">-- EOF --</span>
<p>
Site design & content by: <a href="/contact">Evan Pratten</a><br>
Consider <a href="/donate" target="_blank">supporting my work</a> if you like what you see<br>
</p>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/js/bootstrap.bundle.min.js"
integrity="sha384-OERcA2EqjJCMA+/3y+gxIOqMEjwtxJY7qPCqsdltbNJuaOe923+mo//f6V8Qbsw3"
crossorigin="anonymous"></script>
<!-- Global site tag (gtag.js) - Google Analytics -->
<script defer src="https://www.googletagmanager.com/gtag/js?id=G-5912H4H03P"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag() { dataLayer.push(arguments); }
gtag('js', new Date());
gtag('config', 'G-5912H4H03P');
</script>
</body>
</html>
View Git Blame Copy Permalink