updated site web with better design and content
This commit is contained in:
parent
8a17ecfb98
commit
a88b8c687f
@ -68,7 +68,7 @@ Non, il existe plusieurs solutions pour imprimer ses propres cartes. Allez faire
|
||||
|
||||
### Quel est votre modèle économique?
|
||||
|
||||
Nous utilisons des données ouvertes (OpenStreetMap, données du relief publiques), des logiciels libres de cartographie et un style cartographique libre de droit. Néanmoins, cette offre de cartes a un coût: la retouche de certains éléments de nos cartes "à la main", notre travail de promotion, l'hébergement de ce site web, etc. C'est pourquoi nous proposons le téléchargement de ces cartes à un prix libre. Ces cartes sont également disponibles à la vente au prix de 3,00€, à l'état d'imprimé de haute qualité, dans divers endroits.
|
||||
Nous utilisons des données ouvertes (OpenStreetMap, données du relief publiques), des logiciels libres de cartographie et un style cartographique libre de droit. Néanmoins, cette offre de cartes a un coût: la retouche de certains éléments de nos cartes "à la main", notre travail de promotion, l'hébergement de ce site web, etc. C'est pourquoi nous proposons le téléchargement de ces cartes à un prix libre. Ces cartes sont également disponibles à la vente au prix de 3,00€, en impressions de haute qualité, dans divers endroits.
|
||||
|
||||
L'argent collecté est redistribué en partie (quelle proportion?) à OpenStreetMap-Belgium, l'association qui accompagne la communauté des contributeur·rice·s d'OpenStreetMap en Belgique.
|
||||
|
||||
|
||||
169
site/index.html
169
site/index.html
@ -6,7 +6,6 @@
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<link rel="alternate" hreflang="x-default" href="https://atelier-cartographique.be/en/index.html" />
|
||||
<meta name="description" content="" />
|
||||
|
||||
<meta property="og:title" content="" />
|
||||
<meta property="og:image" content="" />
|
||||
<meta property="og:site_name" content="" />
|
||||
@ -16,56 +15,156 @@
|
||||
</head>
|
||||
|
||||
<body class="front">
|
||||
<div class="header front">
|
||||
<!-- <div class="header__logo">
|
||||
<div class="logo">
|
||||
<a href="index.html">
|
||||
<img src="" alt="" />
|
||||
</a>
|
||||
</div>
|
||||
</div> -->
|
||||
|
||||
<div class="header">
|
||||
|
||||
<div class="header__logo"> rando.osm.be </div>
|
||||
|
||||
<div class="header__links">
|
||||
<a href="#">link</a>
|
||||
<a href="#">link</a>
|
||||
<a href="#">link</a>
|
||||
<a href="#">link</a>
|
||||
<a href="#mapList">Liste des cartes</a>
|
||||
<a href="#quiSommesNous">Qui sommes nous ?</a>
|
||||
<a href="#FAQ">F.A.Q</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="main__wrapper">
|
||||
<div class="sidebar">
|
||||
<h1>Cartes imprimées OpenArdenneMap</h1>
|
||||
<p>OpenArdenneMap est un style spécifiquement développé pour des cartes imprimées, avec un faible nombre
|
||||
de couleurs
|
||||
différentes, des contrastes clairs, et qui fait la part belle aux labels (basés sur la fonte
|
||||
Alfphabet), dans la
|
||||
tradition des cartes topographiques de l’IGN belge des années 1960 à 1980.</p>
|
||||
<p>Bien qu'il puisse convenir à d'autres endroits, OpenArdenneMap est spécifiquement adapté à certains
|
||||
traits géographiques
|
||||
de l'Ardenne. Il est toutefois adapté pour la plupart des régions rurales tempérées. Parmi ces
|
||||
traits, citons la
|
||||
distinction feuillus-résineux des forêts, un accent mis sur le relief, une mise en évidence claire
|
||||
des éléments naturels
|
||||
(hydrographie, limites de végétation, ...) et une description fine des types de voiries lentes (on y
|
||||
distingue 5 types
|
||||
de chemins en plus des sentiers & coupes-feu)</p>
|
||||
<!-- <h1>Portail de distribution de cartes de randonnée à la demande.</h1> -->
|
||||
|
||||
<h2>Caractéristiques</h2>
|
||||
<h1>Des cartes locales, à prix libre, <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 ouvertes</a> et mises à jour <a href="#exact"> en continu</a>.</p>
|
||||
</div>
|
||||
|
||||
<div class="block-main">
|
||||
<img src="style/assets/compo.png" alt="">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="mapList" class="block">
|
||||
|
||||
<h2>Liste des cartes</h2>
|
||||
|
||||
<p> La carte que vous souhaitez n'existe pas encore ? <a href="#quiSommesNous">Contactez-nous</a>, nous la mettrons à disposition rapidement. </p>
|
||||
</div>
|
||||
|
||||
<div id="firstLink" class="block block-with-sidebar sidebar-right">
|
||||
|
||||
<div class="block-main">
|
||||
|
||||
<h2>Un design cartographique adapté</h3>
|
||||
|
||||
<p>OpenArdenneMap est un style spécifiquement développé pour des cartes imprimées, avec un faible nombre de couleurs différentes, des contrastes clairs, et qui fait la part belle aux labels (basés sur la fonte <a href="http://osp.kitchen/foundry/">Alfphabet</a>), dans la tradition des cartes topographiques de l’IGN belge des années 1960 à 1980.</p>
|
||||
|
||||
<p>Bien qu'il puisse convenir à d'autres endroits, OpenArdenneMap est spécifiquement adapté à certains traits géographiques de l'Ardenne. Il est toutefois adapté pour la plupart des régions rurales tempérées. Parmi ces traits, citons la distinction feuillus-résineux des forêts, un accent mis sur le relief, une mise en évidence claire des éléments naturels (hydrographie, limites de végétation, ...) et une description fine des types de voiries lentes (on y distingue 5 types de chemins en plus des sentiers & coupes-feu)</p>
|
||||
|
||||
<p>Une carte éditée avec le style OpenArdenneMap a été récompensée du vote du public lors de la conférence FOSS4G.be (Bruxelles, 2018). La carte primée est une planche A0 tirée au 1:20000 de la Forêt d’Anlier représentant les données d’OpenStreetMap avec le style OpenArdenneMap.
|
||||
|
||||
<h3>Liens</h3>
|
||||
<li>
|
||||
<a href="https://blog.champs-libres.coop/carto/2018/12/18/openardennemap.html">https://blog.champs-libres.coop/carto/2018/12/18/openardennemap.html </a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="http://www.nobohan.be/tag/openardennemap/">http://www.nobohan.be/tag/openardennemap/</a>
|
||||
</p>
|
||||
</li>
|
||||
</div>
|
||||
|
||||
<div class="block-sidebar">
|
||||
|
||||
<h2>Caractéristiques des cartes</h2>
|
||||
|
||||
<ul>
|
||||
<li>Rendu fin du relief (ombrage et courbes de niveaux)</li>
|
||||
<li>Classification des chemins en 5 catégories + sentier + coupe-feu</li>
|
||||
<li>Indication de la date moyenne de dernière modification des chemins</li>
|
||||
<li>Indications des promenades balisées officielles</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="FAQ" class="block faq">
|
||||
|
||||
<h2>F.A.Q</h2>
|
||||
|
||||
<details>
|
||||
<summary>Quelle est l'exactitude de ces cartes ?</summary>
|
||||
|
||||
<p id="exact">Pratiquement aucune carte n'est exempte d'erreurs. En particulier, des éléments tels que des sentiers et du balisage peuvent évoluer rapidement dans le temps. Nous ne donnons aucune garantie quant à l'exactitude et la complétude des informations de nos cartes. Néanmoins, nous savons par expérience que les données OpenStreetMap gagnent en exactitude et en précision d'année en année. Un conseil: les chemins de type "mauvais chemin" sont, comme leur nom l'indique, moins bien tracés et sont plus susceptibles d'être envahis par la végétation et difficile à pratiquer.</p>
|
||||
</details>
|
||||
|
||||
<details>
|
||||
<summary>J'aimerais avoir une carte de ma région avec les promenades balisées. Pourquoi n'est-elle pas disponible?</summary>
|
||||
|
||||
<p>Même si le processus de création des cartes OpenArdenneMap est semi-automatisé, nos cartes sont produites au fur et à mesure des demandes et de la complétude des données OpenStreetMap, particulièrement en ce qui concerne les itinéraires balisés. Vous désirez une carte d'un endroit particulier? Contactez-nous!</p>
|
||||
</details>
|
||||
|
||||
<details>
|
||||
<summary>Y-a-t'il une application mobile pour ces randonnées ?</summary>
|
||||
|
||||
<p>Il existe une foule d'applications mobiles de cartographie et pour la pratique de la randonnée. Bonne nouvelle, l'immense majorité de celles-ci utilisent exactement les mêmes données que nos cartes: OpenStreetMap. Si vous voulez combiner nos cartes avec une application de randonnée, nous vous conseillons d'installer une application qui conserve les données hors connexion (il existe encore de nombreuses zones blanches en forêt) et qui ne gardera pas trace de vos données personnelles, comme OsmAnd, WindyMaps, MapsMe.</p>
|
||||
</details>
|
||||
|
||||
<details>
|
||||
<summary>Votre produit est-il unique?</summary>
|
||||
|
||||
<p>Non, il existe plusieurs solutions pour imprimer ses propres cartes. Allez faire un tour sur MapOsmatic, Inkatlas, ... Mais, à notre connaissance, peu de ces plateformes vous garantissent des cartes avec un style cartographique adapté pour l'impression.</p>
|
||||
</details>
|
||||
|
||||
<details>
|
||||
<summary>Quel est votre modèle économique?</summary>
|
||||
|
||||
<p>Nous utilisons des données ouvertes (OpenStreetMap, données du relief publiques), des logiciels libres de cartographie et un style cartographique libre de droit. Néanmoins, cette offre de cartes a un coût: la retouche de certains éléments de nos cartes "à la main", notre travail de promotion, l'hébergement de ce site web, etc. C'est pourquoi nous proposons le téléchargement de ces cartes à un prix libre. Ces cartes sont également disponibles à la vente au prix de 3,00€, en impressions de haute qualité, dans divers endroits.</p>
|
||||
|
||||
<p>L'argent collecté est redistribué en partie (quelle proportion?) à OpenStreetMap-Belgium, l'association qui accompagne la communauté des contributeur·rice·s d'OpenStreetMap en Belgique.</p>
|
||||
</details>
|
||||
|
||||
<details>
|
||||
<summary>Je suis un⋅e opérateur⋅rice touristique/gestionnaire d'un hébergement, puis-je imprimer/utiliser/distribuer/vendre vos cartes ?</summary>
|
||||
|
||||
<p>Oui. Les cartes OpenArdenneMap sont disponibles sous licence CC By-Sa 4.0. Cela signifie que vous pouvez les imprimer, les utiliser, les distribuer et même les vendre. Si vous êtes un opérateur touristique, nous conseillons le prix de vente de 3,00€ pour une impression A3. Nous distribuons nous-mêmes une partie de nos cartes dans divers syndicats d'initiative. Dans le cas où vous retiriez un certain bénéfice de la vente de ces cartes, nous vous serons reconnaissant de soutenir financièrement le projet. Dans tous les cas où vous réutiliseriez nos produits d'un manière ou d'une autre, merci également de nous le faire savoir! Si vous êtes intéressé par des collaborations ou d'autres produits (posters, cartes sur demande, cartographie participative), contactez-nous!</p>
|
||||
</details>
|
||||
|
||||
<details>
|
||||
<summary>Est-ce que vous faites des tirages/produits sur mesure, ou des animations d'ateliers ?</summary>
|
||||
|
||||
<p>Bien sûr. Si vous êtes intéressé par des collaborations ou d'autres produits tels que des tirages haute qualité, des grands formats, des atlas plus complets, ou l'accompagnement d'ateliers cartographie participative pour tout type de public, contactez-nous!</p>
|
||||
</details>
|
||||
</div>
|
||||
<div class="main">
|
||||
<img class="image1" src="style/assets/mellier-2000.png" alt="">
|
||||
<img class="image2" src="style/assets/mellier-2000.png" alt="">
|
||||
|
||||
<div class="block block-with-sidebar sidebar-right" id="quiSommesNous">
|
||||
|
||||
<div class="block-main">
|
||||
|
||||
<h2>Qui sommes-nous?</h2>
|
||||
|
||||
<p>Ce produit est proposé par <a href="https://www.champs-libres.coop/">Champs-Libres</a> (Namur) et <a href="https://atelier-cartographique.be/">Atelier cartographique</a> (Bruxelles). Nos deux structures sont des sociétés coopératives actives dans le développement de logiciels libres et dans la cartographie. </p>
|
||||
|
||||
<p> Si habituellement nous réalisons des applications web, nous aimons aussi réaliser de la cartographie sur du papier. Nos autres projets de cartographie consistent en la réalisation de <a href="https://cartostation.com/">portails web cartographiques</a>, des animations en <a href="https://wiki.openstreetmap.org/wiki/Brugelette">cartographie participative</a> ou des <a href="https://www.champs-libres.coop/service/formations/">formations en logiciels de cartographie</a>.</p>
|
||||
|
||||
<p> Enfin, ce projet ne pourrait être possible sans le projet <a href="https://www.openstreetmap.org/">OpenStreetMap</a> et sa formidable communauté de contributeur·rice·s en Belgique. Une partie des recettes de vente de nos cartes est reversé à l'association <a href="https://openstreetmap.be/en/">OpenStreetMap Belgium</a> pour le développement de la communauté.</p>
|
||||
</div>
|
||||
|
||||
<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>
|
||||
|
||||
<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>
|
||||
</div>
|
||||
</div>
|
||||
<div class="footer">
|
||||
<p>du blbla de footer</p>
|
||||
</div>
|
||||
|
||||
<div class="heart">Initié avec ♥ en Ardenne.</div>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
|
||||
BIN
site/style/assets/compo.png
Normal file
BIN
site/style/assets/compo.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.4 MiB |
28
site/style/header.less
Normal file
28
site/style/header.less
Normal file
@ -0,0 +1,28 @@
|
||||
|
||||
|
||||
.header {
|
||||
padding: @margin / 2 0;
|
||||
border-bottom: 1px solid #000;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
> div {
|
||||
flex-shrink: 0;
|
||||
}
|
||||
}
|
||||
.header__logo {
|
||||
font-size: 1.2rem;
|
||||
margin-right: @margin;
|
||||
}
|
||||
.header__links {
|
||||
a {
|
||||
margin-left: @margin / 2;
|
||||
padding: 0 0.5ch;
|
||||
text-decoration: none;
|
||||
color: inherit;
|
||||
&:hover {
|
||||
background-color: @pitchLinkColor;
|
||||
text-decoration: underline !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -1,93 +0,0 @@
|
||||
@import "normalize.less";
|
||||
@import "font.less";
|
||||
|
||||
@headerH : 50px;
|
||||
@footerH : 50px;
|
||||
@mainW : 75%;
|
||||
@sidebarW : 25%;
|
||||
@margin : 15px;
|
||||
|
||||
|
||||
html {
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: 'Alfphabet-III', Arial, Helvetica, sans-serif;
|
||||
margin: 0px;
|
||||
}
|
||||
|
||||
|
||||
|
||||
h1 {
|
||||
// font-size: 1.75rem;
|
||||
// color: #375773;
|
||||
// // text-transform: uppercase;
|
||||
// font-weight: 100;
|
||||
margin: 0px;
|
||||
}
|
||||
|
||||
.header,
|
||||
.footer {
|
||||
padding: @margin;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
> div {
|
||||
flex-shrink: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.main__wrapper {
|
||||
position: absolute;
|
||||
top: @headerH;
|
||||
right: 0;
|
||||
bottom: @footerH;
|
||||
left: 0;
|
||||
display: flex;
|
||||
> div {
|
||||
padding : @margin;
|
||||
flex-shrink: 0;
|
||||
|
||||
&.sidebar {
|
||||
width: @sidebarW;
|
||||
overflow: auto;
|
||||
border-right: 1px solid #000;
|
||||
}
|
||||
&.main {
|
||||
position: relative;
|
||||
width: @mainW;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
img {
|
||||
width: 70%;
|
||||
border: 1px solid #aaa;
|
||||
position: absolute;
|
||||
|
||||
&.image1 {
|
||||
transform: rotate(-5deg) translate(3%, -2%);
|
||||
|
||||
}
|
||||
&.image2 {
|
||||
// transform: rotate(-3deg);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.footer {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
left: 0;
|
||||
height: @footerH;
|
||||
|
||||
}
|
||||
@ -321,6 +321,30 @@ template {
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
}
|
||||
.header {
|
||||
padding: 16px 0;
|
||||
border-bottom: 1px solid #000;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
}
|
||||
.header > div {
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.header__logo {
|
||||
font-size: 1.2rem;
|
||||
margin-right: 32px;
|
||||
}
|
||||
.header__links a {
|
||||
margin-left: 16px;
|
||||
padding: 0 0.5ch;
|
||||
text-decoration: none;
|
||||
color: inherit;
|
||||
}
|
||||
.header__links a:hover {
|
||||
background-color: #ffff94;
|
||||
text-decoration: underline !important;
|
||||
}
|
||||
html {
|
||||
font-size: 20px;
|
||||
}
|
||||
@ -331,57 +355,91 @@ html {
|
||||
}
|
||||
body {
|
||||
font-family: 'Alfphabet-III', Arial, Helvetica, sans-serif;
|
||||
margin: 0px;
|
||||
margin: auto;
|
||||
padding: 64px;
|
||||
padding-top: 0px;
|
||||
max-width: 1280px;
|
||||
}
|
||||
h1 {
|
||||
font-size: 4rem;
|
||||
margin: 0px;
|
||||
line-height: 90%;
|
||||
margin-bottom: 64px;
|
||||
}
|
||||
.header,
|
||||
.footer {
|
||||
padding: 15px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
h1 .second-line {
|
||||
margin-left: 6ch;
|
||||
}
|
||||
.header > div,
|
||||
.footer > div {
|
||||
flex-shrink: 0;
|
||||
details {
|
||||
margin-bottom: 10.66666667px;
|
||||
}
|
||||
p.pitch {
|
||||
font-size: 2.4rem;
|
||||
line-height: 135%;
|
||||
}
|
||||
p.pitch a {
|
||||
background-color: #ffff94;
|
||||
color: inherit;
|
||||
text-decoration: none;
|
||||
padding: 0 0.5ch;
|
||||
}
|
||||
p.pitch a:hover {
|
||||
text-decoration: underline !important;
|
||||
}
|
||||
.main__wrapper {
|
||||
position: absolute;
|
||||
top: 50px;
|
||||
right: 0;
|
||||
bottom: 50px;
|
||||
left: 0;
|
||||
padding-top: 32px;
|
||||
}
|
||||
.block {
|
||||
margin-bottom: 64px;
|
||||
}
|
||||
.block a {
|
||||
color: inherit;
|
||||
}
|
||||
.block a:hover {
|
||||
background-color: #ffff94;
|
||||
}
|
||||
.block-with-sidebar {
|
||||
display: flex;
|
||||
}
|
||||
.main__wrapper > div {
|
||||
padding: 15px;
|
||||
.block-with-sidebar > div {
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.main__wrapper > div.sidebar {
|
||||
width: 25%;
|
||||
.block-with-sidebar > div.block-sidebar {
|
||||
width: calc(100% - 60%);
|
||||
overflow: auto;
|
||||
}
|
||||
.block-with-sidebar > div.block-main {
|
||||
position: relative;
|
||||
width: 60%;
|
||||
}
|
||||
.block-with-sidebar > div.block-main img {
|
||||
width: 90%;
|
||||
}
|
||||
.block-with-sidebar.sidebar-right .block-sidebar {
|
||||
padding-left: 16px;
|
||||
border-left: 1px solid #000;
|
||||
}
|
||||
.block-with-sidebar.sidebar-left .block-sidebar {
|
||||
padding-right: 16px;
|
||||
border-right: 1px solid #000;
|
||||
}
|
||||
.main__wrapper > div.main {
|
||||
position: relative;
|
||||
width: 75%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
.block-with-sidebar.sidebar-right .block-main {
|
||||
padding-right: 16px;
|
||||
}
|
||||
.main__wrapper > div.main img {
|
||||
width: 70%;
|
||||
border: 1px solid #aaa;
|
||||
position: absolute;
|
||||
.block-with-sidebar.sidebar-left .block-main {
|
||||
padding-left: 16px;
|
||||
}
|
||||
.main__wrapper > div.main img.image1 {
|
||||
transform: rotate(-5deg) translate(3%, -2%);
|
||||
#mapList,
|
||||
#FAQ {
|
||||
border: 1px solid #000;
|
||||
border-radius: 64px;
|
||||
padding: 64px;
|
||||
padding-top: 32px;
|
||||
}
|
||||
.footer {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
left: 0;
|
||||
height: 50px;
|
||||
.heart {
|
||||
transform: rotate(90deg);
|
||||
transform-origin: right top;
|
||||
position: fixed;
|
||||
right: 5px;
|
||||
bottom: 32px;
|
||||
font-size: 0.8rem;
|
||||
}
|
||||
|
||||
132
site/style/style.less
Normal file
132
site/style/style.less
Normal file
@ -0,0 +1,132 @@
|
||||
@import "normalize.less";
|
||||
@import "font.less";
|
||||
@import "header.less";
|
||||
|
||||
@headerH : 50px;
|
||||
@footerH : 50px;
|
||||
@mainW : 60%;
|
||||
@sidebarW : calc(~"100% - @{mainW}");
|
||||
@margin : 32px;
|
||||
@pitchLinkColor : #ffff94;
|
||||
|
||||
html {
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: 'Alfphabet-III', Arial, Helvetica, sans-serif;
|
||||
margin: auto;
|
||||
padding: @margin * 2;
|
||||
padding-top: 0px;
|
||||
max-width: 1280px;
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
h1 {
|
||||
font-size: 4rem;
|
||||
margin: 0px;
|
||||
line-height: 90%;
|
||||
margin-bottom: @margin * 2;
|
||||
|
||||
.second-line {
|
||||
margin-left: 6ch;
|
||||
}
|
||||
}
|
||||
|
||||
details {
|
||||
margin-bottom: @margin / 3;
|
||||
}
|
||||
|
||||
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: 90%;
|
||||
}
|
||||
}
|
||||
}
|
||||
&.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