UI improvements for blog.

Signed-off-by: Sanchayan Maity <maitysanchayan@gmail.com>
This commit is contained in:
Sanchayan Maity 2020-04-04 18:46:01 +05:30
parent d914e1048d
commit 734f268715
11 changed files with 322 additions and 390 deletions

View File

@ -1,15 +0,0 @@
---
title: Contact
---
[Last.fm](http://www.last.fm/user/sanchayan_maity)
[Goodreads](http://www.goodreads.com/user/show/7006256-sanchayan-maity)
[Linkedin](https://in.linkedin.com/in/sanchayan-maity-57235953)
[GitLab](https://gitlab.com/SanchayanMaity)
[Github](https://github.com/SanchayanMaity)
You can contact me on maitysanchayan@gmail.com

View File

@ -1,195 +0,0 @@
h1, h2, h3 {
margin: 0px 0px 18px 0px;
padding: 24px 0px 0px 0px;
}
p, ul {
margin: 18px 0px 18px 0px;
}
img {
margin: 12px 0px 12px 0px;
max-width: 100%;
}
ul {
padding-left: 18px;
}
div#footer {
margin: 60px 0px 36px 0px;
}
html {
background-color: #fff;
font-size: 16px;
font-family: sans-serif;
line-height: 24px;
}
body {
color: #333;
}
a {
color: #111;
text-decoration: none;
border-bottom: 1px solid #555;
}
/* Pandoc 2 puts 'a' elements inside code blocks for linking to lines. We don't
* want to underline those. */
code a {
border-bottom: none;
}
div.figure a{
border: none;
}
@media all and (min-width: 620px) {
div.flickr img {
border: 1px solid #888;
padding: 6px;
}
}
div.flickr {
margin-top: 60px;
margin-bottom: 60px;
}
a img {
margin-bottom: 0px;
}
pre {
margin-left: 18px;
overflow: auto;
}
pre code {
background-color: transparent;
color: #333;
font-size: 14px;
margin: 0px;
padding: 0px;
}
code {
color: #408090;
}
h1, h2, h3 {
font-weight: normal;
}
h1 {
font-size: 26px;
}
h2 {
font-size: 22px;
}
h3 {
font-size: 18px;
}
ul {
list-style-image: url("../images/list-style-image.png");
}
blockquote {
background: #e6e6e6 url("../images/quote-background.png") no-repeat left top;
font-style: italic;
margin-left: 18px;
padding: 6px 6px 6px 54px;
}
hr {
border: none;
margin: 36px auto 36px auto;
text-align: center;
}
hr:after {
content: "\002217 \002217 \002217";
}
span.soft, figcaption {
font-style: italic;
color: #555;
}
div.figure {
text-align: center;
}
div.figure p {
margin-top: 6px;
}
a.footnote-ref {
border: none;
}
a.footnote-ref sup:before {
content: "(";
}
a.footnote-ref sup:after {
content: ")";
}
a.footnote-ref sup {
padding: 2px;
}
a.footnote-back {
border: none;
padding: 0px 6px 0px 6px;
}
section.footnotes:before {
content: "Footnotes";
font-size: 18px;
padding-left: 18px;
}
section.footnotes {
border-left: 1px dashed #555;
color: #555;
margin-top: 36px;
}
section.footnotes hr {
display: none;
}
div.photoblog img {
margin-top: 48px;
margin-bottom: 48px;
}
div.photoblog div.pagination {
font-size: 14px;
padding: 12px 0px;
}
div#footer {
font-size: 14px;
}
/*******************************************************************************
* Disqus *
******************************************************************************/
/* Reset list image for disqus */
div#disqus_thread ul {
list-style-image: none;
}
div#dsq-subscribe em {
text-decoration: none;
}

159
css/default.css Normal file
View File

@ -0,0 +1,159 @@
body {
font: 400 16px/1.5 "Helvetica Neue", Helvetica, Arial, sans-serif;
color: #111111;
background-color: #fdfdfd;
font-size: 16px;
margin: 0px auto 0px auto;
line-height: 24px;
}
header {
border-bottom: 2px solid #999999;
margin-bottom: 30px;
padding: 12px 0px 12px 0px;
}
nav {
text-align: right;
}
nav a, nav a:visited {
color: #111111;
margin-left: 12px;
}
.hs {
float: right;
margin: 10px;
}
a {
color: #2a7ae2;
text-decoration: none
}
a:visited {
color: #1756a9
}
a:hover {
color: #111;
text-decoration: underline
}
footer {
display: flex;
justify-content: space-between;
border-top: solid 2px #999999;
color: #555;
font-size: 12px;
margin-top: 30px;
padding: 12px 0px 12px 0px;
}
footer ul {
list-style-type: none;
padding: 0;
display: flex;
}
footer .fab {
color: #555;
font-size: 16px;
margin: 0 10px 0 0;
text-decoration: none;
}
footer .fab:hover {
color: #111;
}
h1, h2, h3, h4, h5, h6 {
font-weight: 400;
margin: 20px 0 5px 0;
}
h1 {
font-size: 24px;
}
h2 {
font-size: 20px;
}
ul {
margin: 0;
}
p {
margin: 8px 0;
}
article .header {
color: #555;
font-size: 14px;
font-style: italic;
}
.logo a {
color: #666666;
float: left;
font-size: 18px;
font-weight: bold;
text-decoration: none;
}
.resume {
display: block;
}
@media all and (max-width: 649px) {
body {
margin: 20px;
}
.logo {
display: flex;
margin: 0 0 15px 0;
}
.logo a {
float: none;
margin: auto;
}
nav {
text-align: center;
}
.hs {
float: none;
}
.resume {
width: auto;
height: auto;
}
}
@media all and (min-width: 650px) {
body {
width: 600px;
}
.resume {
width: 100%;
height: 818px;
}
}
@media all and (min-width: 800px) {
body {
width: 750px;
}
.resume {
width: 100%;
height: 1010px;
}
}

View File

@ -1,73 +0,0 @@
html {
margin: 0px;
padding: 0px;
height: 100%;
}
body {
margin: 0px;
padding: 0px 0px 0px 0px;
height: 100%;
}
div.avatar-wrap {
margin: 18px;
text-align: center;
}
div#navigation {
background: #f3f3f3 url("../images/header.png") repeat-x left bottom;
padding-bottom: 18px;
text-align: center;
}
div#navigation a {
border: none;
margin: 0px 6px 0px 6px;
}
div#content {
margin: 12px;
}
@media all and (min-width: 822px) {
html {
background: #fff url("../images/sidebar.png") repeat-y left top;
}
div.avatar-wrap {
margin: 6px 18px 6px 0px;
float: left;
}
div.avatar-wrap img {
max-width: 128px;
margin: 0px;
}
div#navigation {
background: none;
float: left;
left: 0px;
margin: 0px 0px 0px 18px;
position: fixed;
top: 0px;
width: 102px;
}
div#navigation h1, div#navigation a {
display: block;
text-align: right;
}
div#navigation a {
color: #333;
margin: 6px 0px 6px 0px;
}
div#content {
margin: 0px 0px 0px 156px;
padding: 0px 36px 0px 36px;
width: 648px;
}
}

View File

@ -1,18 +1,13 @@
/* Generated by pandoc. */
table.sourceCode, tr.sourceCode, td.lineNumbers, td.sourceCode, table.sourceCode pre
{ margin: 0; padding: 0; border: 0; vertical-align: baseline; border: none; }
td.lineNumbers { border-right: 1px solid #AAAAAA; text-align: right; color: #AAAAAA; padding-right: 5px; padding-left: 5px; }
td.sourceCode { padding-left: 5px; }
pre.sourceCode span.kw { color: #007020; font-weight: bold; }
pre.sourceCode span.dt { color: #902000; }
pre.sourceCode span.dv { color: #40a070; }
pre.sourceCode span.bn { color: #40a070; }
pre.sourceCode span.fl { color: #40a070; }
pre.sourceCode span.ch { color: #4070a0; }
pre.sourceCode span.st { color: #4070a0; }
pre.sourceCode span.co { color: #60a0b0; font-style: italic; }
pre.sourceCode span.ot { color: #007020; }
pre.sourceCode span.al { color: red; font-weight: bold; }
pre.sourceCode span.fu { color: #06287e; }
pre.sourceCode span.re { }
pre.sourceCode span.er { color: red; font-weight: bold; }
code {
font-size: 13px;
background-color: rgb(250,250,250);
border: 1px solid rgb(200,200,200);
padding: 2px 4px;
}
pre code {
display: block;
padding: 5px 10px;
margin-bottom: 1em;
overflow-x:auto;
}

61
css/tango.css Normal file
View File

@ -0,0 +1,61 @@
pre > code.sourceCode { white-space: pre; position: relative; }
pre > code.sourceCode > span { display: inline-block; line-height: 1.25; }
pre > code.sourceCode > span:empty { height: 1.2em; }
code.sourceCode > span { color: inherit; text-decoration: inherit; }
div.sourceCode { margin: 1em 0; }
pre.sourceCode { margin: 0; }
@media screen {
div.sourceCode { overflow: auto; }
}
@media print {
pre > code.sourceCode { white-space: pre-wrap; }
pre > code.sourceCode > span { text-indent: -5em; padding-left: 5em; }
}
pre.numberSource code
{ counter-reset: source-line 0; }
pre.numberSource code > span
{ position: relative; left: -4em; counter-increment: source-line; }
pre.numberSource code > span > a:first-child::before
{ content: counter(source-line);
position: relative; left: -1em; text-align: right; vertical-align: baseline;
border: none; display: inline-block;
-webkit-touch-callout: none; -webkit-user-select: none;
-khtml-user-select: none; -moz-user-select: none;
-ms-user-select: none; user-select: none;
padding: 0 4px; width: 4em;
color: #aaaaaa;
}
pre.numberSource { margin-left: 3em; border-left: 1px solid #aaaaaa; padding-left: 4px; }
div.sourceCode
{ background-color: #f8f8f8; }
@media screen {
pre > code.sourceCode > span > a:first-child::before { text-decoration: underline; }
}
code span.al { color: #ef2929; } /* Alert */
code span.an { color: #8f5902; font-weight: bold; font-style: italic; } /* Annotation */
code span.at { color: #c4a000; } /* Attribute */
code span.bn { color: #0000cf; } /* BaseN */
code span.cf { color: #204a87; font-weight: bold; } /* ControlFlow */
code span.ch { color: #4e9a06; } /* Char */
code span.cn { color: #000000; } /* Constant */
code span.co { color: #8f5902; font-style: italic; } /* Comment */
code span.cv { color: #8f5902; font-weight: bold; font-style: italic; } /* CommentVar */
code span.do { color: #8f5902; font-weight: bold; font-style: italic; } /* Documentation */
code span.dt { color: #204a87; } /* DataType */
code span.dv { color: #0000cf; } /* DecVal */
code span.er { color: #a40000; font-weight: bold; } /* Error */
code span.ex { } /* Extension */
code span.fl { color: #0000cf; } /* Float */
code span.fu { color: #000000; } /* Function */
code span.im { } /* Import */
code span.in { color: #8f5902; font-weight: bold; font-style: italic; } /* Information */
code span.kw { color: #204a87; font-weight: bold; } /* Keyword */
code span.op { color: #ce5c00; font-weight: bold; } /* Operator */
code span.ot { color: #8f5902; } /* Other */
code span.pp { color: #8f5902; font-style: italic; } /* Preprocessor */
code span.sc { color: #000000; } /* SpecialChar */
code span.ss { color: #4e9a06; } /* SpecialString */
code span.st { color: #4e9a06; } /* String */
code span.va { color: #000000; } /* Variable */
code span.vs { color: #4e9a06; } /* VerbatimString */
code span.wa { color: #8f5902; font-weight: bold; font-style: italic; } /* Warning */

View File

@ -1,16 +1,10 @@
---
title: Home
---
<img src="/images/haskell-logo.png" class="hs" />
<h2>Welcome</h2>
<p>Welcome to my bλog!</p>
<img src="/images/haskell-logo.png" style="float: right; margin: 10px;" />
<p>I've reproduced a list of recent posts here for your reading pleasure:</p>
<p>Welcome to my blog!</p>
<p>I've reproduced a list of recent posts here for your reading pleasure.</p>
<h2>Posts</h2>
<h2>Recent Posts</h2>
$partial("templates/post-list.html")$
<p>…or you can find more in the <a href="/archive.html">archives</a>.</p>

48
site.hs
View File

@ -16,12 +16,6 @@ main = hakyllWith config $ do
csses <- loadAll "css/*.css"
makeItem $ unlines $ map itemBody csses
match (fromList ["contact.markdown"]) $ do
route $ setExtension "html"
compile $ pandocCompiler
>>= loadAndApplyTemplate "templates/default.html" defaultContext
>>= relativizeUrls
match (fromList ["about.markdown"]) $ do
route $ setExtension "html"
compile $ pandocCompiler
@ -30,20 +24,6 @@ main = hakyllWith config $ do
tags <- buildTags "posts/*" (fromCapture "tags/*.html")
tagsRules tags $ \tag pattern -> do
let title = "Posts tagged \"" ++ tag ++ "\""
route idRoute
compile $ do
posts <- recentFirst =<< loadAll pattern
let ctx = constField "title" title
`mappend` listField "posts" postCtx (return posts)
`mappend` defaultContext
makeItem ""
>>= loadAndApplyTemplate "templates/tag.html" ctx
>>= loadAndApplyTemplate "templates/default.html" ctx
>>= relativizeUrls
match "posts/*" $ do
route $ setExtension "html"
compile $ pandocCompiler
@ -56,8 +36,8 @@ main = hakyllWith config $ do
compile $ do
posts <- recentFirst =<< loadAll "posts/*"
let archiveCtx =
listField "posts" postCtx (return posts) `mappend`
constField "title" "Archives" `mappend`
listField "posts" (postCtxWithTags tags) (return posts) `mappend`
constField "title" "Archives" `mappend`
defaultContext
makeItem ""
@ -68,10 +48,11 @@ main = hakyllWith config $ do
match "index.html" $ do
route idRoute
compile $ do
posts <- recentFirst =<< loadAll "posts/*"
posts <- fmap (take 3) . recentFirst =<< loadAll "posts/*"
let indexCtx =
listField "posts" postCtx (return posts) `mappend`
constField "title" "Home" `mappend`
listField "posts" (postCtxWithTags tags) (return posts) `mappend`
field "tags" (\_ -> renderTagList tags) `mappend`
constField "title" "Welcome" `mappend`
defaultContext
getResourceBody
@ -86,8 +67,8 @@ main = hakyllWith config $ do
let sitemapCtx =
constField "baseUrl" "sanchayanmaity.gitlab.io" `mappend`
constField "title" "Sitemap" `mappend`
listField "posts" postCtx (return posts) `mappend`
postCtx
listField "posts" (postCtxWithTags tags) (return posts) `mappend`
(postCtxWithTags tags)
makeItem ""
>>= loadAndApplyTemplate "templates/sitemap.xml" sitemapCtx
@ -95,6 +76,19 @@ main = hakyllWith config $ do
match "templates/*" $ compile templateBodyCompiler
tagsRules tags $ \tag pattern -> do
let title = "Posts tagged \"" ++ tag ++ "\""
route idRoute
compile $ do
posts <- recentFirst =<< loadAll pattern
let ctx = constField "title" title
`mappend` listField "posts" (postCtxWithTags tags) (return posts)
`mappend` defaultContext
makeItem ""
>>= loadAndApplyTemplate "templates/tag.html" ctx
>>= loadAndApplyTemplate "templates/default.html" ctx
>>= relativizeUrls
--------------------------------------------------------------------------------
config :: Configuration

View File

@ -1,44 +1,53 @@
<!doctype html>
<html lang="en">
<head>
<!-- Google Analytics -->
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','https://www.google-analytics.com/analytics.js','ga');
<head>
<!-- Google Analytics -->
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','https://www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-60143780-1', 'auto');
ga('send', 'pageview');
</script>
<!-- End Google Analytics -->
<meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="google-site-verification" content="UtubfnLx-5OoVi2z1L3b66sSCf2UKOB9_gAs7fYd92U" />
<title>Coherent Musings - $title$</title>
<link rel="stylesheet" type="text/css" href="/style.css" />
</head>
<body>
<div id="header">
<div id="logo">
</div>
<div id="navigation">
<a href="/">Home</a>
<a href="/about.html">About</a>
<a href="/contact.html">Contact</a>
<a href="/archive.html">Archive</a>
</div>
</div>
ga('create', 'UA-60143780-1', 'auto');
ga('send', 'pageview');
</script>
<!-- End Google Analytics -->
<meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="google-site-verification" content="UtubfnLx-5OoVi2z1L3b66sSCf2UKOB9_gAs7fYd92U" />
<title>Coherent Musings - $title$</title>
<link rel="stylesheet" type="text/css" href="/style.css" />
<link rel='stylesheet' href='https://use.fontawesome.com/releases/v5.5.0/css/all.css' />
</head>
<body>
<header>
<div class="logo">
<a href="/">Coherent Musings</a>
</div>
<nav>
<a href="/about.html">About</a>
<a href="/archive.html">Archive</a>
</nav>
</header>
<div id="content">
<h1>$title$</h1>
$body$
</div>
<main role="main">
<h1>$title$</h1>
$body$
</main>
<div id="footer">
Site proudly generated by
<a href="http://jaspervdj.be/hakyll">Hakyll</a>
</div>
</body>
<footer>
<ul>
<li><a class='fab fa-github' href='https://github.com/sanchayanmaity'></a></li>
<li><a class='fab fa-gitlab' href='https://gitlab.com/sanchayanmaity'></a></li>
<li><a class='fab fa-twitter' href='https://twitter.com/sanchayan_maity'></a></li>
<li><a class='fab fa-lastfm-square' href='https://www.last.fm/user/sanchayan_maity'></a></li>
<li><a class='fab fa-linkedin' href='https://in.linkedin.com/in/sanchayan-maity-57235953'></a></li>
</ul>
<div>
Site proudly generated by
<a href="http://jaspervdj.be/hakyll">Hakyll</a>
</div>
</footer>
</body>
</html>

View File

@ -1,13 +1,16 @@
<div class="info">
Posted on $date$
$if(author)$
by $author$
$endif$
</div>
<div class="info">
$if(tags)$
Tags: $tags$
$endif$
</div>
$body$
<article>
<section class="header">
Posted on $date$
<br />
$if(tags)$
Tags: $tags$
$endif$
<br />
$if(author)$
by $author$
$endif$
</section>
<section>
$body$
</section>
</article>

View File

@ -1 +1 @@
$partial("templates/post-list.html")$
$partial("templates/post-list.html")$