fix some styling issues

ot_templating/Resources/Private/Layouts/3Col.html

@@ -7,21 +7,26 @@
 <div class="main">
     <f:comment><!-- Left column --></f:comment>
     <div class="leftcol">
-        <f:comment><!-- render the content of the leftcol section (left column) --></f:comment>
-        <f:render section="Leftcol" />
+        <div class="content">
+            <f:comment><!-- render the content of the leftcol section (left column) --></f:comment>
+            <f:render section="Leftcol" />
+        </div>
     </div>
 
     <f:comment><!-- Central column --></f:comment>
-    <div class="content">
-
-        <f:comment><!-- render the content of the content section (middle column) --></f:comment>
-        <f:render section="Content" />
+    <div class="centralcol">
+        <div class="content">
+            <f:comment><!-- render the content of the content section (middle column) --></f:comment>
+            <f:render section="Content" />
+        </div>
     </div>
 
     <f:comment><!-- Right column --></f:comment>
     <div class="rightcol">
-        <f:comment><!-- defines the content of the rightcol section (right column) --></f:comment>
-        <f:render section="Rightcol" />
+        <div class="content">
+            <f:comment><!-- defines the content of the rightcol section (right column) --></f:comment>
+            <f:render section="Rightcol" />
+        </div>
     </div>
 
 </div> <!-- /container -->

ot_templating/Resources/Private/Layouts/Home.html

@@ -10,15 +10,18 @@
         <f:comment><!-- Render the next events section defined in partial/NextEvents.html--></f:comment>
         <f:render partial="eventsPreview" />
 
-        <f:comment><!-- render the content of the leftcol section (left column) --></f:comment>
-        <f:render section="Leftcol" />
+        <div class="content">
+            <f:comment><!-- render the content of the leftcol section (left column) --></f:comment>
+            <f:render section="Leftcol" />
+        </div>
     </div>
 
     <f:comment><!-- Central column --></f:comment>
-    <div class="content">
-
-        <f:comment><!-- render the content of the content section (middle column) --></f:comment>
-        <f:render section="Content" />
+    <div class="centralcol">
+        <div class="content">
+            <f:comment><!-- render the content of the content section (middle column) --></f:comment>
+            <f:render section="Content" />
+        </div>
     </div>
 
     <f:comment><!-- Right column --></f:comment>
@@ -26,8 +29,10 @@
         <f:comment><!-- Render the donors section defined in partial/Donors.html--></f:comment>
         <f:render partial="donors" />
 
-        <f:comment><!-- defines the content of the rightcol section (right column) --></f:comment>
-        <f:render section="Rightcol" />
+        <div class="content">
+            <f:comment><!-- defines the content of the rightcol section (right column) --></f:comment>
+            <f:render section="Rightcol" />
+        </div>
     </div>
 
 </div> <!-- /container -->

ot_templating/Resources/Public/assets/style/common/module/_content.scss

@@ -24,10 +24,13 @@ $cols-header-font-color: $cols-header-font-color;
 $cols-header-font-size: $cols-header-font-size;
 $cols-header-font-weight: $cols-header-font-weight;
 
-.content {
+.centralcol {
   flex: 1;
   padding: 0 2em;
   min-width: 600px;
+}
+
+.content {
   line-height: 1.4em;
 
   h1, h2, h3, h4, h5, h6 {
@@ -143,6 +146,11 @@ $cols-header-font-weight: $cols-header-font-weight;
     word-wrap: break-word;
     color: #333333;
   }
+
+  img {
+    max-width: 95%;
+    height: auto;
+  }
 }
 
 .leftcol, .rightcol {
@@ -157,6 +165,14 @@ $cols-header-font-weight: $cols-header-font-weight;
         font-weight: $otbox-header-font-weight;
         padding: 0;
         margin: 0;
+
+        a {
+          color: $otbox-header-font-color;
+        }
+
+        a:hover {
+          color: lighten($otbox-header-font-color, 10%);
+        }
       }
   }
 

ot_templating/Resources/Public/assets/style/style.css

@@ -250,10 +250,13 @@ ul.dropdown-left {
   max-width: 60vw;
 }
 
-.content {
+.centralcol {
   flex: 1;
   padding: 0 2em;
   min-width: 600px;
+}
+
+.content {
   line-height: 1.4em;
 }
 .content h1, .content h2, .content h3, .content h4, .content h5, .content h6 {
@@ -350,6 +353,10 @@ ul.dropdown-left {
   word-wrap: break-word;
   color: #333333;
 }
+.content img {
+  max-width: 95%;
+  height: auto;
+}
 
 .leftcol header, .rightcol header {
   background: #323232;
@@ -363,6 +370,12 @@ ul.dropdown-left {
   padding: 0;
   margin: 0;
 }
+.leftcol header h2 a, .leftcol header h3 a, .rightcol header h2 a, .rightcol header h3 a {
+  color: #4facc6;
+}
+.leftcol header h2 a:hover, .leftcol header h3 a:hover, .rightcol header h2 a:hover, .rightcol header h3 a:hover {
+  color: #76bed2;
+}
 .leftcol p, .rightcol p {
   font-size: 0.9em;
 }

ot_templating/Resources/Public/assets/style/theme-blue.css

@@ -250,10 +250,13 @@ ul.dropdown-left {
   max-width: 60vw;
 }
 
-.content {
+.centralcol {
   flex: 1;
   padding: 0 2em;
   min-width: 600px;
+}
+
+.content {
   line-height: 1.4em;
 }
 .content h1, .content h2, .content h3, .content h4, .content h5, .content h6 {
@@ -350,6 +353,10 @@ ul.dropdown-left {
   word-wrap: break-word;
   color: #333333;
 }
+.content img {
+  max-width: 95%;
+  height: auto;
+}
 
 .leftcol header, .rightcol header {
   background: #323232;
@@ -363,6 +370,12 @@ ul.dropdown-left {
   padding: 0;
   margin: 0;
 }
+.leftcol header h2 a, .leftcol header h3 a, .rightcol header h2 a, .rightcol header h3 a {
+  color: #097f9a;
+}
+.leftcol header h2 a:hover, .leftcol header h3 a:hover, .rightcol header h2 a:hover, .rightcol header h3 a:hover {
+  color: #0ca7ca;
+}
 .leftcol p, .rightcol p {
   font-size: 0.9em;
 }

ot_templating/Resources/Public/assets/style/theme-green.css

@@ -250,10 +250,13 @@ ul.dropdown-left {
   max-width: 60vw;
 }
 
-.content {
+.centralcol {
   flex: 1;
   padding: 0 2em;
   min-width: 600px;
+}
+
+.content {
   line-height: 1.4em;
 }
 .content h1, .content h2, .content h3, .content h4, .content h5, .content h6 {
@@ -350,6 +353,10 @@ ul.dropdown-left {
   word-wrap: break-word;
   color: #333333;
 }
+.content img {
+  max-width: 95%;
+  height: auto;
+}
 
 .leftcol header, .rightcol header {
   background: #323232;
@@ -363,6 +370,12 @@ ul.dropdown-left {
   padding: 0;
   margin: 0;
 }
+.leftcol header h2 a, .leftcol header h3 a, .rightcol header h2 a, .rightcol header h3 a {
+  color: #04a04c;
+}
+.leftcol header h2 a:hover, .leftcol header h3 a:hover, .rightcol header h2 a:hover, .rightcol header h3 a:hover {
+  color: #05d264;
+}
 .leftcol p, .rightcol p {
   font-size: 0.9em;
 }

ot_templating/Resources/Public/assets/style/theme-grey.css

@@ -250,10 +250,13 @@ ul.dropdown-left {
   max-width: 60vw;
 }
 
-.content {
+.centralcol {
   flex: 1;
   padding: 0 2em;
   min-width: 600px;
+}
+
+.content {
   line-height: 1.4em;
 }
 .content h1, .content h2, .content h3, .content h4, .content h5, .content h6 {
@@ -350,6 +353,10 @@ ul.dropdown-left {
   word-wrap: break-word;
   color: #333333;
 }
+.content img {
+  max-width: 95%;
+  height: auto;
+}
 
 .leftcol header, .rightcol header {
   background: #323232;
@@ -363,6 +370,12 @@ ul.dropdown-left {
   padding: 0;
   margin: 0;
 }
+.leftcol header h2 a, .leftcol header h3 a, .rightcol header h2 a, .rightcol header h3 a {
+  color: #8c8c8c;
+}
+.leftcol header h2 a:hover, .leftcol header h3 a:hover, .rightcol header h2 a:hover, .rightcol header h3 a:hover {
+  color: #a6a6a6;
+}
 .leftcol p, .rightcol p {
   font-size: 0.9em;
 }

ot_templating/Resources/Public/assets/style/theme-light-blue.css

@@ -250,10 +250,13 @@ ul.dropdown-left {
   max-width: 60vw;
 }
 
-.content {
+.centralcol {
   flex: 1;
   padding: 0 2em;
   min-width: 600px;
+}
+
+.content {
   line-height: 1.4em;
 }
 .content h1, .content h2, .content h3, .content h4, .content h5, .content h6 {
@@ -350,6 +353,10 @@ ul.dropdown-left {
   word-wrap: break-word;
   color: #333333;
 }
+.content img {
+  max-width: 95%;
+  height: auto;
+}
 
 .leftcol header, .rightcol header {
   background: #323232;
@@ -363,6 +370,12 @@ ul.dropdown-left {
   padding: 0;
   margin: 0;
 }
+.leftcol header h2 a, .leftcol header h3 a, .rightcol header h2 a, .rightcol header h3 a {
+  color: #0aa5ec;
+}
+.leftcol header h2 a:hover, .leftcol header h3 a:hover, .rightcol header h2 a:hover, .rightcol header h3 a:hover {
+  color: #33b9f6;
+}
 .leftcol p, .rightcol p {
   font-size: 0.9em;
 }

ot_templating/Resources/Public/assets/style/theme-light-red.css

@@ -250,10 +250,13 @@ ul.dropdown-left {
   max-width: 60vw;
 }
 
-.content {
+.centralcol {
   flex: 1;
   padding: 0 2em;
   min-width: 600px;
+}
+
+.content {
   line-height: 1.4em;
 }
 .content h1, .content h2, .content h3, .content h4, .content h5, .content h6 {
@@ -350,6 +353,10 @@ ul.dropdown-left {
   word-wrap: break-word;
   color: #333333;
 }
+.content img {
+  max-width: 95%;
+  height: auto;
+}
 
 .leftcol header, .rightcol header {
   background: #323232;
@@ -363,6 +370,12 @@ ul.dropdown-left {
   padding: 0;
   margin: 0;
 }
+.leftcol header h2 a, .leftcol header h3 a, .rightcol header h2 a, .rightcol header h3 a {
+  color: #dd453f;
+}
+.leftcol header h2 a:hover, .leftcol header h3 a:hover, .rightcol header h2 a:hover, .rightcol header h3 a:hover {
+  color: #e56f6a;
+}
 .leftcol p, .rightcol p {
   font-size: 0.9em;
 }

ot_templating/Resources/Public/assets/style/theme-orange.css

@@ -250,10 +250,13 @@ ul.dropdown-left {
   max-width: 60vw;
 }
 
-.content {
+.centralcol {
   flex: 1;
   padding: 0 2em;
   min-width: 600px;
+}
+
+.content {
   line-height: 1.4em;
 }
 .content h1, .content h2, .content h3, .content h4, .content h5, .content h6 {
@@ -350,6 +353,10 @@ ul.dropdown-left {
   word-wrap: break-word;
   color: #333333;
 }
+.content img {
+  max-width: 95%;
+  height: auto;
+}
 
 .leftcol header, .rightcol header {
   background: #323232;
@@ -363,6 +370,12 @@ ul.dropdown-left {
   padding: 0;
   margin: 0;
 }
+.leftcol header h2 a, .leftcol header h3 a, .rightcol header h2 a, .rightcol header h3 a {
+  color: #e4611b;
+}
+.leftcol header h2 a:hover, .leftcol header h3 a:hover, .rightcol header h2 a:hover, .rightcol header h3 a:hover {
+  color: #e98149;
+}
 .leftcol p, .rightcol p {
   font-size: 0.9em;
 }

ot_templating/Resources/Public/assets/style/theme-purple.css

@@ -250,10 +250,13 @@ ul.dropdown-left {
   max-width: 60vw;
 }
 
-.content {
+.centralcol {
   flex: 1;
   padding: 0 2em;
   min-width: 600px;
+}
+
+.content {
   line-height: 1.4em;
 }
 .content h1, .content h2, .content h3, .content h4, .content h5, .content h6 {
@@ -350,6 +353,10 @@ ul.dropdown-left {
   word-wrap: break-word;
   color: #333333;
 }
+.content img {
+  max-width: 95%;
+  height: auto;
+}
 
 .leftcol header, .rightcol header {
   background: #323232;
@@ -363,6 +370,12 @@ ul.dropdown-left {
   padding: 0;
   margin: 0;
 }
+.leftcol header h2 a, .leftcol header h3 a, .rightcol header h2 a, .rightcol header h3 a {
+  color: #a5377e;
+}
+.leftcol header h2 a:hover, .leftcol header h3 a:hover, .rightcol header h2 a:hover, .rightcol header h3 a:hover {
+  color: #c34c99;
+}
 .leftcol p, .rightcol p {
   font-size: 0.9em;
 }

ot_templating/Resources/Public/assets/style/theme-red.css

@@ -250,10 +250,13 @@ ul.dropdown-left {
   max-width: 60vw;
 }
 
-.content {
+.centralcol {
   flex: 1;
   padding: 0 2em;
   min-width: 600px;
+}
+
+.content {
   line-height: 1.4em;
 }
 .content h1, .content h2, .content h3, .content h4, .content h5, .content h6 {
@@ -350,6 +353,10 @@ ul.dropdown-left {
   word-wrap: break-word;
   color: #333333;
 }
+.content img {
+  max-width: 95%;
+  height: auto;
+}
 
 .leftcol header, .rightcol header {
   background: #323232;
@@ -363,6 +370,12 @@ ul.dropdown-left {
   padding: 0;
   margin: 0;
 }
+.leftcol header h2 a, .leftcol header h3 a, .rightcol header h2 a, .rightcol header h3 a {
+  color: #df0009;
+}
+.leftcol header h2 a:hover, .leftcol header h3 a:hover, .rightcol header h2 a:hover, .rightcol header h3 a:hover {
+  color: #ff131d;
+}
 .leftcol p, .rightcol p {
   font-size: 0.9em;
 }