Full CSS rework:

    - add light/dark colorscheme support (also for code)
    - remove Skeleton
    - Split elenq CSS in pelican-specific vs general

7 files changed, 498 insertions, 781 deletions

diff --git a/themes/elenq/static/css/elenq-pelican.css b/themes/elenq/static/css/elenq-pelican.css
new file mode 100644
index 0000000..ffa92fa
--- /dev/null
+++ b/themes/elenq/static/css/elenq-pelican.css
@@ -0,0 +1,86 @@
+/* PELICAN SPECIFIC*/
+/*****************************************************************************/
+.entry-content{
+  margin-top: 1rem;
+}
+
+.entry-content table{
+  margin-left: auto;
+  margin-right: auto;
+}
+
+ol, ul {
+  font-size: 1.7rem;
+  list-style-position: outside;
+  margin-left:  3rem;
+  margin-right: 3rem;
+}
+li{
+  padding-left: 1ex;
+}
+
+#post-list{
+  list-style: none;
+  margin-left: 0;
+  margin-right: 0;
+}
+#post-list li{
+  padding-left: 0;
+}
+
+.footer-logo{
+  width:  120px;
+  margin-top: 0;
+}
+.post-info{
+  margin-bottom: 3rem;
+}
+
+.hentry p{ /* Reduce margin in the news section*/
+  margin-bottom: 1ex;
+}
+
+.published{
+  font-style: italic
+}
+
+@media (min-width: 800px){ /*more than a tablet*/
+  .hentry header{
+    width: 100%;
+    min-width: 100%;
+    display: inline-flex;
+    flex: 1;
+    -webkit-flex: 1; /* Safari 6.1+ */
+    -ms-flex: 1; /* IE 10 */
+    justify-content: space-between;
+    flex-wrap: nowrap;
+    align-items: baseline;
+  }
+  .published{
+    font-style: normal;
+  }
+}
+
+/* Typography pelican
+ */
+.hentry .entry-content h1{ font-size: 2.2rem; }
+.hentry .entry-content h2{ font-size: 2.0rem; }
+.hentry .entry-content h3{ font-size: 1.8rem; }
+.hentry .entry-content h4{ font-size: 1.6rem; }
+.hentry .entry-content h5{ font-size: 1.4rem; }
+.hentry .entry-content h6{ font-size: 1.2rem; }
+
+
+
+h1.main-title {
+  font-size: 4.5rem; line-height: 1;  text-align: center;
+  margin-bottom: 2rem;
+  margin-top: 2rem;
+  font-family: "LatoLatinLightWeb", Helvetica, Arial, sans-serif;
+}
+h1 span.subtitle{
+  font-size: 2.5rem;
+}
+h2.entry-title{
+  font-size: 3.0rem; line-height: 1.2;
+}
diff --git a/themes/elenq/static/css/elenq.css b/themes/elenq/static/css/elenq.css
new file mode 100644
index 0000000..ba04f2f
--- /dev/null
+++ b/themes/elenq/static/css/elenq.css
@@ -0,0 +1,284 @@
+html{
+  font-size: 80%;
+}
+
+/* Typography*/
+body{
+  font-family: "LatoLatinWeb", Helvetica, Arial, sans-serif;
+  line-height: 1.6;
+  color: #222;
+  background-color: #fff;
+  font-size: 1.5em;
+}
+p {
+  text-align: justify;
+}
+q, blockquote{
+  font-style: italic;
+}
+h1, h2, h3, h4, h5, h6 {
+  text-decoration: none;
+  margin-top: 2ex;
+  margin-bottom: 0;
+  line-height: 2;
+  font-weight: 300; }
+h1 {
+  font-size: 5.5rem;
+  line-height: 1.2;
+  text-align: center;
+  margin-bottom: 4rem;
+  margin-top: 0;
+  font-family: "LatoLatinLightWeb", Helvetica, Arial, sans-serif;
+}
+h1,h2,h3 { letter-spacing: -.1rem; }
+h4 { letter-spacing: -.08rem;}
+h5 { letter-spacing: -.05rem;}
+h6 { letter-spacing: 0}
+
+h2 { font-size: 2.8rem; }
+h3 { font-size: 2.3rem; }
+h4 { font-size: 2.1rem; }
+h5 { font-size: 1.8rem; }
+h6 { font-size: 1.5rem; }
+
+@media (min-width: 550px) {
+  h1 { font-size: 8.0rem; }
+  h2 { font-size: 3.2rem; }
+  h3 { font-size: 2.7rem; }
+  h4 { font-size: 2.2rem; }
+  h5 { font-size: 2.0rem; }
+  h6 { font-size: 1.7rem; }
+}
+a{
+  color: #1EAEDB;
+}
+hr{
+  border: 0
+}
+pre > code {
+  overflow: auto;
+  border: none;
+  border-radius: 0;
+}
+
+
+
+/* Utils */
+.text-center{
+  text-align: center;
+}
+.text-right{
+  text-align: right;
+}
+.text-justify{
+  text-align: justify;
+}
+.text-nodeco{
+  text-decoration: none;
+}
+.text-nodeco-black{
+  text-decoration: none;
+  color: #222;
+}
+.only-reader{
+  font-size: 0;
+}
+
+
+/* Sections*/
+section{
+  padding-top: 2rem;
+  padding-bottom: 2rem;
+  margin-bottom: 0;
+}
+
+
+/* Images */
+img {
+  display: block;
+  margin-left: auto;
+  margin-right: auto;
+  margin-top: 3ex;
+  margin-bottom: 3ex;
+}
+img.round{
+  border-radius: 50%;
+}
+
+
+/* Footer */
+.bar-bottom {
+  border-top: 1px solid #eee;
+  position: relative;
+  width: 100%;
+  margin: 0 auto;
+  margin-top: 10ex;
+  padding: 1rem 0;
+  box-sizing: border-box;
+
+  font-size: 70%;
+}
+
+
+/* Container */
+.container {
+  max-width: 900px;
+  margin: auto;
+  width: 80%;
+}
+@media(max-width: 550px){
+  .container{
+    padding-left:  20px;
+    padding-right: 20px;
+  }
+}
+
+
+/* Navbar */
+.mainheader{
+  top: 0;
+  display: block;
+  width: 100%;
+  background: #fff;
+  z-index: 99;
+  border-bottom: 1px solid #eee;
+  margin-bottom: 6.5rem;
+}
+.navbar {
+  width: 100%;
+  }
+.navbar-link,
+.navbar-control{
+  text-transform: uppercase;
+  font-size: 0.9rem;
+  font-weight: 600;
+  letter-spacing: .1rem;
+  text-decoration: none;
+  line-height: 6rem;
+  display: inline-block;
+  color: #222;
+  }
+.navbar-right,
+.navbar-left{
+  display: inline;
+}
+.navbar-separator{
+  margin: 0 auto;
+}
+/* Large devices everything inline and the header floating */
+@media (min-width: 801px) {
+  .mainheader{position: sticky;}
+  .link-right {
+    margin-left: 15px;
+    margin-right: 0px;
+  }
+  .link-left{
+    margin-right: 25px;
+  }
+  .nav-right{
+    text-align: right;
+  }
+  .navbar-right{
+    float: right;
+  }
+  .navbar-separator{
+    display: none;
+  }
+
+}
+/* Smaller devices leave the header at the top of the page and make it more
+ * vertical */
+@media (max-width: 800px){
+  /* Main navbar toggle */
+  /* TODO: BURGER? */
+  .navbar-link{
+    margin-left: 3ex;
+    margin-right: 3ex;
+  }
+  .navbar-right,
+  .navbar-left{
+    width: 100%;
+    min-width: 100%;
+    display: inline-flex;
+    flex: 1;
+    justify-content: space-around;
+    flex-flow: row;
+  }
+  .navbar-left{
+    flex-flow: row wrap;
+  }
+
+  .link-right{
+    margin: auto;
+    line-height: 5rem;
+  }
+}
+
+
+/* Title page */
+.more-info {
+  padding-left: 3ex;
+  margin-top: 2ex;
+}
+.title-image {
+  width:       90%;
+}
+.title-image path{
+  fill: #222;
+}
+@media (min-width: 550px){
+  .title-image { width: 60%; }
+}
+
+
+/* Anchors */
+a.anchor{
+  visibility: hidden;
+  text-decoration: none;
+  font-size: 0.8em;
+}
+h1:hover > a.anchor,
+h2:hover > a.anchor,
+h3:hover > a.anchor,
+h4:hover > a.anchor,
+h5:hover > a.anchor,
+h6:hover > a.anchor{
+  visibility: visible;
+}
+
+:root{
+  --bg-color:    #FFF;
+  --tx-color:    #222;
+  --link-color:  #1EAEDB;
+  --border-color:#EEE;
+}
+@media (prefers-color-scheme: dark) {
+  :root {
+    --bg-color:    #2F2F2F;
+    --tx-color:    #FFF;
+    --link-color:  #1EAEDB;
+    --border-color:#4A4A4A;
+  }
+}
+
+/* Overwrite colors to vars if supported */
+body{
+  color:            var(--tx-color);
+  background-color: var(--bg-color);
+}
+.text-nodeco-black, .navbar-link{
+  color:            var(--tx-color);
+}
+.title-image path{
+  fill:             var(--tx-color);
+}
+.mainheader {
+  background-color: var(--bg-color);
+  border-color:     var(--border-color);
+}
+a {
+  color:            var(--link-color);
+}
+.bar-bottom {
+  border-color:     var(--border-color);
+}
diff --git a/themes/elenq/static/css/prism.css b/themes/elenq/static/css/prism.css
index cc87b8d..c24467d 100644
--- a/themes/elenq/static/css/prism.css
+++ b/themes/elenq/static/css/prism.css
@@ -10,16 +10,22 @@ https://prismjs.com/download.html#themes=prism&languages=bash+clojure+latex+lisp
 
 code[class*="language-"],
 pre[class*="language-"] {
+  background: none;
+  font-family: monospace;
+  text-align: left;
+  white-space: pre;
+  word-spacing: normal;
+  word-break: normal;
+  word-wrap: normal;
+  line-height: 1.5;
   -moz-tab-size: 4;
   -o-tab-size: 4;
   tab-size: 4;
-
   -webkit-hyphens: none;
   -moz-hyphens: none;
   -ms-hyphens: none;
   hyphens: none;
 }
-
 @media print {
   code[class*="language-"],
   pre[class*="language-"] {
@@ -29,23 +35,27 @@ pre[class*="language-"] {
 
 /* Code blocks */
 pre[class*="language-"] {
+  padding: 1em;
+  margin: .5em 0;
   overflow: auto;
+  border-radius: 0.3em;
 }
 
-:not(pre) > code[class*="language-"],
-pre[class*="language-"] {
-  background: #f5f2f0;
+:not(pre) > code {
+  padding: .1em;
+  border-radius: .3em;
+  white-space: normal;
 }
 
 .token.comment,
 .token.prolog,
 .token.doctype,
 .token.cdata {
-  color: slategray;
+  color: var(--comment);
 }
 
 .token.punctuation {
-  color: #999;
+  color: var(--punctuation);
 }
 
 .namespace {
@@ -59,7 +69,7 @@ pre[class*="language-"] {
 .token.constant,
 .token.symbol,
 .token.deleted {
-  color: #905;
+  color: var(--property);
 }
 
 .token.selector,
@@ -68,7 +78,7 @@ pre[class*="language-"] {
 .token.char,
 .token.builtin,
 .token.inserted {
-  color: #690;
+  color: var(--builtin);
 }
 
 .token.operator,
@@ -76,25 +86,24 @@ pre[class*="language-"] {
 .token.url,
 .language-css .token.string,
 .style .token.string {
-  color: #9a6e3a;
-  background: hsla(0, 0%, 100%, .5);
+  color: var(--operator);
 }
 
 .token.atrule,
 .token.attr-value,
 .token.keyword {
-  color: #07a;
+  color: var(--keyword);
 }
 
 .token.function,
 .token.class-name {
-  color: #DD4A68;
+  color: var(--function);
 }
 
 .token.regex,
 .token.important,
 .token.variable {
-  color: #e90;
+  color: var(--variable);
 }
 
 .token.important,
@@ -109,3 +118,44 @@ pre[class*="language-"] {
   cursor: help;
 }
 
+
+/**
+ * Prism default colorscheme
+ */
+@media (prefers-color-scheme: light) or (prefers-color-scheme: no-preference) {
+  :root{
+    --base: black;
+    --comment: slategray;
+    --punctuation: #999;
+    --property: #905;
+    --builtin: #690;
+    --operator: #9a6e3a;
+    --keyword: #07a;
+    --function: #DD4A68;
+    --variable: #e90;
+  }
+}
+
+/**
+ * Dracula Theme originally by Zeno Rocha [@zenorocha]
+ * https://draculatheme.com/
+ *
+ * Ported for PrismJS by Albert Vallverdu [@byverdu]
+ *
+ * Strongly edited by Ekaitz Zárraga to fit on the default theme
+ */
+
+@media (prefers-color-scheme: dark){
+  :root{
+    --base: #f8f8f2;
+    --comment: #6272a4;
+    --punctuation: #f8f8f2;
+    --property: #ff79c6;
+    --builtin: #50fa7b;
+    --operator: #f8f8f2;
+    --keyword: #8be9fd;
+    --function: #f1fa8c;
+    --variable: #ffb86c;
+  }
+}
+
diff --git a/themes/elenq/static/css/skeleton.css b/themes/elenq/static/css/skeleton.css
deleted file mode 100644
index f28bf6c..0000000
--- a/themes/elenq/static/css/skeleton.css
+++ /dev/null
@@ -1,418 +0,0 @@
-/*
-* Skeleton V2.0.4
-* Copyright 2014, Dave Gamache
-* www.getskeleton.com
-* Free to use under the MIT license.
-* http://www.opensource.org/licenses/mit-license.php
-* 12/29/2014
-*/
-
-
-/* Table of contents
-––––––––––––––––––––––––––––––––––––––––––––––––––
-- Grid
-- Base Styles
-- Typography
-- Links
-- Buttons
-- Forms
-- Lists
-- Code
-- Tables
-- Spacing
-- Utilities
-- Clearing
-- Media Queries
-*/
-
-
-/* Grid
-–––––––––––––––––––––––––––––––––––––––––––––––––– */
-.container {
-  position: relative;
-  width: 100%;
-  max-width: 960px;
-  margin: 0 auto;
-  padding: 0 20px;
-  box-sizing: border-box; }
-.column,
-.columns {
-  width: 100%;
-  float: left;
-  box-sizing: border-box; }
-
-/* For devices larger than 400px */
-@media (min-width: 400px) {
-  .container {
-    width: 85%;
-    padding: 0; }
-}
-
-/* For devices larger than 550px */
-@media (min-width: 550px) {
-  .container {
-    width: 80%; }
-  .column,
-  .columns {
-    margin-left: 4%; }
-  .column:first-child,
-  .columns:first-child {
-    margin-left: 0; }
-
-  .one.column,
-  .one.columns                    { width: 4.66666666667%; }
-  .two.columns                    { width: 13.3333333333%; }
-  .three.columns                  { width: 22%;            }
-  .four.columns                   { width: 30.6666666667%; }
-  .five.columns                   { width: 39.3333333333%; }
-  .six.columns                    { width: 48%;            }
-  .seven.columns                  { width: 56.6666666667%; }
-  .eight.columns                  { width: 65.3333333333%; }
-  .nine.columns                   { width: 74.0%;          }
-  .ten.columns                    { width: 82.6666666667%; }
-  .eleven.columns                 { width: 91.3333333333%; }
-  .twelve.columns                 { width: 100%; margin-left: 0; }
-
-  .one-third.column               { width: 30.6666666667%; }
-  .two-thirds.column              { width: 65.3333333333%; }
-
-  .one-half.column                { width: 48%; }
-
-  /* Offsets */
-  .offset-by-one.column,
-  .offset-by-one.columns          { margin-left: 8.66666666667%; }
-  .offset-by-two.column,
-  .offset-by-two.columns          { margin-left: 17.3333333333%; }
-  .offset-by-three.column,
-  .offset-by-three.columns        { margin-left: 26%;            }
-  .offset-by-four.column,
-  .offset-by-four.columns         { margin-left: 34.6666666667%; }
-  .offset-by-five.column,
-  .offset-by-five.columns         { margin-left: 43.3333333333%; }
-  .offset-by-six.column,
-  .offset-by-six.columns          { margin-left: 52%;            }
-  .offset-by-seven.column,
-  .offset-by-seven.columns        { margin-left: 60.6666666667%; }
-  .offset-by-eight.column,
-  .offset-by-eight.columns        { margin-left: 69.3333333333%; }
-  .offset-by-nine.column,
-  .offset-by-nine.columns         { margin-left: 78.0%;          }
-  .offset-by-ten.column,
-  .offset-by-ten.columns          { margin-left: 86.6666666667%; }
-  .offset-by-eleven.column,
-  .offset-by-eleven.columns       { margin-left: 95.3333333333%; }
-
-  .offset-by-one-third.column,
-  .offset-by-one-third.columns    { margin-left: 34.6666666667%; }
-  .offset-by-two-thirds.column,
-  .offset-by-two-thirds.columns   { margin-left: 69.3333333333%; }
-
-  .offset-by-one-half.column,
-  .offset-by-one-half.columns     { margin-left: 52%; }
-
-}
-
-
-/* Base Styles
-–––––––––––––––––––––––––––––––––––––––––––––––––– */
-/* NOTE
-html is set to 62.5% so that all the REM measurements throughout Skeleton
-are based on 10px sizing. So basically 1.5rem = 15px :) */
-html {
-  font-size: 62.5%; }
-body {
-  font-size: 1.5em; /* currently ems cause chrome bug misinterpreting rems on body element */
-  line-height: 1.6;
-  font-weight: 400;
-  font-family: "Raleway", "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif;
-  color: #222; }
-
-
-/* Typography
-–––––––––––––––––––––––––––––––––––––––––––––––––– */
-h1, h2, h3, h4, h5, h6 {
-  margin-top: 0;
-  margin-bottom: 2rem;
-  font-weight: 300; }
-h1 { font-size: 4.0rem; line-height: 1.2;  letter-spacing: -.1rem;}
-h2 { font-size: 3.6rem; line-height: 1.25; letter-spacing: -.1rem; }
-h3 { font-size: 3.0rem; line-height: 1.3;  letter-spacing: -.1rem; }
-h4 { font-size: 2.4rem; line-height: 1.35; letter-spacing: -.08rem; }
-h5 { font-size: 1.8rem; line-height: 1.5;  letter-spacing: -.05rem; }
-h6 { font-size: 1.5rem; line-height: 1.6;  letter-spacing: 0; }
-
-/* Larger than phablet */
-@media (min-width: 550px) {
-  h1 { font-size: 5.0rem; }
-  h2 { font-size: 4.2rem; }
-  h3 { font-size: 3.6rem; }
-  h4 { font-size: 3.0rem; }
-  h5 { font-size: 2.4rem; }
-  h6 { font-size: 1.5rem; }
-}
-
-p {
-  margin-top: 0; }
-
-
-/* Links
-–––––––––––––––––––––––––––––––––––––––––––––––––– */
-a {
-  color: #1EAEDB; }
-a:hover {
-  color: #0FA0CE; }
-
-
-/* Buttons
-–––––––––––––––––––––––––––––––––––––––––––––––––– */
-.button,
-button,
-input[type="submit"],
-input[type="reset"],
-input[type="button"] {
-  display: inline-block;
-  height: 38px;
-  padding: 0 30px;
-  color: #555;
-  text-align: center;
-  font-size: 11px;
-  font-weight: 600;
-  line-height: 38px;
-  letter-spacing: .1rem;
-  text-transform: uppercase;
-  text-decoration: none;
-  white-space: nowrap;
-  background-color: transparent;
-  border-radius: 4px;
-  border: 1px solid #bbb;
-  cursor: pointer;
-  box-sizing: border-box; }
-.button:hover,
-button:hover,
-input[type="submit"]:hover,
-input[type="reset"]:hover,
-input[type="button"]:hover,
-.button:focus,
-button:focus,
-input[type="submit"]:focus,
-input[type="reset"]:focus,
-input[type="button"]:focus {
-  color: #333;
-  border-color: #888;
-  outline: 0; }
-.button.button-primary,
-button.button-primary,
-input[type="submit"].button-primary,
-input[type="reset"].button-primary,
-input[type="button"].button-primary {
-  color: #FFF;
-  background-color: #33C3F0;
-  border-color: #33C3F0; }
-.button.button-primary:hover,
-button.button-primary:hover,
-input[type="submit"].button-primary:hover,
-input[type="reset"].button-primary:hover,
-input[type="button"].button-primary:hover,
-.button.button-primary:focus,
-button.button-primary:focus,
-input[type="submit"].button-primary:focus,
-input[type="reset"].button-primary:focus,
-input[type="button"].button-primary:focus {
-  color: #FFF;
-  background-color: #1EAEDB;
-  border-color: #1EAEDB; }
-
-
-/* Forms
-–––––––––––––––––––––––––––––––––––––––––––––––––– */
-input[type="email"],
-input[type="number"],
-input[type="search"],
-input[type="text"],
-input[type="tel"],
-input[type="url"],
-input[type="password"],
-textarea,
-select {
-  height: 38px;
-  padding: 6px 10px; /* The 6px vertically centers text on FF, ignored by Webkit */
-  background-color: #fff;
-  border: 1px solid #D1D1D1;
-  border-radius: 4px;
-  box-shadow: none;
-  box-sizing: border-box; }
-/* Removes awkward default styles on some inputs for iOS */
-input[type="email"],
-input[type="number"],
-input[type="search"],
-input[type="text"],
-input[type="tel"],
-input[type="url"],
-input[type="password"],
-textarea {
-  -webkit-appearance: none;
-     -moz-appearance: none;
-          appearance: none; }
-textarea {
-  min-height: 65px;
-  padding-top: 6px;
-  padding-bottom: 6px; }
-input[type="email"]:focus,
-input[type="number"]:focus,
-input[type="search"]:focus,
-input[type="text"]:focus,
-input[type="tel"]:focus,
-input[type="url"]:focus,
-input[type="password"]:focus,
-textarea:focus,
-select:focus {
-  border: 1px solid #33C3F0;
-  outline: 0; }
-label,
-legend {
-  display: block;
-  margin-bottom: .5rem;
-  font-weight: 600; }
-fieldset {
-  padding: 0;
-  border-width: 0; }
-input[type="checkbox"],
-input[type="radio"] {
-  display: inline; }
-label > .label-body {
-  display: inline-block;
-  margin-left: .5rem;
-  font-weight: normal; }
-
-
-/* Lists
-–––––––––––––––––––––––––––––––––––––––––––––––––– */
-ul {
-  list-style: circle inside; }
-ol {
-  list-style: decimal inside; }
-ol, ul {
-  padding-left: 0;
-  margin-top: 0; }
-ul ul,
-ul ol,
-ol ol,
-ol ul {
-  margin: 1.5rem 0 1.5rem 3rem;
-  font-size: 90%; }
-li {
-  margin-bottom: 1rem; }
-
-
-/* Code
-–––––––––––––––––––––––––––––––––––––––––––––––––– */
-code {
-  padding: .2rem .5rem;
-  margin: 0 .2rem;
-  font-size: 90%;
-  white-space: nowrap;
-  background: #F1F1F1;
-  border: 1px solid #E1E1E1;
-  border-radius: 4px; }
-pre > code {
-  display: block;
-  padding: 1rem 1.5rem;
-  white-space: pre; }
-
-
-/* Tables
-–––––––––––––––––––––––––––––––––––––––––––––––––– */
-th,
-td {
-  padding: 12px 15px;
-  text-align: left;
-  border-bottom: 1px solid #E1E1E1; }
-th:first-child,
-td:first-child {
-  padding-left: 0; }
-th:last-child,
-td:last-child {
-  padding-right: 0; }
-
-
-/* Spacing
-–––––––––––––––––––––––––––––––––––––––––––––––––– */
-button,
-.button {
-  margin-bottom: 1rem; }
-input,
-textarea,
-select,
-fieldset {
-  margin-bottom: 1.5rem; }
-pre,
-blockquote,
-dl,
-figure,
-table,
-p,
-ul,
-ol,
-form {
-  margin-bottom: 2.5rem; }
-
-
-/* Utilities
-–––––––––––––––––––––––––––––––––––––––––––––––––– */
-.u-full-width {
-  width: 100%;
-  box-sizing: border-box; }
-.u-max-full-width {
-  max-width: 100%;
-  box-sizing: border-box; }
-.u-pull-right {
-  float: right; }
-.u-pull-left {
-  float: left; }
-
-
-/* Misc
-–––––––––––––––––––––––––––––––––––––––––––––––––– */
-hr {
-  margin-top: 3rem;
-  margin-bottom: 3.5rem;
-  border-width: 0;
-  border-top: 1px solid #E1E1E1; }
-
-
-/* Clearing
-–––––––––––––––––––––––––––––––––––––––––––––––––– */
-
-/* Self Clearing Goodness */
-.container:after,
-.row:after,
-.u-cf {
-  content: "";
-  display: table;
-  clear: both; }
-
-
-/* Media Queries
-–––––––––––––––––––––––––––––––––––––––––––––––––– */
-/*
-Note: The best way to structure the use of media queries is to create the queries
-near the relevant code. For example, if you wanted to change the styles for buttons
-on small devices, paste the mobile query code up in the buttons section and style it
-there.
-*/
-
-
-/* Larger than mobile */
-@media (min-width: 400px) {}
-
-/* Larger than phablet (also point when grid becomes active) */
-@media (min-width: 550px) {}
-
-/* Larger than tablet */
-@media (min-width: 750px) {}
-
-/* Larger than desktop */
-@media (min-width: 1000px) {}
-
-/* Larger than Desktop HD */
-@media (min-width: 1200px) {}
diff --git a/themes/elenq/static/css/style.css b/themes/elenq/static/css/style.css
deleted file mode 100644
index 3b52122..0000000
--- a/themes/elenq/static/css/style.css
+++ /dev/null
@@ -1,346 +0,0 @@
-body{
-  font-family: "LatoLatinWeb", Helvetica, Arial, sans-serif;
-  line-height: 1.6;
-  color: #222;
-}
-
-.text-center{
-  text-align: center;
-}
-
-.text-right{
-  text-align: right;
-}
-
-.text-justify{
-  text-align: justify;
-}
-
-.text-nodeco{
-  text-decoration: none;
-}
-.text-nodeco-black{
-  text-decoration: none;
-  color: #222;
-}
-
-.text-minimal{
-  font-size: 0.7em;
-}
-
-.text-small{
-  font-size: 0.9em;
-}
-
-.only-reader{
-  font-size: 0;
-}
-
-section{
-  padding-top: 2rem;
-  padding-bottom: 2rem;
-  margin-bottom: 0;
-}
-q, blockquote{
-  font-style: italic;
-}
-
-
-img {
-  display: block;
-  margin-left: auto;
-  margin-right: auto;
-  margin-top: 3ex;
-  margin-bottom: 3ex;
-}
-img.round{
-  border-radius: 50%;
-}
-
-
-hr.short{
-  width: 100px;
-}
-
-
-.bar-bottom {
-  border-top: 1px solid #eee;
-  position: relative;
-  width: 100%;
-  margin: 0 auto;
-  margin-top: 10ex;
-  padding: 1rem 0;
-  box-sizing: border-box;
-
-  font-size: 70%;
-}
-
-
-
-
-/*
- * Container
- */
-.container {
-  max-width: 800px;
-  margin: auto;
-}
-
-
-
-.mainheader{
-  top: 0;
-  display: block;
-  width: 100%;
-  background: #fff;
-  z-index: 99;
-  border-top: 1px solid #eee;
-  border-bottom: 1px solid #eee;
-  margin-bottom: 6.5rem;
-}
-.navbar {
-  width: 100%;
-  }
-.navbar-link,
-.navbar-control{
-  text-transform: uppercase;
-  font-size: 11px;
-  font-weight: 600;
-  letter-spacing: .2rem;
-  text-decoration: none;
-  line-height: 6.5rem;
-  display: inline-block;
-  color: #222;
-  }
-.navbar-right,
-.navbar-left{
-  display: inline;
-}
-.navbar-link.active,
-.navbar-link:active {
-  color: #33C3F0;
-}
-.navbar-separator{
-  margin: 0 auto;
-}
-
-
-/* Large devices everything inline and the header floating
- */
-@media (min-width: 801px) {
-  .link-right {
-    margin-left: 15px;
-    margin-right: 0px;
-  }
-  .link-left{
-    margin-right: 25px;
-  }
-  .nav-right{
-    text-align: right;
-  }
-  .navbar-right{
-    float: right;
-  }
-  .navbar-separator{
-    display: none;
-  }
-
-}
-
-/* Smaller devices leave the header at the top of the page and make it more
- * vertical */
-@media (max-width: 800px){
-  /* Main navbar toggle */
-  .navbar-link{
-    margin-left: 3ex;
-    margin-right: 3ex;
-  }
-  .navbar-right,
-  .navbar-left{
-    width: 100%;
-    min-width: 100%;
-    display: inline-flex;
-    flex: 1;
-    -webkit-flex: 1; /* Safari 6.1+ */
-    -ms-flex: 1; /* IE 10 */
-    justify-content: space-around;
-    flex-flow: row;
-  }
-  .navbar-left{
-    flex-flow: row wrap;
-  }
-
-  .link-right{
-    margin: auto;
-    line-height: 5rem;
-  }
-}
-
-/* Typography (overrides skeleton)
- */
-h1, h2, h3, h4, h5, h6 {
-  text-decoration: none;
-  margin-top: 1ex;
-  margin-bottom: 0;
-  line-height: 2;
-  font-weight: 300;
-}
-h1.main-title {
-  font-size: 4.5rem; line-height: 1;  text-align: center;
-  margin-bottom: 2rem;
-  margin-top: 2rem;
-  font-family: "LatoLatinLightWeb", Helvetica, Arial, sans-serif;
-}
-h1 span.subtitle{
-  font-size: 2.5rem;
-}
-h2.entry-title{
-  font-size: 3.0rem; line-height: 1.2;
-}
-h1 { font-size: 3.0rem; }
-h2 { font-size: 2.8rem; }
-h3 { font-size: 2.3rem; }
-h4 { font-size: 2.1rem; }
-h5 { font-size: 1.8rem; }
-h6 { font-size: 1.5rem; }
-.hentry .entry-content h1{ font-size: 2.2rem; }
-.hentry .entry-content h2{ font-size: 2.0rem; }
-.hentry .entry-content h3{ font-size: 1.8rem; }
-.hentry .entry-content h4{ font-size: 1.6rem; }
-.hentry .entry-content h5{ font-size: 1.4rem; }
-.hentry .entry-content h6{ font-size: 1.2rem; }
-
-@media (min-width: 550px) {
-  h1.main-title {
-    font-size: 5.0rem;
-  }
-  h2.entry-title{
-    font-size: 4.0rem;
-  }
-  h1 { font-size: 4.2rem; }
-  h2 { font-size: 3.2rem; }
-  h3 { font-size: 2.7rem; }
-  h4 { font-size: 2.2rem; }
-  h5 { font-size: 2.0rem; }
-  h6 { font-size: 1.7rem; }
-}
-
-p {
-  font-size: 1.7rem;
-  text-align: justify;
-}
-
-/* Image | text
- */
-.card-picture *{
-  height: auto;
-  width:  100%;
-}
-.card-picture{
-  margin-left: auto;
-  margin-right: auto;
-  margin-top: 2ex;
-  margin-bottom: 2ex;
-  height: auto;
-  width: 150px;
-  min-width: 150px;
-}
-@media (min-width: 800px){ /*more than a tablet*/
-  .card{
-    margin-top: 3ex;
-    margin-bottom: 3ex;
-
-    width: 100%;
-    min-width: 100%;
-    display: inline-flex;
-    flex: 1;
-    -webkit-flex: 1; /* Safari 6.1+ */
-    -ms-flex: 1; /* IE 10 */
-    justify-content: space-around;
-    align-items: center;
-  }
-
-  .card-picture{
-    margin: 2ex;
-  }
-
-  .card-data{
-    flex-grow: 2;
-    flex-shrink: 2;
-    margin-left: 3ex;
-  }
-}
-
-
-.entry-content{
-  margin-top: 1rem;
-}
-
-.entry-content table{
-  margin-left: auto;
-  margin-right: auto;
-}
-
-ol, ul {
-  font-size: 1.7rem;
-  list-style-position: outside;
-  margin-left:  3rem;
-  margin-right: 3rem;
-}
-li{
-  padding-left: 1ex;
-}
-#post-list{
-  list-style: none;
-  margin-left: 0;
-  margin-right: 0;
-}
-#post-list li{
-  padding-left: 0;
-}
-
-.footer-logo{
-  width:  120px;
-  margin-top: 0;
-}
-.post-info{
-  margin-bottom: 3rem;
-}
-
-
-/* News section in the first page
- */
-
-.hentry p{ /* Reduce margin in the news section*/
-  margin-bottom: 1ex;
-}
-
-.published{
-  font-style: italic
-}
-
-@media (min-width: 800px){ /*more than a tablet*/
-  .hentry header{
-    width: 100%;
-    min-width: 100%;
-    display: inline-flex;
-    flex: 1;
-    -webkit-flex: 1; /* Safari 6.1+ */
-    -ms-flex: 1; /* IE 10 */
-    justify-content: space-between;
-    flex-wrap: nowrap;
-    align-items: baseline;
-  }
-  .published{
-    font-style: normal;
-  }
-}
-
-
-/* Code rendering
- */
-pre > code {
-  overflow: auto;
-  border: none;
-  border-radius: 0;
-}
diff --git a/themes/elenq/templates/_logo.svg b/themes/elenq/templates/_logo.svg
new file mode 100644
index 0000000..a20feb4
--- /dev/null
+++ b/themes/elenq/templates/_logo.svg
@@ -0,0 +1,61 @@
+<svg xmlns="http://www.w3.org/2000/svg"
+         viewBox="0 0 177.165 88.583"
+         height="100px"
+         width="150px"
+         class="title-image"
+         title="ElenQ Technology"
+         alt="ElenQ Technology">
+      <g font-weight="100"
+         font-family="Armata"
+         letter-spacing="0"
+         word-spacing="0">
+      <g style="line-height:125%">
+      <path
+        style="-inkscape-font-specification:'Armata Thin'"
+        d="M14.289
+        54.201h27.525v-2.7h-24.3v-17.25h20.55v-2.7h-20.55v-15.9h24.3v-2.7H14.289v41.25zm32.666
+        0h3.225v-41.25h-3.225v41.25zm8.414-14.775c0 11.25 8.7 15.6 16.5 15.6 11.85
+        0 15.3-4.725 16.05-9.225h-3.6c-.75 1.875-2.175 6-12.45 6-5.925
+        0-12.45-3.6-12.975-11.025h29.025v-3.225c-.75-10.425-6.45-15.75-16.05-15.75-9.6
+        0-16.5 7.2-16.5 17.625zm3.675-1.875c1.05-7.875 5.175-12.6 13.125-12.6s11.4
+        5.1 12.15 12.6H59.044zm34.275 16.65h3.225V28.326c1.575-2.025 5.025-3.225
+        10.2-3.225 3.6 0 8.1 1.35 8.1
+        7.65v21.45h3.45v-21.45c0-8.25-6.15-10.95-11.55-10.95-5.55 0-9.075 1.35-10.2
+        4.05v-3.225h-3.225v31.575zm29.944-20.625c0 11.175 9.3 21.45 20.625 21.45 4.8 0
+        9.15-1.875 12.675-4.8l4.8 3.975h3.75l-6.6-5.775c3.675-3.975 6-9.3 6-14.85
+        0-11.1-9.225-21.375-20.625-21.375s-20.625 10.2-20.625 21.375zm3.3 0c0-9.15
+        7.575-18.3 17.325-18.3s17.325 9.15 17.325 18.3-7.575 18.375-17.325
+        18.375-17.325-9.225-17.325-18.375z"
+        font-size="75"/>
+      </g>
+      <g style="line-height:125%">
+      <path style="-inkscape-font-specification:'Armata Thin'"
+            d="M28.71
+            64.185h4.038v12.184h1.021V64.185h4.061v-.879h-9.12v.879zm10.606
+            12.184h8.716v-.855h-7.695V70.05h6.508v-.855h-6.508V64.16h7.695v-.855h-8.716V76.37zm10.225-6.532c0
+            4.275 1.972 6.793 5.63 6.793 2.802 0 5.153-1.496 5.153-3.634h-1.14c0
+            1.306-1.568 2.613-4.014 2.613-3.159 0-4.512-3.064-4.512-5.772 0-3.11 1.828-5.77
+            4.607-5.77 2.423 0 3.919 1.258 3.919
+            2.683h1.14c0-2.351-2.351-3.681-5.154-3.681-3.895 0-5.629 3.467-5.629
+            6.768zm12.412
+            6.532h1.02V70.05h6.508v6.318h1.022V63.306H69.48v5.89h-6.507v-5.89h-1.021V76.37zm10.344
+            0h1.045V65.254l7.196
+            11.115h1.021V63.306h-1.02V74.54l-7.197-11.234h-1.045V76.37zm10.897-6.532c0 3.54
+            2.945 6.793 6.532 6.793 3.586 0 6.53-3.254 6.53-6.793
+            0-3.515-2.92-6.768-6.53-6.768-3.61 0-6.532 3.23-6.532 6.768zm1.045 0c0-2.897
+            2.4-5.795 5.487-5.795s5.486 2.898 5.486 5.795c0 2.898-2.399 5.82-5.486
+            5.82-3.088 0-5.487-2.922-5.487-5.82zm13.616
+            6.532h7.909v-1.022h-6.888v-12.04h-1.021v13.062zm9.368-6.532c0 3.54 2.945 6.793
+            6.531 6.793s6.531-3.254 6.531-6.793c0-3.515-2.921-6.768-6.531-6.768s-6.531
+            3.23-6.531 6.768zm1.045 0c0-2.897 2.398-5.795 5.486-5.795 3.087 0 5.486 2.898
+            5.486 5.795 0 2.898-2.399 5.82-5.486 5.82-3.088
+            0-5.486-2.922-5.486-5.82zm13.544 0c0 4.275 1.971 6.793 5.629 6.793 1.638 0
+            3.087-.523 4.013-1.378v1.117h1.022v-6.413h-5.225v1.021h4.203v2.02c0 1.305-1.567
+            2.612-4.013 2.612-3.16 0-4.513-3.064-4.513-5.772 0-3.11 1.829-5.77 4.608-5.77
+            2.422 0 3.918 1.258 3.918 2.683h1.022c0-2.351-2.233-3.681-5.035-3.681-3.895
+            0-5.63 3.467-5.63 6.768zm12.173-6.531l4.75
+            7.624v5.439h1.02v-5.44l4.775-7.623h-1.14l-4.133 6.65-4.109-6.65h-1.163z"
+            font-size="23.75"/>
+      </g>
+      </g>
+    </svg>
diff --git a/themes/elenq/templates/base.html b/themes/elenq/templates/base.html
index 3a3f680..79973e1 100644
--- a/themes/elenq/templates/base.html
+++ b/themes/elenq/templates/base.html
@@ -32,8 +32,8 @@
     {% endblock head %}
 
     <link rel="stylesheet" href="{{ SITEURL }}/{{ THEME_STATIC_DIR }}/css/normalize.css">
-    <link rel="stylesheet" href="{{ SITEURL }}/{{ THEME_STATIC_DIR }}/css/skeleton.css">
-    <link rel="stylesheet" href="{{ SITEURL }}/{{ THEME_STATIC_DIR }}/css/style.css">
+    <link rel="stylesheet" href="{{ SITEURL }}/{{ THEME_STATIC_DIR }}/css/elenq.css">
+    <link rel="stylesheet" href="{{ SITEURL }}/{{ THEME_STATIC_DIR }}/css/elenq-pelican.css">
     <link rel="stylesheet" href="{{ SITEURL }}/{{ THEME_STATIC_DIR }}/css/fonts.css">
     <link rel="stylesheet" href="{{ SITEURL }}/{{ THEME_STATIC_DIR }}/css/prism.css">
 
@@ -77,7 +77,7 @@
 
         <div class="container text-center">
           <a href="https://elenq.tech">
-            <img class="footer-logo"src="{{ SITEURL }}/{{ THEME_STATIC_DIR }}/img/ElenQTechLogoSimple.png" alt="ElenQ Technology">
+              {% include "_logo.svg" %}
           </a>
         </div>
       </footer><!-- /#contentinfo -->