header

web/themes/custom/popsu/css/setup/variables.css

@@ -0,0 +1,11 @@
+@media (min-width: 48rem) {
+  :root {
+    font-size: calc(1rem + ((1vw - .48rem) * 1.389));
+    /* .48rem = viewportWidthMinimum /100 */
+    /* 1.389rem = 100 * fontSizeDifference / viewportWidthDifference */ } }
+
+@media (min-width: 120em) {
+  :root {
+    font-size: 2rem; } }
+
+/*# sourceMappingURL=variables.css.map */

web/themes/custom/popsu/css/styles.css

@@ -999,6 +999,16 @@ table {
 .slick-arrow.slick-hidden {
   display: none; }
 
+@media (min-width: 48rem) {
+  :root {
+    font-size: calc(1rem + ((1vw - .48rem) * 1.389));
+    /* .48rem = viewportWidthMinimum /100 */
+    /* 1.389rem = 100 * fontSizeDifference / viewportWidthDifference */ } }
+
+@media (min-width: 120em) {
+  :root {
+    font-size: 2rem; } }
+
 @font-face {
   font-family: 'duke';
   src: url("../fonts/Duke_Fill.otf") format("opentype");
@@ -1140,9 +1150,50 @@ table {
 
 body {
   font-family: "trueno";
+  font-size: 0.6rem;
   font-weight: 300;
   line-height: 1.5; }
 
+main h2 {
+  text-transform: uppercase;
+  font-family: 'duke';
+  font-size: 2.3rem; }
+
+a {
+  color: inherit; }
+
+#header-top-right .header_top_rigth_container {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  background: #a1a1a1;
+  display: grid;
+  grid-template-columns: 5% 30% 30% 30% 5%;
+  padding: 1rem 0;
+  z-index: 100;
+  line-height: 2; }
+  #header-top-right .header_top_rigth_container nav {
+    grid-column-start: 2; }
+  #header-top-right .header_top_rigth_container a {
+    text-decoration: none;
+    font-weight: 400; }
+    #header-top-right .header_top_rigth_container a:hover {
+      text-decoration: underline; }
+  #header-top-right .header_top_rigth_container h2 {
+    font-weight: 100;
+    margin-bottom: .3rem; }
+  #header-top-right .header_top_rigth_container .is-active {
+    font-weight: 800; }
+  #header-top-right .header_top_rigth_container #block-views-block-programmes-block-2 .views-row {
+    width: 100%; }
+
+footer * {
+  word-wrap: break-word; }
+
+iframe {
+  display: none; }
+
 /*pages*/
 #header-top-right {
   background: yellow; }
@@ -1153,4 +1204,15 @@ body {
   background: lightblue;
   text-align: center; }
 
+article h2 {
+  font-family: "trueno";
+  font-weight: 600;
+  font-size: 0.8rem;
+  text-transform: inherit; }
+
+article h3, article h4, article h5, article h6 {
+  font-family: "trueno";
+  font-weight: 600;
+  font-size: 0.8rem; }
+
 /*# sourceMappingURL=styles.css.map */

web/themes/custom/popsu/lib/script.js

@@ -1,8 +1,8 @@
 import 'slick-carousel';
 
-$(document).ready(function(){
+$(function(){
 	console.log("$ ready !!");
-	//$('.last-news').slick();
-	//$('.last-ressources').slick();
+	$('.last-news').slick();
+	$('.last-ressources').slick();
 	
 });

web/themes/custom/popsu/partials/header.html.twig

@@ -7,6 +7,8 @@
         {{ page.header_top_middle }}
       </div>
       <div id="header-top-right" class="columns small-1">
+        <div class="button_burger">
+        </div>
         {{ page.header_top_rigth }}
       </div>
     </section>

web/themes/custom/popsu/popsu.theme

@@ -11,11 +11,10 @@ use Drupal\Core\Template\Attribute;
 
 function popsu_preprocess_views_view_unformatted(&$variables) {
 
-  $view = $variables['view'];
+  $view = $variables['view'];  
   if($view->id() == "programmes"){
     $rows = $variables['rows'];
         foreach ($rows as $id => $row) {
-            
             $variables['rows'][$id]['attributes'] = new Attribute();
             $c = $variables['rows'][$id]['content']["#row"]->nid;
             $variables['rows'][$id]['attributes']->addClass("popsu-node-".$c);
@@ -34,19 +33,14 @@ function popsu_preprocess_views_view_unformatted(&$variables) {
     }
 
   }
-
-  /*$rows = $variables['rows'];
-  $style = $view->style_plugin;
-  $options = $style->options;
-  $variables['default_row_class'] = !empty($options['default_row_class']);*/
-/*  foreach ($rows as $id => $row) {
-    $variables['rows'][$id] = array();
-    $variables['rows'][$id]['content'] = $row;
-    $variables['rows'][$id]['attributes'] = new Attribute();
-    if ($row_class = $view->style_plugin
-      ->getRowClass($id)) {
-      $variables['rows'][$id]['attributes']
-        ->addClass($row_class);
-    }
-  }*/
 };
+
+/* implements template_preprocess_region() */
+
+function popsu_preprocess_region(&$variables) {
+  $r = $variables['region'];
+  if (isset($variables['region'])) {
+    $variables['attributes']['class'][] = $variables['region'].'_container';
+    
+  }
+}

web/themes/custom/popsu/sass/pages/_default.scss

@@ -0,0 +1,14 @@
+article{
+
+    h2{
+        font-family: "trueno";
+        font-weight: 600;
+        font-size: $font-medium;
+        text-transform: inherit;
+    }
+    h3,h4,h5,h6{
+        font-family: "trueno";
+        font-weight: 600;
+        font-size: $font-medium;
+    }
+}

web/themes/custom/popsu/sass/setup/_globals.scss

@@ -1,5 +1,71 @@
 body{
 	font-family: "trueno";
+	font-size: $font-normal ;
 	font-weight: 300;
 	line-height: 1.5;
+}
+main{
+	h2{
+		text-transform: uppercase;
+		font-family: 'duke';
+		font-size: $font-extra;
+	}
+}
+a{
+	color:inherit;
+}
+//header
+#header-top-right{
+	.header_top_rigth_container{
+		position: absolute;
+		top: 0;
+		left: 0;
+		width: 100%;
+		background: rgb(161, 161, 161);
+		display: grid;
+		grid-template-columns: 5% 30% 30% 30% 5%;
+		padding: 1rem 0;
+		z-index: 100;
+		line-height: 2;
+		nav{
+			grid-column-start: 2;
+		}
+		// padding: 1rem .5rem 1rem .5rem;
+		a{
+			text-decoration: none;
+			font-weight: 400;
+			&:hover{
+				text-decoration: underline;
+			}
+		}
+		h2{
+			font-weight: 100;
+			margin-bottom: .3rem;
+		}
+		.is-active{
+			font-weight: 800;
+		}
+		#block-views-block-programmes-block-2{
+			.views-row{
+				width: 100%;
+			}
+		}
+	}
+}
+nav{
+
+	// position: absolute;
+	// display: none;
+}
+//footer
+
+footer{
+	*{
+		word-wrap: break-word;
+	}
+}
+
+//TEMP
+iframe{
+	display: none;
 }

web/themes/custom/popsu/sass/setup/_variables.scss

@@ -0,0 +1,21 @@
+$font-extra: 2.3rem;
+$font-big: 1rem;
+$font-medium: .8rem;
+$font-normal: .6rem;
+
+$col-met: red; 
+$col-eur: blue;
+$col-reg: green; 
+@media (min-width: 48rem) {
+	:root {
+	  font-size: calc(1rem + ((1vw - .48rem) * 1.389));
+	  /* .48rem = viewportWidthMinimum /100 */
+	  /* 1.389rem = 100 * fontSizeDifference / viewportWidthDifference */
+	}
+  }
+  
+  @media (min-width: 120em) {
+	:root {
+	  font-size: 2rem;
+	}
+  }

web/themes/custom/popsu/sass/styles.scss

@@ -19,7 +19,7 @@
 //import "../node_modules/slick-carousel/slick/slick-theme.scss";
 //@import "foundation";
 //@import "mixins";
-//@import "variables";
+@import "setup/variables";
 @import "setup/fonts";
 @import "setup/globals";
 

web/themes/custom/popsu/templates/blocks/block--menu-block.html.twig

@@ -0,0 +1,51 @@
+{#
+/**
+ * @file
+ * Default theme implementation for a menu block.
+ *
+ * Available variables:
+ * - plugin_id: The ID of the block implementation.
+ * - label: The configured label of the block if visible.
+ * - configuration: A list of the block's configuration values.
+ *   - label: The configured label for the block.
+ *   - label_display: The display settings for the label.
+ *   - provider: The module or other provider that provided this block plugin.
+ *   - Block plugin specific settings will also be stored here.
+ * - content: The content of this block.
+ * - attributes: HTML attributes for the containing element.
+ *   - id: A valid HTML ID and guaranteed unique.
+ * - title_attributes: HTML attributes for the title element.
+ * - content_attributes: HTML attributes for the content element.
+ * - title_prefix: Additional output populated by modules, intended to be
+ *   displayed in front of the main title tag that appears in the template.
+ * - title_suffix: Additional output populated by modules, intended to be
+ *   displayed after the main title tag that appears in the template.
+ *
+ * Headings should be used on navigation menus that consistently appear on
+ * multiple pages. When this menu block's label is configured to not be
+ * displayed, it is automatically made invisible using the 'visually-hidden' CSS
+ * class, which still keeps it visible for screen-readers and assistive
+ * technology. Headings allow screen-reader and keyboard only users to navigate
+ * to or skip the links.
+ * See http://juicystudio.com/article/screen-readers-display-none.php and
+ * http://www.w3.org/TR/WCAG-TECHS/H42.html for more information.
+ *
+ * @ingroup themeable
+ */
+#}
+{% set heading_id = attributes.id ~ '-menu'|clean_id %}
+
+<nav role="navigation" aria-labelledby="{{ heading_id }}"{{ attributes|without('role', 'aria-labelledby') }}>
+  {# Label. If not displayed, we still provide it for screen readers. #}
+  {% if not configuration.label_display %}
+    {% set title_attributes = title_attributes.addClass('visually-hidden') %}
+  {% endif %}
+  {{ title_prefix }}
+  <h2{{ title_attributes.setAttribute('id', heading_id) }}>{{ configuration.label }}</h2>
+  {{ title_suffix }}
+
+  {# Menu. #}
+  {% block content %}
+    {{ content }}
+  {% endblock %}
+</nav>

web/themes/custom/popsu/templates/layout/page.html.twig → web/themes/custom/popsu/templates/layout/page--node.html.twig

@@ -35,22 +35,26 @@
   {% include directory ~ '\/partials/header.html.twig' %}
   {{ page.help }}
 
-  <main role="main"  class="columns small-12">
+  <main role="main"  class="columns ">
     <a id="main-content" tabindex="-1"></a>
     {# link is in html.html.twig #}
-    <div class="layout-content">
+    
+    {% if page.sidebar_first == null %}
+      {% set offset = 'small-offset-3' %}
+    {% endif %}
+    <div class="layout-content small-6 {{offset}}">
       {{ page.content }}
     </div>
     {# /.layout-content #}
 
     {% if page.sidebar_first %}
-      <aside class="layout-sidebar-first" role="complementary">
+      <aside class="layout-sidebar-first small-3" role="complementary">
         {{ page.sidebar_first }}
       </aside>
     {% endif %}
 
     {% if page.sidebar_second %}
-      <aside class="layout-sidebar-second" role="complementary">
+      <aside class="layout-sidebar-second small-3" role="complementary">
         {{ page.sidebar_second }}
       </aside>
     {% endif %}

web/themes/custom/popsu/templates/regions/region--header-top-left.html.twig

@@ -0,0 +1,21 @@
+{#
+/**
+ * @file
+ * Default theme implementation to display a region.
+ *
+ * Available variables:
+ * - content: The content for this region, typically blocks.
+ * - attributes: HTML attributes for the region <div>.
+ * - region: The name of the region variable as defined in the theme's
+ *   .info.yml file.
+ *
+ * @see template_preprocess_region()
+ *
+ * @ingroup themeable
+ */
+#}
+{% if content %}
+  <div{{ attributes }}>
+    {{ content }}
+  </div>
+{% endif %}

web/themes/custom/popsu/templates/regions/region--header-top-middle.html.twig

@@ -0,0 +1,21 @@
+{#
+/**
+ * @file
+ * Default theme implementation to display a region.
+ *
+ * Available variables:
+ * - content: The content for this region, typically blocks.
+ * - attributes: HTML attributes for the region <div>.
+ * - region: The name of the region variable as defined in the theme's
+ *   .info.yml file.
+ *
+ * @see template_preprocess_region()
+ *
+ * @ingroup themeable
+ */
+#}
+{% if content %}
+  <div{{ attributes }}>
+    {{ content }}
+  </div>
+{% endif %}