layout changes,

Author: danielstaleiny

notes.org

@@ -0,0 +1,2 @@
+* Tasks
+** TODO Add support for images, think about extenstion, and optimize images, should it be local or something like serverless resizing should be used ? something which everybody can use.

src/_css/components/button.css

@@ -1,8 +1,24 @@
-.btn {
-    @apply no-underline shadow;
-    padding: 0.5em 2em 0.49em;
-    transition: all 0.2s ease 0s;
+.btn, .btn:visited {
+    @apply no-underline border-black;
+    padding: 0.25em 0.5em 0.24em;
+    transition: border 0.2s ease 0s;
 }
+
+.btn:hover, .btn:focus {
+  @apply border-orange-base;
+}
+
+@screen t {
+  .btn, .btn:visited {
+    @apply border-bg;
+  }
+
+  .btn:hover,.btn:focus {
+    @apply border-black;
+  }
+}
+
+
 .btn-black {
     @apply text-white bg-black border-2 border-transparent;
     fill: config('colors.white');

src/_css/critical.defaults.css

@@ -21,33 +21,43 @@ code {
     @apply bg-gray-300 p-0.5 font-sans;
 }
 
+h1,
+h2,
+h3,
+h4,
 .h1,
 .h2,
 .h3,
 .h4 {
     @apply tracking-tight;
 }
 
+
 .h1 {
     @apply mt-3 mb-1 text-h1 leading-tight;
 }
 
+h2,
 .h2 {
     @apply mt-2 mb-0.5 text-h2 leading-tight;
 }
 
+h3,
 .h3 {
     @apply mt-2 mb-0.5 text-h3 leading-tight;
 }
 
+h4,
 .h4 {
     @apply mt-1 mb-0 text-h4 leading-snug;
 }
 
+h5,
 .h5 {
     @apply mt-1 mb-0 text-xl leading-normal;
 }
 
+h6,
 .h6 {
     @apply mt-1 mb-0 text-lg leading-normal;
 }
@@ -63,21 +73,27 @@ code {
 }
 
 a {
-    @apply no-underline cursor-pointer outline-none text-black border-b;
+    /* @apply underline cursor-pointer; */
+    @apply no-underline cursor-pointer outline-none text-fg border-fg border-b-0.125;
+}
+
+
+a:visited {
+    @apply border-orange-base;
 }
 
 a:hover {
-    @apply bg-green-500;
+    @apply border-green-700 ;
 }
 
 a:active {
-    /* @apply bg-yellow; */
+    @apply border-green-400;
 }
-
-a:visited {
-    /* @apply bg-red; */
+.btn {
+    @apply border-bg;
 }
 
+
 /* Sets so the footer stay always on the bottom. */
 main {
     @apply flex-1;

src/_css/critical.typography.css

@@ -44,41 +44,41 @@ body {
     -webkit-font-smoothing: antialiased;
     text-rendering: optimizeLegibility;
     font-feature-settings: "liga" on;
-    @apply text-black;
+    @apply text-fg bg-bg;
 }
 @media (min-width: 46.25em) and (max-width: 50em){
     body {
-        line-height: 1.7;
+        line-height: 1.5;
     }
 }
 @media (min-width: 50em) and (max-width: 63.75em) {
     body {
-        line-height: 1.7;
+        line-height: 1.5;
     }
 }
 @media (min-width: 63.75em) and (max-width: 79em) {
     body {
-        line-height: 1.7;
+        line-height: 1.5;
     }
 }
 @media (min-width: 79em) and (max-width: 125em) {
     body {
-        line-height: 1.8;
+        line-height: 1.6;
     }
 }
 @media (min-width: 125em) and (max-width: 200em) {
     body {
-        line-height: 1.8;
+        line-height: 1.6;
     }
 }
 @media (min-width: 200em) and (max-width: 400em) {
     body {
-        line-height: 1.8;
+        line-height: 1.6;
     }
 }
 @media (min-width: 400em) {
     body {
-        line-height: 1.8;
+        line-height: 1.6;
     }
 }
 

src/_css/tailwind.config.js

@@ -27,8 +27,10 @@ module.exports = {
     },
     colors: {
       transparent: 'transparent',
-      black: '#112',
-      white: '#fffff8',
+      black: 'black',
+      fg: '#111111',
+      white: '#ffffff',
+      bg: '#fbf8ef',
       gray: {
         100: '#f7fafc',
         200: '#edf2f7',
@@ -52,6 +54,7 @@ module.exports = {
         900: '#742a2a',
       },
       orange: {
+        base: '#df967c',
         100: '#fffaf0',
         200: '#feebc8',
         300: '#fbd38d',

src/_img/favicon.ico

@@ -10,6 +10,8 @@
     <meta name="author" content="{{ author }}">
     <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
     <meta name="theme-color" content="white"/>
+    <meta name="theme-color" content="white"/>
+    <link rel="shortcut icon" href="_img/favicon.ico" type="image/x-icon">
     <meta name="robots" content="noindex">  <!-- TODO remove this when you are happy with site -->
   {% endblock %}
 

src/_includes/extends/html5boilerplate.njk

@@ -0,0 +1,13 @@
+  <header class="container">
+    <div class="mx-auto max-w-40 w-full mt-1 text-right t:text-left">
+    <ul class="italic space-y-1 t:space-y-auto text-lg t:flex t:flex-row">
+        <li><a class="btn" href="/">home</a></li>
+        <li><a class="btn" href="/b">blog</a></li>
+        <li><a class="btn" href="/a">about</a></li>
+        <li><a class="btn" href="/c">curation</a></li>
+        <li><a class="btn" href="/p">photos</a></li>
+        <li class="flex-1"><a class="btn" href="/feed.xml">follow/rss</a></li>
+        <li><h1><a class="no-underline border-none" href="daniel.rafaj.dev">Daniel Rafaj</a></h1></li>
+    </ul>
+    </div>
+  </header>

src/_includes/partials/header.njk

@@ -0,0 +1,17 @@
+---
+layout: base.njk
+---
+<main class="page">
+    {% include "partials/header.njk" %}
+    <section class="container">
+      <div class="mx-auto max-w-40 w-full">
+        <h2 class="h1">
+          {{ title }}
+        </h2>
+        <p class="text-right italic">
+          Written on {{date.toUTCString().substring(0, 16)}}
+        </p>
+        {{ content | safe }}
+      </div>
+    </section>
+</main>

src/_layouts/blog.njk

@@ -0,0 +1,11 @@
+---
+layout: base.njk
+---
+<main class="page">
+    {% include "partials/header.njk" %}
+    <section class="container">
+      <div class="mx-auto max-w-40 w-full">
+            {{ content | safe }}
+      </div>
+    </section>
+</main>

src/_layouts/root.njk

@@ -0,0 +1,12 @@
+---
+layout: blog.njk
+date: 2020-11-04
+tags:
+  - blog
+  - post
+title: First blog post
+description: First post describing something very unique and first.
+---
+Any text would do.
+
+

src/b/first-post.md

@@ -0,0 +1,12 @@
+---
+layout: blog.njk
+date: 2020-11-03
+tags:
+  - blog
+  - post
+title: Second blog post
+description: First post describing something very unique and first.
+---
+<p>
+  Any text would do.
+</p>

src/b/second-post.njk

@@ -1,10 +1,15 @@
 ---
-layout: base.njk
-title: Web
+layout: root.njk
+title: Web by Daniel Rafaj
 description: Web what was ment to be
 ---
-Hello there
-
-<div class="page">
-<a href="">hello</a>
-</div>
+<h2 class="mt-3">Blog posts</h2>
+<p>
+  Eu non diam phasellus vestibulum <a href="">lorem sed risus</a> ultricies tristique nulla. Sed vulputate odio ut enim blandit volutpat maecenas volutpat blandit aliquam etiam erat velit, scelerisque in dictum non, consectetur!
+</p>
+{% for post in collections.blog | reverse %}
+  <div>
+    <h3><a href="{{post.url}}">{{post.data.title}}</a></h3>
+    <em class="italic">{{ post.date.toUTCString().substring(0, 16) }}</em>
+  </div>
+{% endfor %}

src/index.njk

@@ -43,8 +43,10 @@ const txt = Object.keys(config.cheatsheet).map((key) => {
     const tip = !!config.cheatsheet[key][key2].tip
       ? `${config.cheatsheet[key][key2].tip}`
       : ''
-    const desc = ''
-    // const desc = !!config.cheatsheet[key][key2].desc ? ` - ${config.cheatsheet[key][key2].desc}\n` : ''
+    // const desc = ''
+    const desc = !!config.cheatsheet[key][key2].desc
+      ? ` - ${config.cheatsheet[key][key2].desc}\n`
+      : ''
 
     // With values
     // return `${subhead} ${variant} ${tip}\n${desc}  ${config.cheatsheet[key][key2].value.map(obj=>{return `${Object.keys(obj).map(key3=>{return `${key3}: ${obj[key3]}`})}`}).join('\n  ')}`