supprcss+add_resize_jq

user/themes/r2c/css-compiled/template.min.css

@@ -1 +1 @@
-@font-face{font-family:STOLZ_0;src:url(../fonts/STOLZ/webfonts/35A23E_0_0.eot);src:url(../fonts/STOLZ/webfonts/35A23E_0_0.eot?#iefix) format('embedded-opentype'),url(../fonts/STOLZ/webfonts/35A23E_0_0.woff) format('woff'),url(../fonts/STOLZ/webfonts/35A23E_0_0.ttf) format('truetype'),url(../fonts/STOLZ/webfonts/35A23E_0_0.svg#STOLZ_0) format('svg')}*{box-sizing:border-box}a,abbr,acronym,address,applet,article,aside,audio,b,big,blockquote,body,canvas,caption,center,cite,code,dd,del,details,dfn,div,dl,dt,em,embed,fieldset,figcaption,figure,footer,form,h1,h2,h3,h4,h5,h6,header,hgroup,html,i,iframe,img,ins,kbd,label,legend,li,mark,menu,nav,object,ol,output,p,pre,q,ruby,s,samp,section,small,span,strike,strong,sub,summary,sup,table,tbody,td,tfoot,th,thead,time,tr,tt,u,ul,var,video{font:inherit;font-size:16px;margin:0;padding:0;vertical-align:baseline;border:0}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}body{line-height:1;margin:0 10%}ol,ul{list-style:none}a{text-decoration:none;color:#000}blockquote,q{quotes:none}img{width:100%;height:100%;vertical-align:bottom}blockquote:after,blockquote:before,q:after,q:before{content:'';content:none}table{border-spacing:0;border-collapse:collapse}p{font-style:normal}em{font-style:italic}strong{font-weight:bolder}
+#page-wrapper #start{position:relative;display:-ms-inline-flexbox;display:inline-flex;width:100%;height:100%;-ms-flex-wrap:wrap;flex-wrap:wrap}#page-wrapper #start>div{width:calc(100% /3);text-align:center;outline:1px solid #ccc}#page-wrapper #start>div>div{width:10px;height:10px;background:red}

user/themes/r2c/js/site.js

@@ -1,59 +1,10 @@
-var isTouch = window.DocumentTouch && document instanceof DocumentTouch;
-
-function scrollHeader() {
-    // Has scrolled class on header
-    var zvalue = $(document).scrollTop();
-    if ( zvalue > 75 )
-        $("#header").addClass("scrolled");
-    else
-        $("#header").removeClass("scrolled");
-}
-
-function parallaxBackground() {
-    $('.parallax').css('background-positionY', ($(window).scrollTop() * 0.3) + 'px');
-}
-
-jQuery(document).ready(function($){
-
-    scrollHeader();
-
-    // Scroll Events
-    if (!isTouch){
-        $(document).scroll(function() {
-            scrollHeader();
-            parallaxBackground();
-        });
-    };
-
-    // Touch scroll
-    $(document).on({
-        'touchmove': function(e) {
-            scrollHeader(); // Replace this with your code.
-        }
-    });
-
-    //Smooth scroll to start
-    $('#to-start').click(function(){
-        var start_y = $('#start').position().top;
-        var header_offset = 45;
-        window.scroll({ top: start_y - header_offset, left: 0, behavior: 'smooth' });
-        return false;
-    });
-
-    //Smooth scroll to top
-    $('#to-top').click(function(){
-        window.scroll({ top: 0, left: 0, behavior: 'smooth' });
-        return false;
-    });
-
-    // Responsive Menu
-    $('#toggle').click(function () {
-        $(this).toggleClass('active');
-        $('#overlay').toggleClass('open');
-        $('body').toggleClass('mobile-nav-open');
-    });
-
-    // Tree Menu
-    $(".tree").treemenu({delay:300});
+// function resizable() {
+//   $( "#start > div" ).resizable();
+//
+// };
 
+$(document).ready(function() {
+  $( function() {
+    $( "#start > div " ).resizable();
+  } );
 });

user/themes/r2c/scss/configuration/_config.scss

@@ -1,5 +1,5 @@
 //fonts
-@include font-face($Stolzl-Thin, $file, $family, $category);
+// @include font-face($Stolzl-Thin, $file, $family, $category);
 
 // Fonts-size
 // $fH1
@@ -10,3 +10,7 @@
 // $fbold
 
 // color
+
+//width
+
+// $33: calc(100% / 3);

user/themes/r2c/scss/template.scss

@@ -1,19 +1,19 @@
 //configuration
-@import "configuration/mixin";
+// @import "configuration/mixin";
 @import "configuration/config";
 
 //reset$
-@import "template/reset";
+// @import "template/reset";
 
 // Typography
-@import "template/typography";
+// @import "template/typography";
 
 // Header
-@import "template/header";
+// @import "template/header";
 
 //section
 @import "template/section";
-@import "template/section-media-queries";
+// @import "template/section-media-queries";
 
 // Footer
-@import "template/footer";
+// @import "template/footer";

user/themes/r2c/scss/template/_section.scss

@@ -0,0 +1,21 @@
+#page-wrapper{
+  #start{
+      display: inline-flex;
+      flex-wrap: wrap;
+      width: 100%;
+      height: 100%;
+      position: relative;
+      & > div{
+        width: calc(100% /3);
+        // height:10px;
+        text-align: center;
+        outline: 1px solid #ccc;
+        // width: 10px;
+        & > div {
+          background: red;
+          width: 10px;
+          height: 10px;
+        }
+        }
+    }
+}

user/themes/r2c/templates/modular.html.twig

@@ -25,7 +25,7 @@
     {% endif %}
 {% endblock %}
 
-{% block header_navigation %}
+{# {% block header_navigation %}
     {% if show_onpage_menu %}
         <ul class="navigation">
         {% for module in page.collection() %}
@@ -44,18 +44,12 @@
     {% else %}
         {{  parent() }}
     {% endif %}
-{% endblock %}
-
-{% block hero %}
-    {% for module in page.collection() if module.template == 'modular/hero' %}
-        <div id="{{ _self.pageLinkName(module.menu) }}"></div>
-        {{ module.content }}
-    {% endfor %}
-{% endblock %}
+{% endblock %} #}
 
 {% block body %}
     {% for module in page.collection() if module.template != 'modular/hero' %}
-        <div id="{{ _self.pageLinkName(module.menu) }}"></div>
+        <div id="{{ _self.pageLinkName(module.menu) }}">
         {{ module.content }}
+        </div>
     {% endfor %}
 {% endblock %}

user/themes/r2c/templates/modular/text.html.twig

@@ -2,16 +2,5 @@
 {% set image = page.media.images|first %}
 
 <section id="modular-text" class="section {{ page.header.class}} bg-gray">
-    <section class="container {{ grid_size }}">
-        <div class="columns">
-            <div class="column col-6 col-md-12">
-                {{ content }}
-            </div>
-            <div class="column col-6 col-md-12">
-                {% if image %}
-                    {{ image.html('','','align-'~page.header.image_align) }}
-                {% endif %}
-            </div>
-        </div>
-    </section>
+    {{ content }}
 </section>

user/themes/r2c/templates/partials/base.html.twig

@@ -16,18 +16,17 @@
     <link rel="canonical" href="{{ page.url(true, true) }}" />
 
     {% block stylesheets %}
-        {% do assets.addCss('theme://css-compiled/spectre'~compress) %}
-        {% if theme_var('spectre.exp') %}{% do assets.addCss('theme://css-compiled/spectre-exp'~compress)  %}{% endif %}
-        {% if theme_var('spectre.icons') %}{%  do assets.addCss('theme://css-compiled/spectre-icons'~compress) %}{% endif %}
-        {% do assets.addCss('theme://css-compiled/theme'~compress) %}
-        {% do assets.addCss('theme://css/custom.css') %}
-        {% do assets.addCss('theme://css/line-awesome.min.css') %}
+        
+        {% do assets.addCss('theme://css-compiled/template.css') %}
+
     {% endblock %}
     {{ assets.css() }}
 
     {% block javascripts %}
         {% do assets.addJs('jquery', 101) %}
         {% do assets.addJs('theme://js/jquery.treemenu.js', {group:'bottom'}) %}
+        {% do assets.addJs('theme://js/jquery-1.12.4.js', {group:'bottom'}) %}
+        {% do assets.addJs('theme://js/jquery-ui.js', {group:'bottom'}) %}
         {% do assets.addJs('theme://js/site.js', {group:'bottom'}) %}
     {% endblock %}
     {{ assets.js() }}
@@ -93,7 +92,7 @@
     </section>
 {% endblock %}
 
-    
+
     <div class="mobile-container">
         <div class="overlay" id="overlay">
             <div class="mobile-logo">