changed font for general text and added mobile style

site/index.html

@@ -30,16 +30,14 @@
         <div class="main__wrapper">
             <!-- <h1>Portail de distribution de cartes de randonnée à la demande.</h1> -->
 
-            <h1>Des cartes locales, à prix libre,
+            <h1> <span>Des cartes locales, à prix libre, </span><span class="second-line">optimisées pour la randonnée.</span>
-
-                <br> <span class="second-line">optimisées pour la randonnée.</span>
             </h1>
 
             <div class="block block-with-sidebar sidebar-left">
 
                 <div class="block-sidebar">
 
-                    <p class="pitch">Une <a href="#firstLink">cartographie soignée</a>, basée sur des <a href="#">données&nbsp;ouvertes</a> et mises à jour <a href="#exact"> en continu</a>.</p>
+                    <p class="pitch">Une <a href="#firstLink">cartographie soignée</a>, basée sur des <a href="#">données ouvertes</a> et mises à jour <a href="#exact"> en continu</a>.</p>
                 </div>
 
                 <div class="block-main">
@@ -188,14 +186,24 @@
                 <div class="block-sidebar">
 
                     <h2>Champs-Libres</h2>
-                    <li> info@champs-libres.coop</li>
+
-                    <li> +32 (0)81 13 69 17 </li>
+                    <p> info@champs-libres.coop
-                    <li> <a href="https://www.champs-libres.coop/">https://www.champs-libres.coop/</a> </li>
+
+                        <br> +32 (0)81 13 69 17
+
+                        <br>
+                        <a href="https://www.champs-libres.coop/">https://www.champs-libres.coop/</a>
+                    </p>
 
                     <h2>Atelier cartographique</h2>
-                    <li> contact@atelier-cartographique.be </li>
+
-                    <li> +32 (0)485 46 70 87 </li>
+                    <p> contact@atelier-cartographique.be
-                    <li> <a href="https://atelier-cartographique.be/">https://atelier-cartographique.be/</a></li>
+
+                        <br> +32 (0)485 46 70 87
+
+                        <br>
+                        <a href="https://atelier-cartographique.be/">https://atelier-cartographique.be/</a>
+                    </p>
                 </div>
             </div>
         </div>

site/style/font.less

@@ -1,3 +1,5 @@
+// ALFPHABET
+
 @font-face {
     font-family: 'alfphabet-I';
     src: url('assets/font/alfphabet/Alfphabet-I.woff') format('woff');
@@ -16,3 +18,19 @@
     font-weight: normal;
     font-style: normal;
 }
+
+// NEWS CYCLE
+
+@font-face {
+    font-family: 'news-cycle';
+    src: url('assets/font/news-cycle/newscycle-regular-webfont.woff') format('woff');
+    font-weight: normal;
+    font-style: normal;
+}
+
+@font-face {
+    font-family: 'news-cycle';
+    src: url('assets/font/news-cycle/newscycle-bold-webfont.woff') format('woff');
+    font-weight: bold;
+    font-style: normal;
+}

site/style/general.less

@@ -0,0 +1,170 @@
+
+html {
+    font-size: 20px;
+}
+
+* {
+    box-sizing: border-box;
+    font-weight: normal;
+    font-style: normal;
+}
+
+body {
+    font-family: 'news-cycle', Arial, Helvetica, sans-serif;
+    margin: auto;
+    padding: @margin * 2;
+    padding-top: 0px;
+    max-width: 1440px;
+
+}
+
+
+h1, h2, h3, h4, h5, h6 {
+    font-family: 'Alfphabet-III', Arial, Helvetica, sans-serif;
+}
+
+
+a, h1, p {
+    p {
+     -webkit-hyphens: auto;
+     -webkit-hyphenate-limit-before: 3;
+     -webkit-hyphenate-limit-after: 3;
+     -webkit-hyphenate-limit-chars: 6 3 3;
+     -webkit-hyphenate-limit-lines: 2;
+     -webkit-hyphenate-limit-last: always;
+     -webkit-hyphenate-limit-zone: 8%;
+     -moz-hyphens: auto;
+     -moz-hyphenate-limit-chars: 6 3 3;
+     -moz-hyphenate-limit-lines: 2;
+     -moz-hyphenate-limit-last: always;
+     -moz-hyphenate-limit-zone: 8%;
+     -ms-hyphens: auto;
+     -ms-hyphenate-limit-chars: 6 3 3;
+     -ms-hyphenate-limit-lines: 2;
+     -ms-hyphenate-limit-last: always;
+     -ms-hyphenate-limit-zone: 8%;
+     hyphens: auto;
+     hyphenate-limit-chars: 6 3 3;
+     hyphenate-limit-lines: 2;
+     hyphenate-limit-last: always;
+     hyphenate-limit-zone: 8%;
+ }}
+
+h1 {
+    font-size: 4rem;
+    margin: 0px;
+    line-height: 90%;
+    margin-bottom: @margin * 2;
+
+    .second-line {
+        display: block;
+        &::first-letter {
+            margin-left: 6ch;
+        }
+    }
+}
+
+details {
+    margin-bottom: @margin / 3;
+    summary {
+        cursor: pointer;
+        font-size: 1.25rem;
+        &:hover {
+            background-color: @pitchLinkColor;
+        }
+        &::marker {
+            font-size: 0.8rem;
+        }
+    }
+    >*:not(summary) {
+        margin-left: 1.4rem;
+    }
+}
+
+p.pitch {
+    font-size: 2.4rem;
+    line-height: 135%;
+    font-family: 'Alfphabet-III', Arial, Helvetica, sans-serif;
+    a {
+        background-color: @pitchLinkColor;
+        color: inherit;
+        text-decoration: none;
+        padding: 0 0.5ch;
+        &:hover {
+            text-decoration: underline !important;
+        }
+    }
+}
+
+
+.main__wrapper {
+    // padding: @margin;
+    padding-top: @margin;
+}
+
+.block {
+    margin-bottom: @margin * 2;
+
+    a {
+        color: inherit;
+        &:hover {
+            background-color: @pitchLinkColor;
+            mix-blend-mode: multiply;
+        }
+    }
+}
+
+
+.block-with-sidebar {
+    display: flex;
+    > div {
+        // padding : @margin;
+        flex-shrink: 0;
+
+        &.block-sidebar {
+            width: @sidebarW;
+            overflow: auto;
+            
+        }
+        &.block-main {
+            position: relative;
+            width: @mainW;
+
+            img {
+                width: 100%;
+            }
+        }
+    }
+    &.sidebar-right .block-sidebar {
+        padding-left: @margin / 2;
+        border-left: 1px solid #000;
+    }    
+    &.sidebar-left .block-sidebar {
+        padding-right: @margin / 2;
+        border-right: 1px solid #000;
+    }
+    &.sidebar-right .block-main {
+        padding-right: @margin / 2;
+    }    
+    &.sidebar-left .block-main {
+        padding-left: @margin / 2;
+    }
+}
+
+
+#mapList, 
+#FAQ {
+    border: 1px solid #000;
+    border-radius: @margin;
+    padding: @margin * 2;
+    padding-top: @margin;
+}
+
+.heart {
+    transform: rotate(90deg);
+    transform-origin: right top;
+    position: fixed;
+    right: 5px;
+    bottom: @margin;
+    font-size: 0.8rem;
+}

site/style/mobile.less

@@ -0,0 +1,68 @@
+@media only screen and (max-width: 600px) {
+
+    body {
+        padding: @margin / 2;
+        width: 100%;
+    }
+
+    a {
+        color: inherit;
+        &:hover{
+            background-color: @pitchLinkColor;
+            mix-blend-mode: multiply;
+
+        }
+    }
+    li a {
+     word-break: break-all;
+     line-height: 160%;
+    }
+    .header {
+        padding-top: 0;
+        display: block;
+
+        .header__logo {
+            margin-bottom: @margin / 2;
+        }
+        .header__links {
+            width: 100%;
+            display: flex;
+            justify-content: space-between;
+            a {
+                margin-left: 0px;
+            }
+        } 
+    }
+
+    h1 {
+        // font-size: 4em;
+        margin: 0;
+        .second-line {
+            margin: 0;
+            display: inline;
+        }
+    } 
+
+
+    .block-with-sidebar {
+        display: block;
+        > div {
+            width: 100% !important;
+            padding: 0 !important;
+            border: 0px !important;
+        }
+    }
+
+    #mapList, 
+    #FAQ {
+        border: 0px !important;
+        border-radius: initial !important;
+        padding: 0 !important;
+    }
+
+    .heart {
+        transform: initial;
+        position: relative;
+    }
+
+}

site/style/style.css

@@ -321,6 +321,18 @@ template {
   font-weight: normal;
   font-style: normal;
 }
+@font-face {
+  font-family: 'news-cycle';
+  src: url('assets/font/news-cycle/newscycle-regular-webfont.woff') format('woff');
+  font-weight: normal;
+  font-style: normal;
+}
+@font-face {
+  font-family: 'news-cycle';
+  src: url('assets/font/news-cycle/newscycle-bold-webfont.woff') format('woff');
+  font-weight: bold;
+  font-style: normal;
+}
 .header {
   padding: 16px 0;
   border-bottom: 1px solid #000;
@@ -354,12 +366,46 @@ html {
   font-style: normal;
 }
 body {
-  font-family: 'Alfphabet-III', Arial, Helvetica, sans-serif;
+  font-family: 'news-cycle', Arial, Helvetica, sans-serif;
   margin: auto;
   padding: 64px;
   padding-top: 0px;
   max-width: 1440px;
 }
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+  font-family: 'Alfphabet-III', Arial, Helvetica, sans-serif;
+}
+a p,
+h1 p,
+p p {
+  -webkit-hyphens: auto;
+  -webkit-hyphenate-limit-before: 3;
+  -webkit-hyphenate-limit-after: 3;
+  -webkit-hyphenate-limit-chars: 6 3 3;
+  -webkit-hyphenate-limit-lines: 2;
+  -webkit-hyphenate-limit-last: always;
+  -webkit-hyphenate-limit-zone: 8%;
+  -moz-hyphens: auto;
+  -moz-hyphenate-limit-chars: 6 3 3;
+  -moz-hyphenate-limit-lines: 2;
+  -moz-hyphenate-limit-last: always;
+  -moz-hyphenate-limit-zone: 8%;
+  -ms-hyphens: auto;
+  -ms-hyphenate-limit-chars: 6 3 3;
+  -ms-hyphenate-limit-lines: 2;
+  -ms-hyphenate-limit-last: always;
+  -ms-hyphenate-limit-zone: 8%;
+  hyphens: auto;
+  hyphenate-limit-chars: 6 3 3;
+  hyphenate-limit-lines: 2;
+  hyphenate-limit-last: always;
+  hyphenate-limit-zone: 8%;
+}
 h1 {
   font-size: 4rem;
   margin: 0px;
@@ -367,6 +413,9 @@ h1 {
   margin-bottom: 64px;
 }
 h1 .second-line {
+  display: block;
+}
+h1 .second-line::first-letter {
   margin-left: 6ch;
 }
 details {
@@ -379,12 +428,16 @@ details summary {
 details summary:hover {
   background-color: #ffff94;
 }
+details summary::marker {
+  font-size: 0.8rem;
+}
 details > *:not(summary) {
   margin-left: 1.4rem;
 }
 p.pitch {
   font-size: 2.4rem;
   line-height: 135%;
+  font-family: 'Alfphabet-III', Arial, Helvetica, sans-serif;
 }
 p.pitch a {
   background-color: #ffff94;
@@ -406,6 +459,7 @@ p.pitch a:hover {
 }
 .block a:hover {
   background-color: #ffff94;
+  mix-blend-mode: multiply;
 }
 .block-with-sidebar {
   display: flex;
@@ -441,7 +495,7 @@ p.pitch a:hover {
 #mapList,
 #FAQ {
   border: 1px solid #000;
-  border-radius: 64px;
+  border-radius: 32px;
   padding: 64px;
   padding-top: 32px;
 }
@@ -453,3 +507,60 @@ p.pitch a:hover {
   bottom: 32px;
   font-size: 0.8rem;
 }
+@media only screen and (max-width: 600px) {
+  body {
+    padding: 16px;
+    width: 100%;
+  }
+  a {
+    color: inherit;
+  }
+  a:hover {
+    background-color: #ffff94;
+    mix-blend-mode: multiply;
+  }
+  li a {
+    word-break: break-all;
+    line-height: 160%;
+  }
+  .header {
+    padding-top: 0;
+    display: block;
+  }
+  .header .header__logo {
+    margin-bottom: 16px;
+  }
+  .header .header__links {
+    width: 100%;
+    display: flex;
+    justify-content: space-between;
+  }
+  .header .header__links a {
+    margin-left: 0px;
+  }
+  h1 {
+    margin: 0;
+  }
+  h1 .second-line {
+    margin: 0;
+    display: inline;
+  }
+  .block-with-sidebar {
+    display: block;
+  }
+  .block-with-sidebar > div {
+    width: 100% !important;
+    padding: 0 !important;
+    border: 0px !important;
+  }
+  #mapList,
+  #FAQ {
+    border: 0px !important;
+    border-radius: initial !important;
+    padding: 0 !important;
+  }
+  .heart {
+    transform: initial;
+    position: relative;
+  }
+}

site/style/style.less

@@ -1,6 +1,3 @@
-@import "normalize.less";
-@import "font.less";
-@import "header.less";
 
 @headerH : 50px;
 @footerH : 50px;
@@ -9,134 +6,10 @@
 @margin : 32px;
 @pitchLinkColor : #ffff94;
 
-html {
-    font-size: 20px;
-}
 
-* {
+@import "normalize.less";
-    box-sizing: border-box;
+@import "font.less";
-    font-weight: normal;
+@import "header.less";
-    font-style: normal;
+@import "general.less";
-}
+@import "mobile.less";
 
-body {
-    font-family: 'Alfphabet-III', Arial, Helvetica, sans-serif;
-    margin: auto;
-    padding: @margin * 2;
-    padding-top: 0px;
-    max-width: 1440px;
-
-}
-
-
-
-h1 {
-    font-size: 4rem;
-    margin: 0px;
-    line-height: 90%;
-    margin-bottom: @margin * 2;
-
-    .second-line {
-        margin-left: 6ch;
-    }
-}
-
-details {
-    margin-bottom: @margin / 3;
-    summary {
-        cursor: pointer;
-        font-size: 1.25rem;
-        &:hover {
-            background-color: @pitchLinkColor;
-        }
-    }
-    >*:not(summary) {
-        margin-left: 1.4rem;
-    }
-}
-
-p.pitch {
-    font-size: 2.4rem;
-    line-height: 135%;
-    a {
-        background-color: @pitchLinkColor;
-        color: inherit;
-        text-decoration: none;
-        padding: 0 0.5ch;
-        &:hover {
-            text-decoration: underline !important;
-        }
-    }
-}
-
-
-.main__wrapper {
-    // padding: @margin;
-    padding-top: @margin;
-}
-
-.block {
-    margin-bottom: @margin * 2;
-
-    a {
-        color: inherit;
-        &:hover {
-            background-color: @pitchLinkColor;
-        }
-    }
-}
-
-
-.block-with-sidebar {
-    display: flex;
-    > div {
-        // padding : @margin;
-        flex-shrink: 0;
-
-        &.block-sidebar {
-            width: @sidebarW;
-            overflow: auto;
-            
-        }
-        &.block-main {
-            position: relative;
-            width: @mainW;
-
-            img {
-                width: 100%;
-            }
-        }
-    }
-    &.sidebar-right .block-sidebar {
-        padding-left: @margin / 2;
-        border-left: 1px solid #000;
-    }    
-    &.sidebar-left .block-sidebar {
-        padding-right: @margin / 2;
-        border-right: 1px solid #000;
-    }
-    &.sidebar-right .block-main {
-        padding-right: @margin / 2;
-    }    
-    &.sidebar-left .block-main {
-        padding-left: @margin / 2;
-    }
-}
-
-
-#mapList, 
-#FAQ {
-    border: 1px solid #000;
-    border-radius: @margin * 2;
-    padding: @margin * 2;
-    padding-top: @margin;
-}
-
-.heart {
-    transform: rotate(90deg);
-    transform-origin: right top;
-    position: fixed;
-    right: 5px;
-    bottom: @margin;
-    font-size: 0.8rem;
-}