More static ODDK stuff

themes/opendk/README.md

@@ -1,3 +1,5 @@
+# Open Data DK theme
+
 To watch files:
 
 ```bash
@@ -6,6 +8,33 @@ npx gulp
 
 This watches for changes to CSS and icons. On changes to CSS [PostCSS](https://postcss.org/) and plugins ([postcss-import](https://github.com/postcss/postcss-import), [postcss-preset-env](https://preset-env.cssdb.org/), [tailwindcss](https://tailwindcss.com), [cssnano](https://cssnano.co/)) are run. On icon changes, the SVG icon sprite is remade. These processes can be run without watching via `npx gulp css` and `npx gulp icons`.
 
-Icons are used like so: `<svg><use xlink:href="#<filename>" /></svg>`. Eg. to use the search.svg icon, you use `<svg><use xlink:href="#search" /></svg>`.
-
 Note: Unless you are making significant changes to the design, you probably won't need these processes. Most styling is done through [Tailwind's](https://tailwindcss.com) utility classes.
+
+## Tailwind CSS
+
+The CSS framework [Tailwind](https://tailwindcss.com) is used to style this theme. This means that if you want to change the appearance of something, or add new elements, Tailwind utility classes should provide you with what you need. The docs at [tailwindcss.com](https://tailwindcss.com) should provide you with most of what you need to know.
+
+### Exceptions
+
+Some styles have been extracted out into CSS files (`src/css/components`). The spirit of Tailwind would be to avoid doing this, but there are two scenarios where it becomes desirable, or necessary.
+
+1. You are repeating a combination of utility classes.
+2. You need aspects of CSS that is not catered for by Tailwind.
+
+Scenario 1 should probably be resolved with the use of (Nunjucks) templates where reasonable to do so. This codebase could probably be improved a little in that regard.
+
+In either scenario, the [`@apply` feature](https://tailwindcss.com/docs/functions-and-directives/#apply) is and should be used, whenever dealing with the variable-like utility classes, such as width, padding, colour etc. This ensures that the same variables are being used throughout, and that a change to the Tailwind configuration will effect these custom components.
+
+In addition to the components directory, there is an `elements.css` file, which adds some styles to base HTML tags, mostly when nested in specific containers. For example, headings and paragraphs within a `content` wrapper get styling, without the need to add classes to each element.
+
+(This convention of *components* and *elements* is not Tailwind related, but part of a general [approach to making stuff easy to find](https://c3css.com/).)
+
+### Structure
+
+All Tailwind classes and custom components are imported into `src/app.css`. The importing, and other operations (such as Tailwind) are handled by [PostCSS](https://postcss.org/) plugins, as defined in `gulpfile.js`.
+
+Tailwind is configured in `tailwind.config.js`. The configuration for this theme adds an additional spacing variable named `gutter`, to remove some of the guess work from spacing e.g "Was I using `p-4` or `p-6` to separate columns?". The default colour and font family have been replaced. Note, unlike the *addition* of the gutter value, colour and font family were *replaced*, so the values found in the Tailwind docs will not be applicable.
+
+## Icons
+
+Icons are used like so: `<svg><use xlink:href="#<filename>" /></svg>`. Eg. to use the `src/icons/search.svg` icon, you put the following in the template: `<svg><use xlink:href="#search" /></svg>`.

themes/opendk/src/css/app.css

@@ -20,6 +20,8 @@
 @import "components/resource";
 @import "components/info-list";
 @import "components/resource-preview";
+@import "components/tabs";
+@import "components/secondary-nav";
 
 @import "tailwindcss/utilities";
 

themes/opendk/src/css/components/main-nav.css

@@ -4,11 +4,16 @@
   &[aria-current] {
     @apply border-primary;
   }
+
+  @nest .main-nav_subnav & {
+    border: none;
+    @apply text-base font-normal;
+  }
 }
 
 @screen lg {
   .main-nav_link {
-    @apply border-b-4 py-1 px-0;
+    @apply border-b-4 py-1 px-0 flex items-center;
   }
 }
 
@@ -23,3 +28,57 @@
     }
   }
 }
+
+@screen lg {
+  .main-nav_subnav {
+    position: absolute;
+    opacity: 0;
+    transition: opacity 0.5s ease 0.2s;
+    pointer-events: none;
+    @apply bg-white shadow px-3 py-2;
+  }
+
+  .main-nav_item:hover > ul,
+  .main-nav_item:focus-within > ul,
+  .main-nav_item ul:hover,
+  .main-nav_item ul:focus {
+     opacity: 1;
+     pointer-events: all;
+  }
+}
+
+.main-nav_search-toggle {
+  display: none;
+}
+@screen lg {
+  .main-nav_search-toggle {
+    display: block;
+  }
+  .main-nav_search-toggle-icon {
+    @apply fill-current;
+
+    &[data-toggle="show"] {
+      display: block;
+
+      @nest [aria-expanded="true"] & {
+        display: none;
+      }
+    }
+
+    &[data-toggle="hide"] {
+      display: none;
+
+      @nest [aria-expanded="true"] & {
+        display: block;
+      }
+    }
+  }
+
+  .main-nav_search {
+    display: none;
+
+    &[data-expanded="true"] {
+      display: block;
+    }
+  }
+}

themes/opendk/src/css/components/secondary-nav.css

@@ -0,0 +1,29 @@
+.secondary-nav_link {
+  @apply text-primary block py-2;
+  position: relative;
+
+  &[aria-current] {
+    @apply bg-secondary text-white pr-3;
+
+    &::before {
+      content: '';
+      position: absolute;
+      width: 2em;
+      right: 100%;
+      top: 0;
+      bottom: 0;
+      @apply bg-secondary border-r-8 border-secondary;
+    }
+  }
+}
+
+@screen lg {
+  .secondary-nav_link[aria-current] {
+    &::before {
+      background-image: url("../img/tab-mask-left.svg");
+      background-repeat: no-repeat;
+      background-size: auto 100%;
+      background-position: right center;
+    }
+  }
+}

themes/opendk/src/css/components/tabs.css

@@ -0,0 +1,12 @@
+.tabs {
+  display: flex;
+}
+
+.tabs_link {
+  display: block;
+  @apply px-4 py-3 bg-gray-200 mr-3 text-primary;
+
+  &[aria-selected="true"] {
+    @apply bg-primary text-white;
+  }
+}

themes/opendk/src/css/elements.css

@@ -21,3 +21,62 @@ svg {
 a {
   @apply text-secondary;
 }
+
+h1, h2, h3, h4, h5, h6 {
+  @nest .content & {
+    @apply font-semibold;
+
+    &:not(:first-child) {
+      margin-top: 2em;
+    }
+  }
+}
+
+h1 {
+  @nest .content & {
+    @apply text-3xl;
+  }
+}
+
+h2 {
+  @nest .content & {
+    @apply text-2xl;
+  }
+}
+
+h3 {
+  @nest .content & {
+    @apply text-xl;
+  }
+}
+
+h4 {
+  @nest .content & {
+    @apply text-lg;
+  }
+}
+
+ul,
+ol {
+  @nest .content & {
+    @apply my-5 pl-10;
+  }
+}
+
+ul {
+  @nest .content & {
+    @apply list-disc;
+  }
+}
+
+ol {
+  @nest .content & {
+    @apply list-decimal;
+  }
+}
+
+li {
+  @nest .content & {
+    @apply my-1;
+  }
+}

themes/opendk/views/base.html

@@ -29,25 +29,51 @@
               </svg>
             </button>
 
-            <nav class="main-nav mt-4 py-2 lg:my-2 bg-white right-0 z-10 lg:static">
+            <nav class="main-nav mt-4 py-2 lg:my-2 bg-white right-0 z-10 lg:relative">
               <ul class="lg:flex md:text-xl lg:text-2xl">
-                <li class="lg:mx-3">
+                <li class="main-nav_item lg:mx-3">
                   <a class="main-nav_link" href="/news">Blog</a>
                 </li>
-                <li class="lg:mx-3">
+                <li class="main-nav_item lg:mx-3">
                   <a class="main-nav_link">Knowledge</a>
                 </li>
-                <li class="lg:mx-3">
-                  <a class="main-nav_link" href="/search" aria-current="true">Data</a>
+                <li class="main-nav_item lg:mx-3">
+                  <a class="main-nav_link" href="/search">Data <svg class="hidden w-3 h-3 text-secondary fill-current ml-1 lg:block"><use xlink:href="#dropdown" /></svg></a>
+                  <ul class="main-nav_subnav" aria-label="submenu">
+                    <li>
+                      <a class="main-nav_link" href="#">Organisationer</a>
+                    </li>
+                    <li>
+                      <a class="main-nav_link" href="/collections">Grupper</a>
+                    </li>
+                  </ul>
                 </li>
-                <li class="lg:ml-3">
-                  <a class="main-nav_link" href="/about">About</a>
+                <li class="main-nav_item lg:ml-3">
+                  <a class="main-nav_link" href="/about">About <svg class="hidden w-3 h-3 text-secondary fill-current ml-1 lg:block"><use xlink:href="#dropdown" /></svg></a>
+                  <ul class="main-nav_subnav" aria-label="submenu">
+                    <li>
+                      <a class="main-nav_link" href="#">Hvad er Open Data DK</a>
+                    </li>
+                    <li>
+                      <a class="main-nav_link" href="#">Bestyrelsen</a>
+                    </li>
+                    <li>
+                      <a class="main-nav_link" href="#">Regionale ambassadører</a>
+                    </li>
+
+                  </ul>
                 </li>
                 <li class="flex items-center text-primary lg:ml-6">
                   <a id="search-link" href="/search">
-                    <span class="main-nav_link lg:hidden">Search</span>
-                    <svg class="w-8 h-8 fill-current hidden lg:block"><use xlink:href="#search" /></svg>
+                    <span class="main-nav_link hidden">Search</span>
+                    <svg class="main-nav_search-toggle-icon w-8 h-8" data-toggle="show"><use xlink:href="#search" /></svg>
+                    <svg class="main-nav_search-toggle-icon w-8 h-6" data-toggle="hide"><use xlink:href="#cross" /></svg>
                   </a>
+                  <!-- TODO make functional -->
+                  <form class="main-nav_search w-full px-6 py-2 lg:p-0 lg:absolute lg:left-0 lg:right-0 lg:pr-12 lg:pointer-events-none" id="header-search">
+                    <input type="text" class="border-2 border-solid border-gray-200 px-3 py-2 lg:px-4 lg:py-3 lg:text-xl outline-none focus:border-secondary w-full pointer-events-auto" placeholder="Search" id="header-search-input">
+                  </form>
+
                 </li>
               </ul>
             </nav>
@@ -151,15 +177,27 @@ <h4>
       // replace link with a button
       var searchLink = document.getElementById("search-link");
       var searchButton = document.createElement("button");
-      searchButton.setAttribute("id", "show-search");
+      var searchForm = document.getElementById("header-search");
+      searchButton.setAttribute("class", "main-nav_search-toggle");
+      searchButton.setAttribute("aria-expanded", "false");
 
       while (searchLink.childNodes.length > 0) {
         searchButton.appendChild(searchLink.childNodes[0]);
       }
 
       searchLink.replaceWith(searchButton);
 
-      // TODO: implement a modal
+      // button toggles form
+      searchButton.onclick = function() {
+        let expanded = searchButton.getAttribute('aria-expanded') === 'true' || false;
+        searchButton.setAttribute('aria-expanded', !expanded);
+        searchForm.setAttribute("data-expanded", !expanded);
+
+        if (!expanded) {
+          document.getElementById("header-search-input").focus();
+        }
+      }
+
     </script>
     {% block scripts %}{% endblock %}
   </body>

themes/opendk/views/blog.html

@@ -22,7 +22,7 @@
 
   <main class="md:w-2/3 md:mr-gutter lg:flex flex-wrap">
 
-    <!-- static posts -->
+    <!-- static posts --> <!-- TODO hard-coded -->
     <article class="article-preview mb-gutter pb-gutter lg:w-1/2 lg:pr-gutter">
       <a class="article-preview_image" href="#">
         <img class="article-preview_img" src="http://www.opendata.dk/sites/default/files/styles/node_banner/public/odaa/blog/img_e0051.jpg" />
@@ -40,7 +40,7 @@ <h1 class="article-preview_heading">
 
     <article class="article-preview mb-gutter pb-gutter lg:w-1/2 lg:pl-gutter">
       <a class="article-preview_image" href="#">
-        <img class="article-preview_img" src="http://www.opendata.dk/sites/default/files/styles/node_banner/public/odaa/blog/img_e0051.jpg" />
+        <img class="article-preview_img" src="../static/img/placeholder.svg" />
       </a>
       <div class="article-preview_text">
         <h1 class="article-preview_heading">