Merge pull request #26 from ASKnetCommunity/177-change-website-colors…

…-to-new-asknet-color-scheme

177 change website colors to new asknet color scheme

_data/settings.yml

@@ -247,11 +247,16 @@ client-slider-items:
 
 contact-title: Contact Info
 contact-text: |
-  For general information about the network please contact our #ASKnet – Network Coordination in Juba by email: <a href="mailto:coordinator@asknet.community">coordinator@asknet.community</a>.
-  
-  #ASKnet is supported by r0g_agency (Berlin, Germany) and Hive Colab (Kampala, Uganda) as implementing partners.
-  
-  #ASKnet  2022-2025 is funded by the German Ministry of Economic Development and Cooperation (BMZ).
+  <p>For general information about the network please contact our #ASKnet – Network Coordination in Juba by email: <script language="JavaScript" type="text/javascript">
+  var part1 = "coordinator";
+  var part2 = Math.pow(2,6);
+  var part3 = String.fromCharCode(part2);
+  var part4 = "asknet.community";
+  var part5 = part1 + String.fromCharCode(part2) + part4;
+  document.write("<a href=\"" + "mai" + "lto" + ":" + part5 + "\">" + part1 + part3 + part4 + "</a>");
+  </script></p>
+  <p>#ASKnet is supported by r0g_agency (Berlin, Germany) and Hive Colab (Kampala, Uganda) as implementing partners.</p>
+  <p>#ASKnet  2022-2025 is funded by the German Ministry of Economic Development and Cooperation (BMZ).</p>
 
 contact-email: coordinator@asknet.community
 formspree-path: f/myylarkr

_includes/contact-section.html

@@ -7,7 +7,7 @@
         <h2 class="section-title text-white" id="contact-section">
           {{ site.data.settings.contact-title }}
         </h2>
-        {{ site.data.settings.contact-text | markdownify }}
+        {{ site.data.settings.contact-text }}
       </div>
     </div>
     <div class="row">

_includes/header.html

@@ -2,7 +2,7 @@
   <nav class="navbar navbar-expand-lg navbar-dark">
     <a class="navbar-brand btn px-3 py-2" href="{{ site.baseurl }}/">
       {% if site.data.settings.logo %}
-        <img height="40" src="{{ site.data.settings.logo | absolute_url }}" alt="{{ site.data.settings.title }}">
+        <img src="{{ site.data.settings.logo | absolute_url }}" alt="{{ site.data.settings.title }}">
         {% else if %}
         <h3 class="text-white font-tertiary">{{site.data.settings.title}}</h3>
       {% endif %}
@@ -13,7 +13,7 @@ <h3 class="text-white font-tertiary">{{site.data.settings.title}}</h3>
     </button>
 
     <div class="collapse navbar-collapse text-center" id="navigation">
-      <ul class="navbar-nav ml-auto">
+      <ul class="navbar-nav ml-auto align-items-center">
         <li class="nav-item active">
           <a class="nav-link" href="{{ site.baseurl }}/">Home</a>
         </li>

_includes/timeline-section.html

@@ -10,7 +10,7 @@ <h2>{{ site.data.settings.timeline.title }}</h2>
       <div class="col-lg-12 mx-auto text-center mb-60">
         <h2 class="font-primary text-dark">{{ site.data.settings.timeline-title }}</h2>
         <p class="font-primary paragraph-lg text-dark">{{ site.data.settings.timeline-description }}</p>
-        <div class="col-lg-12">
+        <div class="w-100">
           <ul class="timeline">
             {%- assign align = site.data.settings.timeline.start_align -%}
             {%- for event in site.data.settings.timeline.events -%}

assets/js/script.js

@@ -154,4 +154,10 @@
 
 
 
-})(jQuery);
+})(jQuery);
+
+
+
+$('.navbar-nav>li>a').on('click', function(){     // this causes the navbar to collapse when a link is clicked (in mobile view), this is necessary for page-internal (e.g. #about) links
+    $('.navbar-collapse').collapse('hide');
+});

assets/scss/_common.scss

@@ -223,7 +223,7 @@ a.text-dark{
   font-style: italic;
   font-size: 40px;
   @include desktop {
-    margin-top: 250px;
+    margin-top: 140px;
     font-size: 22px;
   }
 }

assets/scss/_typography.scss

@@ -45,8 +45,9 @@ h1,h2,h3,h4,h5,h6 {
 
 h1, .h1{
   font-size: 80px;
+  word-wrap: anywhere;
   @include desktop {
-    font-size: 45px;
+    font-size: 38px;
   }
 }
 

assets/scss/templates/_navigation.scss

@@ -1,9 +1,10 @@
 .navigation{
-  padding: 40px 130px;
+  padding: 40px 40px 20px 40px;
+  background-color: rgba($primary-color, 0.5);
   transition: .3s ease;
   &.nav-bg {
     background-color: rgba($primary-color, 0.8);
-    padding: 15px 100px;
+    padding: 15px 40px;
     -webkit-backdrop-filter: blur(8px);
     backdrop-filter: blur(8px);
     @include desktop {
@@ -29,6 +30,12 @@
   }
   .navbar-brand {
     background-color: $secondary-color;
+    img {
+      height: 40px;
+      @include desktop {
+        height: 30px;
+      }
+    }
   }
 }
 

assets/scss/templates/_timeline.scss

@@ -7,6 +7,8 @@ section#timeline-section {
   position: relative;
   padding: 0;
   list-style: none;
+  margin-right: -10px;
+  margin-left: -10px;
   &:before {
     position: absolute;
     top: 0;