changed font for general text and added mobile style

This commit is contained in:
pacome 2021-05-25 23:31:40 +02:00
parent 138414b5bf
commit e381e8541e
8 changed files with 392 additions and 144 deletions

View File

@ -30,16 +30,14 @@
<div class="main__wrapper"> <div class="main__wrapper">
<!-- <h1>Portail de distribution de cartes de randonnée à la demande.</h1> --> <!-- <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> </h1>
<div class="block block-with-sidebar sidebar-left"> <div class="block block-with-sidebar sidebar-left">
<div class="block-sidebar"> <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>
<div class="block-main"> <div class="block-main">
@ -188,14 +186,24 @@
<div class="block-sidebar"> <div class="block-sidebar">
<h2>Champs-Libres</h2> <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> <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> </div>
</div> </div>

View File

@ -1,3 +1,5 @@
// ALFPHABET
@font-face { @font-face {
font-family: 'alfphabet-I'; font-family: 'alfphabet-I';
src: url('assets/font/alfphabet/Alfphabet-I.woff') format('woff'); src: url('assets/font/alfphabet/Alfphabet-I.woff') format('woff');
@ -16,3 +18,19 @@
font-weight: normal; font-weight: normal;
font-style: 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
View 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
View 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;
}
}

View File

@ -321,6 +321,18 @@ template {
font-weight: normal; font-weight: normal;
font-style: 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 { .header {
padding: 16px 0; padding: 16px 0;
border-bottom: 1px solid #000; border-bottom: 1px solid #000;
@ -354,12 +366,46 @@ html {
font-style: normal; font-style: normal;
} }
body { body {
font-family: 'Alfphabet-III', Arial, Helvetica, sans-serif; font-family: 'news-cycle', Arial, Helvetica, sans-serif;
margin: auto; margin: auto;
padding: 64px; padding: 64px;
padding-top: 0px; padding-top: 0px;
max-width: 1440px; 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 { h1 {
font-size: 4rem; font-size: 4rem;
margin: 0px; margin: 0px;
@ -367,6 +413,9 @@ h1 {
margin-bottom: 64px; margin-bottom: 64px;
} }
h1 .second-line { h1 .second-line {
display: block;
}
h1 .second-line::first-letter {
margin-left: 6ch; margin-left: 6ch;
} }
details { details {
@ -379,12 +428,16 @@ details summary {
details summary:hover { details summary:hover {
background-color: #ffff94; background-color: #ffff94;
} }
details summary::marker {
font-size: 0.8rem;
}
details > *:not(summary) { details > *:not(summary) {
margin-left: 1.4rem; margin-left: 1.4rem;
} }
p.pitch { p.pitch {
font-size: 2.4rem; font-size: 2.4rem;
line-height: 135%; line-height: 135%;
font-family: 'Alfphabet-III', Arial, Helvetica, sans-serif;
} }
p.pitch a { p.pitch a {
background-color: #ffff94; background-color: #ffff94;
@ -406,6 +459,7 @@ p.pitch a:hover {
} }
.block a:hover { .block a:hover {
background-color: #ffff94; background-color: #ffff94;
mix-blend-mode: multiply;
} }
.block-with-sidebar { .block-with-sidebar {
display: flex; display: flex;
@ -441,7 +495,7 @@ p.pitch a:hover {
#mapList, #mapList,
#FAQ { #FAQ {
border: 1px solid #000; border: 1px solid #000;
border-radius: 64px; border-radius: 32px;
padding: 64px; padding: 64px;
padding-top: 32px; padding-top: 32px;
} }
@ -453,3 +507,60 @@ p.pitch a:hover {
bottom: 32px; bottom: 32px;
font-size: 0.8rem; 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;
}
}

View File

@ -1,6 +1,3 @@
@import "normalize.less";
@import "font.less";
@import "header.less";
@headerH : 50px; @headerH : 50px;
@footerH : 50px; @footerH : 50px;
@ -9,134 +6,10 @@
@margin : 32px; @margin : 32px;
@pitchLinkColor : #ffff94; @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;
}