Responsive and modular

samarsault · Mar 26, 2019 · 0118b74 · 0118b74
1 parent 6581ad7
commit 0118b74
Show file tree

Hide file tree

Showing 8 changed files with 64 additions and 19 deletions.
diff --git a/_config.yml b/_config.yml
@@ -1,8 +1,6 @@
 title: Your awesome title
 author: GitHub User
-name: Adam Denisov
 email: your-email@domain.com
-tagline: Developer. Designer
 description: > # this means to ignore newlines until "show_exerpts:"
   Write an awesome description for your new site here. You can edit this
   line in _config.yml. It will appear in your document head meta (for
@@ -13,13 +11,16 @@ show_excerpts: true # set to true to show excerpts on the homepage
 # refer to http://shopify.github.io/liquid/filters/date/ if you want to customize this
 sass:
   sass_dir: _sass
-theme:
+plainwhite:
+  name: Adam Denisov
+  tagline: Developer. Designer
   date_format: "%b %-d, %Y"
 
   # generate social links in footer
   social_links:
-    twitter: jekyllrb
-    github:  jekyll
+    twitter: thelehhman
+    github:  thelehhman
+    linkedIn: in/thelehhman
     rss: rss
     # dribbble: jekyll
     # facebook: jekyll
@@ -47,7 +48,7 @@ theme:
 # - about.md
 
 # Build settings
-# theme: plainwhite
+theme: plainwhite
 
 # plugins:
 #  - jekyll-feed

diff --git a/_layouts/default.html b/_layouts/default.html
@@ -3,21 +3,22 @@
 <head>
 	<meta charset="UTF-8">
 	<meta name="viewport" content="width=device-width, initial-scale=1.0">
+	<meta name="description" content="{{ site.description }}">
 	<meta http-equiv="X-UA-Compatible" content="ie=edge">
 	<link href="https://fonts.googleapis.com/css?family=Merriweather:300|Raleway:400,700" rel="stylesheet">
 	<link rel="stylesheet" href="{{ "/assets/css/style.css" | relative_url }}">
-	<title>Plain White</title>
+	<title>{{ page.title | default: site.title }}</title>
 </head>
 <body>
 	<main class="container">
 		<section class="about">
-			<img src="{{ "/assets/portfolio.png" | relative_url }}" alt="portfolio">
-			<h2>{{ site.name }}</h2>
-			<p class="tagline">{{ site.tagline }}</p>
+			<img src="{{ "/assets/portfolio.png" | relative_url }}" alt="{{ site.plainwhite.name }}">
+			<h2>{{ site.plainwhite.name }}</h2>
+			<p class="tagline">{{ site.plainwhite.tagline }}</p>
 			<ul class="social">
-				<a href="#"><li><i class="icon-github-circled"></i></li></a>
-				<a href="#"><li><i class="icon-linkedin-squared"></i></li></a>
-				<a href="#"><li><i class="icon-twitter-squared"></i></li></a>
+				<a href="https://github.com/{{ site.plainwhite.social_links.github }}"><li><i class="icon-github-circled"></i></li></a>
+				<a href="https://linkedin.com/{{ site.plainwhite.social_links.linkedIn }}"><li><i class="icon-linkedin-squared"></i></li></a>
+				<a href="https://twitter.com/{{ site.plainwhite.social_links.twitter }}"><li><i class="icon-twitter-squared"></i></li></a>
 			</ul>
 			<p>&copy; 2019</p>
 		</section>

diff --git a/_layouts/post.html b/_layouts/post.html
@@ -2,7 +2,7 @@
 layout: default
 ---
 {%- assign date_format = site.minima.date_format | default: "%b %-d, %Y" -%}
-<div class="post-container" style="padding-left: 40px">
+<div class="post-container">
 <a class="post-link" href="{{ page.url | relative_url }}">
 	<h2 class="post-title">{{ page.title | escape }}</h2>
 </a>

diff --git a/_posts/2019-03-23-welcome-to-jekyll.markdown b/_posts/2019-03-23-welcome-to-jekyll.markdown
@@ -9,14 +9,16 @@ Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
 ```javascript
 const Razorpay = require('razorpay');
 
-instance = Razorpay({
+let rzp = Razorpay({
 	key_id: 'KEY_ID',
 	secret: 'name'
 });
 
-instance.then( () => {
-	console.log("Done!");
-})
+// capture request
+rzp.capture(payment_id, cost)
+	.then(function (data) {
+		return 2;
+	})
 ```
 
 Check out the [Jekyll docs][jekyll-docs] for more info on how to get the most out of Jekyll. File all bugs/feature requests at [Jekyll’s GitHub repo][jekyll-gh]. If you have questions, you can ask them on [Jekyll Talk][jekyll-talk].

diff --git a/_sass/.DS_Store b/_sass/.DS_Store
diff --git a/_sass/_syntax.scss b/_sass/_syntax.scss
@@ -10,4 +10,5 @@ div.highlight {
 pre.highlight, code {
 	font-family: 'Consolas', Menlo, monospace;
 	line-height: 1.4em;
+	tab-size: 4;
 }
diff --git a/_sass/ext/.DS_Store b/_sass/ext/.DS_Store
diff --git a/_sass/plain.scss b/_sass/plain.scss
@@ -3,6 +3,9 @@
 @import 'syntax';
 
 $linkColor: #0A59B0;
+$mobileW: 768px;
+$smallMobileW: 480px;
+$bigScreenW: 1600px;
 
 *,*:before,*:after {
 	box-sizing: border-box;
@@ -31,12 +34,34 @@ a {
 
 main {
 	margin: 0 90px;
+	@media screen and (min-width: $bigScreenW) {
+		margin: 0 auto;
+		max-width: 1440px;	
+	}
+	@media screen and (max-width: 1280px) {
+		margin: 0 75px;	
+	}
+	@media screen and (max-width: 1024px){
+		margin: 0 35px;	
+	}
+
+	@media screen and (max-width: $mobileW) {
+		margin: 0 10px;
+		flex-direction: column;	
+	}
+	@media screen and (max-width: $smallMobileW) {
+		margin: 0;	
+	}
 	display: flex;
 	height: 100%;
 	.about {
 		display: flex;
 		height: 75vh;
-		flex-basis: 40%;
+		@media screen and (max-width: $mobileW) {
+			height: auto;	
+			padding: 10vh 0;
+		}
+		min-width: 220px;
 		justify-content: center;
 		flex-direction: column;
 		align-items: center;
@@ -82,6 +107,9 @@ main {
 		background-color: #E3E3E3;
 		padding: 5px 20px;
 		border-radius: 2px;
+		@media screen and (max-width: $mobileW){
+			margin-top: 5px;
+		}
 		margin-right: 10px;
 	}
 }
@@ -99,11 +127,23 @@ main {
 }
 
 .post-title {
+	line-height: 1.2em;
 	font-size: 28px;
 }
 .posts, .post-container {
 	list-style-type: none;
 	margin: 45px 30px;
+	@media screen and (max-width: $smallMobileW){
+		margin-left: 20px;
+		margin-right: 20px;
+	}
+	@media screen and (max-width: $mobileW){
+		padding: 0 !important;	
+		margin-top: 0;
+	}
+}
+.post-container {
+	padding-left: 40px;
 }
 .post {
 	font-family: 'Merriweather', sans-serif;