{"id":6599,"date":"2026-08-21T15:09:29","date_gmt":"2026-08-21T13:09:29","guid":{"rendered":"https:\/\/weblearning.co.za\/blog\/?p=6599"},"modified":"2026-09-03T13:55:13","modified_gmt":"2026-09-03T11:55:13","slug":"4-months-into-wir","status":"publish","type":"post","link":"https:\/\/weblearning.co.za\/blog\/4-months-into-wir\/","title":{"rendered":"4 Months into WIR"},"content":{"rendered":"\n<h4 class=\"wp-block-heading\">AWA Website (work in progress)<\/h4>\n\n\n\n<div class=\"wp-block-cover alignwide\" style=\"margin-top:0;padding-top:5vw;padding-right:5vw;padding-bottom:5vw;padding-left:5vw;font-style:normal;font-weight:700;min-height:100px;aspect-ratio:unset;\"><span aria-hidden=\"true\" class=\"wp-block-cover__background has-background-dim-100 has-background-dim has-background-gradient\" style=\"background:linear-gradient(135deg,rgb(8,24,224) 0%,rgb(232,16,32) 100%)\"><\/span><div class=\"wp-block-cover__inner-container is-layout-flow wp-block-cover-is-layout-flow\">\n<p class=\"has-text-align-center has-normal-font-size wp-block-paragraph\">This banner has a gradient background<\/p>\n<\/div><\/div>\n\n\n\n<p class=\"wp-block-paragraph\">To create a branded identity for an organization, start with their current colours. I usually generate a colour palette by visiting the organisations website or checking out their logo (the African Wikipedia Alliance has the latter, not the former). I thought I&#8217;d help out (hate them to feel excluded).<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Wikipedia:Lets_Go<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">I use a <a href=\"https:\/\/en.wikipedia.org\/wiki\/Color_picker\">colour picker<\/a> to assist with the selection of the two <a href=\"https:\/\/en.wikipedia.org\/wiki\/Web_colors\">hexadecimal colour codes<\/a> (blue and red) from <a href=\"https:\/\/codeforafrica.org\/\">https:\/\/codeforafrica.org\/<\/a>. I then apply <a href=\"https:\/\/en.wikipedia.org\/wiki\/CSS\">CSS<\/a> to create a gradient effect on the <a href=\"https:\/\/en.wikipedia.org\/wiki\/Web_banner\">web banner (or hero image)<\/a>. The gradient runs at 45 degrees. The effect is this multi coloured banner (see above) made from two colour codes<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li class=\"has-text-color has-link-color has-small-font-size wp-elements-9d6b9ef04ac3d27da311733ab0394dff\" style=\"color:#e81020\">&#8211;red #E81020<\/li>\n<\/ul>\n\n\n\n<ul class=\"wp-block-list\">\n<li class=\"has-text-color has-link-color wp-elements-e183bea28968f6a001ff6621fd1c3d26\" style=\"color:#0818e0\">&#8211;mediumblue #0818E0<\/li>\n<\/ul>\n\n\n\n<h4 class=\"wp-block-heading\">Lets start building<\/h4>\n\n\n\n<p class=\"wp-block-paragraph\">This <strong>&lt;block&gt; &lt;\/block&gt;<\/strong> combined with &#8220;background-color&#8221; gives us a red brick (good for building)<\/p>\n\n\n\n<block style=\"background-color:#e81020\">Red brick<\/block>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"188\" src=\"https:\/\/weblearning.co.za\/blog\/wp-content\/uploads\/2026\/08\/image-2-1024x188.png\" alt=\"\" class=\"wp-image-6659\" srcset=\"https:\/\/weblearning.co.za\/blog\/wp-content\/uploads\/2026\/08\/image-2-1024x188.png 1024w, https:\/\/weblearning.co.za\/blog\/wp-content\/uploads\/2026\/08\/image-2-300x55.png 300w, https:\/\/weblearning.co.za\/blog\/wp-content\/uploads\/2026\/08\/image-2-768x141.png 768w, https:\/\/weblearning.co.za\/blog\/wp-content\/uploads\/2026\/08\/image-2.png 1037w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">This large heading below <strong>&lt;h1&gt;blue heading&lt;\/h1&gt;<\/strong> combined with &#8220;colour:#0818E0;&#8221; can give us a blue text colour. H1 also has smaller siblings (all the way to h6)<\/p>\n\n\n\n<h1 style=\"color:#0818E0;\">This is a blue heading<\/h1>\n\n\n\n\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"353\" src=\"https:\/\/weblearning.co.za\/blog\/wp-content\/uploads\/2026\/08\/image-3.png\" alt=\"\" class=\"wp-image-6660\" srcset=\"https:\/\/weblearning.co.za\/blog\/wp-content\/uploads\/2026\/08\/image-3.png 1024w, https:\/\/weblearning.co.za\/blog\/wp-content\/uploads\/2026\/08\/image-3-300x103.png 300w, https:\/\/weblearning.co.za\/blog\/wp-content\/uploads\/2026\/08\/image-3-768x265.png 768w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">You could also use the word red and blue to determine the brick and heading colours. I prefer hex codes as they are more precise about the colour. So lets go to <a href=\"https:\/\/en.wikipedia.org\/wiki\/CodePen\">CodePen<\/a> and build a bit with headings, blocks and gradients.<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>&lt;H4 style=&#8221;color:white;&#8221;&gt;<\/strong> changes the text colour of a heading<\/li>\n\n\n\n<li><strong>.block{background: linear-gradient( 45deg, #0818E0 0%, #E81020 100%);}<\/strong> changes the background colour of a block into a gradient which runs at 45%<\/li>\n<\/ul>\n\n\n\n<style>.block{\n  background:\n    linear-gradient(\n      45deg,\n      #0818E0,\n      #E81020 \n    );\nh4{color:white;}<\/style>\n<br><div class=\"block\"><h4>#0818E0 &lt;&#8212;Blue gradient all the way into red &#8212;&gt;#E81020<\/h4><\/div>\n\n\n\n<pre class=\"wp-block-code has-background\" style=\"background-color:#f4f4f4\"><code>&lt;style&gt;.block{\n  background:\n    linear-gradient(\n      45deg,\n      #0818E0,\n      #E81020 \n    );\nh4{color:white;}&lt;\/style&gt;\n&lt;br&gt;&lt;div class=\"block\"&gt;&lt;h4&gt;#0818E0 &amp;lt;---Blue gradient all the way into red ---&amp;gt;#E81020&lt;\/h4&gt;&lt;\/div&gt;<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">It could be a bit difficult to understand this explanation without practice. So I suggest you look at my <a href=\"https:\/\/codepen.io\/editor\/Web-learning-the-bold\/pen\/01a02dfc-de8e-7f37-aad4-6e22af4fc802\">Codepen example<\/a>, and then try constructing your own banner on your own <a href=\"https:\/\/codepen.io\/pricing\">Codepen account<\/a><\/p>\n\n\n\n<style data-wp-block-html=\"css\">\n:root {\n--primary: #0818E0;\n--secondary: #E81020;\n}\n\nhorizontalnav {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  padding: 1rem 2rem;\n  min-height: 80px;\n  background: linear-gradient(45deg, var(--primary), var(--secondary));\n}\n\nhorizontalnav h1 {\n  font-size: clamp(1.3rem, 3vw, 2rem);\n  color: var(--secondary);\n}\n\nhorizontalnav h1 span {\n  color: white;\n  font-family: Georgia, serif;\n  font-style: italic;\n}\n<\/style>\n\n<horizontalnav>\n      <!-- Always visible items in the nav bar -->\n      <h1>\n        Wikipedian\n        <span>ALLIANCE<\/span>\n      <\/h1>\n    <\/horizontalnav>\n\n\n\n<p class=\"wp-block-paragraph\">Thus far I have made use of three colours. As an old forgetful man who tends to forget where he puts his iPad, a central root for all colours is very helpful. <\/p>\n\n\n\n<pre class=\"wp-block-code has-background\" style=\"background-color:#f4f4f4\"><code>:root {\n--primary: #0818E0;\n--secondary: #E81020;\n--white: #FFF\n}<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">&#8230;.Now where was I? Oh yes, these three hex codes are a part of my root folder (see above). My primary colour is a colour I drew on frequently. In the block example above, I have chosen to use <strong>#0818E0 (blue)<\/strong> as my primary colour. <strong>Red (#E81020)<\/strong> was a secondary colour which I can use as an accent, for buttons and lines. I want to change this block into a horizontal navigation bar that has three different buttons. Before, During and After.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Why a root folder<\/strong>? Apart from my forgetfulness, I can place these defined hex codes in the root folder and then call these colour variables in my stylesheet. This allows me to experiment with a different look and feel and if I change a few variable values there is a global change to the page. Here&#8217;s an example. Below are the colours from the root folder, that have been placed in two flags from countries I visited recently.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">CSS to make flags<\/h4>\n\n\n\n<style data-wp-block-html=\"css\">\n.french-flag {\n  width: 300px;\n  height: 200px;\n  border: solid 1px black;\n  background: linear-gradient(\n    to right,\n    #0818e0 0%,\n    #0818e0 33.33%,\n    #ffffff 33.33%,\n    #ffffff 66.66%,\n    #e81020 66.66%,\n    #e81020 100%\n  );\n}\n\n.german-flag {\n  width: 300px;\n  height: 200px;\n  border: solid 1px black;\n  background: linear-gradient(\n    to bottom,\n    #000000 0%,\n    #000000 33.33%,\n    #D00000 33.33%,\n    #D00000 66.66%,\n    #ffcc00 66.66%,\n    #ffcc00 100%\n  );\n}\n<\/style>\n\n<table><tr><td class=\"french-flag\"><\/td><\/tr>\n<tr><td class=\"german-flag\"><\/td><\/tr><\/table>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;style&gt; .french-flag {\n  width: 300px;\n  height: 200px;\n  border: solid 1px black;\n  background: linear-gradient(\n    to right,\n    #0818e0 0%,\n    #0818e0 33.33%,\n    #ffffff 33.33%,\n    #ffffff 66.66%,\n    #e81020 66.66%,\n    #e81020 100%\n  );\n}&lt;\/style&gt;\n\n&lt;div class=\"french-flag\"&gt;&lt;\/div&gt;<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">When I was in France at Wikimania 2026, I picked up a lovely booklet about Wikifying a Conference. CSS could allow me to customize the look and feel an existing work and I could put those colours in a root folder..<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">Bullets,to Buttons, bricks to clicks<\/h4>\n\n\n\n<style data-wp-block-html=\"css\">\n:root {\n--primary: #0818E0;\n--secondary: #E81020;\n}\n\nhorizontalnav {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  padding: 1rem 2rem;\n  min-height: 80px;\n  background: linear-gradient(45deg, var(--primary), var(--secondary));\n}\n\nhorizontalnav h1 {\n  font-size: clamp(1.3rem, 3vw, 2rem);\n  color: var(--secondary);\n}\n\nhorizontalnav h1 span {\n  color: white;\n  font-family: Georgia, serif;\n  font-style: italic;\n}\n<\/style>\n\n<horizontalnav>\n      <!-- Always visible items in the nav bar -->\n      <h1>\n        Wikipedian\n        <span>ALLIANCE<\/span>\n      <\/h1>\n\n<ul>\n  <li><a href=\"before.html\">Before<\/a><\/li>\n  <li><a href=\"during.html\">During <\/a><\/li>\n  <li><a href=\"after.html\">After<\/a><\/li>\n<\/ul>\n    <\/horizontalnav>\n\n\n\n<p class=\"wp-block-paragraph\">Within the block with a title and a gradient colour background, I have placed hyperlinked bullets, entitled.<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Before, <\/li>\n\n\n\n<li>During and <\/li>\n\n\n\n<li>After<\/li>\n<\/ul>\n\n\n\n<pre class=\"wp-block-code has-background\" style=\"background-color:#f4f4f4\"><code>&lt;ul&gt;\n  &lt;li&gt;&lt;a href=\"before.html\"&gt;Before&lt;\/a&gt;&lt;\/li&gt;\n  &lt;li&gt;&lt;a href=\"during.html\"&gt;During &lt;\/a&gt;&lt;\/li&gt;\n  &lt;li&gt;&lt;a href=\"after.html\"&gt;After&lt;\/a&gt;&lt;\/li&gt;\n&lt;\/ul&gt;<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">CSS can be used to modify these bullets. First we remove the list-style and we then centre the text. With a bit more code, they become buttons. With a blue background and red text.<\/p>\n\n\n\n<style data-wp-block-html=\"css\">\n:root {\n--primary: #0818E0;\n--secondary: #E81020;\n}\n\nhnav ul {\n  display: flex;\n  align-items: center;\n  gap: 0.5rem;\n  list-style: none;\n}\n\nhnav a {\n  display: block;\n  padding: 0.65rem 1rem;\n  color: var(--white);\n  text-decoration: none;\n  font-weight: 600;\n  border-radius: 6px;\n  transition: background 0.2s, color 0.2s, transform 0.2s;\n}\n\nhnav a:is(:hover, :focus-visible) {\n  background: var(--primary);\n  color: var(--secondary);\n  transform: translateY(-2px);\n  outline: none;\n}\n<\/style>\n\n<hnav><ul>\n  <li><a href=\"before.html\">Before<\/a><\/li>\n  <li><a href=\"during.html\">During <\/a><\/li>\n  <li><a href=\"after.html\">After<\/a><\/li>\n<\/ul><\/hnav>\n\n\n\n<p class=\"wp-block-paragraph\">The CSS to make these buttons is fairly simple. You know all about the  root folder by now. We can use the CSS to change the bullets to clickable buttons that change color when pressed.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;style&gt;:root {\n--primary: #0818E0;\n--secondary: #E81020;\n\n}\n\nhorizontalnav {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  padding: 1rem 2rem;\n  min-height: 80px;\n  background: linear-gradient(45deg, var(--primary), var(--secondary));\n}\n\nhorizontalnav h1 {\n  font-size: clamp(1.3rem, 3vw, 2rem);\n  color: var(--secondary);\n}\n\nhorizontalnav h1 span {\n  color: white;\n  font-family: Georgia, serif;\n  font-style: italic;\n}\n\nul {\n  display: flex;\n  align-items: center;\n  gap: 0.5rem;\n  list-style: none;\n}\n\na {\n  display: block;\n  padding: 0.65rem 1rem;\n  color: var(--white);\n  text-decoration: none;\n  font-weight: 600;\n  border-radius: 6px;\n  transition: background 0.2s, color 0.2s, transform 0.2s;\n}\n\na:is(:hover, :focus-visible) {\n  background: var(--primary);\n  color: var(--secondary);\n  transform: translateY(-2px);\n  outline: none;\n}\n  &lt;\/style&gt;\n&lt;horizontalnav&gt;\n      &lt;!-- Always visible items in the nav bar --&gt;\n      &lt;h1&gt;\n        Wikipedian\n        &lt;span&gt;ALLIANCE&lt;\/span&gt;\n      &lt;\/h1&gt;\n&lt;ul&gt;\n  &lt;li&gt;&lt;a href=\"before.html\"&gt;Before&lt;\/a&gt;&lt;\/li&gt;\n  &lt;li&gt;&lt;a href=\"during.html\"&gt;During &lt;\/a&gt;&lt;\/li&gt;\n  &lt;li&gt;&lt;a href=\"after.html\"&gt;After&lt;\/a&gt;&lt;\/li&gt;\n&lt;\/ul&gt;\n    &lt;\/horizontalnav&gt;<\/code><\/pre>\n\n\n\n<style data-wp-block-html=\"css\">\n:root {\n--primary: #0818E0;\n--secondary: #E81020;\n}\n\nhorizontalnav {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  padding: 1rem 2rem;\n  min-height: 80px;\n  background: linear-gradient(45deg, var(--primary), var(--secondary));\n}\n\nhorizontalnav h1 {\n  font-size: clamp(1.3rem, 3vw, 2rem);\n  color: var(--secondary);\n}\n\nhorizontalnav h1 span {\n  color: white;\n  font-family: Georgia, serif;\n  font-style: italic;\n}\n\nhorizontalnav ul {\n  display: flex;\n  align-items: center;\n  gap: 0.5rem;\n  list-style: none;\n}\n\nhorizontalnav a {\n  display: block;\n  padding: 0.65rem 1rem;\n  color: var(--vanilla);\n  text-decoration: none;\n  font-weight: 600;\n  border-radius: 6px;\n  transition: background 0.2s, color 0.2s, transform 0.2s;\n}\n\nhorizontalnav a:is(:hover, :focus-visible) {\n  background: var(--primary);\n  color: var(--secondary);\n  transform: translateY(-2px);\n  outline: none;\n}\n\n<\/style>\n\n<horizontalnav>\n      <!-- Always visible items in the nav bar -->\n      <h1>\n        Wikipedian\n        <span>ALLIANCE<\/span>\n      <\/h1>\n\n<ul>\n  <li><a href=\"before.html\">Before<\/a><\/li>\n  <li><a href=\"during.html\">During <\/a><\/li>\n  <li><a href=\"after.html\">After<\/a><\/li>\n<\/ul>\n    <\/horizontalnav>\n\n\n\n<p class=\"wp-block-paragraph\">There we are, a banner with a gradient background a title and three buttons. <\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Review<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">I&#8217;m hoping that you have seen what <a href=\"https:\/\/github.com\/Web-learning\/WIR\">I have put together<\/a> and started building with blocks, banners, colours, gradients, buttons and hyperlinks on an <a href=\"https:\/\/web-learning.github.io\/WIR\/webpage\/\">HTML editor<\/a> out there. <\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Below you will see that I&#8217;ve used the initial color palette in the root folder and added two more colours. The round globe is <strong>grey (#CCC)<\/strong> and there is a subtle shadow below the banner (<strong>drop-shadow(rgba(83, 97, 116, 0.5) 4px 5px 4px);<\/strong>) You will then see that I have repeated the gradient pattern below the banner. There is a watermark called &#8220;W&#8221;, an eyebrow &#8220;Scholars \u2022 Curators \u2022 Archivists \u2022 Musicians&#8221;, the same title (its clickable) and a subtitleand then my name&#8221;: &#8220;Derek Moore&#8221; .<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1260\" height=\"882\" src=\"https:\/\/weblearning.co.za\/blog\/wp-content\/uploads\/2026\/08\/Screenshot-2026-08-25-131542.png\" alt=\"\" class=\"wp-image-6712\" srcset=\"https:\/\/weblearning.co.za\/blog\/wp-content\/uploads\/2026\/08\/Screenshot-2026-08-25-131542.png 1260w, https:\/\/weblearning.co.za\/blog\/wp-content\/uploads\/2026\/08\/Screenshot-2026-08-25-131542-300x210.png 300w, https:\/\/weblearning.co.za\/blog\/wp-content\/uploads\/2026\/08\/Screenshot-2026-08-25-131542-1024x717.png 1024w, https:\/\/weblearning.co.za\/blog\/wp-content\/uploads\/2026\/08\/Screenshot-2026-08-25-131542-768x538.png 768w\" sizes=\"auto, (max-width: 1260px) 100vw, 1260px\" \/><figcaption class=\"wp-element-caption\"><strong>Look and Feel 1:<\/strong> Screenshot of a the front page of a Wikipedian Alliance front page  that I created.<\/figcaption><\/figure>\n\n\n\n<style data-wp-block-html=\"css\">\n:root {\n  --primary: #0818e0;\n  --secondary: #e81020;\n\n\n  --shadow: 0 4px 15px rgba(0, 0, 0, 0.15);\n  --radius: 6px;\n  --transition: 0.2s ease;\n}\n\n\/* -------------------------\n   RESET\n-------------------------- *\/\n\n*,\n*::before,\n*::after {\n  box-sizing: border-box;\n  margin: 0;\n  padding: 0;\n}\n\nhtml {\n  scroll-behavior: smooth;\n}\n\nbody {\n  min-height: 100vh;\n  font-family: \"Segoe UI\", Tahoma, Geneva, Verdana, sans-serif;\n  background: var(--bg);\n  color: var(--white);\n}\n\n\/* -------------------------\n   HERO\n-------------------------- *\/\n\n.hero {\n  position: relative;\n  background-image: var(--bgimage);\n  background-position: center;\n  background-size: cover;\n  background-repeat: no-repeat;\n}\n\n\/*\n  Use a pseudo-element for the filter so that\n  the hero's text\/content isn't filtered.\n*\/\n.hero::before {\n  content: \"\";\n  position: absolute;\n  inset: 0;\n  background: inherit;\n  background-position: center;\n  background-size: cover;\n  filter: saturate(0.75) sepia(0.6);\n  z-index: 0;\n}\n\n.hero > * {\n  position: relative;\n  z-index: 1;\n}\n\n\/* -------------------------\n   HORIZONTAL NAVIGATION\n-------------------------- *\/\n\nhorizontalnav {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: 1rem;\n  min-height: 80px;\n  padding: 1rem 2rem;\n  background: linear-gradient(\n    45deg,\n    var(--primary),\n    var(--secondary)\n  );\n}\n\n\/* Logo \/ heading *\/\n\nhorizontalnav h1 {\n  font-size: clamp(1.3rem, 3vw, 2rem);\n  font-weight: 700;\n  line-height: 1.2;\n  letter-spacing: 0.02em;\n}\n\nhorizontalnav h1 span {\n  display: inline-block;\n  color: var(--white);\n  font-family: Georgia, \"Times New Roman\", serif;\n  font-style: italic;\n}\n\n\/* -------------------------\n   HAMBURGER\n-------------------------- *\/\n\nhorizontalnav label {\n  display: none;\n  cursor: pointer;\n  padding: 0.3rem;\n  border-radius: var(--radius);\n  font-size: 1.7rem;\n  transition: background var(--transition);\n}\n\nhorizontalnav label:hover,\nhorizontalnav label:focus-visible {\n  background: rgba(255, 255, 255, 0.15);\n  outline: none;\n}\n\n#menu {\n  display: none;\n}\n\n\/* -------------------------\n   NAVIGATION LINKS\n-------------------------- *\/\n\nhorizontalnav ul {\n  display: flex;\n  align-items: center;\n  gap: 0.5rem;\n  list-style: none;\n}\n\nhorizontalnav a {\n  display: block;\n  padding: 0.65rem 1rem;\n  color: var(--white);\n  text-decoration: none;\n  font-weight: 600;\n  border-radius: var(--radius);\n  transition:\n    background var(--transition),\n    color var(--transition),\n    transform var(--transition);\n}\n\nhorizontalnav a:hover,\nhorizontalnav a:focus-visible {\n  background: var(--secondary);\n  color: var(--white);\n  transform: translateY(-2px);\n  outline: none;\n}\n\n\/* -------------------------\n   PLAQUE \/ BADGE\n-------------------------- *\/\n\n.patty {\n  position: absolute;\n  top: 28px;\n  right: 28px;\n\n  display: flex;\n  align-items: center;\n  justify-content: center;\n\n  width: 84px;\n  height: 84px;\n\n  padding: 0.5rem;\n\n  background: var(--secondary);\n  border: 5px solid var(--white);\n  border-radius: 50%;\n\n  color: var(--white);\n  text-align: center;\n  font-size: 11px;\n  font-weight: 700;\n  line-height: 1.3;\n\n  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.3);\n}\n\n\/* -------------------------\n   TABLET \/ MOBILE\n-------------------------- *\/\n\n@media (max-width: 768px) {\n  horizontalnav {\n    flex-wrap: wrap;\n    padding: 1rem 1.25rem;\n  }\n\n  horizontalnav label {\n    display: block;\n  }\n\n  horizontalnav ul {\n    display: none;\n    flex-direction: column;\n    align-items: stretch;\n    width: 100%;\n    padding-top: 1rem;\n    gap: 0.25rem;\n  }\n\n  horizontalnav ul li {\n    width: 100%;\n  }\n\n  horizontalnav a {\n    padding: 0.8rem 1rem;\n    background: rgba(255, 255, 255, 0.08);\n  }\n\n  \/*\n    The checkbox must come before the ul:\n    #menu\n    ul\n  *\/\n  #menu:checked ~ ul {\n    display: flex;\n  }\n\n  horizontalnav h1 {\n    max-width: 75%;\n  }\n\n  horizontalnav h1 span {\n    display: block;\n  }\n\n  .patty {\n    top: 20px;\n    right: 20px;\n    width: 72px;\n    height: 72px;\n    border-width: 4px;\n    font-size: 10px;\n  }\n}\n\n\/* -------------------------\n   SMALL SCREENS\n-------------------------- *\/\n\n@media (max-width: 480px) {\n  horizontalnav {\n    min-height: 70px;\n    padding: 0.85rem 1rem;\n  }\n\n  horizontalnav h1 {\n    font-size: 1.25rem;\n  }\n\n  horizontalnav label {\n    font-size: 1.5rem;\n  }\n\n  .patty {\n    top: 15px;\n    right: 15px;\n    width: 64px;\n    height: 64px;\n    font-size: 9px;\n  }\n}\n\n\/* -------------------------\n   REDUCED MOTION\n-------------------------- *\/\n\n@media (prefers-reduced-motion: reduce) {\n  html {\n    scroll-behavior: auto;\n  }\n\n  *,\n  *::before,\n  *::after {\n    transition-duration: 0.01ms !important;\n    animation-duration: 0.01ms !important;\n    animation-iteration-count: 1 !important;\n  }\n}\n<\/style>\n\n<!-- The hamburger menu -->\n      <label for=\"menu\" tabindex=\"0\">    <div class=\"patty\">\n      Before<br>During<br>After\n    <\/div>\n<\/label>\n\nP.S. If you go to the <a href=\"https:\/\/codepen.io\/editor\/Web-learning-the-bold\/pen\/01a0146e-7f40-7adc-b9e0-36207882b25a\">codepen<\/a>, you will discover that there is a hidden hamburger menu with a patty. It only appears on the narrow screen. I hope that it works on  <a href=\"https:\/\/github.com\/Web-learning\/WIR\/tree\/main\/banner\">Github<\/a>. Some of the content from this page should also be pulled in from a separate JSON file. But that&#8217;s the subject for another day.\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Codepen:<\/strong> CodePen code is MIT licensed. See their terms of Service <a href=\"https:\/\/blog.codepen.io\/legal\/terms-of-service\/\">https:\/\/blog.codepen.io\/legal\/terms-of-service\/<\/a><\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><\/p>\n","protected":false},"excerpt":{"rendered":"<p>AWA Website (work in progress) To create a branded identity for an organization, start with their current colours. I usually generate a colour palette by visiting the organisations website or checking out their logo (the African Wikipedia Alliance has the latter, not the former). I thought I&#8217;d help out (hate them to feel excluded). Wikipedia:Lets_Go &hellip; <\/p>\n<p class=\"link-more\"><a href=\"https:\/\/weblearning.co.za\/blog\/4-months-into-wir\/\" class=\"more-link\">Continue reading<span class=\"screen-reader-text\"> &#8220;4 Months into WIR&#8221;<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"episode_type":"","audio_file":"","cover_image":"","cover_image_id":"","duration":"","filesize":"","filesize_raw":"","date_recorded":"","explicit":"","block":"","itunes_episode_number":"","itunes_title":"","itunes_season_number":"","itunes_episode_type":"","_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"_jetpack_feature_clip_id":0,"_jetpack_memberships_contains_paid_content":false,"footnotes":"","jetpack_publicize_message":"","jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":true,"jetpack_social_options":{"image_generator_settings":{"template":"highway","default_image_id":0,"font":"","enabled":false},"version":2},"jetpack_post_was_ever_published":false},"categories":[217],"tags":[],"class_list":["post-6599","post","type-post","status-publish","format-standard","hentry","category-wir","entry"],"jetpack_publicize_connections":[],"jetpack_likes_enabled":true,"jetpack_sharing_enabled":true,"jetpack_featured_media_url":"","_links":{"self":[{"href":"https:\/\/weblearning.co.za\/blog\/wp-json\/wp\/v2\/posts\/6599","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/weblearning.co.za\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/weblearning.co.za\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/weblearning.co.za\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/weblearning.co.za\/blog\/wp-json\/wp\/v2\/comments?post=6599"}],"version-history":[{"count":69,"href":"https:\/\/weblearning.co.za\/blog\/wp-json\/wp\/v2\/posts\/6599\/revisions"}],"predecessor-version":[{"id":6813,"href":"https:\/\/weblearning.co.za\/blog\/wp-json\/wp\/v2\/posts\/6599\/revisions\/6813"}],"wp:attachment":[{"href":"https:\/\/weblearning.co.za\/blog\/wp-json\/wp\/v2\/media?parent=6599"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/weblearning.co.za\/blog\/wp-json\/wp\/v2\/categories?post=6599"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/weblearning.co.za\/blog\/wp-json\/wp\/v2\/tags?post=6599"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}