Merge pull request #159 from mortendk/imagesizes-srcset

Imagesizes srcset
mortendk · Sep 26, 2022 · bc44a56 · bc44a56
2 parents d79239e + e0346d3
commit bc44a56
Show file tree

Hide file tree

Showing 17 changed files with 94 additions and 111 deletions.
diff --git a/src/content/data/site.json b/src/content/data/site.json
@@ -1,14 +1,14 @@
 {
-  "zip": "",
+  "zip": "1550",
   "humantxt": "/* TEAM */\n\n/* THANKS */\n\n/* SITE */\nStandards: HTML5, CSS3\nBuild on: 11ty with magic \n\n/* Software + Assets */\nvscode: https://code.visualstudio.com\nresponsively: https://responsively.app\n\nhttps://saga11.dev\nhttps://11ty.dev\nhttps://tailwindcss.com\n\nIcons\nhttps://heroicons.com/\n",
   "color": "#3a5961",
-  "keywords": "",
+  "keywords": "11ty",
   "header": "",
   "authoremail": "",
   "rss": true,
-  "adress": "",
+  "adress": "Regnbuepladsen",
   "authorname": "",
-  "country": "",
+  "country": "denmark",
   "errorpage": "404 Ush It haz broken",
   "title": "Saga11",
   "footer": "[saga11.dev](https://saga11.dev)\n",

diff --git a/src/content/post/2022/09/19_hello-world.md b/src/content/post/2022/09/19_hello-world.md
@@ -44,4 +44,6 @@ this is *italic* and this is **bold**  and this is a [link](https://saga11.de
 
 and an image
 
-![image alt ](/upload/spaceship.png "This is the title for an image")
+![image alt ](/upload/spaceship.png "This is the title for an image")
+
+Lorem ipsum dolor sit amet consectetur, adipisicing elit. Consectetur aliquid accusantium alias sunt dolore perspiciatis, debitis distinctio quam magnam neque, eaque voluptates error dignissimos dicta vero commodi? Omnis, eaque ipsum?
diff --git a/src/content/tags/saga11.md b/src/content/tags/saga11.md
@@ -1,4 +1,4 @@
 ---
-title: Saga11
+title: Saga 11 eleven
 eleventyExcludeFromCollections: false
 ---
diff --git a/src/system/netlifycms/config.njk b/src/system/netlifycms/config.njk
@@ -663,13 +663,13 @@ collections:
         field: tags
 
     fields:
-      - { label: "Title", name: "title", widget: "string", default: "Notification!"  }
+      - { label: "Title", name: "title", widget: "string"}
       - label: status
         name: "status"
         widget: "select"
         multiple: false
         options: ["info", "warning", "alert"]
-        default: ["warning"]
+        default: "info"
       - label: "text"
         name: "text"
         widget: "markdown"
@@ -678,7 +678,6 @@ collections:
           - italic
           - link
         required: false
-
       - label: "Body"
         name: "body"
         widget: "markdown"
@@ -694,8 +693,7 @@ collections:
           - image
           - code-block
         required: false
-
-      - { label: "link to page", name: "showlink", widget: "boolean", default: true }
+      - { label: "link to page", name: "showlink", widget: "boolean", default: false }
 
       # Date
       - label: "Date"
@@ -1012,7 +1010,7 @@ collections:
     folder: "src/themes/{{ theme }}/includes/icons"
 {% raw %}
     slug: "{{title}}"
-    hide: false
+    hide: true
     format: frontmatter
     extension: svg
     fields:

diff --git a/src/themes/grunn/includes/components/price/price.njk b/src/themes/grunn/includes/components/price/price.njk
@@ -27,7 +27,7 @@
         {{ item.title }}
       </h3>
 
-      <div class="text-3xl text-cyan-800 dark:bg-cyan-900 dark:text-white bg-slate-50 dark:bg-slate-800 text-center py-4 -ml-4 -mr-4 mb-4">
+      <div class="text-3xl text-cyan-800 dark:text-white bg-slate-50 dark:bg-slate-800 text-center py-4 -ml-4 -mr-4 mb-4">
         {{ item.price }}
       </div>
 

diff --git a/src/themes/grunn/includes/edit.njk b/src/themes/grunn/includes/edit.njk
@@ -1,7 +1,8 @@
 {%- if env.mode != 'prod' %}<!--  src/__includes/edit.njk -->{%- endif -%}
 
-<div class="fixed z-50 top-1/2 right-0 w-24 h-24 bg-fuchsia-600 shadow-lg flex justify-center items-center"
-x-show="isEditvisible"
+<div
+  class="fixed z-50 top-1/2 right-0 w-24 h-24 bg-fuchsia-600 shadow-lg flex justify-center items-center"
+  x-show="isEditvisible"
 >
   <a href="{{ page.filePathStem | netlifycmsedit }}"
      target="_blank" rel="noopener noreferrer nofollow"
@@ -16,6 +17,3 @@ x-show="isEditvisible"
   >Edit GitHub</a> #}
 
 </div>
-
-
-
diff --git a/src/themes/grunn/includes/footer.njk b/src/themes/grunn/includes/footer.njk
@@ -7,7 +7,7 @@ Global header for the site
 {# darkmode #}
 
 
-<footer class="flex flex-col justify-center bg-white dark:bg-slate-900 dark:text-slate-300 mt-16">
+<footer class="flex flex-col justify-center bg-white dark:bg-slate-900 dark:text-slate-300 mt-16 py-4">
 
   {% include "location.njk" %}
 
@@ -18,25 +18,25 @@ Global header for the site
   </div>
 
 
-{# user control #}
-<div class="p-4 flex flex-row space-x-4 justify-end pagewidth">
+  {# user control #}
+  <div class="p-4 flex flex-row space-x-4 justify-end pagewidth">
 
-  <button @click="darkMode = !darkMode" class="w-8" aria-label="toggle color scheme">
-    {# darkmode on #}
-    <div x-show="darkMode" class="bg-slate-200 p-2 rounded">
-      <div class="w-4 text-slate-700">{% include "svg/sun.svg" %}</div>
-    </div>
+    <button @click="darkMode = !darkMode" class="w-8" aria-label="toggle color scheme">
+      {# darkmode on #}
+      <div x-show="darkMode" class="bg-slate-200 p-2 rounded">
+        <div class="w-4 text-slate-700">{% include "svg/sun.svg" %}</div>
+      </div>
 
-    {# darkmode not actived #}
-    <div x-show="!darkMode" class="bg-slate-700 p-2 rounded">
-      <div class="w-4 text-slate-100">{% include "svg/moon.svg" %}</div>
-    </div>
-  </button>
+      {# darkmode not actived #}
+      <div x-show="!darkMode" class="bg-slate-700 p-2 rounded">
+        <div class="w-4 text-slate-100">{% include "svg/moon.svg" %}</div>
+      </div>
+    </button>
 
-  <button @click="localStorage.clear()" class="bg-slate-200 p-2 rounded w-8" aria-label="Clear Local storage from this site">
-    <div class="w-4 text-slate-700">{% include "svg/trash.svg" %}</div>
-  </button>
+    <button @click="localStorage.clear()" class="bg-slate-200 p-2 rounded w-8" aria-label="Clear Local storage from this site">
+      <div class="w-4 text-slate-700">{% include "svg/trash.svg" %}</div>
+    </button>
 
-</div>
+  </div>
 
 </footer>
diff --git a/src/themes/grunn/includes/nav/posts.njk b/src/themes/grunn/includes/nav/posts.njk
@@ -4,21 +4,23 @@ collection that graps all post .allpost is defined in .eleventy.js
 #}
 {%- if env.mode != 'prod' %}<!-- src/__includes/nav/posts.njk  -->{%- endif  -%}
 
-<nav class="" aria-label="All posts">
+<nav class="py-4" aria-label="All posts">
 
   {% for item in collections.allPosts %}
 
-    <div class="border-b border-slate-200 mb-4">
+    <div class="border-b border-slate-300 dark:border-cyan-400 py-2 mb-4">
       {# link #}
       {% if item.url in page.url -%}
-        <a href="{{ item.url }}" class="block font-bold" aria-current="page">
+        <a href="{{ item.url }}" class="block font-bold text-xl text-cyan-700 dark:text-cyan-200" aria-current="page">
           {{item.data.title}}
         </a>
       {% else %}
-        <a href="{{ item.url }}" class="block ">{{item.data.title}}</a>
+        <a href="{{ item.url }}" class="block text-slate-800 dark:text-cyan-200">
+          {{ item.data.title }}
+        </a>
       {% endif %}
       {# date #}
-      <div class="text-sm">
+      <div class="text-sm text-slate-700 dark:text-cyan-200">
         {{ item.data.date | formatDate("cccc d. MMMM yyyy HH:mm", "DK") }}
       </div>
 

diff --git a/src/themes/grunn/includes/nav/tags.njk b/src/themes/grunn/includes/nav/tags.njk
@@ -5,13 +5,17 @@ List of all tags
 {%- if env.mode != 'prod' %}<!-- __includes/nav/tags.njk  -->{%- endif  -%}
 
 <nav aria-label="All Tags" class="flex flex-row space-x-4">
+
   {% for tag in collections.tags %}
+
     {% for item in collections.all | getPage("/tag/" + tag + "/") %}
 
       <a href="/tag/{{ tag }}" class="inline-block px-2 py-1 bg-red-200 text-red-800 rounded text-sm">
-        {{ item.data.title}}
+        {{ item.data.title }}
       </a>
+
     {% endfor %}
 
   {% endfor %}
+
 </nav>
diff --git a/src/themes/grunn/layouts/post/post.njk b/src/themes/grunn/layouts/post/post.njk
@@ -7,68 +7,42 @@ saga-template-name: Post Default
 post template
 #}
 {%- if env.mode != 'prod' %}<!-- ___layouts/post/post.njk  -->{%- endif -%}
+<h1 class="text-6xl dark:text-cyan-200 pb-4">{{ title }}</h1>
 
-<article class="flex flex-col md:flex-row ">
-  <div class="md:w-2/3 ">
-
-    <h1 class="text-5xl">{{ title }}</h1>
-    <div class="aspect-video overflow-hidden">
-      {% picture
-          img=card.image,
-          width=[200,400, 800],
-          sizes="(min-width: 1600px) 50vw, 100vw",
-          css="shadow rounded-xl",
-          loading = "eager"
-      %}
-    </div>
+<div class="aspect-video overflow-hidden shadow-lg ">
+  {% picture
+      img=card.image,
+      width=[640,1280,1536],
+      sizes="(max-width: 640px) 50vw, 100vw",
+      css="",
+      loading = "eager"
+  %}
+</div>
 
-    <footer class="mb-4">
 
-      {%- for tag in tags | filtertags -%}
-        {# grap the markdown files and loop through them #}
-        {% for item in collections.all | getPage("/tag/" + tag + "/" ) %}
-          <a href="/tag/{{ tag }}">{{ item.data.title }}</a>
-        {% endfor %}
-        {# divider #}
-        {% if not loop.last %}, {% endif %}
-      {% endfor %}
+<article class="flex flex-col md:flex-row ">
+  <div class="md:w-4/6">
 
+    <footer class="mt-4 text-lg flex flex-row space-x-4">
+      {% include "nav/tags.njk" %}
       <time>{{ date | formatDate("DDD  T", "DK") }}</time>
-
     </footer>
 
-  <div class="prose prose-xl dark:prose-invert">
-    {{ content | safe }}
-  </div>
-
+    <div class="prose prose-xl max-w-full dark:prose-invert">
+      {{ content | safe }}
+    </div>
 
-  {# Pre next nav #}
-  {% include "nav/post-pre-next.njk" %}
+    {# Pre next nav #}
+    {% include "nav/post-pre-next.njk" %}
 
   </div>
   {# sidebar #}
-  <div class="md:w-1/3 md:ml-4">
-
-  {% picture
-        img=image,
-        alt='',
-        width=[400],
-        sizes="(min-width: 1600px) 50vw, 100vw",
-        css="shadow rounded ",
-        loading = "eager"
-    %}
-
-
-    {% include "share.njk" %}
-
+  <div class="md:w-2/6 md:ml-4">
 
     {# list of post #}
     {% include "nav/posts.njk" %}
 
-    {# List of tags #}
-
-    {% include "nav/tags.njk" %}
-
+    {% include "share.njk" %}
 
   </div>
 

diff --git a/src/themes/grunn/layouts/system/tag.njk b/src/themes/grunn/layouts/system/tag.njk
@@ -8,7 +8,8 @@ the tag page auto generated from src/systempages/tag.njk
 #}
 {%- if env.mode != 'prod' %}<!-- ___layouts/system/tag.njk  -->{%- endif -%}
 
-<h1 class="text-5xl">{{ title }}</h1>
+
+<h1 class="text-6xl text-cyan-700 dark:text-cyan-200 text-center ">{{ title }}</h1>
 
 {% include "nav/tags.njk" %}
 
@@ -17,29 +18,29 @@ the tag page auto generated from src/systempages/tag.njk
   {% endfor %} #}
 
 
-<section class="grid grid-cols-3 gap-2">
+<section class="md:grid grid-cols-3 gap-4 py-4">
 {# collection with all items with [tag] #}
 {% for item in collections[ tag ]  %}
 
-  <article class="p-2 shadow border m-1">
-    <a href="{{ item.url }}" class="text-xl font-bold">
+  <article class="shadow border dark:border-none border-slate-100 bg-white dark:bg-slate-900">
+    <a href="{{ item.url }}" class="">
 
-      <div class= "aspect-video overflow-hidden bg-slate-400">
-      {% picture
-        img=item.data.card.image,
-        width=[400, 800],
-        sizes="(min-width: 1600px) 50vw, 100vw",
-        alt=item.data.card.alt
-      %}
+      <div class="shadow-lg aspect-video overflow-hidden">
+        {% picture
+          img=item.data.card.image,
+          width=[400, 800],
+          sizes="(min-width: 800px) 50vw, 100vw",
+          alt=item.data.card.alt
+        %}
       </div>
 
-      <div class="font-lg">
-        {{item.data.title}}
+      <div class="p-4">
+        <div class="text-2xl text-cyan-800 dark:text-cyan-200">{{item.data.card.title }}</div>
+        <div class="mt-2">{{ item.data.card.text }}</div>
+        <time class="font-bold text-slate-600 dark:text-slate-200 text-right py-4 block">{{ item.date | formatDate("DDD  T", "DK") }}</time>
       </div>
-    </a>
-
-    <div class="mt-2">{{ item.data.teaser }}</div>
 
+    </a>
   </article>
 
 {% endfor %}

diff --git a/src/themes/nakinn/includes/nav/tags.njk b/src/themes/nakinn/includes/nav/tags.njk
@@ -1,7 +1,11 @@
+
 {% for tag in collections.tags %}
 
   {% for item in collections.all | getPage("/tag/" + tag + "/") %}
-    <a href="/tag/{{ tag }}">{{ item.data.title}}</a>
+    <a href="/tag/{{ tag }}">{{ item.data.title }}</a>
+
+
+
   {% endfor %}
 
 {% endfor %}
diff --git a/src/themes/styleguide/01-base/01-colors.njk b/src/themes/styleguide/01-base/01-colors.njk
@@ -1,13 +1,13 @@
 ---
-title: "🎈 Colors"
+title: "-Colors:"
 
 colors:
   - title: slate
     css: bg-slate-200
   - title: slate
-    css: bg-slate-500
-  - title: teal
-    css: bg-teal-600
+    css: bg-slate-800
+  - title: cyan
+    css: bg-cyan--600
 
 
 ---

diff --git a/...emes/styleguide/02-navigation/15-menu.njk → ...emes/styleguide/02-navigation/01-menu.njk b/...emes/styleguide/02-navigation/15-menu.njk → ...emes/styleguide/02-navigation/01-menu.njk
diff --git a/...emes/styleguide/02-navigation/02-some.njk → ...emes/styleguide/02-navigation/10-some.njk b/...emes/styleguide/02-navigation/02-some.njk → ...emes/styleguide/02-navigation/10-some.njk
@@ -1,5 +1,5 @@
 ---
-title: 🎈 Menu SoMe
+title: Navigation SoMe
 ---
 
 {% include "nav/socialmedia.njk" %}
diff --git a/...emes/styleguide/02-navigation/01-tags.njk → ...emes/styleguide/02-navigation/10-tags.njk b/...emes/styleguide/02-navigation/01-tags.njk → ...emes/styleguide/02-navigation/10-tags.njk
diff --git a/src/themes/styleguide/05-components/00-index.njk b/src/themes/styleguide/05-components/00-index.njk
@@ -1,5 +1,5 @@
 ---
-title: 🎈 Component
+title: Components
 ---
 
 Placeholder