Merge pull request 'add goals to donate page' (#38) from goals into master

Reviewed-on: Disroot/grav-theme-disroot#38

css/media-queries.css

@@ -357,6 +357,31 @@ div#nav-logo {
 
 }
 
+/* Goals
+------------------------------------*/
+
+.goals .row {
+  display: block;
+}
+
+.goals-item {
+  margin-left: auto;
+  margin-right: auto;
+  margin-top: 5px;
+  margin-bottom: 5px;
+  min-width: 250px;
+}
+
+.goals .center {
+	text-align: center;
+  margin: 1em 0 3em;
+
+}
+
+}
+
+
+
 /* mobile narrow
   ------------------------------------*/
 
@@ -406,6 +431,19 @@ div#nav-logo {
       width: 80% !important;
    }
 
+   /* goals
+   ------------------------------------*/
+
+   .goals h6 {
+     font-size: 100%;
+   }
+
+   .goals-item {
+      width: 80% !important;
+   }
+
+
+
    #boxtitle {
      line-height: 1.2;
      font-size: 20px;

css/style.css

@@ -778,6 +778,7 @@ ul#nav li a:hover .ul#nav li ul {
   opacity: 1;
 }
 
+
 /* Mission statement
 --------------------------------------*/
 
@@ -901,40 +902,85 @@ img.transparent {
 /* Goals
 ------------------------------------*/
 
-.goal {
-    color: #555;
-    background-color: #FFF;
-    /*border: 5px double #8EB726;*/
-    border: none;
-    border-radius: 10px;
-    padding: 20px;
-    padding-bottom: 5px;
-    box-shadow: 10px 10px 38px 0px rgba(0, 0, 0, 0.25);
-    margin-bottom: 20%;
+#.goal {
+#    color: #555;
+#    background-color: #FFF;
+#    /*border: 5px double #8EB726;*/
+#    border: none;
+#    border-radius: 10px;
+#    padding-bottom: 5px;
+#    box-shadow: 10px 10px 38px 0px rgba(0, 0, 0, 0.25);
+#    margin-bottom: 20%;
+#}
+
+.goals {
+  position: relative;
+  display: flex;
+	display: -webkit-flex;
+	-webkit-flex: 1;
+	flex: 1;
+	-webkit-flex-direction: row;
+	flex-direction: row;
+	-webkit-flex-wrap: wrap;
+	flex-wrap: wrap;
+	-webkit-justify-content: space-between;
+	justify-content: left;
+	-webkit-align-items: flex-start;
+	align-items: flex-start;
 }
 
-.goal .center {
+.goals-item {
+  position: relative;
+  width: 28% !important;
+  min-width: 200px;
+  min-height: 180px;
+  border: none;
+  box-shadow: 10px 10px 38px 0px rgba(0, 0, 0, 0.25);
+  margin: 2% !important;
+  color: #555;
+  background-color: #ffffff;
+  padding: 3%;
+}
+
+.goals-item-lock {
+  background-color: #e6e6e6;
+}
+
+.goals-item h3 {
+  line-height: 1.2;
+}
+
+.goals .center {
     text-align: center;
     margin: -1em 0 3em;
 }
 
-.goal .right {
+.goals .right {
     text-align: right;
 }
 
-.goal img {
+.goals img {
     position: relative;
     left: -80px;
-
 }
 
-.goal h2, .goal h4 {
-    line-height: 95%;
+.goals h2 {
+    line-height: 110%;
     margin-bottom: 4%;
+    color:#8EB726;
 }
 
-.goal h6 {
-   font-size: 10px;
+.goals h4 {
+    line-height: 110%;
+    color:#555;
+    font-size: 90%;
+}
+
+.goals h6 {
+  display: inline-block;
+  margin: 0 0 0 2%;
+  padding: 0;
+  font-size: 60%;
 }
 
 .popper {
@@ -942,6 +988,10 @@ img.transparent {
     padding: 5%;
 }
 
+.popper2 {
+    font-size: 2em;
+}
+
 .pbar {
     font-weight: 900;
     width: 100%;

templates/modular/goals.html.twig

@@ -0,0 +1,29 @@
+{% block content %}
+<section id="{{ page.slug }}">
+    <div class="fullbar" style="background-color:{{ page.header.bgcolor }};">
+      <div class="fullbar-content" style="color:{{ page.header.fontcolor }}; text-align:{{ page.header.text_align }};">
+          <div class="row">
+               <div class="goals row">
+                   {% for item in page.header.goals %}
+                   {% if item.unlock == 'yes' %}
+                       <div class="goals-item two columns">
+                       <div class=center><span class="popper2">&#127881;</span> UNLOCKED <span class="popper2">&#x1f389;</span> </div>
+                   {% else %}
+                      <div class="goals-item goals-item-lock two columns">
+                      <h4 class=center>HELP US UNLOCK<br>THIS GOAL</h4>
+                   {% endif %}
+                   <h2> {{ item.title }} </h2>
+                   <p> {{ item.text }} </p>
+                   {% if item.option %}
+                   {{ item.option }}
+                   {% endif %}
+                   </div>
+                   {% endfor %}
+                </div>
+               {{ page.content }}
+          </div>
+          <br>
+        </div>
+    </div>
+</section>
+{% endblock %}