Home page and better mobile support for the light theme

LICENSE

@@ -1,6 +1,6 @@
 The MIT License (MIT)
 
-Copyright (c) 2016 Gil Mizrahi
+Copyright (c) 2018 Gil Mizrahi
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal

_pages/about.md → _pages/Home.md

@@ -1,11 +1,8 @@
-route: about
-title: About
+route: home
+title: Home
 
 ---
 
-Hablog
-======
-
 A simple static blog platform with tags. Made with Haskell and Scotty.
 
 Hablog will read posts written in Markdown from the `_posts` folder.
@@ -53,8 +50,13 @@ tags: <tags for the post, separated, by, commas>
 
 ```markdown
 title: <the title of the page>
+route: <the route of the page>
 
 ---
 
 <The rest of the post in Markdown format>
 ```
+
+## Home page
+
+The front page will either be `Home` or, if that isn't available, the blog page will be the front page.

hablog.cabal

@@ -5,14 +5,14 @@ Description:         blog system with tags
 License:             MIT
 license-file:        LICENSE
 Author:              Gil Mizrahi
-Maintainer:          soupiral@gmail.com
+Maintainer:          gilmi@posteo.net
 Stability:           Experimental
 Category:            Web
 Build-type:          Simple
 
 Cabal-version:       >=1.10
 
-tested-with: GHC==8.0.2
+tested-with: GHC==8.2.2
 
 extra-source-files:
   README.md

src/Web/Hablog/Html.hs

@@ -14,23 +14,24 @@ import Web.Hablog.Config
 import qualified Web.Hablog.Post as Post
 import qualified Web.Hablog.Page as Page
 
-template :: Config -> Bool -> T.Text -> H.Html -> H.Html
-template cfg highlight title container =
+template :: Config -> Bool -> T.Text -> String -> H.Html -> H.Html
+template cfg highlight title pageRoute container =
   H.docTypeHtml $ do
     H.head $ do
       H.title (H.toHtml (T.concat [blogTitle cfg, " - ", title]))
+      H.meta ! A.content "width=650" ! A.name "viewport"
       H.link ! A.rel "stylesheet" ! A.type_ "text/css" ! A.href (H.stringValue . bgTheme $ blogTheme cfg)
       if highlight
         then H.link ! A.rel "stylesheet" ! A.type_ "text/css" ! A.href (H.stringValue . codeTheme $ blogTheme cfg)
         else mempty
     H.body $ do
       H.div ! A.class_ "container" $ do
-        logo cfg
+        logo cfg pageRoute
         H.div ! A.class_ "maincontainer" $ container
         footer
       if highlight
         then do
-          H.script ! A.src "static/highlight/highlight.pack.js" $ ""
+          H.script ! A.src "/static/highlight/highlight.pack.js" $ ""
           H.script "hljs.initHighlightingOnLoad();"
         else
           mempty
@@ -40,22 +41,24 @@ mainTemplate = H.article ! A.class_ "content"
 
 notFoundPage :: Config -> H.Html
 notFoundPage cfg =
-  template cfg False "Not Found" $ mainTemplate $ do
+  template cfg False "Not Found" "notfound" $ mainTemplate $ do
     H.h1 "Not found"
     H.p "The page you search for is not available."
 
-logo :: Config -> H.Html
-logo cfg = H.header ! A.class_ "logo" $ H.h1 $ H.a ! A.href "/" $ H.toHtml (blogTitle cfg)
+logo :: Config -> String -> H.Html
+logo cfg pageRoute = H.header ! A.class_ "logo" $ H.h1 $ do
+  H.a ! A.href (H.stringValue $ "/" ++ pageRoute) $ H.toHtml (blogTitle cfg)
+  "/" >> H.toHtml pageRoute
 
 footer :: H.Html
 footer = H.footer ! A.class_ "footer" $ do
-    H.div $ H.a ! A.href "/rss" $ "RSS feed"
+    H.div $ H.a ! A.href "/blog/rss" $ "RSS feed"
     H.span "Powered by "
     H.a ! A.href "https://github.com/soupi/hablog" $ "Hablog"
 
 errorPage :: Config -> T.Text -> String -> H.Html
 errorPage cfg ttl msg =
-  template cfg False ttl $ do
+  template cfg False ttl "" $ do
     H.h2 "Something Went Wrong..."
     H.p $ H.toHtml msg
 
@@ -76,13 +79,13 @@ postsListItem :: Post.Post -> H.Html
 postsListItem post = H.li $ do
   H.span ! A.class_ "postDate" $ H.toHtml $ Post.getDate post
   H.span ! A.class_ "seperator" $ " - "
-  H.a ! A.href (fromString $ T.unpack ("/" `T.append` Post.getPath post)) $ H.toHtml $ Post.title post
+  H.a ! A.href (fromString $ T.unpack ("/blog/" `T.append` Post.getPath post)) $ H.toHtml $ Post.title post
 
 postPage :: Config -> Post.Post -> H.Html
-postPage cfg post = template cfg True (Post.title post) $
+postPage cfg post = template cfg True (Post.title post) "blog" $
     H.article ! A.class_ "post" $ do
       H.div ! A.class_ "postTitle" $ do
-        H.a ! A.href (fromString $ T.unpack ("/" `T.append` Post.getPath post)) $ H.h2 ! A.class_ "postHeader" $ H.toHtml (Post.title post)
+        H.a ! A.href (fromString $ T.unpack ("/blog/" `T.append` Post.getPath post)) $ H.h2 ! A.class_ "postHeader" $ H.toHtml (Post.title post)
         H.span ! A.class_ "postSubTitle" $ do
           H.span ! A.class_ "postAuthor" $ H.toHtml $ authorsList $ Post.authors post
           H.span ! A.class_ "seperator" $ " - "
@@ -92,30 +95,33 @@ postPage cfg post = template cfg True (Post.title post) $
       H.div ! A.class_ "postContent" $ Post.content post
 
 pagePage :: Config -> Page.Page -> H.Html
-pagePage cfg page = template cfg True (Page.getPageName page) $
-    H.article ! A.class_ "post" $ do
-      H.div ! A.class_ "postTitle" $
-        H.a ! A.href (fromString (Page.getPageURL page)) $ H.h2 ! A.class_ "postHeader" $ H.toHtml (Page.getPageName page)
-      H.div ! A.class_ "postContent" $ Page.getPageContent page
+pagePage cfg page = template cfg True (Page.getPageName page) (Page.getPageURL page) $ pageContent page
 
+pageContent :: Page.Page -> H.Html
+pageContent page = do
+  H.article ! A.class_ "post" $ do
+    H.div ! A.class_ "postContent" $ Page.getPageContent page
 
 pagesList :: [Page.Page] -> H.Html
-pagesList = H.ul . mconcat . fmap pagesListItem . sort
+pagesList = mconcat . fmap pagesListItem . sort
 
 pagesListItem :: Page.Page -> H.Html
-pagesListItem page = H.li $ H.a ! A.href (fromString ("/page/" ++ Page.getPageURL page)) $ H.toHtml (Page.getPageName page)
+pagesListItem page =
+  H.li
+    $ H.a ! A.href (fromString ("/" ++ Page.getPageURL page))
+    $ H.toHtml (Page.getPageName page)
 
 tagsList :: [T.Text] -> H.Html
 tagsList = H.ul . mconcat . fmap tagsListItem . sort
 
 tagsListItem :: T.Text -> H.Html
-tagsListItem tag = H.li $ H.a ! A.href (fromString $ T.unpack ("/tags/" `T.append` tag)) $ H.toHtml tag
+tagsListItem tag = H.li $ H.a ! A.href (fromString $ T.unpack ("/blog/tags/" `T.append` tag)) $ H.toHtml tag
 
 authorsList :: [T.Text] -> H.Html
 authorsList = H.ul . mconcat . fmap authorsListItem . sort
 
 authorsListItem :: T.Text -> H.Html
-authorsListItem author = H.li $ H.a ! A.href (fromString $ T.unpack ("/authors/" `T.append` author)) $ H.toHtml author
+authorsListItem author = H.li $ H.a ! A.href (fromString $ T.unpack ("/blog/authors/" `T.append` author)) $ H.toHtml author
 
 
 

src/Web/Hablog/Present.hs

@@ -28,23 +28,44 @@ import qualified Web.Hablog.Post as Post
 import qualified Web.Hablog.Page  as Page
 import Network.URI (URI)
 
-presentMain :: HablogAction ()
-presentMain = do
+
+presentHome :: HablogAction ()
+presentHome = do
+  allPages <- liftIO getAllPages
+  cfg <- getCfg
+  case L.find (\p -> Page.getPageURL p == "home") allPages of
+    Nothing -> presentBlog
+    Just homePage -> do
+      html $ HR.renderHtml $ template cfg False "home" "home" $ do
+        H.nav ! A.class_ "menu" $ do
+          H.ul ! A.class_ "pages" $ do
+            pagesList allPages
+            H.li $ H.a ! A.href "/blog" $ "Blog"
+        H.div ! A.class_ "content" $ do
+          pageContent homePage
+
+
+presentBlog :: HablogAction ()
+presentBlog = do
   allPosts <- liftIO getAllPosts
   allPages <- liftIO getAllPages
   tgs <- liftIO getTagList
   auths <- liftIO getAuthorsList
   cfg <- getCfg
-  html $ HR.renderHtml $ template cfg False "Posts" $ do
-    H.aside ! A.class_ "aside" $ do
-      presentPagesList allPages
-      H.div ! A.class_ "AllAuthorsList" $ do
-        H.h1 "Authors"
-        auths
-      H.div ! A.class_ "AllTagsList" $ do
-        H.h1 "Tags"
-        tgs
-    postsListHtml allPosts
+  html $ HR.renderHtml $ template cfg False "Blog" "blog" $ do
+    H.nav ! A.class_ "menu" $ do
+      H.ul ! A.class_ "pages" $ do
+        pagesList allPages
+        H.li $ H.a ! A.href "/blog" $ "Blog"
+    H.div ! A.class_ "main-content" $ do
+      postsListHtml allPosts
+      H.aside ! A.class_ "aside" $ do
+        H.div ! A.class_ "AllAuthorsList" $ do
+          H.h1 "Authors"
+          auths
+        H.div ! A.class_ "AllTagsList" $ do
+          H.h1 "Tags"
+          tgs
 
 presentRSS :: URI -> HablogAction ()
 presentRSS domain = do
@@ -64,20 +85,25 @@ showPostsWhere :: (Post.Post -> Bool) -> HablogAction ()
 showPostsWhere test = do
   cfg <- getCfg
   allPosts <- liftIO getAllPosts
-  html $ HR.renderHtml $ template cfg False "Posts" $
+  html $ HR.renderHtml $ template cfg False "Posts" "blog" $
     postsListHtml $ filter test allPosts
 
-presentPagesList :: [Page.Page] -> H.Html
-presentPagesList [] = pure ()
-presentPagesList pages =
-  H.div ! A.class_ "AllAuthorsList" $ do
-    H.h1 "Pages"
-    getPageList pages
+presentPage :: T.Text -> HablogAction ()
+presentPage route = do
+  pages <- liftIO getAllPages
+  showOrNotFound (presentPage' pages) . filter (((==) $ T.unpack $ T.toLower route) . Page.getPageURL) $ pages
+
+presentPage' :: [Page.Page] -> Config -> Page.Page -> H.Html
+presentPage' pages cfg page = do
+  template cfg False (Page.getPageName page) (Page.getPageURL page) $ do
+    H.nav ! A.class_ "menu" $ do
+      H.ul ! A.class_ "pages" $ do
+        pagesList pages
+        H.li $ H.a ! A.href "/blog" $ "Blog"
+    H.div ! A.class_ "content" $ do
+      pageContent page
 
 
-presentPage :: T.Text -> HablogAction ()
-presentPage title =
-  showOrNotFound pagePage . filter ((== T.unpack title) . Page.getPageURL) =<< liftIO getAllPages
 
 getAllPages :: IO [Page.Page]
 getAllPages = getAllFromDir Page.toPage "_pages"
@@ -108,13 +134,13 @@ presentTags :: HablogAction ()
 presentTags = do
   cfg <- getCfg
   tags <- liftIO getTagList
-  html . HR.renderHtml $ template cfg False "Posts Tags" tags
+  html . HR.renderHtml $ template cfg False "Posts Tags" "blog" tags
 
 getTagList :: IO H.Html
 getTagList = pure . tagsList . getAllTags =<< getAllPosts
 
 getPageList :: [Page.Page] -> H.Html
-getPageList = pagesList
+getPageList = H.ul . pagesList
 
 
 getAuthorsList :: IO H.Html
@@ -124,19 +150,19 @@ presentTag :: T.Text -> HablogAction ()
 presentTag tag = do
   cfg <- getCfg
   posts <- liftIO getAllPosts
-  html . HR.renderHtml . template cfg False tag $ postsListHtml $ filter (hasTag tag) posts
+  html . HR.renderHtml . template cfg False tag "blog" $ postsListHtml $ filter (hasTag tag) posts
 
 presentAuthors :: HablogAction ()
 presentAuthors = do
   cfg <- getCfg
   authors <- liftIO getAuthorsList
-  html . HR.renderHtml $ template cfg False "Posts Authors" authors
+  html . HR.renderHtml $ template cfg False "Posts Authors" "blog" authors
 
 presentAuthor :: T.Text -> HablogAction ()
 presentAuthor auth = do
   cfg <- getCfg
   posts <- liftIO getAllPosts
-  html . HR.renderHtml . template cfg False auth . postsListHtml $ filter (hasAuthor auth) posts
+  html . HR.renderHtml . template cfg False auth "blog" . postsListHtml $ filter (hasAuthor auth) posts
 
 getPageFromFile :: T.Text -> IO (Maybe Page.Page)
 getPageFromFile title = do

src/Web/Hablog/Run.hs

@@ -47,13 +47,10 @@ runTLS tlsCfg cfg =
 -- | Hablog's router
 router :: Maybe URI -> Hablog ()
 router domain = do
-  get "/" presentMain
-  when (isJust domain)
-    $ get "/rss" (presentRSS $ fromJust domain)
-  get "/post/:yyyy/:mm/:dd/:title" $ do
-    (yyyy, mm, dd) <- getDate
-    title <- param "title"
-    presentPost (mconcat [yyyy,"/",mm,"/",dd, "/", title])
+  get "/" presentHome
+
+  get "/blog" presentBlog
+
   get (regex "/static/(.*)") $ do
     path <- fmap (drop 1 . T.unpack) (param "0")
     if hasdots path then
@@ -62,39 +59,100 @@ router domain = do
         let mime = Mime.defaultMimeLookup (T.pack path)
         setHeader "content-type" $ TL.fromStrict (T.decodeUtf8 mime)
         file path
-  get "/post/:yyyy/:mm/:dd" $ do
+
+  route domain
+
+  get "/:page" $ do
+    page <- param "page"
+    presentPage (TL.toLower page)
+
+  notFound $ do
+    cfg <- getCfg
+    html $ HR.renderHtml $ errorPage cfg (blogTitle cfg `TL.append` " - 404: not found") "404 - Could not find the page you were looking for."
+
+  where
+    hasdots [] = False
+    hasdots ('.':'.':_) = True
+    hasdots (_:rest) = hasdots rest
+
+
+route :: Maybe URI -> Hablog ()
+route domain = do
+  when (isJust domain)
+    $ get "/blog/rss" (presentRSS $ fromJust domain)
+
+  get "/blog/post/:yyyy/:mm/:dd/:title" $ do
+    (yyyy, mm, dd) <- getDate
+    title <- param "title"
+    presentPost (mconcat [yyyy,"/",mm,"/",dd, "/", title])
+
+  get "/blog/post/:yyyy/:mm/:dd" $ do
     (yyyy, mm, dd) <- getDate
     showPostsWhere (eqDate (yyyy, mm, dd))
-  get "/post/:yyyy/:mm" $ do
+
+  get "/blog/post/:yyyy/:mm" $ do
     yyyy <- param "yyyy"
     mm <- param "mm"
     showPostsWhere (eqYM (yyyy, mm))
-  get "/post/:yyyy" $ do
+
+  get "/blog/post/:yyyy" $ do
     yyyy <- param "yyyy"
     showPostsWhere (eqY yyyy)
-  get "/tags"
+
+  get "/blog/tags"
     presentTags
-  get "/tags/:tag" $ do
+
+  get "/blog/tags/:tag" $ do
     tag <- param "tag"
     presentTag tag
-  get "/authors"
+
+  get "/blog/authors"
     presentAuthors
-  get "/authors/:author" $ do
+
+  get "/blog/authors/:author" $ do
     author <- param "author"
     presentAuthor author
-  get "/page/:page" $ do
-    page <- param "page"
-    presentPage page
-  notFound $ do
-    cfg <- getCfg
-    html $ HR.renderHtml $ errorPage cfg (blogTitle cfg `TL.append` " - 404: not found") "404 - Could not find the page you were looking for."
+
+  -- redirects
+
+  when (isJust domain)
+    $ get "/rss" $ do
+      redirect "/blog/rss"
+
+  get "/post/:yyyy/:mm/:dd/:title" $ do
+    (yyyy, mm, dd) <- getDate
+    title <- param "title"
+    redirect $ mconcat ["/blog/post/", yyyy, "/", mm, "/", dd, "/", title]
+
+  get "/post/:yyyy/:mm/:dd" $ do
+    (yyyy, mm, dd) <- getDate
+    redirect $ mconcat ["/blog/post/", yyyy, "/", mm, "/", dd]
+
+  get "/post/:yyyy/:mm" $ do
+    yyyy <- param "yyyy"
+    mm <- param "mm"
+    redirect $ mconcat ["/blog/post/", yyyy, "/", mm]
+
+  get "/post/:yyyy" $ do
+    yyyy <- param "yyyy"
+    redirect $ mconcat ["/blog/post/", yyyy]
+
+  get "/tags" $ do
+    redirect "/blog/tags"
+
+  get "/tags/:tag" $ do
+    tag <- param "tag"
+    redirect $ mconcat ["/blog/tags/", tag]
+
+  get "/authors" $ do
+    redirect "/blog/authors"
+
+  get "/authors/:author" $ do
+    author <- param "author"
+    redirect $ mconcat ["/blog/authors/", author]
 
   where
     getDate =  (,,)
            <$> param "yyyy"
            <*> param "mm"
            <*> param "dd"
-
-    hasdots [] = False
-    hasdots ('.':'.':_) = True
-    hasdots (_:rest) = hasdots rest

stack.yaml

@@ -1,12 +1,12 @@
-resolver: lts-9.0
+resolver: lts-10.4
 
 packages:
 - '.'
 
 extra-deps:
-- scotty-tls-0.4.1
 - rss-3000.2.0.6
-- HaXml-1.25.3
+- scotty-tls-0.4.1
+- time-1.6.0.1
 
 flags: {}
 

static/css/dark.css

@@ -302,3 +302,30 @@ code {
   padding-left: 2px;
   padding-right: 2px;
 }
+
+nav {
+    margin: auto;
+    width: 300px;
+}
+
+nav li:after {
+    margin-left: 1rem;
+    margin-right: 1rem;
+    content: "|";
+    color: #666;
+}
+
+nav li:last-child:after {
+    margin-left: 0rem;
+    content: "";
+}
+
+nav li {
+    display: inline-block;
+    font-size: 1.3rem;
+}
+
+.pageHeader {
+    margin-left: 70px;
+    margin-bottom: 30px;
+}

static/css/light.css

@@ -4,16 +4,17 @@
 
 html, body { height:98%; }
 body {
-	line-height: 1.4;
-	background:	repeat-x fixed 0% 0% #eee;
-	overflow-y:scroll;
-	/* font-family: 'Open Sans', Helvetica, tahoma, arial, sans-serif; */
-	font-family: 'Roboto', helvetica, arial, sans-serif;
+  line-height: 1.4;
+  background:  repeat-x fixed 0% 0% #eee;
+  overflow-y:scroll;
+  /* font-family: 'Open Sans', Helvetica, tahoma, arial, sans-serif; */
+  font-family: 'Roboto', helvetica, arial, sans-serif;
   font-weight: 400;
+  font-size: 1.2rem;
 }
 .logo a, .logo h1 {
   margin-left: 20px;
-  font-size: 36px;
+  font-size: 2rem;
   margin-bottom: 0px;
   font-weight: 300;
 }
@@ -26,7 +27,7 @@ h2 {
 h3, h4, h5, input, .nav a
 {
 
-	font-family: 'Roboto', helvetica, arial, sans-serif;
+  font-family: 'Roboto', helvetica, arial, sans-serif;
   font-weight: 300;
 }
 a {
@@ -35,89 +36,77 @@ a {
 input
 {
   color: black;
-  margin-bottom: 12px;
-  font-size: 14px;
+  margin-bottom: 0.8rem;
+  font-size: 1rem;
 }
 
 .container {
-  max-width: 980px;
+  max-width: 1200px;
   min-width: 500px;
   margin: auto;
   margin-top: 0px;
   margin-bottom: 0px;
-  clear: both;
   height: 97%;
 }
 
 .maincontainer
 {
-  max-width: 980px;
+  max-width: 1200px;
   min-width: 500px;
-	background: #fff;
+  background: #fff;
   border: 1px solid #bbb;
-	margin: 15px auto;
-	padding: 20px;
-	overflow:hidden;
-	margin-bottom:10px;
+  margin: 1rem auto;
+  padding: 1.2rem;
+  margin-bottom:0.7rem;
   color: #444;
-  min-height: 450px;
+  min-height: 400px;
 }
 
 .header {
-	color: #555;
-	margin: auto;
-	margin-bottom: 10px;
-	padding: 10px;
+  color: #555;
+  margin: auto;
+  margin-bottom: 0.7rem;
+  padding: 0.7rem;
 }
 
 .logo {
   text-decoration: none;
-  margin-top: 10px;
-  margin-bottom: 10px;
-}
-
-.nav { width: 430px; margin: auto; text-align: center; }
-
-.nav li
-{
-  font-size: 14px;
-  display: inline-block;
-  margin: 5px;
-  color: #555;
+  margin-top: 0.7rem;
+  margin-bottom: 0.7rem;
 }
 
 ul { list-style: none; }
 
 .postContent ul {
   list-style-type: disc;
-  margin-left: 20px;
+  margin-left: 1.5rem;
 }
 
 .nav a
 {
-  font-size:20px;
+  font-size:1.5rem;
 }
 
 a:visited {
-	color: #0b85ef;
+  color: #0b85ef;
 }
 
 a {
-	color: #0b85ef;
-	text-decoration: none;
-	font-weight: normal;
+  color: #0b85ef;
+  text-decoration: none;
+  font-weight: normal;
 
-	-webkit-transition: all 0.3s ease;
-	-moz-transition: all 0.3s ease;
-	-o-transition: all 0.3s ease;
-	-ms-transition: all 0.3s ease;
-	transition: all 0.3s ease;
+  -webkit-transition: all 0.3s ease;
+  -moz-transition: all 0.3s ease;
+  -o-transition: all 0.3s ease;
+  -ms-transition: all 0.3s ease;
+  transition: all 0.3s ease;
 }
 .current a {
     color: black;
 }
 a:hover {
-	color: black;
+  color: black;
 }
 
 .rounded-corners, .sidebar, .header, .container, .maincontainer, .content article {
@@ -127,137 +116,74 @@ a:hover {
 }
 
 .content {
-	padding-right: 30px;
-	padding-left: 10px;
-	padding-top: 20px;
-	overflow: hidden;
+  padding-right: 0.7rem;
+  padding-left: 0.7rem;
+  padding-top: 1.5rem;
 }
 
 .content p {
-	text-align: justify;
-	margin-top: 0px;
-	margin-left: 10px;
+  text-align: justify;
+  margin-top: 0px;
+  margin-left: 0.7rem;
 }
 
 label {
   margin-bottom: 2px;
 }
 
-.formdiv label
-{
-	display: block;
-	width: 200px;
-  margin-bottom: 5px;
-  font-size: 18px;
-	/* text-align: right; */
-}
-.formdiv input[type='text']
-{
-  width: 90%;
-  margin-right: 5px;
-}
-.formdiv
-{
-  margin-bottom: 30px;
-}
-.addformdiv label
-{
-  display:block;
-  width: 200px;
-  margin-bottom: 5px;
-  font-size: 18px;
-}
-.addformdiv input[type='text'], input[type="url"]
-{
-  width: 50%;
-}
-.addformdiv
-{
-  margin-bottom: 30px;
-}
-
-
-
-hr {
-  border-color: #FFF;
-}
 
 table {
   border: 1px solid #666;
   text-align: center;
 }
 
-#animelist li {
-  display: inline-block;
-  margin-right: 15px;
-}
-#animelist img {
-  width: 200px;
-  height: 200px;
-}
-
-#bgimg
-{
-  float: right;
-  z-index: -1;
-}
-
 .post { margin: 20px; }
 .Authornm { color: #79BAF2; }
 .postAuthor
 {
 }
 .postTitle ul, .postTitle li { padding: 0; display: inline; }
-.postAuthor img
-{
-  width: 50px;
-  display: block;
-}
 .postSubTitle
 {
   display: block;
-  margin-bottom: 20px;
+  margin-bottom: 1.5rem;
 }
 .postDate
 {
-  font-size: 14px;
+  font-size: 1.2rem;
   color: #555;
 }
 .postTags li
 {
   list-style-type: none;
   display: inline;
-  font-size: 14px;
-  margin-right: 8px;
-}
-.postContent
-{
-  margin-left: 70px;
-  margin-right: 70px;
+  font-size: 1.2rem;
+  margin-right: 0.6rem;
 }
 .post
 {
-  padding-bottom: 20px;
-  margin-bottom: 30px;
-  padding-bottom: 60px;
+  padding-bottom: 1.5rem;
+  margin-bottom: 2rem;
+  padding-bottom: 4rem;
 }
 .post:nth-last-child(2) { border-bottom: 0px; }
 .seperator { font-size: 16px; color: #888; }
-.aside { float:right; margin-right: 40px; }
-.PostsList { margin-left: 20px; }
+.main-content { display: flex; flex-wrap: wrap; }
+.aside { margin-right: 3rem; margin-left: 1rem; }
+.PostsList { min-width: 480px; margin-right: 1rem; margin-left: 1rem; flex: auto; }
 ul { padding-left: 0; }
 .postHeader
 {
   color: #333;
   font-weight: 700;
-  font-size: 28px;
-}
-.postContent h1 { font-size: 26px; }
-.postContent h2 { font-size: 24px; }
-.postContent h3 { font-size: 22px; }
-.postContent h4 { font-size: 20px; }
-.postContent h5 { font-size: 18px; }
-.postContent h6 { font-size: 16px; }
+  font-size: 2rem;
+}
+.postContent h1 { font-size: 2.1rem; }
+.postContent h2 { font-size: 1.9rem; }
+.postContent h3 { font-size: 1.7rem; }
+.postContent h4 { font-size: 1.6rem; }
+.postContent h5 { font-size: 1.5rem; }
+.postContent h6 { font-size: 1.4rem; }
 
 .postContent h1, .postContent h2, .postContent h3, .postContent h4, .postContent h5, .postContent h6
 {
@@ -268,10 +194,10 @@ ul { padding-left: 0; }
 {
   font-family: 'Roboto', helvetica, arial, sans-serif;
   font-weight: initial;
-  font-size: 17px;
+  font-size: 1.3rem;
 }
 .postContent code {
-  font-size: 16px;
+  font-size: 1.1rem;
 }
 
 .postContent img
@@ -282,11 +208,72 @@ ul { padding-left: 0; }
 
 .footer {
   color: #666;
-  font-size: 14px;
-  padding: 20px;
+  font-size: 1.2rem;
+  padding: 1.5rem;
   text-align: center;
 }
 code {
   background-color: #f8f8ff;
   padding: 2px;
 }
+
+nav {
+    text-align: center;
+}
+
+nav li:first-child:after {
+    content: "<$>";
+}
+
+nav li:after {
+    margin-left: 0.8rem;
+    margin-right: 0.8rem;
+    content: "<*>";
+    color: #abc;
+}
+
+nav li:last-child:after {
+    margin-left: 0rem;
+    content: "";
+}
+
+nav li {
+    display: inline-block;
+    font-size: 1.3rem;
+}
+
+.pageHeader {
+    margin-left: 70px;
+    margin-bottom: 30px;
+}
+
+#contact-info p {
+    text-align: center !important;
+}
+
+
+
+@media screen and (min-width: 901px) {
+    body {
+        max-width: 98%;
+        min-width: 400px;
+    }
+    .container {
+        max-width: 1200px;
+        min-width: 500px;
+        margin: auto;
+    }
+    .maincontainer {
+        max-width: 1200px;
+        min-width: 500px;
+    }
+    .postContent {
+        margin: 0.5rem;
+    }
+    .postContent
+    {
+      margin-left: 4rem;
+      margin-right: 4rem;
+    }
+    .PostsList { margin-right: 1rem; margin-left: 3rem; }
+}