Commit ba397758 authored by Murukesh Mohanan's avatar Murukesh Mohanan

removed Github custom domain, added css improvements, layout changes, rss link

parent 77d2498d
murukesh.me
<!doctype html> <!doctype html>
<html lang="en"> <html lang="en">
<head> <head>
<!-- If you want to fix the weird fonts on Chrome or Firefox <!-- If you want to fix the weird fonts on Chrome or Firefox
on Android, uncomment this meta tag. The weird font size on Android, uncomment this meta tag. The weird font size
is due to "font boosting". is due to "font boosting".
--> -->
<link rel="canonical" href="{{ site.url }}{{ page.url }}"> <link rel="canonical" href="{{ site.url }}{{ page.url }}">
<meta name="HandheldFriendly" content="true"> <meta name="HandheldFriendly" content="true">
...@@ -25,12 +25,14 @@ ...@@ -25,12 +25,14 @@
<meta property="fb:app_id" content="658633094275731"/> <meta property="fb:app_id" content="658633094275731"/>
</head> </head>
<body> <body>
<div id="container"> <header id="title">
<header id="title"> <a href="{{ site.base-url }}/">
<h1> <h1>
Murukesh Mohanan Murukesh Mohanan
</h1> </h1>
</header> </a>
</header>
<div id="container">
<nav> <nav>
<ul> <ul>
{% for page in site.pages_list %} {% for page in site.pages_list %}
...@@ -42,24 +44,27 @@ ...@@ -42,24 +44,27 @@
{% endfor %} {% endfor %}
</ul> </ul>
</nav> </nav>
<div id="vim-proposal">
<a href="http://vi.stackexchange.com">
<img src="https://i.stack.imgur.com/LMMOe.png" alt="Vi and Vim Stack Exchange" />
</a>
</div>
<article id="main"> <article id="main">
{{ content }} {{ content }}
</article> </article>
<div id="vim-proposal">
<a href="http://vi.stackexchange.com">
<img src="https://i.stack.imgur.com/LMMOe.png" alt="Vi and Vim Stack Exchange" />
</a>
</div>
</div> </div>
<footer> <footer>
<section> <section>
<!-- Copyleft FTW! --> <!-- Copyleft FTW! -->
<div>
<img src="{{ site.base-url }}/images/Copyleft.png" style="height: 1em;" alt="copyleft"> Murukesh Mohanan. <img src="{{ site.base-url }}/images/Copyleft.png" style="height: 1em;" alt="copyleft"> Murukesh Mohanan.
<p>Permission to use content is granted under <a href="https://creativecommons.org/licenses/by-sa/3.0/" rel="license">the CC BY-SA license</a>.</p> <p>Permission to use content is granted under <a href="https://creativecommons.org/licenses/by-sa/3.0/" rel="license">the CC BY-SA license</a>.</p>
<p>The font used here is the Ubuntu font, via Google Web Fonts.</p> <p>The font used here is the Ubuntu font, via Google Web Fonts.</p>
</div>
<a class="rss" href="{{ site.base-url }}/feed.xml"><img src="{{ site.base-url }}/images/rss.svg" alt="RSS"></img></a>
</section> </section>
</footer> </footer>
</body> </body>
</html> </html>
...@@ -2,14 +2,6 @@ ...@@ -2,14 +2,6 @@
layout: default layout: default
pagestyle: posts pagestyle: posts
--- ---
<div id="fb-root"></div>
<script>(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/en_GB/sdk.js#xfbml=1&version=v2.4";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
<header class="section post-title"> <header class="section post-title">
<h1> <h1>
<a href="{{ site.base-url }}{{ page.url }}"> <a href="{{ site.base-url }}{{ page.url }}">
...@@ -38,27 +30,48 @@ pagestyle: posts ...@@ -38,27 +30,48 @@ pagestyle: posts
</section> </section>
{% endfor %} {% endfor %}
<section class="page-links">
{% if page.next.url %}
<a class="page-prev" href="{{ site.base-url }}{{ page.previous.url }}" title="{{ page.previous.title }}">
{{ page.previous.title }}
</a>
{% endif %}
{% if page.next.url %}
<a class="page-next" href="{{ site.base-url }}{{ page.next.url }}" title="{{ page.next.title }}">
{{ page.next.title }}
</a>
{% endif %}
</section>
<div id="fb-root"></div>
<script>(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/en_GB/sdk.js#xfbml=1&version=v2.4";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
<section class="comments"> <section class="comments">
<div class="fb-comments" <div class="fb-comments"
data-href="{{site.url}}{{page.url}}" data-href="{{site.url}}{{page.url}}"
data-width="100%" data-width="100%"
data-numposts="10" data-numposts="10"
data-colorscheme="dark"> data-colorscheme="dark">
</div> </div>
<!-- <!--
<div id="disqus_thread"></div> <div id="disqus_thread"></div>
<script type="text/javascript"> <script type="text/javascript">
/* * * CONFIGURATION VARIABLES * * */ /* * * CONFIGURATION VARIABLES * * */
var disqus_shortname = 'muru'; var disqus_shortname = 'muru';
var disqus_identifier = '{{ page.url }}'; var disqus_identifier = '{{ page.url }}';
var disqus_url = '{{ site.url }}{{ page.url }}'; var disqus_url = '{{ site.url }}{{ page.url }}';
/* * * DON'T EDIT BELOW THIS LINE * * */ /* * * DON'T EDIT BELOW THIS LINE * * */
(function() { (function() {
var dsq = document.createElement('script'); dsq.type = 'text/javascript'; dsq.async = true; var dsq = document.createElement('script'); dsq.type = 'text/javascript'; dsq.async = true;
dsq.src = '//' + disqus_shortname + '.disqus.com/embed.js'; dsq.src = '//' + disqus_shortname + '.disqus.com/embed.js';
(document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(dsq); (document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(dsq);
})(); })();
</script> </script>
--> -->
<noscript>Please enable JavaScript to view the comments powered by Facebook.</noscript> <noscript>Please enable JavaScript to view the comments powered by Facebook.</noscript>
......
...@@ -153,9 +153,9 @@ One of the answers talks about the `post.excerpt` feature, where you can use an ...@@ -153,9 +153,9 @@ One of the answers talks about the `post.excerpt` feature, where you can use an
different from the default. Turns out, the idea can be easily extended to a different from the default. Turns out, the idea can be easily extended to a
generic separator. For example, add to your `_content.yaml`: generic separator. For example, add to your `_content.yaml`:
{% highlight yaml %} ```yaml
section_separator: "<!-- section -->" section_separator: "<!-- section -->"
{% endhighlight %} ```
And create a new layout (say `_layouts/sectioned_posts.html`) containing (aside And create a new layout (say `_layouts/sectioned_posts.html`) containing (aside
from the boilerplate): from the boilerplate):
......
...@@ -120,6 +120,16 @@ recent [feature request][gitlab-721] to enable redirection of HTTP to HTTPS. ...@@ -120,6 +120,16 @@ recent [feature request][gitlab-721] to enable redirection of HTTP to HTTPS.
Here's to hoping both of them getting implemented! Here's to hoping both of them getting implemented!
<!-- section -->
# Update (June 13, 2016)
On June 8, Github announced [official support for HTTPS][github-https] on their
user pages. Not only are `*.github.io` pages available on HTTPS like
`*.gitlab.io` ones, you can also force them to be HTTPS-only, as long as *you
don't use a custom domain*. That means I'll probably have to remove the `CNAME`
file from the repo. Your move, Gitlab!
[git.cse]: https://git.cse.iitb.ac.in [git.cse]: https://git.cse.iitb.ac.in
[ssl-ubuntu-blog]: https://developer.ubuntu.com/en/blog/2016/02/17/how-host-your-static-site-https-github-pages-and-cloudflare/ [ssl-ubuntu-blog]: https://developer.ubuntu.com/en/blog/2016/02/17/how-host-your-static-site-https-github-pages-and-cloudflare/
[ks]: https://kloudsec.com/github-pages/new [ks]: https://kloudsec.com/github-pages/new
...@@ -132,3 +142,4 @@ Here's to hoping both of them getting implemented! ...@@ -132,3 +142,4 @@ Here's to hoping both of them getting implemented!
[gitlab-le]: https://about.gitlab.com/2016/04/11/tutorial-securing-your-gitlab-pages-with-tls-and-letsencrypt/ [gitlab-le]: https://about.gitlab.com/2016/04/11/tutorial-securing-your-gitlab-pages-with-tls-and-letsencrypt/
[gitlab-474]: https://gitlab.com/gitlab-org/gitlab-ee/issues/474 [gitlab-474]: https://gitlab.com/gitlab-org/gitlab-ee/issues/474
[gitlab-721]: https://gitlab.com/gitlab-com/support-forum/issues/721 [gitlab-721]: https://gitlab.com/gitlab-com/support-forum/issues/721
[github-https]: https://github.com/blog/2186-https-for-github-pages
...@@ -32,11 +32,13 @@ layout: default ...@@ -32,11 +32,13 @@ layout: default
<section class="page-links"> <section class="page-links">
{% if paginator.next_page %} {% if paginator.next_page %}
<a class="page-prev" href="{{ site.base-url }}{{ paginator.next_page_path }}">Older: <a class="page-prev" href="{{ site.base-url }}{{ paginator.next_page_path }}">
{{ paginator.next_page }} / {{ paginator.total_pages }}</a> Older: {{ paginator.next_page }} / {{ paginator.total_pages }}
</a>
{% endif %} {% endif %}
{% if paginator.previous_page %} {% if paginator.previous_page %}
<a class="page-next" href="{{ site.base-url }}{{ paginator.previous_page_path }}">Newer: <a class="page-next" href="{{ site.base-url }}{{ paginator.previous_page_path }}">
{{ paginator.previous_page }} / {{ paginator.total_pages }}</a> Newer: {{ paginator.previous_page }} / {{ paginator.total_pages }}
</a>
{% endif %} {% endif %}
</section> </section>
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="128px" height="128px" id="RSSicon" viewBox="0 0 256 256">
<defs>
<linearGradient x1="0.085" y1="0.085" x2="0.915" y2="0.915" id="RSSg">
<stop offset="0.0" stop-color="#E3702D"/><stop offset="0.1071" stop-color="#EA7D31"/>
<stop offset="0.3503" stop-color="#F69537"/><stop offset="0.5" stop-color="#FB9E3A"/>
<stop offset="0.7016" stop-color="#EA7C31"/><stop offset="0.8866" stop-color="#DE642B"/>
<stop offset="1.0" stop-color="#D95B29"/>
</linearGradient>
</defs>
<rect width="256" height="256" rx="55" ry="55" x="0" y="0" fill="#CC5D15"/>
<rect width="246" height="246" rx="50" ry="50" x="5" y="5" fill="#F49C52"/>
<rect width="236" height="236" rx="47" ry="47" x="10" y="10" fill="url(#RSSg)"/>
<circle cx="68" cy="189" r="24" fill="#FFF"/>
<path d="M160 213h-34a82 82 0 0 0 -82 -82v-34a116 116 0 0 1 116 116z" fill="#FFF"/>
<path d="M184 213A140 140 0 0 0 44 73 V 38a175 175 0 0 1 175 175z" fill="#FFF"/>
</svg>
\ No newline at end of file
...@@ -8,6 +8,7 @@ ...@@ -8,6 +8,7 @@
#cann-table th { #cann-table th {
padding: 0.5em 1em; padding: 0.5em 1em;
background-color: #CDCDCD; background-color: #CDCDCD;
color: #122;
font-size: 0.9em; font-size: 0.9em;
} }
.cann-row-1, .cann-row-2 { .cann-row-1, .cann-row-2 {
...@@ -18,7 +19,6 @@ ...@@ -18,7 +19,6 @@
color: #011; color: #011;
margin: 0; margin: 0;
height: 2em; height: 2em;
font-size: 0.9em;
} }
.cann-row-2 { .cann-row-2 {
background-color: #BCBCBC; background-color: #BCBCBC;
...@@ -34,6 +34,7 @@ ...@@ -34,6 +34,7 @@
.club-name { .club-name {
width: 13em; width: 13em;
display: inline-block; display: inline-block;
font-weight: bolder;
} }
#cann-gen-note { #cann-gen-note {
font-size: 0.6em; font-size: 0.6em;
......
...@@ -8,7 +8,7 @@ ...@@ -8,7 +8,7 @@
kbd { kbd {
border: solid black 0.05em ; border: solid black 0.05em ;
box-shadow: 0 0.05em 0.05em 0.05em rgba(200,200,200,0.75); box-shadow: 0 0.05em 0.05em 0.05em rgba(200,200,200,0.75);
padding: 0.1em 0.5em; padding: 0.1em 0.5em;
border-radius: 0.25em; border-radius: 0.25em;
background: #FEFEFE; background: #FEFEFE;
margin: 0 0.2em; margin: 0 0.2em;
...@@ -21,19 +21,15 @@ blockquote { ...@@ -21,19 +21,15 @@ blockquote {
background-color: whitesmoke; background-color: whitesmoke;
} }
img {
max-width: 100%;
}
.post-date { .post-date {
text-align: right; text-align: right;
} }
a.tag { a.tag {
background-color: gainsboro; background-color: gainsboro;
padding: 0.1em 0.5em; padding: 0.1em 0.5em;
border-radius: 0.3em; border-radius: 0.3em;
font-variant: small-caps; font-variant: small-caps;
text-decoration: none; text-decoration: none;
font-size: large; font-size: large;
color: black; color: black;
...@@ -51,9 +47,9 @@ ol.tags-list li { ...@@ -51,9 +47,9 @@ ol.tags-list li {
display: inline-block; display: inline-block;
} }
/* /*
* From http://drewsilcock.co.uk/proper-linenumbers/ From http://drewsilcock.co.uk/proper-linenumbers/
*/ */
.highlight { .highlight {
margin: 0; margin: 0;
...@@ -89,24 +85,36 @@ ol.tags-list li { ...@@ -89,24 +85,36 @@ ol.tags-list li {
overflow: auto; overflow: auto;
} }
.page-links { section.page-links {
overflow: auto; overflow: auto;
text-align: center;
clear: both;
} }
a.page-prev { a.page-prev {
float: left; text-align: left;
text-overflow: ellipsis;
} }
a.page-next { a.page-next {
float: right; text-align: right;
text-overflow: '… ⇨ ';
}
a.page-prev::before {
content: '⇦ ';
}
a.page-next::after {
content: ' ⇨';
} }
a.page-prev, a.page-next { a.page-prev, a.page-next {
/*border: solid black 0.05em ; text-decoration: none;
box-shadow: 0 0.05em 0.05em 0.05em rgba(200,200,200,0.75);*/ color: silver;
background-color: white; font-size: 1.1em;
color: black; white-space: nowrap;
padding: 1em; overflow: hidden;
} }
@media screen and (min-device-aspect-ratio: 1/1) and (orientation: landscape) { @media screen and (min-device-aspect-ratio: 1/1) and (orientation: landscape) {
...@@ -119,6 +127,14 @@ a.page-prev, a.page-next { ...@@ -119,6 +127,14 @@ a.page-prev, a.page-next {
margin: 0.5em; margin: 0.5em;
/*overflow: auto;*/ /*overflow: auto;*/
} }
a.page-prev {
float: left;
width: 30%;
}
a.page-next {
float: right;
width: 30%;
}
} }
@media screen and (max-device-aspect-ratio: 1/1) and (orientation: portrait) { @media screen and (max-device-aspect-ratio: 1/1) and (orientation: portrait) {
...@@ -134,4 +150,9 @@ a.page-prev, a.page-next { ...@@ -134,4 +150,9 @@ a.page-prev, a.page-next {
kbd { kbd {
font-size: small; font-size: small;
} }
a.page-prev, a.page-next {
display: block;
padding: 0.25em;
width: 100%;
}
} }
...@@ -20,7 +20,6 @@ ...@@ -20,7 +20,6 @@
* Chrome browser. Didn't work on a Nexus 4 Opera Mini. * Chrome browser. Didn't work on a Nexus 4 Opera Mini.
*/ */
#main { #main {
padding: 1em 2em;
/*margin-left: 15%; /*margin-left: 15%;
float: right; float: right;
display: inline-block;*/ display: inline-block;*/
...@@ -49,6 +48,11 @@ footer { ...@@ -49,6 +48,11 @@ footer {
font-size: 80%; font-size: 80%;
border-top: 0.25em solid white; border-top: 0.25em solid white;
} }
footer section {
display: flex;
}
#contact-comment { #contact-comment {
display: none; display: none;
} }
...@@ -79,7 +83,6 @@ footer img { ...@@ -79,7 +83,6 @@ footer img {
} }
#vim-proposal img { #vim-proposal img {
height: 100%;
border-radius: 1vw; border-radius: 1vw;
overflow: hidden; overflow: hidden;
} }
...@@ -123,6 +126,11 @@ a:hover { ...@@ -123,6 +126,11 @@ a:hover {
font-weight: bold; font-weight: bold;
} }
#title a {
text-decoration: none;
color: inherit;
}
ol li { ol li {
list-style: decimal; list-style: decimal;
padding: 0.3em; padding: 0.3em;
...@@ -135,14 +143,17 @@ nav ul li { ...@@ -135,14 +143,17 @@ nav ul li {
section, .section { section, .section {
background: #122; background: #122;
color: white; color: white;
box-shadow: 0.1em 0.1em 0.2em 0.1em rgba(128,128,128,0.75);
border-radius: 0.5em;
margin-bottom: 1em; margin-bottom: 1em;
padding: 1em; padding: 1em;
text-align: justify; text-align: justify;
line-height: 1.2em; line-height: 1.2em;
} }
section, .section, #vim-proposal img {
box-shadow: 0.1em 0.1em 0.2em 0.1em rgba(128,128,128,0.75);
border-radius: 0.5em;
}
pre code { pre code {
overflow: auto; overflow: auto;
display: block; display: block;
...@@ -174,16 +185,25 @@ img { ...@@ -174,16 +185,25 @@ img {
max-width: 100%; max-width: 100%;
} }
a.rss {
margin-left: auto;
}
#container {
display: flex;
align-items: flex-start;
}
@media screen and (min-device-aspect-ratio: 1/1) and (orientation: landscape) { @media screen and (min-device-aspect-ratio: 1/1) and (orientation: landscape) {
nav { nav {
padding-top: 1%; padding-top: 1%;
/* min-height: 42em; /* min-height: 42em;
display: inline-block;*/ display: inline-block;
float: left; vertical-align: top;
float: left;*/
font-size: 1.2em; font-size: 1.2em;
text-align: right; text-align: right;
height: 100%; height: 100%;
vertical-align: top;
width: 10em; width: 10em;
max-width: 18vw; max-width: 18vw;
} }
...@@ -206,27 +226,18 @@ img { ...@@ -206,27 +226,18 @@ img {
max-width: 70vw; max-width: 70vw;
min-width: 22em; min-width: 22em;
width: 60%; width: 60%;
} padding: 1em 2em;
#vim-proposal {
float: right;
width: 16vw;
height: 18vw;
} }
} }
@media screen and (max-device-aspect-ratio: 1/1) and (orientation: portrait) { @media screen and (max-device-aspect-ratio: 1/1) and (orientation: portrait) {
#title h1 { #title h1 {
margin: 0.2em; margin: 0.2em;
} }
nav { nav {
width: 90%;
/* min-height: 42em;*/ /* min-height: 42em;*/
font-size: 2em;
text-align: center; text-align: center;
margin: 0 auto;
} }
nav ul { nav ul {
padding: 0; padding: 0;
...@@ -238,26 +249,28 @@ img { ...@@ -238,26 +249,28 @@ img {
box-shadow: 0.1em 0.1em 0.15em 0.05em rgba(100,100,100,0.75); box-shadow: 0.1em 0.1em 0.15em 0.05em rgba(100,100,100,0.75);
} }
#main, body { body {
text-align: center; text-align: center;
} }
section, .section { section, .section {
width: 85%;
font-size: 2em;
margin: 2em auto;
text-align: left; text-align: left;
margin-top: 2em;
} }
#vim-proposal { #main, #vim-proposal, nav {
height: 100vw; width: 90%;
width: 88vw; padding: 0 1em;
margin: 0 auto; margin: 0 auto;
} }
body { #vim-proposal img {
font-size: 2.5vw; margin-top: 1em;
margin-bottom: 1em;
width: 100%;
}
#container {
flex-direction: column;
} }
} }
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment