Index / Home page: Built home page design and content

ProProgrammer · ProProgrammer · commit e358a0008e7a · 2020-04-12T01:51:43.000+05:30
Home page design is built to be a clean interface with minimalist look
Social media icons used from font-awesome library included in head.html
diff --git a/_data/social.yml b/_data/social.yml
@@ -0,0 +1,30 @@
+email:
+  id: 'deepsukhwani@gmail.com'
+  href: 'mailto:'
+  title: 'Email'
+  fa-icon: 'fa-envelope-square'
+
+github:
+  id: 'proprogrammer'
+  href: 'https://github.com/'
+  title: 'GitHub'
+  fa-icon: 'fa-github-square'
+
+stackoverflow:
+  id: '2661238'
+  href: 'https://stackoverflow.com/users/'
+  title: 'StackOverflow'
+  fa-icon: 'fa-stack-overflow'
+
+linkedin:
+  id: 'deepsukhwani'
+  href: 'https://linkedin.com/in/'
+  title: 'LinkedIn'
+  fa-icon: 'fa-linkedin'
+
+twitter:
+  id: 'deepsukhwani'
+  href: 'https://www.twitter.com/'
+  title: 'Twitter'
+  fa-icon: 'fa-twitter-square'
+
diff --git a/_includes/head.html b/_includes/head.html
@@ -14,6 +14,7 @@
   <link rel="apple-touch-icon-precomposed" sizes="144x144" href="{{ '/assets/apple-touch-icon-precomposed.png' | relative_url }}">
   <link rel="shortcut icon" href="{{ '/assets/favicon.ico' | relative_url }}">
   <link rel="alternate" type="application/atom+xml" title="{{ site.title }}" href="{{ 'atom.xml' | relative_url }}">
+  <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
 
   {% seo title=false %}
 </head>
diff --git a/_layouts/default.html b/_layouts/default.html
@@ -5,23 +5,24 @@
 
   <body>
 
-    <div class="container content">
-      <header class="masthead">
-        <h3 class="masthead-title">
-          <a href="{{ site.baseurl }}/" title="Home">{{ site.title }}</a>
-          <small>{{ site.tagline }}</small>
-        </h3>
-      </header>
+    <div id="spotlight">
+      {% if page.title != "Home" %}
+        <header class="masthead">
+          <h3 class="masthead-title">
+            <a href="{{ site.baseurl }}/" title="Home">{{ site.title }}</a>
+            <small>{{ site.tagline }}</small>
+          </h3>
+        </header>
+      {% endif %}
 
-      <main>
-        {{ content }}
-      </main>
+    {{ content }}
 
-      <footer class="footer">
-        <small>
-          &copy; <time datetime="{{ site.time | date_to_xmlschema }}">{{ site.time | date: '%Y' }}</time>. All rights reserved.
-        </small>
-      </footer>
+      <div id="home-footer">
+        <p>
+          &copy; <time datetime="{{ site.time | date_to_xmlschema }}">{{ site.time | date: '%Y' }}</time>.
+          All rights reserved. <a href="{{ site.baseurl }}">{{ site.author.name }}</a>
+        </p>
+      </div>
     </div>
 
     {% if site.ga_analytics %}
diff --git a/_sass/_base.scss b/_sass/_base.scss
@@ -11,6 +11,7 @@ body {
   font-family: var(--body-font);
   font-size: var(--body-font-size);
   line-height: var(--body-line-height);
+  letter-spacing: .04em;
   color: var(--body-color);
   background-color: var(--body-bg);
   -webkit-text-size-adjust: 100%;
@@ -68,3 +69,36 @@ mark {
   background-color: var(--yellow-100);
   border-radius: .125rem;
 }
+
+#home-center {
+  display: flex;
+  flex-grow: 1;
+  flex-direction: column;
+  justify-content: center;
+}
+
+#home-title {
+  margin: 0;
+  text-align: center;
+}
+
+#home-social {
+  font-size: 1.4em;
+  text-align: center;
+  opacity: .8;
+
+  a {
+    margin: 0 .2em;
+  }
+}
+
+#home-footer {
+  text-align: center;
+  font-size: .6em;
+  line-height: normal;
+  @include dimmed;
+
+  p {
+    margin-top: 0;
+  }
+}
diff --git a/_sass/_layout.scss b/_sass/_layout.scss
@@ -2,15 +2,13 @@
 //
 // Styles for managing the structural hierarchy of the site.
 
-.container {
-  max-width: 45rem;
-  padding-left: var(--spacer-2);
-  padding-right: var(--spacer-2);
-  margin-left:  auto;
-  margin-right: auto;
-}
-
-footer {
-  margin-top: var(--spacer-3);
-  margin-bottom: var(--spacer-3);
+#spotlight {
+  display: flex;
+  min-height: 100vh;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  max-width: 93%;
+  margin: auto;
+  font-size: 1.5rem;
 }
diff --git a/_sass/_type.scss b/_sass/_type.scss
@@ -5,12 +5,12 @@
 h1, h2, h3, h4, h5, h6 {
   margin-bottom: .5rem;
   font-weight: 600;
-  line-height: 1.25;
+  line-height: inherit;
   color: var(--heading-color);
 }
 
 h1 {
-  font-size: 2rem;
+  font-size: 2em;
 }
 
 h2 {
@@ -28,11 +28,6 @@ h4, h5, h6 {
   font-size: 1rem;
 }
 
-p {
-  margin-top: 0;
-  margin-bottom: 1rem;
-}
-
 ul, ol, dl {
   margin-top: 0;
   margin-bottom: 1rem;
diff --git a/_sass/_variables.scss b/_sass/_variables.scss
@@ -64,3 +64,9 @@
     --code-bg: var(--gray-900);
   }
 }
+
+// Mixins
+//
+@mixin dimmed {
+  opacity: .6;
+}
diff --git a/index.html b/index.html
@@ -1,3 +1,21 @@
-<div id="spotlight" class="animated fadeIn">
-    Deep Sukhwani
+---
+layout: default
+title: Home
+---
+
+<div id="home-center">
+  <h1 id="home-title">{{ site.author.name }}</h1>
+  <div id="home-social">
+    {% if site.data.social %}
+      {% assign sm = site.data.social %}
+      {% for entry in sm %}
+        {% assign key = entry | first %}
+        {% if sm[key].id %}
+        <a href="{{ sm[key].href }}{{ sm[key].id }}" title="{{ sm[key].title }}" target="_blank"><i
+              class="fa {{ sm[key].fa-icon }}"></i></a>
+        {% endif %}
+      {% endfor %}
+    {% endif %}
+
+</div>
 </div>

Original file line number	Diff line number	Diff line change
`@@ -64,3 +64,9 @@`
`64`	`64`	`--code-bg: var(--gray-900);`
`65`	`65`	`}`
`66`	`66`	`}`
	`67`	`+`
	`68`	`+// Mixins`
	`69`	`+//`
	`70`	`+@mixin dimmed {`
	`71`	`+ opacity: .6;`
	`72`	`+}`