Skip to content

Instantly share code, notes, and snippets.

@Eeemil
Last active July 10, 2022 16:40
Show Gist options
  • Star 3 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save Eeemil/e93ad054a73037f5bea3 to your computer and use it in GitHub Desktop.
Save Eeemil/e93ad054a73037f5bea3 to your computer and use it in GitHub Desktop.
Jekyll - adding edit on GitHub button to your site
# Site settings
title: Emil Marklund's blog of digital magics
email: eeemil@acc.umu.se
description: >
A blog on programming, GNU Linux/Unix and other things I might find interesting.
I like to learn and teach and writing about what I learn is a great way to do both.
This blog is running Jekyll
baseurl: "" # the subpath of your site, e.g. /blog/
url: "http://eeemil.se" # the base hostname & protocol for your site
twitter_username: eeemil_
github_username: eeemil
git_repo: blog
# Build settings
markdown: kramdown
/*
* Modified css from main.css to allow for medium sized vector icons
*/
.icon.medium > svg {
display: inline-block;
width: 24px;
height: 24px;
vertical-align: middle; }
.icon.medium > svg path {
fill: #828282 }
/*
* A modified css for a git style button.
* Original css from: https://github.com/necolas/css3-github-buttons
*/
.gitbutton {
position: relative;
overflow: visible;
display: inline-block;
padding: 0.5em 1em;
border: 1px solid #d4d4d4;
margin: 0;
text-decoration: none;
text-align: center;
text-shadow: 1px 1px 0 #fff;
/*
* I removed the original CSS defining the font type, as it did not play nicely with
* the CSS defining my link size.
*/
/*font:11px/normal sans-serif; */
color: #333;
white-space: nowrap;
cursor: pointer;
outline: none;
background-color: #ececec;
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#f4f4f4), to(#ececec));
background-image: -moz-linear-gradient(#f4f4f4, #ececec);
background-image: -ms-linear-gradient(#f4f4f4, #ececec);
background-image: -o-linear-gradient(#f4f4f4, #ececec);
background-image: linear-gradient(#f4f4f4, #ececec);
-moz-background-clip: padding; /* for Firefox 3.6 */
background-clip: padding-box;
border-radius: 0.2em;
/* IE hacks */
zoom: 1;
*display: inline;
}
.gitbutton:hover,
.gitbutton:focus,
.gitbutton:active,
.gitbutton.active {
border-color: #3072b3;
border-bottom-color: #2a65a0;
text-decoration: none;
text-shadow: -1px -1px 0 rgba(0,0,0,0.3);
color: #fff;
background-color: #3c8dde;
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#599bdc), to(#3072b3));
background-image: -moz-linear-gradient(#599bdc, #3072b3);
background-image: -o-linear-gradient(#599bdc, #3072b3);
background-image: linear-gradient(#599bdc, #3072b3);
}
.gitbutton:active,
.gitbutton.active {
border-color: #2a65a0;
border-bottom-color: #3884cd;
background-color: #3072b3;
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#3072b3), to(#599bdc));
background-image: -moz-linear-gradient(#3072b3, #599bdc);
background-image: -ms-linear-gradient(#3072b3, #599bdc);
background-image: -o-linear-gradient(#3072b3, #599bdc);
background-image: linear-gradient(#3072b3, #599bdc);
}
/* overrides extra padding on gitbutton elements in Firefox */
.gitbutton::-moz-focus-inner {
padding: 0;
border: 0;
}
.gitbutton.pill {
border-radius: 50em;
}
<svg viewBox="0 0 16 16">
<path fill="#828282" d="M7.999,0.431c-4.285,0-7.76,3.474-7.76,7.761 c0,3.428,2.223,6.337,5.307,7.363c0.388,0.071,0.53-0.168,0.53-0.374c0-0.184-0.007-0.672-0.01-1.32 c-2.159,0.469-2.614-1.04-2.614-1.04c-0.3\
53-0.896-0.862-1.135-0.862-1.135c-0.705-0.481,0.053-0.472,0.053-0.472 c0.779,0.055,1.189,0.8,1.189,0.8c0.692,1.186,1.816,0.843,2.258,0.645c0.071-0.502,0.271-0.843,0.493-1.037 C4.86,11.425,3.049,10.76,3.049,7\
.786c0-0.847,0.302-1.54,0.799-2.082C3.768,5.507,3.501,4.718,3.924,3.65 c0,0,0.652-0.209,2.134,0.796C6.677,4.273,7.34,4.187,8,4.184c0.659,0.003,1.323,0.089,1.943,0.261 c1.482-1.004,2.132-0.796,2.132-0.796c0.4\
23,1.068,0.157,1.857,0.077,2.054c0.497,0.542,0.798,1.235,0.798,2.082 c0,2.981-1.814,3.637-3.543,3.829c0.279,0.24,0.527,0.713,0.527,1.437c0,1.037-0.01,1.874-0.01,2.129 c0,0.208,0.14,0.449,0.534,0.373c3.081-1.\
028,5.302-3.935,5.302-7.362C15.76,3.906,12.285,0.431,7.999,0.431z"/>
</svg>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>{% if page.title %}{{ page.title }}{% else %}{{ site.title }}{% endif %}</title>
<meta name="description" content="{% if page.excerpt %}{{ page.excerpt | strip_html | strip_newlines | truncate: 160 }}{% else %}{{ site.description }}{% endif %}">
<link rel="stylesheet" href="{{ "/css/main.css" | prepend: site.baseurl }}">
<!-- Below is the added css -->
<link rel="stylesheet" href="{{ "/css/custom.css" | prepend: site.baseurl }}">
<link rel="canonical" href="{{ page.url | replace:'index.html','' | prepend: site.baseurl | prepend: site.url }}">
<link rel="alternate" type="application/rss+xml" title="{{ site.title }}" href="{{ "/feed.xml" | prepend: site.baseurl | prepend: site.url }}" />
</head>
---
layout: default
---
<div class="post">
<header class="post-header">
<h1 class="post-title">{{ page.title }}</h1>
<p class="post-meta">{{ page.date | date: "%b %-d, %Y" }}{% if page.author %} • {{ page.author }}{% endif %}{% if page.meta %} • {{ page.meta }}{% endif %}</p>
</header>
<article class="post-content">
{{ content }}
</article>
<a href=https://www.github.com/{{ site.github_username }}/{{ site.git_repo }}/blob/master/{{ page.path }} class="gitbutton pill">
<span class="icon medium">
{% include git-logo.html %}
</span>
Edit on GitHub!
</a>
</div>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment