Update block separators

diff --git a/app/static/src/sass/global/_typography.scss b/app/static/src/sass/global/_typography.scss
index 42041e2eb0c91a2b90a91871764623ce6a204402..4f200b470782d143653cd7414cc25a10371a9e1b 100755 (executable)
--- a/app/static/src/sass/global/_typography.scss
+++ b/app/static/src/sass/global/_typography.scss
@@ -144,8 +144,19 @@ h3 {
 }
 
 hr {
+
+       &:before {
+               content: "";
+               display: block;
+               height: 1px;
+               background: rgba(255, 255, 255, 0.5);
+               width: 100%;
+               top: -3px;
+               position: relative;
+       }
+
        border: 0;
-       border-top: 1px solid black;
+
        height: 11px;
        background-color: $color-main;
        @include margin(5 0 2 0);

diff --git a/app/static/src/sass/modules/_page.scss b/app/static/src/sass/modules/_page.scss
index c57a4ef7a43847a6a4c51ebc7745401caadfe026..8656c87044f589f5506cdf08268b90d14c665930 100644 (file)
--- a/app/static/src/sass/modules/_page.scss
+++ b/app/static/src/sass/modules/_page.scss
@@ -126,13 +126,13 @@ $module: ".page";
 
     hr + #{$module}__block--yellow {
 
-        @include margin-top(-2);
+        //@include margin-top(-2);
 
     }
 
     hr + #{$module}__block--black {
 
-        @include margin-top(-2);
+        //@include margin-top(-2);
 
     }
 
@@ -153,6 +153,26 @@ $module: ".page";
 
         &--yellow {
 
+            position: relative;
+            &:before {
+                       content: "";
+                       display: block;
+                       height: 1px;
+                       background: rgba($color-main, 0.5);
+                       width: 100%;
+                       top: -4px;
+                       position: absolute;
+               }
+            &:after {
+                content: "";
+                       display: block;
+                       height: 1px;
+                       background: rgba($color-main, 0.5);
+                       width: 100%;
+                       bottom: -4px;
+                       position: absolute;
+            }
+
             #{$module}__block-title {
                 text-align: center;
             }
@@ -168,11 +188,11 @@ $module: ".page";
             }
 
             & + hr {
-                margin-top: 1px;
+                //margin-top: 1px;
             }
 
             & + .page__block {
-                @include margin-top(2);
+                //@include margin-top(2);
             }
 
             a:not(.button) {
@@ -202,6 +222,26 @@ $module: ".page";
             @include padding-bottom(2);
             @include margin(2 0 0 0);
 
+            position: relative;
+            &:before {
+                       content: "";
+                       display: block;
+                       height: 1px;
+                       background: rgba($color-main, 0.5);
+                       width: 100%;
+                       top: -4px;
+                       position: absolute;
+               }
+            &:after {
+                content: "";
+                       display: block;
+                       height: 1px;
+                       background: rgba($color-main, 0.5);
+                       width: 100%;
+                       bottom: -4px;
+                       position: absolute;
+            }
+
             #{$module}__block-title {
                 text-align: center;
             }
@@ -226,11 +266,11 @@ $module: ".page";
             }
 
             & + hr {
-                margin-top: 1px;
+                //margin-top: 1px;
             }
 
             & + .page__block {
-                @include margin-top(2);
+                //@include margin-top(2);
             }
 
         }
@@ -243,6 +283,26 @@ $module: ".page";
             @include padding-bottom(2);
             @include margin(2 0 0 0);
 
+            position: relative;
+            &:before {
+                       content: "";
+                       display: block;
+                       height: 1px;
+                       background: rgba(255, 255, 255, 0.5);
+                       width: 100%;
+                       top: -4px;
+                       position: absolute;
+               }
+            &:after {
+                content: "";
+                       display: block;
+                       height: 1px;
+                       background: rgba(255, 255, 255, 0.5);
+                       width: 100%;
+                       bottom: -4px;
+                       position: absolute;
+            }
+
             #{$module}__block-title {
                 text-align: center;
             }
@@ -267,11 +327,11 @@ $module: ".page";
             }
 
             & + hr {
-                margin-top: 1px;
+                //margin-top: 1px;
             }
 
             & + .page__block {
-                @include margin-top(2);
+                //@include margin-top(2);
             }
 
         }
@@ -284,6 +344,26 @@ $module: ".page";
             @include padding-bottom(2);
             @include margin(2 0);
 
+            position: relative;
+            &:before {
+                       content: "";
+                       display: block;
+                       height: 1px;
+                       background: rgba(255, 255, 255, 0.5);
+                       width: 100%;
+                       top: -4px;
+                       position: absolute;
+               }
+            &:after {
+                content: "";
+                       display: block;
+                       height: 1px;
+                       background: rgba(255, 255, 255, 0.5);
+                       width: 100%;
+                       bottom: -4px;
+                       position: absolute;
+            }
+
             #{$module}__block-title {
                 text-align: center;
             }
@@ -308,11 +388,11 @@ $module: ".page";
             }
 
             & + hr {
-                margin-top: 1px;
+                //margin-top: 1px;
             }
 
             & + .page__block {
-                @include margin-top(2);
+                //@include margin-top(2);
             }
 
         }

diff --git a/app/templates/core/inc/block.html b/app/templates/core/inc/block.html
index c270bab0fbd49711713a7444faa8628fec64718f..d4252689d47503050432a8f32bee6e455bea36a0 100644 (file)
--- a/app/templates/core/inc/block.html
+++ b/app/templates/core/inc/block.html
@@ -3,7 +3,7 @@
     <div class="pb2">
         {% for block in blocks %}
             {% if block.content %}
-                {% if not forloop.first and block.with_separator %}
+                {% if block.with_separator %}
                     <hr />
                 {% endif %}
                 <div class="page__block{% if block.background_color %} page__block--{{ block.background_color }}{% endif %}">