Merge pull request #63 from nelsonmestevao/master

Upgrade to Sass
sharu725 · May 10, 2018 · 3869e23 · 3869e23
2 parents 5bb8c1c + 74827e8
commit 3869e23
Show file tree

Hide file tree

Showing 33 changed files with 320 additions and 2,691 deletions.
diff --git a/README.md b/README.md
@@ -14,11 +14,11 @@ The theme is responsive:
 
 There are 6 color schemes available:
 
-| Default | Style 2 | Style 3 |
+| Blue | Turquoise | Green |
 |---------|---------|---------|
 | <img src="http://themes.3rdwavemedia.com/wp-content/uploads/2016/01/free-resume-cv-bootstrap-template-for-developer-color-1.jpg" width="300"/> | <img src="http://themes.3rdwavemedia.com/wp-content/uploads/2016/01/free-resume-cv-bootstrap-template-for-developer-color-2.jpg" width="300"/> | <img src="http://themes.3rdwavemedia.com/wp-content/uploads/2016/01/free-resume-cv-bootstrap-template-for-developer-color-3.jpg" width="300"/> |
 
-| Style 4 | Style 5 | Style 6 |
+| Berry | Orange | Ceramic |
 |---------|---------|---------|
 | <img src="http://themes.3rdwavemedia.com/wp-content/uploads/2016/01/free-resume-cv-bootstrap-template-for-developer-color-4.jpg" width="300"/> | <img src="http://themes.3rdwavemedia.com/wp-content/uploads/2016/01/free-resume-cv-bootstrap-template-for-developer-color-5.jpg" width="300"/> | <img src="http://themes.3rdwavemedia.com/wp-content/uploads/2016/01/free-resume-cv-bootstrap-template-for-developer-color-6.jpg" width="300"/> |
 

diff --git a/_config.yml b/_config.yml
@@ -5,15 +5,10 @@ baseurl: '/online-cv' #change it according to your repository name
 about: True # set to False or comment line if you want to remove the "How to use?" in the sidebar
 
 
-# Enable one of these styles by removing #. Style will be applied only after restarting the build or serve.
-#style: styles-2
-#style: styles-3
-#style: styles-4
-#style: styles-5
-#style: styles-6
+# Style will be applied only after restarting the build or serve. Just choose one of the options.
+theme_skin: # blue turquoise green berry orange ceramic
 
-
-#Profile information
+# Profile information
 name: Alan Doe
 tagline: Full Stack Developer
 pic: profile.png  #place a 100x100 picture inside /assets/images/ folder and provide the name of the file below
@@ -22,7 +17,7 @@ You can <a href="#" target="_blank">download this free resume/CV template here</
 commodo ligula eget dolor aenean massa. Cum sociis natoque penatibus et magnis dis parturient
 montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu.'
 
-#sidebar links
+# Sidebar links
 email: hello@webjeda.com
 phone: 012 345 6789
 website: blog.webjeda.com #do not add http://
@@ -37,6 +32,11 @@ twitter: '@webjeda'
 # Tracker
 analytics: UA-83979019-1
 
+# Sass/SCSS
+sass:
+  sass_dir: _sass
+  style: compressed # http://sass-lang.com/documentation/file.SASS_REFERENCE.html#output_style
+
 # Build settings
 encoding: "utf-8"
 compress_html: # - http://jch.penibelst.de/

diff --git a/_includes/head.html b/_includes/head.html
@@ -5,18 +5,18 @@
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <meta name="description" content="A beautiful Jekyll theme for creating resume">
-    <link rel="shortcut icon" href="favicon.ico">  
+    <link rel="shortcut icon" href="favicon.ico">
     <link href='https://fonts.googleapis.com/css?family=Roboto:400,500,400italic,300italic,300,500italic,700,700italic,900,900italic' rel='stylesheet' type='text/css'>
     <!-- Global CSS -->
-    <link rel="stylesheet" href="{{site.baseurl}}/assets/plugins/bootstrap/css/bootstrap.min.css">   
+    <link rel="stylesheet" href="{{site.baseurl}}/assets/plugins/bootstrap/css/bootstrap.min.css">
     <!-- Plugins CSS -->
     <link rel="stylesheet" href="{{site.baseurl}}/assets/plugins/font-awesome/css/font-awesome.css">
-    
-    <!-- Theme CSS -->  
-    <link id="theme-style" rel="stylesheet" href="{{site.baseurl}}/assets/css/{% if site.style %}{{ site.style}}.css{% else %}styles.css{% endif %}">
+
+    <!-- Theme CSS -->
+    <link id="theme-style" rel="stylesheet" href="{{site.baseurl}}/assets/css/main.css">
     <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
     <!--[if lt IE 9]>
       <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
       <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
     <![endif]-->
-</head> 
+</head>
diff --git a/assets/less/default/base.less → _sass/_base.scss b/assets/less/default/base.less → _sass/_base.scss
@@ -1,8 +1,8 @@
 /* ======= Base ======= */
 body {
-    font-family: 'Roboto', sans-serif;  
-    color: @text-color-secondary;
-    background: @smoky-white;
+    font-family: 'Roboto', sans-serif;
+    color: $text-color-secondary;
+    background: $smoky-white;
     font-size: 14px;
     padding: 30px;
     -webkit-font-smoothing: antialiased;
@@ -14,11 +14,10 @@ h1, h2, h3, h4, h5, h6  {
 }
 
 a {
-    color: darken(@theme-color, 15%);
-    .transition (all 0.4s ease-in-out);
+    color: darken($theme-color, 15%);
     &:hover {
         text-decoration: underline;
-        color: darken(@theme-color, 30%);
+        color: darken($theme-color, 30%);
     }
     &:focus {
         text-decoration: none;
@@ -30,15 +29,15 @@ p {
 }
 
 .wrapper {
-    background:@theme-color;
+    background:$theme-color;
     max-width: 1000px;
     margin: 0 auto;
     position: relative;
-    .box-shadow(0px 2px 4px rgba(0,0,0,0.1));
+    @include box-shadow(0px 2px 4px rgba(0,0,0,0.1));
 }
 
 .sidebar-wrapper {
-    background: @theme-color;
+    background: $theme-color;
     position: absolute;
     right: 0;
     width: 280px;
@@ -50,7 +49,7 @@ p {
     }
     .profile-container {
         padding: 30px;
-        //background: darken(@theme-color, 10%);
+        //background: darken($theme-color, 10%);
         background: rgba(0, 0, 0, 0.2);
         text-align: center;
         color: #fff;
@@ -71,7 +70,7 @@ p {
     .profile {
         margin-bottom: 15px;
     }
-   
+
     .profile-img {
         //used for profile image
         max-width: 100px;
@@ -137,7 +136,7 @@ p {
             color: rgba(256, 256, 256, 0.6);
         }
     }
-    
+
     .languages-list {
         margin-bottom: 0;
         li {
@@ -147,7 +146,7 @@ p {
             }
         }
     }
-    
+
     .interests-list {
         margin-bottom: 0;
         li {
@@ -167,7 +166,7 @@ p {
         text-transform: uppercase;
         font-size: 20px;
         font-weight: 500;
-        color: darken(@theme-color, 15%);
+        color: darken($theme-color, 15%);
         position: relative;
         margin-top: 0;
         margin-bottom: 20px;
@@ -177,8 +176,8 @@ p {
             margin-right: 8px;
             display: inline-block;
             color: #fff;
-            .border-radius(50%);
-            background: darken(@theme-color, 15%);
+            @include border-radius(50%);
+            background: darken($theme-color, 15%);
             text-align: center;
             padding-top: 8px;
             font-size: 16px;
@@ -190,7 +189,7 @@ p {
     .section {
         margin-bottom: 60px;
     }
-    
+
     .experiences-section, .educations-section {
         .item {
             margin-bottom: 30px;
@@ -202,7 +201,7 @@ p {
         margin-bottom: 2px;
     }
     .job-title, .degree {
-        color: @text-color;
+        color: $text-color;
         font-size: 16px;
         margin-top: 0;
         margin-bottom: 0;
@@ -212,13 +211,13 @@ p {
         position: absolute;
         right: 0;
         top: 0;
-        color: @text-grey;
+        color: $text-grey;
     }
     .company, .university {
         margin-bottom: 10px;
-        color: @text-grey;
+        color: $text-grey;
     }
-    
+
     .project-title {
         font-size: 16px;
         font-weight: 400;
@@ -233,7 +232,7 @@ p {
             margin-bottom: 15px;
         }
     }
-    
+
     .publication-title {
         font-size: 16px;
         font-weight: 500;
@@ -250,7 +249,7 @@ p {
         .item {
             margin-bottom: 15px;
         }
-    }    
+    }
 }
 
 
@@ -266,11 +265,11 @@ p {
     }
     .level-bar {
         height: 12px;
-        background: @smoky-white;
+        background: $smoky-white;
     }
     .level-bar-inner {
         height: 12px;
-        background: lighten(@theme-color, 15%);
+        background: lighten($theme-color, 15%);
     }
 }
 
@@ -281,12 +280,12 @@ p {
     padding-top: 30px;
     .copyright {
         line-height: 1.6;
-        color: @text-color-secondary;
-        font-size: 13px;       
-    }  
-    
+        color: $text-color-secondary;
+        font-size: 13px;
+    }
+
     .fa-heart {
-        color: @heart;
+        color: $heart;
     }
-    
-}
+
+}
diff --git a/assets/less/default/default.less → _sass/_default.scss b/assets/less/default/default.less → _sass/_default.scss
@@ -1,11 +1,11 @@
-/*   
+/*
  * Template Name: Orbit - Responsive Resume/CV Template for Developers
  * Version: 1.0
  * Author: Xiaoying Riley
  * Twitter: @3rdwave_themes
  * License: Creative Commons Attribution 3.0 License
  * Website: http://themes.3rdwavemedia.com/
 */
-@import "mixins.less";
-@import "base.less";
-@import "responsive.less";
+@import "mixins";
+@import "base";
+@import "responsive";