responsive layout - wip

lacre_basic/css/custom.css

@@ -7,8 +7,8 @@
 /* Fonts */
 
 @import url("fonts.css");
-@import url("fork-awesome/css/fork-awesome.min.css");
-@import url("line-awesome/1.3.0/css/line-awesome.min.css");
+/*@import url("fork-awesome/css/fork-awesome.min.css");
+@import url("line-awesome/1.3.0/css/line-awesome.min.css");*/
 
 /* Normalize - https://github.com/necolas/normalize.css/ */
 
@@ -47,10 +47,12 @@
 }
 
 .ribbon {
+  display: inline-block;
   background-color: #203040;
   margin: auto;
   width: 60%;
-  height: 20rem;
+  padding-bottom: 35%;
+  /*height: 20rem;*/
 }
 
 .ribbon img {
@@ -60,5 +62,5 @@
 }
 
 .columns img {
-   width: 70%;
+   width: 150px;
 }

lacre_basic/css/media-queries.css

@@ -16,6 +16,45 @@ Lacre Media Queries
 ------------------------------------*/
 @media only screen and (max-width: 1150px) {
 
+  body{
+   width: 100%;
+  }
+
+  .columns img {
+    display: none;
+  }
+
+  /* column widths */
+
+  .column, .columns {
+   padding: 0;
+}
+
+  .row .five,
+  .row .six,
+  .row .seven,
+  .row .eight,
+  .row .nine,
+  .row .ten,
+  .row .eleven,
+  .row .twelve      { width: 100%; }
+
+  .wrapper {
+      margin: 0 5%;
+  }
+
+  .ribbon {
+    width: 100%;
+    }
+
+  .ribbon img {
+    position: absolute;
+    left: 0%;
+    width: 100%;
+  }
+
+
+
     /* header styles
    ------------------------------------*/
 
@@ -253,17 +292,20 @@ Lacre Media Queries
 
 @media only screen and (max-width: 600px) {
 
+   body {
+     font-size: 0.9rem;
+     width: 100%;
+   }
+
    /* mobile navigation
    ------------------------------------*/
-   #nav-wrap ul#nav { width: 10%; float: none; }
-
-   #nav-wrap:target div#nav-links > ul#nav	{
-      width: 80%;
+   .header {
+       top: -1rem;
    }
 
-   #nav-wrap:target div#nav-right > ul#logo-right	{
-      width: 80%;
-   }
+.main-nav ul li a {
+    line-height: 35px;
+}
 
    /* header styles
    ------------------------------------*/

lacre_basic/templates/partials/base.html.twig

@@ -15,9 +15,9 @@
 {% endblock head %}
 
 {% block stylesheets %}
-    {% do assets.addCss('https://unpkg.com/purecss@1.0.0/build/pure-min.css', 100) %}
-    {% do assets.addCss('https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css', 99) %}
+    {% do assets.addCss('theme://css/defaults.css', 99) %}
     {% do assets.addCss('theme://css/custom.css', 98) %}
+    {% do assets.addCss('theme://css/media-queries.css', 97) %}
 {% endblock %}
 
 {% block javascripts %}