From be7a29f8ae838e8b3bc3aebd9fc117e3e2748a6c Mon Sep 17 00:00:00 2001
From: Alexis Hassler <alexis.hassler@sewatech.fr>
Date: Sat, 4 May 2019 18:37:29 +0200
Subject: [PATCH] Fix #1 : Better CSS

---
 _includes/footer.html                  |  21 +-
 _includes/functions/redirect-page.html |  14 +-
 _includes/functions/wiki-pages.html    |  14 +-
 _includes/head.html                    |  19 +-
 _includes/links.html                   |  18 +-
 _includes/logo.html                    |   2 +-
 _includes/tags.html                    |  21 +-
 _includes/toc.html                     |  11 +-
 _includes/user.html                    |  16 +-
 _layouts/default.html                  |  35 +-
 _layouts/redirect.html                 |  46 +-
 _layouts/tag.html                      |  72 ++-
 _sass/content.scss                     |  18 +
 _sass/footer.scss                      |  29 ++
 _sass/grid.scss                        |  57 +++
 _sass/wiki.scss                        | 581 ++++---------------------
 css/main.scss                          |   5 +-
 17 files changed, 310 insertions(+), 669 deletions(-)
 create mode 100644 _sass/content.scss
 create mode 100644 _sass/footer.scss
 create mode 100644 _sass/grid.scss

diff --git a/_includes/footer.html b/_includes/footer.html
index 6239949..8c3de31 100644
--- a/_includes/footer.html
+++ b/_includes/footer.html
@@ -1,12 +1,11 @@
-<div class="visualClear"></div>
-<div class="site-footer" id="footer">
-    <div id="f-poweredbyico">
-        <a href="https://creativecommons.org/licenses/by-nc-sa/2.5/">
-            <img src="https://creativecommons.org/images/public/somerights20.png" alt="Paternit�-NonCommercial-ShareAlike 2.5" width="88" height="31">
-        </a>
+<footer>
+    <div id="footer-left">
     </div>
-    <ul id="f-list">
-        <li>{% if page.modified %}{{ site.data.i18n[site.lang].label.modified }}: {{ page.modified }}{% endif %}<br/></li>
-        <li>{% if page.created %}{{ site.data.i18n[site.lang].label.created }}: {{ page.created }}{% endif %}</li>
-    </ul>
-</div>
+    <div id="footer-center">
+        {{ site.data.i18n[site.lang].label.modified }}: {{ page.modified }}<br/>
+        {{ site.data.i18n[site.lang].label.created }}: {{ page.created }}
+    </div>
+    <div id="footer-right">
+        <a href="https://creativecommons.org/licenses/by-sa/4.0/"></a>
+    </div>
+</footer>
diff --git a/_includes/functions/redirect-page.html b/_includes/functions/redirect-page.html
index 9fd7401..0a50bd9 100644
--- a/_includes/functions/redirect-page.html
+++ b/_includes/functions/redirect-page.html
@@ -1,7 +1,7 @@
-{% include /functions/wiki-pages.html %}
-{% assign redirect = page.redirect | default: site.data.i18n[site.lang].home %}
-{% for other_page in wiki_pages %}
-  {% if other_page.slug == redirect %}
-    {% assign redirect_page = other_page %}
-  {% endif %}
-{% endfor %}
+{%- include /functions/wiki-pages.html -%}
+{%- assign redirect = page.redirect | liquify -%}
+{%- for other_page in wiki_pages -%}
+  {%- if other_page.slug == redirect -%}
+    {%- assign redirect_page = other_page -%}
+  {%- endif -%}
+{%- endfor -%}
diff --git a/_includes/functions/wiki-pages.html b/_includes/functions/wiki-pages.html
index 670af12..b673869 100644
--- a/_includes/functions/wiki-pages.html
+++ b/_includes/functions/wiki-pages.html
@@ -1,7 +1,7 @@
-{% assign wiki_pages = '' | split: '' %}
-{% for collection in site.collections %}
-  {% assign prefix = collection.label | slice: 0, 4 %}
-  {% if prefix == 'wiki' %}
-	  {% assign wiki_pages = wiki_pages | concat: collection.docs %}
-  {% endif %}
-{% endfor %}
\ No newline at end of file
+{%- assign wiki_pages = '' | split: '' -%}
+{%- for collection in site.collections -%}
+  {%- assign prefix = collection.label | slice: 0, 4 -%}
+  {%- if prefix == 'wiki' -%}
+	  {%- assign wiki_pages = wiki_pages | concat: collection.docs -%}
+  {%- endif -%}
+{%- endfor -%}
\ No newline at end of file
diff --git a/_includes/head.html b/_includes/head.html
index c758d50..79643fe 100644
--- a/_includes/head.html
+++ b/_includes/head.html
@@ -1,10 +1,9 @@
-  <meta charset="UTF-8" />
-  <title>{{ page.title }}</title>
-  <link rel="shortcut icon" href="/favicon.ico" />
-  <link rel="stylesheet" href="/css/main.css" />
-  {% if include.redirect_url %}
-  <link rel="canonical" href="{{ include.redirect_url }}">
-  <meta http-equiv="refresh" content="0; url={{ include.redirect_url }}" />
-  {% endif %}
-  <link rel="alternate" type="application/atom+xml" title="{{ site.title }} feed" href="/feed.xml" />
-  
\ No newline at end of file
+<meta charset="UTF-8" />
+<title>{{ page.title }} - {{ site.title }}</title>
+<link rel="shortcut icon" href="/favicon.ico" />
+<link rel="stylesheet" href="/css/main.css" />
+{%- if include.redirect_url -%}
+<link rel="canonical" href="{{ include.redirect_url }}">
+<meta http-equiv="refresh" content="0; url={{ include.redirect_url }}" />
+{%- endif -%}
+<link rel="alternate" type="application/atom+xml" title="{{ site.title }} feed" href="/feed.xml" />
diff --git a/_includes/links.html b/_includes/links.html
index af2013c..950602f 100644
--- a/_includes/links.html
+++ b/_includes/links.html
@@ -1,12 +1,10 @@
-{% if page.links != nil %}
-<div class="generated-sidebar portlet" id="p-links">
+{%- if page.links != nil -%}
+<div id="links" class="portlet">
   <h3>{{ site.data.i18n[site.lang].label.links }}</h3>
-  <div class="portlet-body">
-    <ul>
-        {% for link in page.links %}
-        <li><a href="{{link.url}}">{{link.text}}</a></li>
-        {% endfor %}
-    </ul>
-  </div>
+  <ul class="portlet-body">
+    {%- for link in page.links -%}
+    <li><a href="{{link.url}}">{{link.text}}</a></li>
+    {%- endfor -%}
+  </ul>
 </div>
-{% endif %}
\ No newline at end of file
+{%- endif -%}
\ No newline at end of file
diff --git a/_includes/logo.html b/_includes/logo.html
index 11864bf..c9e97cf 100644
--- a/_includes/logo.html
+++ b/_includes/logo.html
@@ -1,3 +1,3 @@
-<div class="portlet" id="p-logo" role="banner">
+<div id="logo">
   <a href="/{{ site.data.i18n[site.lang].home }}.html" style="background-image: url({{ site.data.i18n[site.lang].logo }});" title="{{ site.data.i18n[site.lang].label.main_page }}"></a>
 </div>
diff --git a/_includes/tags.html b/_includes/tags.html
index d523626..d28489b 100644
--- a/_includes/tags.html
+++ b/_includes/tags.html
@@ -1,21 +1,20 @@
-{% if page.tags.size > 0 %}
-<div class="generated-sidebar portlet" id="p-navigation" role="navigation">
+{%- if page.tags.size > 0 -%}
+<div id="navigation" class="portlet">
   <h3>{{ site.data.i18n[site.lang].label.tags }}</h3>
   <div class="portlet-body">
     <ul>
-      {% include /functions/wiki-pages.html %}
-
-      {% for tag in page.tags %}
+      {%- include /functions/wiki-pages.html -%}
+      {%- for tag in page.tags -%}
       <li id="n-tag-{{ tag }}"><a href="/{{ site.data.i18n[site.lang].prefix.tag }}{{ tag }}.html">{{ tag }}</a></li>
       <ul>
-      {% for other_page in wiki_pages %}
-        {% if other_page.tags contains tag and other_page.slug != page.slug %}
+      {%- for other_page in wiki_pages -%}
+        {%- if other_page.tags contains tag and other_page.slug != page.slug -%}
           <li><a href="{{ other_page.url }}.html">{{ other_page.title }}</a></li>
-        {% endif %}
-      {% endfor %}
+        {%- endif -%}
+      {%- endfor -%}
       </ul>
-      {% endfor %}
+      {%- endfor -%}
     </ul>
   </div>
 </div>  
-{% endif %}
+{%- endif -%}
diff --git a/_includes/toc.html b/_includes/toc.html
index 3875091..668c3cd 100644
--- a/_includes/toc.html
+++ b/_includes/toc.html
@@ -1,8 +1,7 @@
-{% if page.toc == true %}
-<div class="generated-sidebar portlet" id="p-toc" role="toc">
+{%- if page.toc == true -%}
+<div id="toc" class="portlet">
+  {{- content | toc_only | replace: "
+", "" -}}
   <h3>{{ site.data.i18n[site.lang].label.toc }}</h3>
-  <div class="portlet-body">
-    {{ content | toc_only }}
-  </div>
 </div>  
-{% endif %}
+{%- endif -%}
diff --git a/_includes/user.html b/_includes/user.html
index 04dbdb8..e068c17 100644
--- a/_includes/user.html
+++ b/_includes/user.html
@@ -1,14 +1,14 @@
-{% if page.author %}
-<div class="generated-sidebar portlet" id="p-author" role="author">
-  <h3>{{ site.data.i18n[site.lang].label.author }}</h3>
+{%- if page.author -%}
+<div id="author" class="portlet">
   <div class="portlet-body">
-    {% assign author = site.data.users[page.author] %}
+    {%- assign author = site.data.users[page.author] -%}
     <ul>
-      <li><a href="/{{ site.data.i18n[site.lang].prefix.user }}{{ page.author }}.html">{{ author.name }}</a></li>
+      <li><a href="/{{ site.data.i18n[site.lang].prefix.user }}{{ page.author }}">{{ author.name }}</a></li>
     </ul>
-    {% if author.logo %}
+    {%- if author.logo -%}
     <img src="/{{ author.logo }}" style="max-width: 100%;margin: 3px" />
-    {% endif %}
+    {%- endif -%}
   </div>
+  <h3>{{ site.data.i18n[site.lang].label.author }}</h3>
 </div>  
-{% endif %}
+{%- endif -%}
diff --git a/_layouts/default.html b/_layouts/default.html
index 1179bdf..e541f76 100644
--- a/_layouts/default.html
+++ b/_layouts/default.html
@@ -3,30 +3,17 @@
     {% include head.html %}
   </head>
 
-  <body class="mediawiki skin-monobook action-view">
-    <div id="globalWrapper">
-      <div id="column-content">
-        <div id="content" class="wiki-body" role="main">
-  
-          <h1 id="firstHeading" class="firstHeading">
-            <span dir="auto">{{ page.title }}</span>
-          </h1>
-  
-          <div id="bodyContent" class="wiki-body-content">
-            <div id="mw-content-text" dir="ltr">
-              {{ content | inject_anchors }}
-            </div>
-          </div>
-        </div>
-      </div>
-
-      <div id="column-one">
-        {% include logo.html %}
-        {% include user.html %}
-        {% include toc.html %}
-        {% include links.html %}
-        {% include tags.html %}
-      </div>
+  <body>
+    <div id="main">
+      <h1 id="title">{{ page.title }}</h1>
+      <div id="content">{{ content | inject_anchors }}</div>
+    </div>  
+    <div id="menu">
+      {% include logo.html %}
+      {% include user.html %}
+      {% include toc.html %}
+      {% include links.html %}
+      {% include tags.html %}
     </div>
 
     {% include footer.html %}
diff --git a/_layouts/redirect.html b/_layouts/redirect.html
index dd802d2..4c4958b 100644
--- a/_layouts/redirect.html
+++ b/_layouts/redirect.html
@@ -1,35 +1,27 @@
-<html>
-  {% include /functions/redirect-page.html %}
+<html dir="ltr" class="client-js" lang="fr">
+  {%- include /functions/redirect-page.html -%}
+
   <head>
-    {% assign redirect_url = redirect_page.url | append: ".html" %}
-    {% include head.html redirect_url = redirect_url %}
+    {%- assign redirect_url = redirect_page.url | default: site.data.i18n[site.lang].home | append: ".html" -%}
+    {%- include head.html redirect_url = redirect_url -%}
   </head>
 
   <body>
-    <div id="globalWrapper">
-      <div id="column-content">
-        <div id="content" class="wiki-body" role="main">
-  
-          <h1 id="firstHeading" class="firstHeading" lang="fr">
-            <span dir="auto">{{ redirect_page.title }}</span>
-          </h1>
-  
-          <div id="bodyContent" class="wiki-body-content">
-            <div id="mw-content-text" dir="ltr" class="mw-content-ltr" lang="fr">
-              <div class="redirectMsg">
-                <p>{{ site.data.i18n[site.lang].label.redirect }} :</p>
-                  <ul class="redirectText">
-                    <li><a href="{{ redirect_page.url }}.html" title="{{ redirect_page.name }}">{{ redirect_page.title }}</a></li>
-                  </ul>
-              </div>
-            </div>
-          </div>
+    <div id="main">
+      <h1 id="title">{{ redirect_page.title }}</h1>
+      <div id="content">
+        <div class="redirectMsg">
+          <p>{{ site.data.i18n[site.lang].label.redirect }} :</p>
+          <ul class="redirectText">
+            <li><a href="{{ redirect_page.url }}.html" title="{{ redirect_page.name }}">{{ redirect_page.title }}</a></li>
+          </ul>
         </div>
       </div>
-      <div id="column-one">
-        {% include logo.html %}      
-      </div>
-    </div>
-    {% include footer.html %}
+    </div>  
+
+    <div id="menu">
+      {%- include logo.html -%}
+    </div>  
+    {%- include footer.html -%}
   </body>
 </html>
diff --git a/_layouts/tag.html b/_layouts/tag.html
index ce28504..c00d525 100644
--- a/_layouts/tag.html
+++ b/_layouts/tag.html
@@ -1,56 +1,34 @@
 <html dir="ltr" class="client-js" lang="fr">
   <head>
-    <meta charset="UTF-8">
-    <title>{{ page.title }}</title>
-    <link rel="shortcut icon" href="/favicon.ico">
-    <link rel="stylesheet" href="/css/main.css">
-    <style>
-      .columns {
-        -webkit-columns: 3;
-        -moz-columns: 3;
-        columns: 3;
-        width: 100%;
-      }
-    </style>
+    {% include head.html %}
   </head>
 
-  <body class="mediawiki ltr sitedir-ltr ns-0 ns-subject skin-monobook action-view">
-    <div id="globalWrapper">
-      <div id="column-content">
-        <div id="content" class="wiki-body" role="main">
-  
-          <h1 id="firstHeading" class="firstHeading" lang="fr">
-            <span dir="auto">{{ page.tags }}</span>
-          </h1>
-  
-          <div id="bodyContent" class="wiki-body-content">
-            <div id="mw-content-text" dir="ltr" class="mw-content-ltr" lang="fr">
-              {{ content }}
-            </div>
-          </div>
-
-          <div>
-              <h3>{{ site.data.i18n[site.lang].label.tag_pages }} {{ page.tags }}</h3>
-              <div class="columns">
-                <ul>
-                  {% include /functions/wiki-pages.html %}
-                  {% for tag in page.tags %}
-                    {% for other_page in wiki_pages %}
-                      {% if other_page.tags contains tag and other_page.slug != page.slug %}
-                        <li><a href="{{ other_page.url }}">{{ other_page.title }}</a></li>
-                      {% endif %}
-                    {% endfor %}
-                  {% endfor %}
-                </ul>
-              </div>
-            </div>  
-    
+  <body>
+    <div id="main">
+      <h1 id="title">{{ page.tags }}</h1>
+      <div id="content">
+        {{ content | inject_anchors }}  
+      </div>
+      <div id="pages">
+        <h3>{{ site.data.i18n[site.lang].label.tag_pages }} {{ page.tags }}</h3>
+        <div class="columns">
+          <ul>
+            {% include /functions/wiki-pages.html %}
+            {% for tag in page.tags %}
+              {% for other_page in wiki_pages %}
+                {% if other_page.tags contains tag and other_page.slug != page.slug %}
+                  <li><a href="{{ other_page.url }}">{{ other_page.title }}</a></li>
+                {% endif %}
+              {% endfor %}
+            {% endfor %}
+          </ul>
         </div>
-      </div>
-      <div id="column-one">
-        {% include logo.html %}
-      </div>
+      </div>      
     </div>
+    <div id="menu">
+      {% include logo.html %}
+    </div>
+  
     {% include footer.html %}
   </body>
 </html>
diff --git a/_sass/content.scss b/_sass/content.scss
new file mode 100644
index 0000000..c21b997
--- /dev/null
+++ b/_sass/content.scss
@@ -0,0 +1,18 @@
+.center {
+    width: 100%;
+    text-align: center;
+}
+div.floatleft {
+    float: left;
+    clear: left;
+    position: relative;
+    margin: 0 .5em .5em 0;
+    border: 0;
+}
+div.floatright {
+    float: right;
+    clear: right;
+    position: relative;
+    margin: 0 .5em .5em 0;
+    border: 0;
+}
\ No newline at end of file
diff --git a/_sass/footer.scss b/_sass/footer.scss
new file mode 100644
index 0000000..93c6f59
--- /dev/null
+++ b/_sass/footer.scss
@@ -0,0 +1,29 @@
+body > footer {
+  background: #ffffff;
+  grid-column: 1 / 3;
+  grid-row: 2;
+}
+footer {
+  display: grid;
+  grid-template-columns: 20% 60% 20%;
+
+  #footer-center {
+    align-self: center;
+    justify-self: center;
+    text-align: center;
+    font-size: 80%;
+  }
+
+  #footer-right {
+    align-self: center;
+    justify-self: end;
+
+    a {
+      background-image: url(https://creativecommons.org/images/public/somerights20.png);
+      width: 88px;
+      height: 31px;
+      display: block;
+      background-repeat: no-repeat;
+    }
+  }
+}
diff --git a/_sass/grid.scss b/_sass/grid.scss
new file mode 100644
index 0000000..10e81d2
--- /dev/null
+++ b/_sass/grid.scss
@@ -0,0 +1,57 @@
+body {
+  display: grid;
+  grid-template-columns: 250px auto;
+  grid-template-rows: auto auto;
+  grid-gap: 10px;
+
+  #menu {
+    grid-column: 1;
+    grid-row: 1;
+  }
+  
+  #main {
+    grid-column: 2;
+    grid-row: 1;
+    min-width: 0;
+  }
+}
+
+@media (max-width: 700px) {
+  body {
+    grid-template-columns: auto;
+  
+    #main {
+      grid-column: 1;
+      grid-row: 1;
+      min-width: 0;
+    }
+
+    #menu {
+      grid-column: 1;
+      grid-row: 2;
+
+      #logo {
+        position: absolute;
+        right: 20px;
+
+        a {
+          height: 60px;
+          width: 150px;  
+          margin-top: 60px;
+        }
+      }
+    }
+    
+    footer {
+      grid-column: 1;
+      grid-row: 3;
+      display: none;
+    }
+  }  
+}
+
+@media (max-width: 350px) {
+  #logo {
+    display: none;
+  }
+}
diff --git a/_sass/wiki.scss b/_sass/wiki.scss
index 50696a4..aa25b3b 100644
--- a/_sass/wiki.scss
+++ b/_sass/wiki.scss
@@ -1,539 +1,122 @@
 body {
-  font: x-small sans-serif;
+  font-family: sans-serif;
   background: #acabab;
   color: black;
-  margin: 0;
-  padding: 0;
-  direction: ltr;
-  unicode-bidi: embed;
+}
+
+#main {
+  background: #ffffff;
+  padding: 1em;
+}
+
+#menu {
+  #logo {
+    a {
+      display: block;
+      height: 155px;
+      width: 100%;
+      background-repeat: no-repeat;
+      background-position: 35% 50% !important;
+      text-decoration: none;
+    }
+  }
+
+  .portlet {
+    display: grid;
+    font-size: 90%;
+  
+    ul.section-nav, // toc has no portlet-body
+    .portlet-body {
+      background: #ffffff;
+      border: 1px solid #aaa;
+      grid-row: 2;
+    }
+    
+    h3 {
+      font-size: 90%;
+      font-weight: normal;
+      margin: 1em 0 0 0;
+      padding-left: 0.3em;
+      grid-row: 1;
+    }
+  
+    ul:empty,
+    ul:empty ~ h3 {
+      display: none;
+      height: 0;
+      margin: 0;
+      overflow: hidden;
+      grid-row: 2;
+    }
+  }
+  
+}
+
+h1, h2, h3, h4, h5, h6 {
+  border-bottom: 1px solid #aaa;
+  margin: 0 0 0.5em 0;
+  font-weight: normal;
 }
 
 a {
   text-decoration: none;
   color: #0645ad;
   background: none;
-  &:visited {
-    color: #0b0080;
-  }
-  &:active {
-    color: #faa700;
-  }
-  &:hover, &:focus {
-    text-decoration: underline;
-  }
-  &.stub {
-    color: #772233;
-  }
-  &.new {
-    color: #ba0000;
-  }
-}
-  
-#p-personal a.new {
-  color: #ba0000;
 }
 
-a.new:visited {
-  color: #a55858;
-}
-
-.wiki-body a.external {
-  color: #36b;
-  &:visited {
-    color: #636;
-  }
-  &:active {
-    color: #b63;
-  }
-}
-
-img {
-  border: none;
-  vertical-align: middle;
-}
-
-hr {
-  height: 1px;
-  color: #aaa;
-  background-color: #aaa;
-  border: 0;
-  margin: 0.2em 0;
-}
-
-h1, h2, h3, h4, h5, h6 {
-  color: black;
-  background: none;
-  font-weight: normal;
-  margin: 0;
-  overflow: hidden;
-  padding-top: .5em;
-  padding-bottom: .17em;
-  border-bottom: 1px solid #aaa;
-}
-
-h1 {
-  font-size: 188%;
-}
-
-h2 {
-  font-size: 150%;
-}
-
-h3, h4, h5, h6 {
-  border-bottom: none;
+#title {
   font-weight: bold;
-}
-
-h3 {
-  font-size: 132%;
-}
-
-h4 {
-  font-size: 116%;
-}
-
-h5 {
-  font-size: 108%;
-}
-
-h6 {
-  font-size: 100%;
-}
-
-h1, h2 {
-  margin-bottom: 0.6em;
-}
-
-h3, h4, h5 {
-  margin-bottom: 0.3em;
-}
-
-p {
-  margin: .4em 0 .5em 0;
-  line-height: 1.5em;
-  img {
-    margin: 0;
-  }
-}
-
-ul {
-  line-height: 1.5em;
-  list-style-type: square;
-  margin: .3em 0 0 1.6em;
-  padding: 0;
-}
-
-ol {
-  line-height: 1.5em;
-  margin: .3em 0 0 3.2em;
-  padding: 0;
-  list-style-image: none;
-}
-
-li {
-  margin-bottom: 0.1em;
-}
-
-dt {
-  font-weight: bold;
-  margin-bottom: 0.1em;
-}
-
-dl {
-  margin-top: .2em;
+  font-size: 210%;
   margin-bottom: 0.5em;
 }
 
-dd {
-  line-height: 1.5em;
-  margin-left: 1.6em;
-  margin-bottom: 0.1em;
-}
+pre, code {
+  font-family: monospace;
+  font-size: 0.9rem;
 
-q {
-  font-style: italic;
-}
-
-pre, code, tt, kbd, samp {
-  font-family: monospace, Courier;
-}
-
-code {
-  color: black;
-  padding: 1px 4px;
-
-  span {
-    border: 0;
+  a {
+    color: #5a5a5a;
   }
 }
-
 pre {
   color: black;
   background-color: #f9f9f9;
   border: 1px solid #ddd;
   padding: 1em;
-}
-
-table {
-  font-size: 100%;
-}
-
-fieldset {
-  border: 1px solid #2f6fab;
-  margin: 1em 0 1em 0;
-  padding: 0 1em 1em;
-  line-height: 1.5em;
-  &.nested {
-    margin: 0 0 0.5em 0;
-    padding: 0 0.5em 0.5em;
-  }
-}
-
-legend {
-  padding: .5em;
-  font-size: 95%;
-}
-
-form {
-  border: none;
-  margin: 0;
-}
-
-textarea {
-  width: 100%;
-  padding: .1em;
-  display: block;
-  -moz-box-sizing: border-box;
-  -webkit-box-sizing: border-box;
-  box-sizing: border-box;
-}
-
-select {
-  vertical-align: top;
+  // white-space: pre-wrap;
+  // word-wrap: break-word;
+  overflow: auto;
 }
 
 .center {
   width: 100%;
   text-align: center;
 }
-
-*.center * {
-  margin-left: auto;
-  margin-right: auto;
+img, embed, object, video {
+  max-width: 100%;
+  height: auto;
 }
 
-.small {
-  font-size: 94%;
-}
-
-table.small {
-  font-size: 100%;
-}
-
-.visualClear {
-  clear: both;
-}
-
-div.floatright, table.floatright {
-  margin: 0 0 .5em .5em;
-  border: 0;
-}
-
-div {
-  &.floatright p {
-    font-style: italic;
-  }
-  &.floatleft {
-    margin: 0 .5em .5em 0;
-    border: 0;
-  }
-}
-
-table.floatleft {
-  margin: 0 .5em .5em 0;
-  border: 0;
-}
-
-div {
-  &.floatleft p {
-    font-style: italic;
-  }
-  &.thumb {
-    margin-bottom: .5em;
-    width: auto;
-    background-color: transparent;
-  }
-  &.thumbinner {
-    border: 1px solid #ccc;
-    padding: 3px;
-    background-color: #f9f9f9;
-    font-size: 94%;
-    text-align: center;
-    overflow: hidden;
-  }
-}
-
-html {
-  .thumbimage {
-    border: 1px solid #ccc;
-  }
-  .thumbcaption {
-    border: none;
-    line-height: 1.4em;
-    padding: 3px;
-    font-size: 94%;
-    text-align: left;
-  }
-}
-
-img.thumbborder {
-  border: 1px solid #dddddd;
-}
-
-div {
-  &.tright {
-    margin: 0.5em 0 1.3em 1.4em;
-  }
-  &.tleft {
-    margin: 0.5em 1.4em 1.3em 0;
-  }
-}
-
-.catlinks {
-  border: 1px solid #aaa;
-  background-color: #f9f9f9;
-  padding: 5px;
-  margin-top: 1em;
-  clear: both;
-}
-
-.usermessage {
-  background-color: #ffce7b;
-  border: 1px solid #ffa500;
-  color: black;
-  font-weight: bold;
-  margin: 2em 0 1em;
-  padding: .5em 1em;
-  vertical-align: middle;
-}
-
-#siteNotice {
-  position: relative;
-  text-align: center;
-  margin: 0;
-}
-
-#localNotice {
-  margin-bottom: 0.9em;
-}
-
-.firstHeading {
-  margin-bottom: .1em;
-  line-height: 1.2em;
-  padding-bottom: 0;
-}
-
-#siteSub {
-  display: none;
-}
-
-#jump-to-nav {
-  margin-top: -1.4em;
-  margin-bottom: 1.4em;
-}
-
-#contentSub, #contentSub2 {
-  font-size: 84%;
-  line-height: 1.2em;
-  margin: 0 0 1.4em 1em;
-  color: #545454;
-  width: auto;
-}
-
-span.subpages {
-  display: block;
-}
-
-div#column-content {
+.columns {
+  -webkit-columns: 3;
+  -moz-columns: 3;
+  columns: 3;
   width: 100%;
-  float: right;
-  margin: 0 0 .6em -15em;
-  padding: 0;
-}
 
-.wiki-body {
-  margin: 1em 0 0 15em;
-  padding: 1em;
-  position: relative;
-  z-index: 2;
-  background: white;
-  color: black;
-  border: 1px solid #aaa;
-  border-right: none;
-  line-height: 1.5em;
-}
-
-div#column-one {
-  padding-top: 160px;
-}
-
-#column-one h2 {
-  position: absolute;
-  top: -9999px;
-}
-
-div#globalWrapper {
-  font-size: 127%;
-  width: 100%;
-  margin: 0;
-  padding: 0;
-}
-
-a {
-  color: #002bb8;
-  &:visited {
-    color: #5a3696;
-  }
-  &.new {
-    color: #cc2200;
-  }
-}
-
-#p-personal a.new {
-  color: #cc2200;
-}
-
-ul {
-  list-style-type: square;
-  list-style-image: url(data:image/gif;base64,R0lGODlhBQANAIAAAGOMnP///yH5BAEAAAEALAAAAAAFAA0AAAIJjI+pu+APo4SpADs=);
-}
-
-pre {
-  line-height: 1.1em;
-}
-
-#firstHeading {
-  padding-top: 0;
-  font-size: 210%;
-  font-weight: bold;
-}
-
-.portlet {
-  border: none;
-  margin: 0 0 .5em;
-  padding: 0;
-  float: none;
-  width: 16.5em;
-  overflow: hidden;
-  h3 {
-    background: transparent;
-    padding: 0 1em 0 .5em;
-    display: inline;
-    height: 1em;
-    /* text-transform:lowercase; */
-    font-size: 91%;
-    font-weight: normal;
-    white-space: nowrap;
-  }
-}
-
-.portlet-body {
-  font-size: 95%;
-  background-color: white;
-  color: black;
-  border-collapse: collapse;
-  border: 1px solid #aaa;
-  padding: 0 0.8em 0.3em 0.5em;
-  &:after {
-    content: '';
-    clear: both;
-    display: block;
-  }
-}
-
-.portlet {
   ul {
-    line-height: 1.5em;
-    font-size: 95%;
-  }
-  li {
-    padding: 0;
     margin: 0;
   }
 }
 
-#p-logo {
-  top: 10px;
-  left: 10px;
-  position: absolute;
-  z-index: 3;
-  height: 155px;
-  width: 12em;
-  overflow: visible;
-  a {
-    display: block;
-    height: 155px;
-    width: 15em;
-    background-repeat: no-repeat;
-    background-position: 35% 50% !important;
-    text-decoration: none;
-    &:hover {
-      display: block;
-      height: 155px;
-      width: 15em;
-      background-repeat: no-repeat;
-      background-position: 35% 50% !important;
-      text-decoration: none;
-    }
-  }
+ul {
+  line-height: 1.5em;
+  font-size: 95%;
+  list-style-type: square;
+  list-style-image: url(data:image/gif;base64,R0lGODlhBQANAIAAAGOMnP///yH5BAEAAAEALAAAAAAFAA0AAAIJjI+pu+APo4SpADs=);
+  padding: .3em 0 0 1.5em;
+  margin: 0;
 }
-
-div#footer {
-  background-color: white;
-  border-top: 1px solid #fabd23;
-  border-bottom: 1px solid #fabd23;
-  margin: .6em 0 1em 0;
-  overflow: hidden;
-  padding: .4em 0 .3em 0;
-  text-align: center;
-  font-size: 90%;
-  ul {
-    list-style-type: none;
-    list-style-image: unset;
-  }
-  li {
-    display: inline;
-    margin: 0 1.3em;
-  }
-}
-
-#column-one {
-  font-size: 14px;
-}
-
-#column-content {
-  font-size: 16px;
-}
-
-ul#f-list {
-  float: left;
-  width: 100%;
-}
-
-.floatleft {
-  float: left;
-  clear: left;
-}
-
-.floatright {
-  float: right;
-  clear: right;
-}
-
-#f-poweredbyico {
-  margin:0 8px;
-  position:relative;
-  top:-2px;
-  float:right;
-  height:1%;
+li {
+  padding: 0;
+  margin: 0;
 }
diff --git a/css/main.scss b/css/main.scss
index d7ba096..de6b2cf 100644
--- a/css/main.scss
+++ b/css/main.scss
@@ -1,4 +1,7 @@
 ---
 # Only the main Sass file needs front matter (the dashes are enough)
 ---
-@import "wiki";
\ No newline at end of file
+@import "grid";
+@import "wiki";
+@import "footer";
+@import "content";