Live demo

.eleventy.js

@@ -13,6 +13,6 @@ module.exports = function (eleventyConfig) {
 			input: "src",
 			output: "public"
 		},
-		pathPrefix: "/"
+		pathPrefix: "/eleventy-bragdoc/"
 	}
 }

README.md

@@ -6,6 +6,8 @@ Built using:
 - [11ty](https://www.11ty.dev/)
 - Vanilla JS and CSS
 
+Built on top of the timeline by [venkatesh](https://codepen.io/venkat06) - [codepen here](https://codepen.io/venkat06/pen/yLBeVqZ?editors=0100)
+
 ## Dependencies
 Install dependencies by running `npm install`
 

package.json

@@ -6,7 +6,9 @@
   "dependencies": {
     "@11ty/eleventy": "^0.12.1"
   },
-  "devDependencies": {},
+  "devDependencies": {
+    "gh-pages": "^3.2.3"
+  },
   "scripts": {
     "start": "eleventy --serve",
     "build": "eleventy",

public/css/styles.css

@@ -14,6 +14,8 @@
 	--quote-block-edge: rgba(255, 165, 0, 0.5);
 	--quote-block-text: #676a6c;
 	--table-border: #676a6c;
+	--footer: #BDBDBD;
+	--tag: #BDBDBD;
 }
 
 html[data-theme="dark"] {
@@ -32,6 +34,8 @@ html[data-theme="dark"] {
 	--quote-block-edge: rgb(255, 165, 0);
 	--quote-block-text: rgba(255, 165, 0,0.5);
 	--table-border: #999999;
+	--footer: rgba(255,255,255,0.3);
+	--tag: rgba(255,255,255,0.3);
 }
 
 body {
@@ -40,6 +44,17 @@ body {
 	color: var(--text);
 	overflow-x: hidden;
 	background-color: var(--background);
+	margin: 0;
+	height: 100vh;
+}
+
+footer {
+	margin: 0 auto;
+	max-width: 500px;
+	padding-bottom: 1em;
+	text-align: center;
+	color: var(--footer);
+	padding-top: 2em;
 }
 
 /* Bragdoc Logo */
@@ -54,7 +69,11 @@ body {
 /* Bragdoc Body */
 
 .bragdoc__section {
-	padding-bottom: 5em;
+	height: 100%;
+	display: grid;
+	grid-template-rows: auto 1fr auto;
+	margin: 0;
+	padding: 0;
 }
 
 /* Bragdoc User Profile */
@@ -81,8 +100,12 @@ body {
 
 .bragdoc__container {
 	max-width: 800px;
-	margin: 0 auto;
-	padding-bottom: 10rem;
+
+	/* Centre the Bragdoc*/
+	/*margin: 0 auto; */
+	margin: 0 0 0 30em;
+
+	padding-bottom: 15em;
 }
 
 .bragdoc__profile-role {
@@ -163,7 +186,19 @@ body {
 
 /* Make it responsive */
 
-@media only screen and (max-width: 880px) {
+@media only screen and (max-width: 1400px) {
+
+	.bragdoc__container {
+		/* Centre the Bragdoc*/
+		margin: 0 auto;
+	}
+
+	.bragdoc__entry-block h2 {
+		font-size: 1.2em;
+	}
+}
+
+@media only screen and (max-width: 800px) {
 
 	.bragdoc__container {
 		padding-left: 2em;
@@ -255,3 +290,15 @@ th {
 	border-left: 1px solid var(--table-border);
 	border-right: 1px solid var(--table-border);
 }
+
+.bragdoc__taglist {
+	margin-left: 1em;
+	padding: 1em;
+}
+
+.bragdoc__taglist > * {
+	border: 1px solid var(--tag);
+	padding: 0.25em 0.5em 0.25em 0.5em;
+	border-radius: 0.5em;
+	margin-right: 1em;
+}

public/images/favicon_io/about.txt

@@ -0,0 +1,6 @@
+This favicon was generated using the following font:
+
+- Font Title: Open Sans
+- Font Author: Digitized data copyright  2010-2011, Google Corporation.
+- Font Source: http://fonts.gstatic.com/s/opensans/v23/mem5YaGs126MiZpBA-UN8rs-VeJoCqeDjg.ttf
+- Font License: Apache License, version 2.0 (http://www.apache.org/licenses/LICENSE-2.0.html))

public/images/favicon_io/site.webmanifest

@@ -0,0 +1 @@
+{"name":"","short_name":"","icons":[{"src":"/android-chrome-192x192.png","sizes":"192x192","type":"image/png"},{"src":"/android-chrome-512x512.png","sizes":"512x512","type":"image/png"}],"theme_color":"#ffffff","background_color":"#ffffff","display":"standalone"}