add plugin for different headings

foundation/okfplugins/heading/admin.py

@@ -0,0 +1,11 @@
+from django.contrib import admin
+
+import reversion
+
+from .models import Heading
+
+
+class HeadingAdmin(reversion.admin.VersionAdmin):
+    list_display = ('title',)
+
+admin.site.register(Heading, HeadingAdmin)

foundation/okfplugins/heading/cms_plugins.py

@@ -0,0 +1,20 @@
+from cms.plugin_base import CMSPluginBase
+from cms.plugin_pool import plugin_pool
+from cms.models.pluginmodel import CMSPlugin
+from django.utils.translation import ugettext_lazy as _
+
+from .models import Heading
+
+@plugin_pool.register_plugin
+class PageHeadingPlugin(CMSPluginBase):
+    model = Heading
+    module = "OKF v2"
+    render_template = "heading_plugin.html"
+    cache = False
+    name = _("Heading")
+
+    def render(self, context, instance, placeholder):
+        context = super().render(context, instance, placeholder)
+
+        return context
+

foundation/okfplugins/heading/migrations/0001_initial.py

@@ -0,0 +1,31 @@
+# -*- coding: utf-8 -*-
+from __future__ import unicode_literals
+
+from django.db import migrations, models
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+    ]
+
+    operations = [
+        migrations.CreateModel(
+            name='Heading',
+            fields=[
+                ('cmsplugin_ptr', models.OneToOneField(
+                    parent_link=True,
+                    auto_created=True,
+                    primary_key=True,
+                    serialize=False,
+                    to='cms.CMSPlugin',
+                    on_delete=models.CASCADE,
+                )),
+                ('title', models.CharField(max_length=200)),
+                ('heading_type', models.CharField(max_length=3)),
+            ],
+            options={
+                'abstract': False,
+            },
+        ),
+    ]

foundation/okfplugins/heading/models.py

@@ -0,0 +1,19 @@
+from django.db import models
+from cms.models.pluginmodel import CMSPlugin
+
+HEADINGS_CHOICES = (
+    ('h1','h1'),
+    ('h2', 'h2'),
+    ('h3','h3'),
+    ('h4','h4'),
+    ('h5','h5'),
+    ('h6','h6'),
+)
+
+class Heading(CMSPlugin):
+    title = models.CharField(max_length=200)
+    heading_type = models.CharField(max_length=3, choices=HEADINGS_CHOICES, default='h1')
+
+    def __str__(self):
+        return self.title
+

foundation/okfplugins/heading/templates/heading_plugin.html

@@ -0,0 +1,15 @@
+<!-- heading -->
+{% if instance.heading_type == 'h1' %}
+<h1 class="px-3 py-5 font-bold text-center text-h0 border border-gray-300">{{ instance.title }}</h1>
+{% elif instance.heading_type == 'h2' %}
+<h2 class="px-3 py-5 font-bold text-center text-h1 border border-gray-300">{{ instance.title }}</h2>
+{% elif instance.heading_type == 'h3' %}
+<h3 class="px-3 py-5 font-bold text-center text-h2 border border-gray-300">{{ instance.title }}</h3>
+{% elif instance.heading_type == 'h4' %}
+<h4 class="px-3 py-5 font-bold text-center text-h3 border border-gray-300">{{ instance.title }}</h4>
+{% elif instance.heading_type == 'h5' %}
+<h5 class="px-3 py-5 font-bold text-center text-h4 border border-gray-300">{{ instance.title }}</h5>
+{% elif instance.heading_type == 'h6' %}
+<h6 class="px-3 py-5 font-bold text-center text-h5 border border-gray-300">{{ instance.title }}</h6>
+{% endif %}
+<!-- /heading -->

foundation/settings.py

@@ -154,6 +154,7 @@ def _parse_email_list(varname):
     'foundation.organisation',
     'foundation.search',
     'foundation.okfplugins.header',
+    'foundation.okfplugins.heading',
     'article_list_item'
 )
 
@@ -479,6 +480,9 @@ def _parse_email_list(varname):
     'permissions': 3600,
 }
 
+CMS_COLOR_SCHEME = "light"
+CMS_COLOR_SCHEME_TOGGLE = True
+
 CMS_TEMPLATES = (
     ('cms_default.html', 'Default layout'),
     ('cms_twocolumn.html', 'Two columns'),

tailwind.config.cjs

@@ -5,6 +5,35 @@ module.exports = {
   ],
   theme: {
     extend: {
+      borderWidth: {
+        '3': '3px',
+      },
+      colors: {
+        'okfn-blue': {
+          DEFAULT: '#00d1ff', // pastel blue light
+        },
+        'okfn-green': {
+          DEFAULT: '#adffed' // pastel green light
+        },
+        'okfn-purple': {
+          DEFAULT: '#e077ff' // purple
+        },
+        'okfn-yellow': {
+          DEFAULT: '#e4ff36' // yellow
+        },
+        'okfn-light-gray': {
+          DEFAULT: '#f8f8f8' // light-gray
+        },
+        'okfn-link': {
+          DEFAULT: '#00a9e0' // link
+        },
+        'okfn-content': {
+          DEFAULT: '#e4ff36' // content
+        },
+      },
+      dropShadow: {
+        'okfn': '0 4px 4px rgba(0, 0, 0, 0.4)',
+      },
       fontFamily: {
         'sans': '"HK Grotesk", sans-serif',
         'mono': '"Necto Mono", monospace',
@@ -65,32 +94,6 @@ module.exports = {
         '14': '14',
         '15': '15',
       },
-      borderWidth: {
-        '3': '3px',
-      },
-      colors: {
-        'okfn-blue': {
-          DEFAULT: '#00d1ff', // pastel blue light
-        },
-        'okfn-green': {
-          DEFAULT: '#adffed' // pastel green light
-        },
-        'okfn-purple': {
-          DEFAULT: '#e077ff' // purple
-        },
-        'okfn-yellow': {
-          DEFAULT: '#e4ff36' // yellow
-        },
-        'okfn-light-gray': {
-          DEFAULT: '#f8f8f8' // light-gray
-        },
-        'okfn-link': {
-          DEFAULT: '#00a9e0' // link
-        },
-        'okfn-content': {
-          DEFAULT: '#e4ff36' // content
-        },
-      },
       spacing: {
         '3': '0.75rem',
         '24': '6rem',

templates/base.html

@@ -2,7 +2,7 @@
 {% load sekizai_tags %}
 {% load static %}
 <!DOCTYPE html>
-<html lang='en-gb'>
+<html lang='en-gb' data-theme="light">
 <head>
     <meta charset='UTF-8' />
     <meta name='viewport' content='width=device-width, initial-scale=1.0' />

templates/cms_homepage.html

@@ -60,9 +60,9 @@ <h1 class="text-h1 !leading-tight">
     <img src="/assets/images/home-features-open-data.svg" alt="">
   </figure>
 
-  <strong class="title">We enable open data creation</strong>
+  <strong class="title">{% static_placeholder "first block title" %}</strong>
 
-  <span class="description">We are the technology arm of institutions, organizations and communities, so they can create, manage and publish open data with our tools.</span>
+  <span class="description">{% static_placeholder "first block" %}</span>
   <em class="link-arrow-curved">
     Learn more
   </em>
@@ -77,7 +77,7 @@ <h1 class="text-h1 !leading-tight">
 
   <strong class="title">We are knowledge spreaders</strong>
 
-  <span class="description">We are knowledge spreaders' description='We offer capacity-building training on data literacies for individuals, teams and communities so they can understand transformative power of openness.</span>
+  <span class="description">{% static_placeholder "second_block" %}</span>
   <em class="link-arrow-curved">
     Learn more
   </em>

templates/styles/base/_buttons.css

@@ -1,3 +1,23 @@
 .btn {
-  @apply inline-block px-12 py-[1.1875rem] bg-black text-white text-2xl font-bold rounded-[1.25rem];
+  @apply inline-block px-12 py-[1.1875rem] bg-black text-white text-2xl font-bold rounded-[1.25rem] transition-colors duration-500 ease-in-out;
+
+  &:hover {
+    @apply text-okfn-purple;
+  }
+
+  &:active {
+    @apply bg-okfn-purple text-white duration-150;
+  }
+
+  &.-white{
+    @apply bg-white text-black;
+
+    &:hover {
+      @apply text-okfn-purple;
+    }
+
+    &:active {
+      @apply bg-okfn-purple text-white duration-150;
+    }
+  }
 }

templates/styles/base/_forms.css

@@ -1,7 +1,7 @@
 .form {
   .input {
     &-fake {
-      @apply p-2 pl-5 border-2 border-black bg-white rounded-[1.25rem] text-xl text-black;
+      @apply w-full p-2 pl-5 border-2 border-black bg-white rounded-[1.25rem] text-xl text-black;
 
       .btn {
         @apply px-6 py-[0.6875rem] text-xl rounded-2xl;

templates/styles/base/_iframe-video.css

@@ -0,0 +1,15 @@
+.iframe-video {
+  @apply mx-auto mb-5 last:mb-0;
+
+  &__wrapper {
+    @apply relative h-0;;
+
+    padding-bottom: 56.25%; /* 16:9 */
+    /* background: url(../images/video-placeholder.webp) no-repeat center center; */
+    /* background-size: cover; */
+  }
+
+  iframe {
+    @apply absolute top-0 left-0 w-full h-full;
+  }
+}

templates/styles/base/_main-footer.css

@@ -1,6 +1,18 @@
 .main-footer {
   @apply py-12 bg-okfn-blue;
 
+  a {
+    @apply transition-colors duration-500 ease-in-out;
+
+    &:hover {
+      @apply text-white;
+    }
+
+    &:active {
+      @apply text-okfn-purple duration-150;
+    }
+  }
+
   &__head {
     @apply col-span-12 mb-12 md:mb-0;
 

templates/styles/base/_main-header.css

@@ -4,7 +4,7 @@
   label {
     &.icon {
       &:active {
-        @apply text-okfn-purple;
+        @apply text-okfn-purple duration-150;
       }
     }
   }
@@ -13,18 +13,18 @@
     @apply block pt-3 pl-12 font-display text-left;
 
     @screen lg {
-      @apply hidden absolute top-full left-1/2 px-14 py-5 -translate-x-1/2 -translate-y-4 rounded-[3.75rem] whitespace-nowrap text-center font-bold border-2 border-okfn-blue bg-white/90;
+      @apply hidden absolute top-full left-1/2 px-14 py-5 -translate-x-1/2 -translate-y-4 rounded-[3.75rem] whitespace-nowrap text-center font-bold border-2 border-okfn-blue bg-white bg-opacity-90;
     }
 
     a {
-      @apply block py-3;
+      @apply block py-3 transition-colors duration-500 ease-in-out;
 
       &:hover {
         @apply text-okfn-blue;
       }
 
       &:active {
-        @apply text-okfn-purple;
+        @apply text-okfn-purple duration-150;
       }
     }
 
@@ -211,10 +211,10 @@
 
       > a,
       > label {
-        @apply relative flex justify-start items-center text-2xl font-bold text-black;
+        @apply relative flex justify-start items-center text-2xl leading-none font-bold text-black transition-colors duration-500 ease-in-out;
 
         @screen lg {
-          @apply justify-center min-h-[4.375rem] text-base;
+          @apply justify-center min-h-[4.375rem] text-base leading-none;
         }
 
         border-radius: 2.1875rem;
@@ -232,6 +232,10 @@
             &:hover {
               @apply bg-okfn-blue;
             }
+
+            &:active {
+              @apply bg-okfn-purple duration-150;
+            }
           }
 
           @screen lg {
@@ -269,7 +273,7 @@
           }
 
           &:active {
-            @apply text-okfn-purple;
+            @apply text-okfn-purple duration-150;
           }
 
           &.labeled {

templates/styles/base/_sections.css

@@ -7,6 +7,12 @@
     }
   }
 
+  &.-tighten-2 {
+    @screen lg {
+      @apply col-start-3 col-end-11 col-span-8;
+    }
+  }
+
   &__content {
     @apply relative z-10;
   }

templates/styles/components/_block-txt.css

@@ -69,10 +69,14 @@
   }
 
   a {
-    @apply underline text-okfn-link;
+    @apply text-okfn-link transition-colors duration-500 ease-in-out;
 
     &:hover {
-      @apply text-okfn-link/80;
+      @apply text-okfn-purple;
+    }
+
+    &:active {
+      @apply text-current duration-150;
     }
   }