diff --git a/site/index.html b/site/index.html
index f3d48b2..5c92311 100644
--- a/site/index.html
+++ b/site/index.html
@@ -30,16 +30,14 @@
-
Des cartes locales, à prix libre,
-
-
optimisées pour la randonnée.
+ Des cartes locales, à prix libre, optimisées pour la randonnée.
diff --git a/site/style/assets/font/news-cycle/newscycle-bold-webfont.woff b/site/style/assets/font/news-cycle/newscycle-bold-webfont.woff
new file mode 100644
index 0000000..834d91e
Binary files /dev/null and b/site/style/assets/font/news-cycle/newscycle-bold-webfont.woff differ
diff --git a/site/style/assets/font/news-cycle/newscycle-regular-webfont.woff b/site/style/assets/font/news-cycle/newscycle-regular-webfont.woff
new file mode 100644
index 0000000..9ee4ca5
Binary files /dev/null and b/site/style/assets/font/news-cycle/newscycle-regular-webfont.woff differ
diff --git a/site/style/font.less b/site/style/font.less
index af35216..e64f307 100644
--- a/site/style/font.less
+++ b/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;
+}
diff --git a/site/style/general.less b/site/style/general.less
new file mode 100644
index 0000000..9948d21
--- /dev/null
+++ b/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;
+}
\ No newline at end of file
diff --git a/site/style/mobile.less b/site/style/mobile.less
new file mode 100644
index 0000000..51885f6
--- /dev/null
+++ b/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;
+ }
+
+}
diff --git a/site/style/style.css b/site/style/style.css
index ae9796a..0dd33fd 100644
--- a/site/style/style.css
+++ b/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;
+ }
+}
diff --git a/site/style/style.less b/site/style/style.less
index 5ccb58f..a282dd1 100644
--- a/site/style/style.less
+++ b/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;
-}
-* {
- 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;
-}
\ No newline at end of file