changed font for general text and added mobile style
This commit is contained in:
parent
138414b5bf
commit
e381e8541e
@ -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,
|
||||
|
||||
<br> <span class="second-line">optimisées pour la randonnée.</span>
|
||||
<h1> <span>Des cartes locales, à prix libre, </span><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 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>
|
||||
<li> <a href="https://www.champs-libres.coop/">https://www.champs-libres.coop/</a> </li>
|
||||
|
||||
<p> info@champs-libres.coop
|
||||
|
||||
<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>
|
||||
<li> <a href="https://atelier-cartographique.be/">https://atelier-cartographique.be/</a></li>
|
||||
|
||||
<p> contact@atelier-cartographique.be
|
||||
|
||||
<br> +32 (0)485 46 70 87
|
||||
|
||||
<br>
|
||||
<a href="https://atelier-cartographique.be/">https://atelier-cartographique.be/</a>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
BIN
site/style/assets/font/news-cycle/newscycle-bold-webfont.woff
Normal file
BIN
site/style/assets/font/news-cycle/newscycle-bold-webfont.woff
Normal file
Binary file not shown.
BIN
site/style/assets/font/news-cycle/newscycle-regular-webfont.woff
Normal file
BIN
site/style/assets/font/news-cycle/newscycle-regular-webfont.woff
Normal file
Binary file not shown.
@ -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;
|
||||
}
|
||||
|
||||
170
site/style/general.less
Normal file
170
site/style/general.less
Normal file
@ -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;
|
||||
}
|
||||
68
site/style/mobile.less
Normal file
68
site/style/mobile.less
Normal file
@ -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;
|
||||
}
|
||||
|
||||
}
|
||||
@ -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;
|
||||
}
|
||||
}
|
||||
|
||||
@ -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;
|
||||
}
|
||||
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
}
|
||||
@import "normalize.less";
|
||||
@import "font.less";
|
||||
@import "header.less";
|
||||
@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;
|
||||
}
|
||||
Loading…
Reference in New Issue
Block a user