page structure with ribbons and icon

lacre_basic/css/custom.css

@@ -26,11 +26,29 @@
 /* body { background: #203040; color: #E3DEDB; } /* already set in default.css */
 
 .banner {
+  position: relative;
+  z-index: 999;
 
 }
 
 .banner img{
-  width: 50%;
-  margin-left: 25%;
-  margin-right: 25%;
+  width: 70%;
+  margin: 0 15%;
+}
+
+.ribbon {
+  background-color: #203040;
+  margin: 0;
+  width: 60%;
+  height: 20rem;
+}
+
+.ribbon img {
+  position: absolute;
+  left: 15%;
+  width: 70%;
+}
+
+.columns img {
+   width: 70%;
 }

lacre_basic/css/defaults.css

@@ -5,15 +5,20 @@
     box-sizing: border-box;
 }
 
+html {
+    background: #011520;
+
+}
+
 body {
     background: #203040;
-    font-family: 'opensans-regular', sans-serif;
+    font-family: 'comfortaa', 'opensans-regular', sans-serif;
     font-weight: normal;
     font-size: 1rem;
     line-height: 1.7;
     color: #E3DEDB;
-
-    -webkit-font-smoothing: antialiased; /* Fix for webkit rendering */
+    width: 70%;
+    margin: 0 15%;051525ebkit-font-smoothing: antialiased; /* Fix for webkit rendering */
     -webkit-text-size-adjust: 100%;
 }
 
@@ -23,16 +28,16 @@ h3,
 h4,
 h5,
 h6 {
-    color: #454B4D;
+    color: #E3DEDB;
 }
 
 a {
-    color: #1F8CD6;
+    color: #BB2244;
     text-decoration: none;
 }
 
 a:hover {
-    color: #175E91;
+    color: #DD4466;
 }
 
 pre {
@@ -47,9 +52,200 @@ blockquote {
     padding: 0 2rem;
 }
 
+.row {
+   width: 96%;
+   max-width: 1150px;
+   margin: 0 auto;
+}
+/* fixed width for IE8 */
+.ie .row { width: 1000px ; }
+
+.narrow .row { max-width: 980px; }
+
+.row .row { width: auto; max-width: none; margin: 0 -20px; }
+
+/* row clearing */
+.row:before,
+.row:after {
+    content: " ";
+    display: table;
+}
+.row:after {
+    clear: both;
+}
+
+.column, .columns {
+   position: relative;
+   padding: 0 20px;
+   min-height: 1px;
+   float: left;
+}
+.column.centered, .columns.centered  {
+    float: none;
+    margin: 0 auto;
+}
+
+.remove-bottom { margin-bottom: 0 !important; }
+.half-bottom { margin-bottom: 12px !important; }
+.add-bottom { margin-bottom: 24px !important; }
+.no-border { border: none; }
+
+.text-center  { text-align: center !important; }
+.text-left    { text-align: left !important; }
+.text-right   { text-align: right !important; }
+.pull-left    { float: left !important; }
+.pull-right   { float: right !important; }
+.align-center {
+	margin-left: auto !important;
+	margin-right: auto !important;
+	text-align: center !important;
+}
+
+/* removed gutters */
+.row.collapsed > .column,
+.row.collapsed > .columns,
+.column.collapsed, .columns.collapsed  { padding: 0; }
+
+/*[class*="column"] + [class*="column"]:last-child { float: right; }
+[class*="column"] + [class*="column"].end { float: right; }*/
+
+/* column widths */
+.row .one         { width: 8.33333%; }
+.row .two         { width: 16.66667%; }
+.row .three       { width: 25%; }
+.row .four        { width: 33.33333%; }
+.row .five        { width: 41.66667%; }
+.row .six         { width: 50%; }
+.row .seven       { width: 58.33333%; }
+.row .eight       { width: 66.66667%; }
+.row .nine        { width: 75%; }
+.row .ten         { width: 83.33333%; }
+.row .eleven      { width: 91.66667%; }
+.row .twelve      { width: 100%; }
+
+/* Offsets */
+.row .offset-1    { margin-left: 8.33333%; }
+.row .offset-2    { margin-left: 16.66667%; }
+.row .offset-3    { margin-left: 25%; }
+.row .offset-4    { margin-left: 33.33333%; }
+.row .offset-5    { margin-left: 41.66667%; }
+.row .offset-6    { margin-left: 50%; }
+.row .offset-7    { margin-left: 58.33333%; }
+.row .offset-8    { margin-left: 66.66667%; }
+.row .offset-9    { margin-left: 75%; }
+.row .offset-10   { margin-left: 83.33333%; }
+.row .offset-11   { margin-left: 91.66667%; }
+
+/* Push/Pull */
+.row .push-1      { left: 8.33333%; }
+.row .pull-1      { right: 8.33333%; }
+.row .push-2      { left: 16.66667%; 	}
+.row .pull-2      { right: 16.66667%; }
+.row .push-3      { left: 25%; }
+.row .pull-3      { right: 25%;	}
+.row .push-4      { left: 33.33333%; }
+.row .pull-4      { right: 33.33333%; }
+.row .push-5      { left: 41.66667%; }
+.row .pull-5      { right: 41.66667%; }
+.row .push-6      { left: 50%; }
+.row .pull-6      { right: 50%; }
+.row .push-7      { left: 58.33333%; }
+.row .pull-7      { right: 58.33333%; }
+.row .push-8      { left: 66.66667%; 	}
+.row .pull-8      { right: 66.66667%; }
+.row .push-9      { left: 75%; }
+.row .pull-9      { right: 75%; }
+.row .push-10     { left: 83.33333%; }
+.row .pull-10     { right: 83.33333%; }
+.row .push-11     { left: 91.66667%; }
+.row .pull-11     { right: 91.66667%; }
+
+/* block grids
+--------------------------------------------------------------------- */
+.bgrid-sixths [class*="column"]   { width: 16.66667%; }
+.bgrid-quarters [class*="column"] { width: 25%; }
+.bgrid-thirds [class*="column"]   { width: 33.33333%; }
+.bgrid-halves [class*="column"]   { width: 50%; }
+
+[class*="bgrid"] [class*="column"] + [class*="column"]:last-child { float: left; }
+
+/* Left clearing for block grid columns - columns that changes width in
+different screen sizes. Allows columns with different heights to align
+properly.
+--------------------------------------------------------------------- */
+.first { clear: left; }   /* first column in default screen */
+.s-first { clear: none; } /* first column in smaller screens */
+
+/* smaller screens
+--------------------------------------------------------------- */
+@media only screen and (max-width: 900px) {
+
+   /* block grids on small screens */
+   .s-bgrid-sixths [class*="column"]   { width: 16.66667%; }
+   .s-bgrid-quarters [class*="column"] { width: 25%; }
+   .s-bgrid-thirds [class*="column"]   { width: 33.33333%; }
+   .s-bgrid-halves [class*="column"]   { width: 50%; }
+
+   /* block grids left clearing */
+   .first { clear: none; }
+   .s-first { clear: left; }
+
+}
+
+/* mobile wide/smaller tablets
+--------------------------------------------------------------- */
+@media only screen and (max-width: 767px) {
+
+   .row {
+	   width: 460px;
+	   margin: 0 auto;
+      padding: 0;
+	}
+   .column, .columns {
+	   width: auto !important;
+	   float: none;
+	   margin-left: 0;
+	   margin-right: 0;
+      padding: 0 30px;
+   }
+   .row .row { width: auto; max-width: none; margin: 0 -30px; }
+
+   [class*="column"] + [class*="column"]:last-child { float: none; }
+   [class*="bgrid"] [class*="column"] + [class*="column"]:last-child { float: none; }
+
+   /* Offsets */
+   .row .offset-1    { margin-left: 0%; }
+   .row .offset-2    { margin-left: 0%; }
+   .row .offset-3    { margin-left: 0%; }
+   .row .offset-4    { margin-left: 0%; }
+   .row .offset-5    { margin-left: 0%; }
+   .row .offset-6    { margin-left: 0%; }
+   .row .offset-7    { margin-left: 0%; }
+   .row .offset-8    { margin-left: 0%; }
+   .row .offset-9    { margin-left: 0%; }
+   .row .offset-10   { margin-left: 0%; }
+   .row .offset-11   { margin-left: 0%; }
+}
+
+/* mobile narrow
+--------------------------------------------------------------- */
+@media only screen and (max-width: 460px) {
+
+   .row { width: auto; max-width: 400px;}
+
+}
+
+/* larger screens
+--------------------------------------------------------------- */
+@media screen and (min-width: 1200px) {
+
+   .wide .row { max-width: 1180px; }
+
+}
+
 /* Utility Classes */
 .wrapper {
-    margin: 0 3rem;
+    margin: 0 10%;
 }
 
 .padding {
@@ -84,6 +280,9 @@ blockquote {
 .header {
     background-color: #E3DEDB;
     color: #eee;
+    position: relative;
+    top: -2rem;
+    z-index: 99;
 }
 
 .header a {

lacre_basic/css/media-queries.css

@@ -0,0 +1,274 @@
+/*------------------------------------
+
+Lacre Media Queries
+20-06-2022
+------------------------------------*/
+
+/* screenheight less than 800px
+------------------------------------*/
+@media only screen and (max-height: 800px) {
+  ul#nav li.dropdown {
+    height: 20px;
+  }
+}
+
+/* screenwidth less than 1150px
+------------------------------------*/
+@media only screen and (max-width: 1150px) {
+
+    /* header styles
+   ------------------------------------*/
+
+   /* nav-wrap */
+   ul#nav li a {
+      padding: 8px 8%;
+    }
+
+   .dropdown-content {
+       display: none;
+       z-index: 1;
+   }
+   .dropdown:hover .dropdown-content {
+       display: none;
+   }
+
+
+   /* Contact Section
+   ------------------------------------*/
+
+
+/* mobile wide/smaller tablets
+------------------------------------*/
+
+@media only screen and (max-width: 830px) {
+
+   /* mobile navigation
+   ------------------------------------*/
+
+
+   /* Header Styles
+   ------------------------------------*/
+
+/* toggle buttons */
+#nav-wrap:not( :target ) > a:first-of-type,
+#nav-wrap:target > a:last-of-type  {
+	   display: block;
+}
+
+#nav-wrap > a {
+   width: 48px;
+   height: 48px;
+   background-color: #50162D;
+   position: absolute;
+   border: none;
+   float: right;
+   font: 0/0 a;
+   text-shadow: none;
+   color: transparent;
+   top: 0px;
+   right: 30px;
+}
+
+#nav-wrap > a:before, #nav-wrap > a:after {
+    position: absolute;
+    border: 2px solid #fff;
+    top: 35%;
+    left: 25%;
+    right: 25%;
+    content: '';
+}
+
+#nav-wrap > a:after {
+  top: 60%;
+}
+
+/* End toggle buttons */
+
+
+#nav-wrap {
+     font: 12px 'opensans-bold', sans-serif;
+     background: transparent !important;
+     letter-spacing: 1.5px;
+     width: auto;
+     top: 0;
+     right: 0;
+     display:block;
+  }
+
+  ul#nav li {
+     display: block;
+     height: auto;
+     margin: 0 auto;
+     padding: 0 4%;
+     border-bottom: 1px solid #2D2E34;
+     border-bottom-style: dotted;
+  }
+
+  ul#logo-right li {
+     border-top: 1px solid #2D2E34;
+     border-top-style: dotted;
+  }
+
+  ul#nav li a {
+     display: block;
+     margin: 0;
+     padding: 0;
+     margin: 12px 0;
+     line-height: 16px; /* reset line-height from 48px */
+     border: none;
+     text-align: center;
+  }
+
+/* display menu panels */
+#nav-wrap:target div#nav-links > ul#nav	{
+   display: block;
+   padding: 30px 20px 10px 20px;
+   background: #1f2024;
+   margin: 0 30px;
+   float: right;
+   width: 150px;
+}
+
+#nav-wrap:target div#nav-right > ul#logo-right	{
+   display: block;
+   padding: 0px 20px 10px 20px;
+   background: #1f2024;
+   margin: 0 30px;
+   float:right;
+   width: 150px;
+}
+
+/* hide menu panel */
+#nav-wrap div#nav-links > ul#nav {
+   height: auto;
+   display: none;
+   clear: both;
+   width: 30%;
+   float: right;
+   position: relative;
+   top: 12px;
+   right: 0;
+}
+
+#nav-wrap div#nav-right > ul#logo-right	{
+   height: auto;
+   display: none;
+   clear: both;
+   width: 30%;
+   float: right;
+   position: relative;
+   right: 0;
+}
+
+
+
+/* Language menu*/
+
+#language {
+    position: fixed;
+    top: 0px;
+    right: 75px;
+}
+
+.language-selector .btn {
+    font-size: 1.5rem;
+    padding: 19px 15px;
+}
+
+.language-selector .btn i {
+    position: absolute;
+    top: 35px;
+    right: 20px;
+}
+
+.language-selector .dropdown-menu {
+  font-size: 1.3rem;
+}
+
+.language-selector .dropdown-menu>li>a {
+    padding: 12px 15px;
+}
+
+   /* Form
+   ------------------------------------*/
+
+   #contact label {
+      float: none;
+      width: 100%;
+   }
+   #contact input,
+   #contact textarea,
+   #contact select {
+     	margin-bottom: 6px;
+      width: 100%;
+   }
+   #contact button.submit { margin: 30px 0 24px 0; }
+   #message-warning, #message-success {
+      width: 100%;
+      margin-left: 0;
+   }
+
+
+   /* Footer
+   ------------------------------------*/
+
+   footer {
+     letter-spacing: 0.5px;
+     margin-bottom: 0px;
+     font-size: 10px;
+   }
+
+   footer div#footer-links ul li {
+     padding-left: 5px;
+     padding-right: 5px;
+   }
+
+   /* Icons */
+   footer  #footer-icons { display: none; }
+   footer  #footer-logo { display: none; }
+
+   /* Go To Top Button */
+   #go-top { margin-left: -22px; }
+   #go-top a {
+   	width: 54px;
+   	height: 54px;
+      font-size: 18px;
+      line-height: 54px;
+   }
+
+   /* fullbar */
+
+   .fullbar h3, .fullbar h4, .fullbar h5 {
+       line-height: 1.2;
+       font-size: 90%;
+   }
+
+
+}
+
+
+
+/* mobile narrow
+  ------------------------------------*/
+
+@media only screen and (max-width: 600px) {
+
+   /* mobile navigation
+   ------------------------------------*/
+   #nav-wrap ul#nav { width: 10%; float: none; }
+
+   #nav-wrap:target div#nav-links > ul#nav	{
+      width: 80%;
+   }
+
+   #nav-wrap:target div#nav-right > ul#logo-right	{
+      width: 80%;
+   }
+
+   /* header styles
+   ------------------------------------*/
+
+
+
+
+  }

lacre_basic/templates/modular/ribbon.html.twig

@@ -0,0 +1,20 @@
+{% block content %}
+
+{% if page.header.section_id %}
+   <section id="{{ page.header.section_id }}">
+{% else %}
+   <section id="{{ page.slug }}">
+{% endif %}
+
+        <div class="ribbon">
+            {{ page.content|raw }}
+            {% if page.header.ribbon == "left" %}
+              <img src="user/themes/lacre-basic/images/left_ribbon.png">
+            {% elseif page.header.ribbon == "right" %}
+              <img src="user/themes/lacre-basic/images/right_ribbon.png">
+            {% elseif page.header.ribbon == "bottom" %}
+              <img src="user/themes/lacre-basic/images/bottom_ribbon.png">
+            {% endif %}
+        </div>
+</section>
+{% endblock %}