jekyll-theme-mehdix-rtl 0.1.0

data/_sass/_print.scss

@@ -0,0 +1,9 @@
+@media print { 
+	/* your print styles go here */
+	.site-header, .site-footer { display: none; } 
+	#disqus_thread { display: none; }
+
+	body { background-image: none;  } 
+	h1 { font-size: 18pt; } 
+	h2 { font-size: 16pt; color: #000; }
+}

data/_sass/_ux-theme.scss

@@ -0,0 +1,361 @@
+ul, ol {
+  margin-right: 30px;
+  list-style-type: persian;
+}
+
+a {
+  color: $text-color;
+}
+
+a:hover {
+  text-decoration:none;
+  color: $brand-color;
+}
+
+a:visited {
+  color: darken($brand-color, 20%);
+}
+
+h1, h2:not(.footer-heading), h3, h4, h5, h6 {
+  color: darken($header-color, 20%);
+}
+
+
+/* Style for glyphs in quotation marks, courtesy of EnigmaRM http://stackoverflow.com/a/16326442/157216 */
+blockquote {
+  border-left: none;
+  padding-right: $spacing-unit / 2;
+  padding-left: none;
+  font-size: x-large;
+  margin: 0.25em 0;
+  padding: 0.35em;
+  line-height: 1.45;
+  position: relative;
+  background-color: lighten($grey-color, 47%);
+}
+
+blockquote p {
+  border-right: 4px solid $brand-color;
+  padding-right: $spacing-unit / 2;
+}
+
+pre {
+  overflow-x: auto;
+}
+
+/* To adapt different screen sizes, mostly for code blocks */
+@media screen and (max-width: 240px){
+  pre {
+    width: 200px;
+  }
+
+  li .list-meta-col {
+    display: none;
+  }
+}
+
+@media screen and (max-width: 540px){
+  li .list-meta-col {
+    display: none;
+  }
+}
+
+@media screen and (min-width: 240px) and (max-width: 280px){
+  pre {
+    width: 240px;
+  }
+}
+
+/*Including Apple iPhone 5 */
+@media screen and (min-width: 280px) and (max-width: 320px){
+  pre {
+    width: 260px;
+  }
+}
+
+/*Including Apple iPhone 5 */
+@media screen and (min-width: 321px) and (max-width: 360px) {
+  pre {
+    width: 300px;
+  }
+}
+
+@media screen and (min-width: 361px) and (max-width: 400px) {
+  pre {
+    width: 340px;
+  }
+}
+
+/* Nexus 4 */
+@media screen and (min-width: 384px) and (max-width: 384px) {
+  pre {
+    width: 330px;
+  }
+}
+
+
+@media screen and (min-width: 401px) and (max-width: 540px) {
+  pre {
+    width: 365px;
+  }
+}
+
+@media screen and (min-width: 541px) and (max-width: 640px) {
+  pre {
+    width: 500px;
+  }
+}
+
+@media screen and (min-width: 641px) and (max-width: 768px) {
+  pre {
+    width: 600px;
+  }
+}
+
+/* iPad */
+@media screen and (min-width: 768px) and (max-width: 768px) {
+  pre {
+    width: 705px;
+  }
+}
+
+/* Apple iPhone 6 */
+@media screen and (min-width: 375px) and (max-width: 375px) {
+  pre {
+    width: 323px;
+  }
+}
+
+/* Apple iPhone 6 Plus */
+@media screen and (min-width: 414px) and (max-width: 414px) {
+  pre {
+    width: 363px;
+  }
+}
+
+.site-header, .site-footer {
+  background:
+  radial-gradient(black 15%, transparent 16%) 0 0,
+  radial-gradient(black 15%, transparent 16%) 8px 8px,
+  radial-gradient(rgba(255,255,255,.1) 15%, transparent 20%) 0 1px,
+  radial-gradient(rgba(255,255,255,.1) 15%, transparent 20%) 8px 9px;
+  background-color:#282828;
+  background-size:16px 16px;
+}
+
+.site-title {
+  float: right;
+}
+
+.site-nav {
+  float: left;
+  @include media-query($on-palm) {
+    right: -webkit-calc(88% - (#{$spacing-unit} / 2));
+    right:         calc(88% - (#{$spacing-unit} / 2));
+  }
+}
+
+.footer-col {
+  float: right;
+}
+
+/* Correcting direction for code blocks */
+.code, .highlighter-coderay, .highlight {
+  direction: ltr;
+}
+
+.post-title, a.post-link {
+  color: darken($brand-color, 10%);
+}
+
+/* Center page titles */
+.post-title {
+  text-align: center;
+  font-weight: bold;
+  font-size: 2em;
+}
+
+.footnotes {
+  font-size: small;
+}
+
+/* To center images */
+.center {
+  text-align: center;
+}
+
+.post-meta {
+  @extend .center;
+  //font-family: 'Open Sans', sans-serif;
+}
+
+/* Dotted bottom border for links */
+.post-content p a:hover {
+  border-bottom: 1px dotted;
+  color: $brand-color;
+}
+
+.post-content a {
+ border-bottom: 1px dotted;
+ color: darken($brand-color, 10%);
+}
+
+.site-footer{
+  padding-bottom: 0px;
+}
+
+/* Contrast for header and footer */
+.site-header, .site-footer {
+  border-top: none;
+  color: white;
+}
+
+.site-header{
+  border-bottom: none;
+}
+
+/* Overwrite colors for header and footer */
+.site-title, .site-title:visited {
+  color: white;
+}
+
+.site-title a, .site-footer a {
+  color: white;
+}
+
+/* Fix incorrect video sizes in post content (which messes the gradient lines */
+  .post-content iframe {
+    width: 100%
+  }
+
+  .border {
+    border-style: dotted;
+    border-radius: 10px;
+    border-color: $brand-color;
+  }
+
+  .post-image {
+    text-align: center;
+    img {
+      width: 50%;
+      display: inline;
+    }
+  }
+
+  .list-meta-col {
+    display: inline-block;
+    width: 160px;
+    text-align: right;
+  }
+
+  #post-list {
+    list-style: none;
+  }
+
+  #post-list a {
+    color: $text-color;
+  }
+
+  #post-list a:hover {
+    color: $brand-color;
+  }
+
+  /* For license text */
+  #license {
+    font-style: small;
+  }
+
+  #forkme {
+    @include media-query($on-palm) {
+      display: none;
+    }
+  }
+
+  /* Tag cloud sets. Numbers demonstrate repeat frequency for each tag */
+  
+  #post-tags  {
+    vertical-align: middle;
+
+    > i {
+      background-image: url($assets-dir + '/img/noun_4018.png');
+      display: inline-block;
+      width: 14px;
+      height: 14px;
+      margin-top: 1px;
+      line-height: 14px;
+      background-repeat: no-repeat;
+      background-size: 15px 15px;
+    }
+
+    > a {
+      vertical-align: middle;
+    }
+
+  }
+
+  #tag-cloud [class^=set-] {
+    color: $text-color;
+
+    &:hover {
+      color: $brand-color;
+    }
+  }
+
+  .set-1 {
+    font-size: 0.7em;
+  }
+
+  .set-2 {
+    font-size: 0.8em;
+  }
+
+  .set-3 {
+    font-size: 0.9em;
+  }
+
+  .set-4 {
+    font-size: 1.0em;
+  }
+
+  .set-5 {
+    font-size: 1.1em;
+  }
+
+  .set-6 {
+    font-size: 1.2em;
+  }
+
+  .set-7 {
+    font-size: 1.3em;
+  }
+
+  .set-8 {
+    font-size: 1.4em;
+  }
+
+  .set-9 {
+    font-size: 1.5em;
+  }
+
+  .set-10 {
+    font-size: 1.6em;
+  }
+
+@counter-style abjad {
+  system: additive;
+  range: 1 1000;
+  additive-symbols: 1000 "\63A", 900 "\638", 800 "\636", 700 "\630", 600 "\62E", 500 "\62B", 400 "\62A", 300 "\634",
+   200 "\631", 100 "\642", 90 "\635", 80 "\641", 70 "\639", 60 "\633", 50 "\646", 40 "\645", 30 "\644",
+   20 "\6A9", 10 "\649", 9 "\637", 8 "\62D", 7 "\632", 6 "\648", 5 "\FEEB", 4 "\62F", 3 "\62C",
+   2 "\628", 1 "\627\644\641";
+}
+
+@counter-style abjad-persian {
+  system: additive;
+  range: 1 1000;
+  additive-symbols: 1000 "\63A", 900 "\638", 800 "\636", 700 "\630", 600 "\62E", 500 "\62B", 400 "\62A", 300 "\634",
+   200 "\631", 100 "\642", 90 "\635", 80 "\641", 70 "\639", 60 "\633", 50 "\646", 40 "\645", 30 "\644",
+   20 "\6AF", 10 "\649", 9 "\637", 8 "\62D", 7 "\698", 6 "\648", 5 "\FEEB", 4 "\62F", 3 "\686",
+   2 "\67E", 1 "\627\644\641";
+  suffix: ". ";
+}

data/assets/css/main.scss

@@ -0,0 +1,63 @@
+---
+# Only the main Sass file needs front matter (the dashes are enough)
+---
+@charset "utf-8";
+/* Droid Arabic Naskh */
+@import url(https://fonts.googleapis.com/earlyaccess/droidarabicnaskh.css);
+
+// Our variables
+$base-font-family: 'Droid Arabic Naskh', Arial, sans-serif;
+$base-font-size:   16px;
+$small-font-size:  $base-font-size * 0.875;
+$base-line-height: normal;
+$spacing-unit:     30px;
+
+/* Palette from 
+https://coolors.co/app/000000-14213d-fca311-e5e5e5-ffffff 
+$brand-color:      #fca311;
+$anti-color:       #e5e5e5;
+$text-color:       #000000;
+$background-color: #ffffff;
+$header-color:     #14213d;
+*/
+
+/* Palett source:
+https://coolors.co/app/2b2d42-8d99ae-edf2f4-ef233c-d90429 */
+$brand-color:      #d90429;
+$anti-color:       #8d99ae;
+$text-color:       #2b2d42;
+$background-color: #ffffff; /* original one was edf2f4 */
+$header-color:     #ef233c;
+
+$grey-color:       gray;
+$grey-color-light: lighten($grey-color, 40%);
+$grey-color-dark:  darken($grey-color, 25%);
+
+$on-palm:          600px;
+$on-laptop:        800px;
+
+// Store asset directory to be used in imports
+$assets-dir:	   '{{ "assets" | absolute_url }}';
+
+
+// Use media queries like this:
+// @include media-query($palm) {
+//     .wrapper {
+//         padding-right: $spacing-unit / 2;
+//         padding-left: $spacing-unit / 2;
+//     }
+// }
+@mixin media-query($device) {
+    @media screen and (max-width: $device) {
+        @content;
+    }
+}
+
+// Import partials from `sass_dir` (defaults to `_sass`)
+@import
+        "base",
+        "layout",
+	"print",
+        "ux-theme"
+;
+