Merge pull request #101 from ASKnetCommunity/development

design updates and content-submit updates

Author: MartinSchott

_data/sitetext.yml

@@ -42,7 +42,6 @@ en: &DEFAULT_EN
       <div class="col-md-2 col-7 text-left text-nowrap">using the <b>available resources.</b> </div>
     </div>
     '
-    submit: https://github.com/ASKnetCommunity/ASKnet.Community/issues/30
     section: about
     list:
       - title: "Community"
@@ -89,18 +88,16 @@ en: &DEFAULT_EN
     github: https://github.com/ASKtraining/Training
     submit: https://github.com/ASKnetCommunity/ASKnet.Community/issues/33
 
-  tools:
-    title: "#ASKtools"
-    text: "---here is the asktools text---"
-    section: asktools
-    submit: https://github.com/ASKnetCommunity/ASKnet.Community/issues/55
-
   resources:
     title: "Resources"
-    text: "open educational training resources"
+    text: "While providing Access to Skills and Knowledge, our network shares all creations and open educational training resources."
     section: resources
-    submit: https://github.com/ASKnetCommunity/ASKnet.Community/issues/56
 
+  tools:
+    title: "#ASKtools"
+    text: ""
+    section: asktools
+
 
   lead:
     title: "LEAD<br />Local Experts Action Directory"

_includes/hubs_grid.html

@@ -17,33 +17,37 @@ <h2>We need content here!</h2>
     <div class="row">
 	{% for project in site.hubs %}
       <div class="col-md-4 col-sm-6 hubs-item">
-        <a class="hubs-link" data-toggle="modal" href="#p{{ forloop.index }}">
-          <div class="hubs-hover">
-            <div class="hubs-hover-content">
-              <i class="{{ site.data.style.hubs-icon | default: "fas fa-plus fa-3x" }}"></i>
+        <div class="shadow-box">
+          <a class="hubs-link" data-toggle="modal" href="#p{{ forloop.index }}">
+            <div class="hubs-hover">
+              <div class="hubs-hover-content">
+                <i class="{{ site.data.style.hubs-icon | default: " fas fa-plus fa-3x" }}"></i>
+              </div>
             </div>
+            <img class="img-fluid hubs-img" src="{{ project.caption.thumbnail }}" alt="">
+          </a>
+          <div class="hubs-caption">
+            <h4>{{ project.caption.title }}</h4>
+            <p class="text-muted">{{ project.caption.subtitle }}</p>
           </div>
-          <img class="img-fluid" src="{{ project.caption.thumbnail }}" alt="">
-        </a>
-        <div class="hubs-caption">
-          <h4>{{ project.caption.title }}</h4>
-          <p class="text-muted">{{ project.caption.subtitle }}</p>
         </div>
       </div>
 	{% endfor %}
       <div class="col-md-4 col-sm-6 hubs-item">
-        <a class="hubs-link" target="_blank" href="https://github.com/ASKnetCommunity/ASKnet.Community/issues/new?assignees=&labels=content-submit%2Cnew-hub&template=new-hub.yml&title=Add+Hub%3A+">
+        <div class="shadow-box">
+          <a class="hubs-link" target="_blank" href="https://github.com/ASKnetCommunity/ASKnet.Community/issues/new?assignees=&labels=content-submit%2Cnew-hub&template=new-hub.yml&title=Add+Hub%3A+">
           <div class="hubs-hover">
             <div class="hubs-hover-content">
               <i class="{{ site.data.style.hubs-icon | default: "fas fa-plus fa-3x" }}"></i>
             </div>
           </div>
-          <img class="img-fluid" src="assets/img/hubs/00-new-hub.jpg" alt="">
+          <img class="img-fluid border border-light hubs-img" src="assets/img/hubs/00-new-hub.jpg" alt="">
         </a>
         <div class="hubs-caption">
           <h4>Add new Hub</h4>
           <p class="text-muted">you can register your hub here</p>
         </div>
+        </div>
       </div>
     </div>
   </div>

_includes/resources_grid.html

@@ -17,22 +17,25 @@ <h2>We need content here!</h2>
     <div class="row">
 	{% for project in site.resources %}
       <div class="col-md-4 col-sm-6 hubs-item">
-        <a class="hubs-link" href="{{ project.link }}" target="_blank">
-          <div class="hubs-hover">
-            <div class="hubs-hover-content">
-              <i class="fas fa-external-link-alt"></i>
+        <div class="shadow-box">
+          <a class="hubs-link" href="{{ project.link }}" target="_blank">
+            <div class="hubs-hover">
+              <div class="hubs-hover-content">
+                <i class="fas fa-external-link-alt"></i>
+              </div>
             </div>
+            <img class="img-fluid tools-img" src="{{ project.thumbnail }}" alt="">
+          </a>
+          <div class="hubs-caption">
+            <h4>{{ project.title }}</h4>
+            <p class="text-muted">{{ project.subtitle }}</p>
           </div>
-          <img class="img-fluid tools-img" src="{{ project.thumbnail }}" alt="">
-        </a>
-        <div class="hubs-caption">
-          <h4>{{ project.title }}</h4>
-          <p class="text-muted">{{ project.subtitle }}</p>
         </div>
       </div>
 	{% endfor %}
       <div class="col-md-4 col-sm-6 hubs-item">
-        <a class="hubs-link" target="_blank" href="https://github.com/ASKnetCommunity/ASKnet.Community/issues/new?assignees=&labels=content-submit%2Cnew-resource&template=add-resource.yml&title=Add+Resource%3A+">
+        <div class="shadow-box">
+          <a class="hubs-link" target="_blank" href="https://github.com/ASKnetCommunity/ASKnet.Community/issues/new?assignees=&labels=content-submit%2Cnew-resource&template=add-resource.yml&title=Add+Resource%3A+">
           <div class="hubs-hover">
             <div class="hubs-hover-content">
               <i class="{{ site.data.style.hubs-icon | default: "fas fa-plus fa-3x" }}"></i>
@@ -44,6 +47,7 @@ <h4>{{ project.title }}</h4>
           <h4>Add a new resource</h4>
           <p class="text-muted">You can propose a resource here.</p>
         </div>
+        </div>
       </div>
     </div>
   </div>

_includes/tools_grid.html

@@ -4,7 +4,7 @@
     <div class="row">
       <div class="col-lg-12 text-center{% if site.data.sitetext[site.locale].tools.submit %} sc{% endif %}">
         <h2 class="section-heading text-uppercase">{{ site.data.sitetext[site.locale].tools.title | markdownify | default: "Tools" }}</h2>
-        <h3 class="section-subheading text-muted">{{ site.data.sitetext[site.locale].tools.text | markdownify }}</h3>
+        <h3 class="section-subheading">{{ site.data.sitetext[site.locale].tools.text | markdownify }}</h3>
         {% if site.data.sitetext[site.locale].tools.submit %}
           <div class="sc-overlay">
             <h2>We need content here!</h2>
@@ -17,33 +17,37 @@ <h2>We need content here!</h2>
     <div class="row">
 	{% for tool in site.tools %}
       <div class="col-md-4 col-sm-6 hubs-item">
-        <a class="hubs-link" href="{{ tool.link }}" target="_blank">
-          <div class="hubs-hover">
-            <div class="hubs-hover-content">
-              <i class="fas fa-external-link-alt"></i>
+        <div class="shadow-box">
+          <a class="hubs-link" href="{{ tool.link }}" target="_blank">
+            <div class="hubs-hover">
+              <div class="hubs-hover-content">
+                <i class="fas fa-external-link-alt"></i>
+              </div>
             </div>
+            <img class="img-fluid tools-img" src="{{ tool.thumbnail }}" alt="">
+          </a>
+          <div class="hubs-caption">
+            <h4>{{ tool.title }}</h4>
+            <p class="text-muted">{{ tool.subtitle }}</p>
           </div>
-          <img class="img-fluid tools-img" src="{{ tool.thumbnail }}" alt="">
-        </a>
-        <div class="hubs-caption">
-          <h4>{{ tool.title }}</h4>
-          <p class="text-muted">{{ tool.subtitle }}</p>
         </div>
       </div>
 	{% endfor %}
       <div class="col-md-4 col-sm-6 hubs-item">
-        <a class="hubs-link" target="_blank" href="https://github.com/ASKnetCommunity/ASKnet.Community/issues/new?assignees=&labels=content-submit%2Cnew-asktool&template=add-tool.yml&title=Add+%23ASKtool%3A+">
+        <div class="shadow-box">
+          <a class="hubs-link" target="_blank" href="https://github.com/ASKnetCommunity/ASKnet.Community/issues/new?assignees=&labels=content-submit%2Cnew-asktool&template=add-tool.yml&title=Add+%23ASKtool%3A+">
           <div class="hubs-hover">
             <div class="hubs-hover-content">
               <i class="{{ site.data.style.hubs-icon | default: "fas fa-plus fa-3x" }}"></i>
             </div>
           </div>
-          <img class="img-fluid tools-img" src="assets/img/hubs/00-new-hub.jpg" alt="">
+          <img class="img-fluid border border-light tools-img" src="assets/img/hubs/00-new-hub.jpg" alt="">
         </a>
         <div class="hubs-caption">
           <h4>Add a new tool</h4>
           <p class="text-muted">You can propose a tool here.</p>
         </div>
+        </div>
       </div>
     </div>
   </div>

_sass/base/_page.scss

@@ -20,6 +20,18 @@ a {
 }
 .bg-primary {
   background-color: $primary !important;
+  background: url(../../assets/img/tile-orange.jpg);
+  // background-attachment: fixed;
+}
+
+.bg-light {
+  background: url(../../assets/img/tile-light.jpg);
+}
+
+.bg-dark {
+  // background-color: $primary !important;
+  background: url(../../assets/img/tile-dark.jpg);
+  // background-attachment: fixed;
 }
 
 h1,

_sass/layout/_hubs.scss

@@ -2,7 +2,10 @@
 #hubs, #asktools, #resources {
   .hubs-item {
     right: 0;
-    margin: 0 0 15px;
+    margin: 0 0 30px;
+    .shadow-box {
+      box-shadow: 5px 5px 0px 0px rgba(0, 0, 0, 0.1); 
+    }
     .hubs-link {
       position: relative;
       display: block;
@@ -14,6 +17,11 @@
         width: 100%;
         object-fit: cover;
       }
+      .hubs-img{
+        height: 245px;
+        width: 100%;
+        object-fit: cover;
+      }
       .hubs-hover {
         position: absolute;
         width: 100%;

_sass/layout/_timeline.scss

@@ -8,10 +8,10 @@
     top: 0;
     bottom: 0;
     left: 40px;
-    width: 2px;
-    margin-left: -1.5px;
+    width: 7px;
+    margin-left: -3.5px;
     content: "";
-    background-color: $gray-200;
+    background-color: white;
   }
   > li {
     position: relative;
@@ -53,7 +53,7 @@
       margin-left: 0;
       text-align: center;
       color: $white;
-      border: 7px solid $gray-200;
+      border: 7px solid white;
       border-radius: 100%;
       background-color: $primary;
       h4 {
@@ -89,6 +89,14 @@
       color: inherit;
       &.subheading {
         text-transform: none;
+        &:before {
+          position: absolute;
+          top: 0;
+          left: 440px;
+          height: 7px;
+          content: "";
+          background-color: white;
+        }
       }
     }
   }