sencilla 0.3.1 → 0.4.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: b77e8561f80e7f99a1a29f305376aaf252a2906e45e1993699158588464e6217
-  data.tar.gz: 2807e9165a208e07a8db2765b4e2ee85287b501a6e60463e59a108283b466be1
+  metadata.gz: 77316f01b9db0492aa8672d4b3946d2deff8d31775eb0eef2c258da701772c13
+  data.tar.gz: 328fa5716f70f1b90991cb90c9932677e457641d78e3218bfa5fb4dfca9b85b1
 SHA512:
-  metadata.gz: 26887b1a133b8d34d53d9625cd813e6cdb72bcbb73815e3364689f80c2e3555b1a4fad7fb8899963159eceb421a8541cd393b1a75bbfc3fd2384acbcba983322
-  data.tar.gz: 11426ae6ea29b0edcbf8ad619d70c57105db494685772e54f37cb7f94c4f82b709c2239c5f22686f0e5b79b9787952ac56148a2c038834597977de8be0f80e16
+  metadata.gz: 2ee643d3c7c8d2e761e0d5bc1a6977140a0b4f6f3020d7e4ad2fa593ea76af5bfdc08122328a64fe788b117a00483d64bf3944e90939ff7675bf6e6640d75104
+  data.tar.gz: c7c050dbb35c9f67ab169e4909753797ce393aa6e422437c1574759b70eb323b7fa10c439b825bac9f11a1981db09e2e5877bfd4dcf3bf674d807a32486ff1ce

data/README.md

@@ -1,9 +1,11 @@
 # Sencilla
 
-Sencilla (pronounced sen-si-ya) is a minimal Jekyll theme for personal websites.
-
 [![Gem Version](https://badge.fury.io/rb/sencilla.svg)](https://badge.fury.io/rb/sencilla)
 
+A Jekyll theme for blogs and portfolio websites.
+
+![](screenshot.png)
+
 ## Installation
 
 Add this line to your Jekyll site's `Gemfile`:
@@ -32,7 +34,7 @@ Will be added soon.
 
 ## Contributing
 
-Bug reports and pull requests are welcome on GitHub at https://github.com/dyskun/sencilla/. This project is intended to be a safe, welcoming space for collaboration, and contributors are expected to adhere to the [Contributor Covenant](http://contributor-covenant.org) code of conduct.
+Bug reports and pull requests are welcome on GitHub at https://github.com/dyskun/sencilla/.
 
 ## License
 
@@ -40,4 +42,8 @@ The theme is available as open source under the terms of the [MIT License](https
 
 ## Credits
 
-Sencilla is a fork of [Minima](https://github.com/jekyll/minima) v2.5.1. I have incorporated the `tags.html` page from [beautiful-jekyll](https://github.com/daattali/beautiful-jekyll) and the grey color tones from [open-color](https://github.com/yeun/open-color) and [material.io](https://material.io).
+Sencilla is a fork of [Minima](https://github.com/jekyll/minima) v2.5.1. I have incorporated the `tags.html` page from [beautiful-jekyll](https://github.com/daattali/beautiful-jekyll) and the color tones from [open-color](https://github.com/yeun/open-color) and [material.io](https://material.io). 
+
+Thanks to [w3schools.com](https://www.w3schools.com/) for putting up amazing resources online for free. Most of what I have learnt about HTML and CSS has come from w3schools.
+
+Source of `/assets/img/profile-picture.jpg`: [Pexels.com](https://www.pexels.com/photo/silhouette-photo-of-person-during-golden-hour-2475138/)

data/_includes/footer.html

@@ -1,17 +1,19 @@
-<footer class="site-footer h-card">
+<footer class="site-footer">
   <div class="nav-wrapper">
-    <div class="footer-col-wrapper">
-      <div class="footer-col footer-col-1">
-        <p>Copyright © 2020 {{ site.author.name }}</p>
-      </div>
-
-      <div class="footer-col footer-col-2">
-        <p>Subscribe to the <a href="/feed.xml">RSS</a> feed.</p>
-      </div>
-
-      <div class="footer-col footer-col-3">
-        <p>Powered by <a href="https://github.com/dyskun/sencilla">Sencilla</a>.</p>
-      </div>
+    <div class="footer-col footer-col-1">
+      Copyright © 2020 {{ site.author.name }}
     </div>
+    
+    <div class="footer-col footer-col-2">
+      {% if site.subscribe %}
+        Subscribe to the <a href="/feed.xml">RSS</a> feed
+      {% else %}
+      •
+      {% endif %}
+    </div>
+
+    <div class="footer-col footer-col-3">
+      Powered by <a href="https://github.com/dyskun/sencilla">Sencilla</a>
     </div>
+  </div>
 </footer>

data/_includes/header.html

@@ -1,8 +1,8 @@
+<div class="sticky">
 <header class="site-header" role="banner">
 
   <div class="nav-wrapper">
-    {%- assign default_paths = site.pages | map: "path" -%}
-    {%- assign page_paths = site.header_pages | default: default_paths -%}
+
     {%- if site.logo -%}
     <a href="{{ "/" | relative_url }}"><img class="site-logo" src="{{ site.logo }}" alt="{{ site.title }} Logo"></a>
     {%- else -%}
@@ -20,7 +20,7 @@
         </label>
 
       <div class="trigger">
-        {%- for item in site.data.pages -%}
+        {%- for item in site.data.top-nav -%}
         <div class="nav-items">
           {%- if item.subitems -%}
             <a class="nav-item-link">{{ item.navitem }}</a>
@@ -34,13 +34,9 @@
           {%- endif -%}
         </div>
         {%- endfor -%}
-        <div class="nav-items">
-          <a>Contact</a>
-          <div class="dropdown-content">
-           {% include social.html %}
-          </div>
-        </div>
       </div>
     </nav>
   </div>
+
 </header>
+</div>

data/_includes/image.html

@@ -0,0 +1,4 @@
+<figure class="image">
+  <img src="{{ include.url }}" alt="{{ include.alt | default: include.description }}">
+  <figcaption>{{ include.description | default: "<br>" }}</figcaption>
+</figure>

data/_includes/social.html

@@ -1,24 +1,24 @@
 {%- if site.author.email -%}
-  <a class="nav-drop-link" href="mailto:{{ site.author.email }}"><i class="far fa-envelope"></i></a>                                   
+  <a href="mailto:{{ site.author.email }}"><i class="far fa-envelope"></i></a>                                   
 {%- endif -%}
 
 {%- if site.github -%}
-<a class="nav-drop-link" href="https://github.com/{{ site.github }}"><i class="fab fa-github"></i></a>
+<a href="https://github.com/{{ site.github }}"><i class="fab fa-github"></i></a>
 {%- endif -%}
 
 {%- if site.twitter -%}
-<a class="nav-drop-link"  href="https://twitter.com/{{ site.twitter }}"><i class="fab fa-twitter"></i></a>
+<a href="https://twitter.com/{{ site.twitter }}"><i class="fab fa-twitter"></i></a>
 {%- endif -%}
 
 {%- if site.facebook -%}
-<a class="nav-drop-link"  href="https://facebook.com/{{ site.facebook }}"><i class="fab fa-facebook"></i></a>
+<a href="https://facebook.com/{{ site.facebook }}"><i class="fab fa-facebook"></i></a>
 {%- endif -%}
 
 {%- if site.instagram -%}
-<a class="nav-drop-link"  href="https://instagram.com/{{ site.instagram }}"><i class="fab fa-instagram"></i></a>
+<a  href="https://instagram.com/{{ site.instagram }}"><i class="fab fa-instagram"></i></a>
 {%- endif -%}
 
 {%- if site.linkedin -%}
-<a class="nav-drop-link"  href="https://linkedin.com/in/{{ site.linkedin }}"><i class="fab fa-linkedin"></i></a>
+<a  href="https://linkedin.com/in/{{ site.linkedin }}"><i class="fab fa-linkedin"></i></a>
 {%- endif -%}
 

data/_layouts/default.html

@@ -1,11 +1,12 @@
 <!doctype html>                                                     
 <html>
+
   {% include head.html %}
 
   <body>
     {% include header.html %}
 
-    <main class="page-content aria-label=Content">
+    <main class="page-content" aria-label=Content">
       <div class="wrapper">
         {{ content }}
       </div>

data/_layouts/home.html

@@ -1,20 +1,34 @@
 <!DOCTYPE html>
-  
   {%- include head.html -%}
 
   <body>
 
-    {%- include header.html -%}
+  {%- include header.html -%}
 
-    <main class="page-content" aria-label="Content">
-      <div class="wrapper">
-        <div style="float: right;" style="padding: 1rem;" style="border-radius: 50%;">
-          <img src = "{{ page.image }}" width="360" alt="Profile picture">
+  <main class="page-content home-page" aria-label="Content">
+
+    <div class="wrapper-wide"> 
+
+      <div class="col-3 col-m-12 col-s-12">
+
+        <div class="profile-picture">
+          <img src = "{{ site.profile_picture }}" alt="Profile picture">
         </div>
+
+        <div class="social-links-home">
+          {% include social.html %}
+        </div>
+
+      </div>
+
+      <div class="col-9 col-m-12 col-s-12">
         {{ content }}
       </div>
-    </main>
-    
+
+    </div>
+
+  </main>
+
     {%- include footer.html -%}
 
   </body>

data/_layouts/latex-default.html

@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html lang="{{ page.lang | default: site.lang | default: "en" }}">
+<html>
 
   {%- include latex-head.html -%}
 

data/_layouts/latex-page.html

@@ -0,0 +1,11 @@
+---
+layout: latex-default
+---
+<article class="post">
+  <header class="post-header">
+    <h1 style="text-align: center;" class="post-title">{{ page.title | escape }}</h1>
+  </header>
+  <div class="post-content">
+    {{ content }}
+  </div> 
+</article>

data/_layouts/latex-post.html

@@ -4,61 +4,64 @@ layout: latex-default
 <article class="post h-entry" itemscope itemtype="http://schema.org/BlogPosting">
 
   <header class="post-header">
+
     <h1 class="post-title p-name" itemprop="name headline">{{ page.title | escape }}</h1>
+
     <p class="post-meta">
-      {%- assign date_format = site.minima.date_format | default: "%b %-d, %Y" -%}
-        Published - 
+
+      {%- assign date_format = site.date_format | default: "%b %-d, %Y" -%}
       <time class="dt-published" datetime="{{ page.date | date_to_xmlschema }}" itemprop="datePublished">
+      {%-  if page.time -%} 
+      {{ page.time | date: "%H:%M %Z" }} {{ page.date | date: date_format }}
+      {%- else -%}
         {{ page.date | date: date_format }}
+      {%- endif -%}
       </time>
-      {%- if page.modified_date -%}
-        • Last updated - 
-        {%- assign mdate = page.modified_date | date_to_xmlschema -%}
+      {%- if page.last_modified_at -%}
+        {%- assign mdate = page.last_modified_at | date_to_xmlschema -%}
         <time class="dt-modified" datetime="{{ mdate }}" itemprop="dateModified">
-          {{ mdate | date: date_format }}
+          ~ {{ mdate | date: date_format }}
         </time>
       {%- endif -%}
-      {%- if page.author -%}
-        • {% for author in page.author %}
-          <span itemprop="author" itemscope itemtype="http://schema.org/Person">
-            <span class="p-author h-card" itemprop="name">{{ author }}</span></span>
-            {%- if forloop.last == false %}, {% endif -%}
-        {% endfor %}
-      {%- endif -%}</p>
+
+      {% if page.category %} 
+      • {{ page.category }}
+      {% endif %}
+
+      {% if page.tags.size > 0 %}    
+      • Tags:
+       {% if site.link-tags %}
+       {% for tag in page.tags %}
+       <a href="{{ '/tags' | relative_url }}#{{- tag -}}">{{- tag -}}</a>
+       {% endfor %}
+       {% else %}
+         {{ page.tags | join: ", " }}
+       {% endif %}
+      {% endif %}
+
+    </p>
   </header>
 
   <div class="post-content e-content" itemprop="articleBody">
     {{ content }}
   </div>
-  {% if page.tags.size > 0 %}
-  <div class="blog-tags">
-    Tags:
-    {% if site.link-tags %}
-    {% for tag in page.tags %}
-      <a href="{{ '/tags' | relative_url }}#{{- tag -}}">{{- tag -}}</a>
-    {% endfor %}
-    {% else %}
-      {{ page.tags | join: ", " }}
-    {% endif %}
-  </div>
-  {% endif %}
-  
-  <ul class="pagination">
+
+  <div class="pagination">
+
     {% if page.previous.url %}
-    <li class="pagination">
-      <a class="page-link" href="{{ page.previous.url | relative_url }}" data-toggle="tooltip" data-placement="top" title="{{page.previous.title}}">&larr; Previous Post</a>
-    </li>
+      <a href="{{ page.previous.url | relative_url }}" data-toggle="tooltip" data-placement="top" title="{{page.previous.title}}" style="float: left;"><i class="fas fa-arrow-left"></i> Previous Post</a>
     {% endif %}
+
     {% if page.next.url %}
-    <li class="pagination">
-      <a class="page-link" href="{{ page.next.url | relative_url }}" data-toggle="tooltip" data-placement="top" title="{{page.next.title}}">Next Post &rarr;</a>
-    </li>
+      <a href="{{ page.next.url | relative_url }}" data-toggle="tooltip" data-placement="top" title="{{page.next.title}}" style="float: right;">Next Post <i class="fas fa-arrow-right"></i></a>
     {% endif %}
-  </ul>
+
+  </div>
 
   {%- if site.disqus.shortname -%}
     {%- include disqus_comments.html -%}
   {%- endif -%}
 
   <a class="u-url" href="{{ page.url | relative_url }}" hidden></a>
+
 </article>

data/_layouts/post.html

@@ -4,9 +4,12 @@ layout: default
 <article class="post h-entry" itemscope itemtype="http://schema.org/BlogPosting">
 
   <header class="post-header">
+
     <h1 class="post-title p-name" itemprop="name headline">{{ page.title | escape }}</h1>
+
     <p class="post-meta">
-      {%- assign date_format = site.minima.date_format | default: "%b %-d, %Y" -%}
+
+      {%- assign date_format = site.date_format | default: "%b %-d, %Y" -%}
       <time class="dt-published" datetime="{{ page.date | date_to_xmlschema }}" itemprop="datePublished">
       {%-  if page.time -%} 
       {{ page.time | date: "%H:%M %Z" }} {{ page.date | date: date_format }}
@@ -20,9 +23,11 @@ layout: default
           ~ {{ mdate | date: date_format }}
         </time>
       {%- endif -%}
+
       {% if page.category %} 
       • {{ page.category }}
       {% endif %}
+
       {% if page.tags.size > 0 %}    
       • Tags:
        {% if site.link-tags %}
@@ -33,37 +38,30 @@ layout: default
          {{ page.tags | join: ", " }}
        {% endif %}
       {% endif %}
-      </p>
+
+    </p>
   </header>
+
   <div class="post-content e-content" itemprop="articleBody">
     {{ content }}
   </div>
-  <!--
-  <ul class="pagination">
+
+  <div class="pagination">
+
     {% if page.previous.url %}
-    <li class="pagination">
-      <a class="page-link" href="{{ page.previous.url | relative_url }}" data-toggle="tooltip" data-placement="top" title="{{page.previous.title}}">&larr; Previous Post</a>
-    </li>
+      <a href="{{ page.previous.url | relative_url }}" data-toggle="tooltip" data-placement="top" title="{{page.previous.title}}" style="float: left;"><i class="fas fa-arrow-left"></i> Previous Post</a>
     {% endif %}
+
     {% if page.next.url %}
-    <li class="pagination">
-      <a class="page-link" href="{{ page.next.url | relative_url }}" data-toggle="tooltip" data-placement="top" title="{{page.next.title}}">Next Post &rarr;</a>
-    </li>
+      <a href="{{ page.next.url | relative_url }}" data-toggle="tooltip" data-placement="top" title="{{page.next.title}}" style="float: right;">Next Post <i class="fas fa-arrow-right"></i></a>
     {% endif %}
-  </ul>-->
 
-      <div class="pagination">
-        {% if page.previous.url %}
-        <a href="{{ page.previous.url | relative_url }}" data-toggle="tooltip" data-placement="top" title="{{page.previous.title}}" style="float: left;"><i class="fas fa-arrow-left"></i> Previous Post</a>
-    {% endif %}
-    {% if page.next.url %}
-        <a href="{{ page.next.url | relative_url }}" data-toggle="tooltip" data-placement="top" title="{{page.next.title}}" style="float: right;">Next Post <i class="fas fa-arrow-right"></i></a>
-      {% endif %}
-    </div>
+  </div>
 
   {%- if site.disqus.shortname -%}
     {%- include disqus_comments.html -%}
   {%- endif -%}
 
   <a class="u-url" href="{{ page.url | relative_url }}" hidden></a>
+
 </article>

data/_sass/sencilla.scss

@@ -1,32 +1,39 @@
 @charset "utf-8";
 
-// Define defaults for each variable.
+
+/* ************* content width *********** */
+
+$nav-width:             1280px !default;
+$content-width:         750px !default;
+$home-content-width:    $nav-width !default;
+
+$on-palm:          600px !default;
+$on-tablet:        767px !default;
+
+@mixin media-query($device) {
+  @media screen and (max-width: $device) {
+    @content;
+  }
+}
+
+@mixin relative-font-size($ratio) {
+  font-size: $base-font-size * $ratio;
+}
+
+
+/* ********* text formatting ************* */
 
 $base-font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol" !default;
 $base-font-size:   18px !default;
 $base-font-weight: 400 !default;
 $small-font-size:  $base-font-size * 0.875 !default;
 $base-line-height: 1.5 !default;
-
 $spacing-unit:     30px !default;
 
-// Define grey tones
-/*
-// Source: https://yeun.github.io/open-color/
-$grey0:            #f8f9fa;
-$grey1:            #f1f3f5;
-$grey2:            #e9ecef;
-$grey3:            #dee2e6;
-$grey4:            #ced4da;
-$grey5:            #adb5bd;
-$grey6:            #868e96;
-$grey7:            #495057;
-$grey8:            #343a40;
-$grey9:            #212529;
-*/
 
+/* ********* color definitions ************* */
 
-// Source: https://material.io
+/* main colors */
 $lightest:         #ffffff;
 $grey0:            #fafafa;
 $grey1:            #f5f5f5;
@@ -42,44 +49,112 @@ $grey9:            #212121;
 $grey95:          #111111;
 $darkest:          #000000;
 
-$nav-background-color:  $darkest !default;
-$background-color:      $grey9 !default;
-$text-color:            $grey5 !default;
-$text-color-light:      $grey4 !default;
-$text-color-dark:       $grey6 !default;
-$stroke-color:          $grey7 !default;
-$box-fill-color:       $grey85 !default;
-$box-fill-color-dark:  $grey95 !default;
+/*  highlighting colors */
+$green5:            #51cf66;
+$yellow5:           #51cf66;
+$teal5:             #20c997;
+$lime7:             #afb42b;
+$orange5:           #ff922b;
+$cyan5:             #22b8cf;
+$cyan7:             #1098ad;
+$cyan9:             #006064;
 
-$table-text-align: left !default;
 
-// Width of the content area
-$nav-width:        1280px !default;
-$content-width:    750px !default;
+/* ************ main color scheme ************ */
 
-$on-palm:          600px !default;
-$on-laptop:        750px !default;
-
-// Use media queries like this:
-// @include media-query($on-palm) {
-//   .wrapper {
-//     padding-right: $spacing-unit / 2;
-//     padding-left: $spacing-unit / 2;
-//   }
-// }
-@mixin media-query($device) {
-  @media screen and (max-width: $device) {
-    @content;
-  }
-}
+/* navbar */
+$nav-bg:              $grey9 !default;  /* background */
+$nav-hl:              $grey8 !default;  /* highlight on hover */
+$nav-hl-dark:         $grey85 !default;
+$nav-hl-light:        $grey7 !default;
+$nav-dd:              $grey95 !default; /* dropdown */
+$nav-text:            $grey3 !default;
+$nav-text-muted:      $grey5 !default;
 
-@mixin relative-font-size($ratio) {
-  font-size: $base-font-size * $ratio;
-}
+/* body */
+$bg:                  $grey9 !default;
+$text:                $grey5 !default;
+$text-light:          $grey4 !default;
+$text-dark:           $grey6 !default;
+
+/* borders */
+$stroke:              $grey8 !default;
+$stroke-light:        $grey7 !default;
+$stroke-dark:         $grey85 !default;
+
+/* content box */
+$box-fill:            $grey85 !default;
+$box-fill-dark:       $grey95 !default;
+$code:                $box-fill !default;
+
+/* footer */
+$footer-color:        $grey95 !default;
+
+$text-muted:          $grey5;
+//$profile-bg-color:          $grey8;
+
+/* Brand color */
+
+/*$brand:             $lime7;*/
+$link:              $cyan5;
+$link-muted:        $cyan7;
+$link-hover:        $text-light;
+
+
+/* ************ profile page color scheme ************** */
+
+/* 
+*
+* dark bg
+*
+*/
+
+/* bg color */
+$dark-bg:             $grey9;
+
+/* background shapes */
+$dbg-shape:           $grey85;
+
+/* text color */
+$dbg-text:           $grey5;
+$dbg-text-light:     $grey4;
+$dbg-text-dark:      $grey6;
+$dbg-text-muted:     $grey7;
 
-// Import partials.
+/* 
+* 
+* light bg
+* 
+*/
+
+/* bg color */
+$light-bg:            $grey85;
+
+/* shapes */
+$lbg-shape:           $grey8;
+
+/* text color */
+$lbg-text:           $grey4;
+$lbg-text-light:     $grey3;
+$lbg-text-dark:      $grey5;
+$lbg-text-muted:     $grey7;
+
+
+/* ********** other elements of the text ************/
+
+$table-text-align: left !default;
+
+/* box shadows */
+$shadow: 0px 1px 2px 0px $grey95;
+$shadow-body: 0px 2px 4px 0px $grey95;
+$shadow-hover: 0px 3px 3px 1px $grey95;
+
+
+/* ********** import other files ************/
 @import
   "sencilla/base",
   "sencilla/layout",
   "sencilla/syntax-highlighting"
 ;
+
+