Skip to content

Commit

Permalink
fix
Browse files Browse the repository at this point in the history
  • Loading branch information
@Louis-LJ
Louis-LJ committed Jun 10, 2024
1 parent 2c0c782 commit acc1641
Show file tree
Hide file tree
Showing 2 changed files with 155 additions and 125 deletions.
274 changes: 151 additions & 123 deletions CycloRoute/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -214,129 +214,157 @@ <h4>Mode CycloTourisme</h4>

<h4>Legende du fond de carte CyclOSM que nous avons intégré à notre style</h4>
<br>

<ul>
<li>
<h4>Infrastructure cyclable</h4>
</li>
</ul>

<table>
<tr>
<td><span style="display: inline-block; height: 0.5em; width: 2em; border-top: solid blue 3px; vertical-align: middle;"></span></td>
<td>Piste cyclable séparée</td>
</tr>
<tr>
<td><span style="display: inline-block; height: 0.5em; width: 2em; border-top: solid #0050ff 3px; vertical-align: middle;"></span></td>
<td>Voie verte</td>
</tr>
<tr>
<td>
<span style="display: inline-block; height: 1.5em; width: 2em;">
<svg width="100%" height="100%" xmlns="https://www.w3.org/2000/svg" version="1.1">
<line x1="10%" x2="150%" y1="10%" y2="10%" stroke-linecap="butt" stroke="blue" stroke-width="20%" />
<line x1="10%" x2="150%" y1="70%" y2="70%" stroke-linecap="butt" stroke="black" stroke-width="20%" />
<rect x="10%" y="10%" width="140%" height="60%" fill="#ccc" />
</svg>
</span>
</td>
<td>Piste cyclable de ce côté de la chaussée</td>
</tr>
<tr>
<td>
<span style="display: inline-block; height: 1.5em; width: 2em;">
<svg width="100%" height="100%" xmlns="https://www.w3.org/2000/svg" version="1.1">
<line x1="10%" x2="150%" y1="10%" y2="10%" stroke-linecap="butt" stroke-dasharray="6,3" stroke="blue" stroke-width="20%" />
<line x1="10%" x2="150%" y1="70%" y2="70%" stroke-linecap="butt" stroke="black" stroke-width="20%" />
<rect x="10%" y="10%" width="140%" height="60%" fill="#ccc" />
</svg>
</span>
</td>
<td>Bande cyclable de ce côté de la chaussée</td>
</tr>
<tr>
<td>
<span style="display: inline-block; height: 1.5em; width: 2em;">
<svg width="100%" height="100%" xmlns="https://www.w3.org/2000/svg" version="1.1">
<line x1="10%" x2="150%" y1="10%" y2="10%" stroke-linecap="butt" stroke-dasharray="6, 10" stroke="blue" stroke-width="20%" />
<line x1="10%" x2="150%" y1="70%" y2="70%" stroke-linecap="butt" stroke="black" stroke-width="20%" />
<rect x="10%" y="10%" width="140%" height="60%" fill="#ccc" />
</svg>
</span>
</td>
<td>Bande partagée (avec bus ou véhicule à moteur) de ce côté de la chaussée <br /> Accotement de route ouvert aux vélos</td>
</tr>
<tr>
</tr>
</table>
<br>

<ul>
<li>
<h4>Véloroute</h4>
</li>
</ul>

<table>
<tr>
<td style="width: 2em;"><span style="display: inline-block; height: 1em; width: 2em; background-color: #ff00ff; opacity: 0.5;"></span></td>
<td>Véloroute internationale</td>
</tr>
<tr>
<td><span style="display: inline-block; height: 1em; width: 2em; background-color: #aa00ff; opacity: 0.5;"></span></td>
<td>Véloroute nationale</td>
</tr>
<tr>
<td><span style="display: inline-block; height: 1em; width: 2em; background-color: #5500ff; opacity: 0.5;"></span></td>
<td>Véloroute régionale</td>
</tr>
<tr>
<td><span style="display: inline-block; height: 1em; width: 2em; background-color: #0000ff; opacity: 0.5;"></span></td>
<td>Véloroute locale</td>
</tr>
<tr>
<td><span style="display: inline-block; height: 1em; width: 2em; background-color: #d15000; opacity: 0.5;"></span></td>
<td>Itinéraire VTT</td>
</tr>
</table>
<br>

<ul>
<li>
<h4>Equipements spécifiques vélo</h4>
</li>
</ul>

<table>
<tr>
<td><img src="https://www.cyclosm.org/symbols/openstreetmap-carto/amenity/bicycle_repair_station.svg" /></td>
<td>Station de réparation vélo</td>
</tr>
<tr>
<td><img src="https://www.cyclosm.org/symbols/osmandapp/amenity/compressed_air.svg" /></td>
<td>Air compressé</td>
</tr>
<tr>
<td><img src="https://www.cyclosm.org/symbols/shop/convenience_air.svg" /></td>
<td>Station service avec air compressé</td>
</tr>
<tr>
<td><span style="display: inline-block; width: 0.5em; height: 0.5em; background-color: blue; border-radius: 50%;"></span></td>
<td>Stationnement vélo</td>
</tr>
<tr>
<td><span style="display: inline-block; width: 0.5em; height: 0.5em; background-color: #0050ff; border-radius: 50%;"></span></td>
<td>Stationnement partagé vélo moto</td>
</tr>
<tr>
<td><img src="https://www.cyclosm.org/symbols/osm-bright-gl-style/amenities/bicycle_rental_11.svg" /></td>
<td>Location vélo</td>
</tr>
<tr>
<td><img src="https://www.cyclosm.org/symbols/osm-bright-gl-style/amenities/bicycle_11.svg" /></td>
<td>Boutique vélo</td>
</tr>
</table>

<div class="responsive-columns" style="justify-content: center">
<table>
<tr>
<td colspan=2 align="center">
<h4>Infrastructure cyclable</h4>
</td>
</tr>
<tr>
<td align="center"><span style="display: inline-block; height: 0.5em; width: 8em; border-top: solid blue 3px; vertical-align: middle;"></span></td>
<td>Piste cyclable séparée</td>
</tr>
<tr>
<td align="center"><span style="display: inline-block; height: 0.5em; width: 8em; border-top: solid #0050ff 3px; vertical-align: middle;"></span></td>
<td>Voie verte</td>
</tr>
<tr>
<td align="center">
<span style="display: inline-block; height: 1.5em; width: 8em;">
<svg width="100%" height="100%" xmlns="https://www.w3.org/2000/svg" version="1.1">
<line x1="1%" x2="150%" y1="10%" y2="10%" stroke-linecap="butt" stroke="blue" stroke-width="20%" />
<line x1="1%" x2="150%" y1="50%" y2="50%" stroke-linecap="butt" stroke="black" stroke-width="20%" />
<rect x="1%" y="10%" width="140%" height="60%" fill="#ccc" />
</svg>
</span>
</td>
<td>Piste cyclable de ce côté de la chaussée</td>
</tr>
<tr>
<td align="center">
<span style="display: inline-block; height: 1.5em; width: 8em;">
<svg width="100%" height="100%" xmlns="https://www.w3.org/2000/svg" version="1.1">
<line x1="1%" x2="150%" y1="10%" y2="10%" stroke-linecap="butt" stroke-dasharray="6,3" stroke="blue" stroke-width="20%" />
<line x1="1%" x2="150%" y1="50%" y2="50%" stroke-linecap="butt" stroke="black" stroke-width="20%" />
<rect x="1%" y="10%" width="140%" height="60%" fill="#ccc" />
</svg>
</span>
</td>
<td>Bande cyclable de ce côté de la chaussée</td>
</tr>
<tr>
<td align="center">
<span style="display: inline-block; height: 1.5em; width: 8em;">
<svg width="100%" height="100%" xmlns="https://www.w3.org/2000/svg" version="1.1">
<line x1="1%" x2="150%" y1="10%" y2="10%" stroke-linecap="butt" stroke-dasharray="6,10" stroke="blue" stroke-width="20%" />
<line x1="1%" x2="150%" y1="50%" y2="50%" stroke-linecap="butt" stroke="black" stroke-width="20%" />
<rect x="1%" y="10%" width="140%" height="60%" fill="#ccc" />
</svg>
</span>
</td>
<td>Bande partagée (avec bus ou véhicule à moteur) <br>de ce côté de la chaussée <br>Accotement de route ouvert aux vélos</td>
</tr>
<tr>
</tr>
</table>
<br>

<table>
<tr>
<td colspan=2 align="center">
<h4>Véloroute</h4>
</td>
</tr>
<tr>
<td align="center">
<span style="display: inline-block; height: 1.5em; width: 8em;">
<svg width="100%" height="100%" xmlns="https://www.w3.org/2000/svg" version="1.1">
<line x1="1%" x2="150%" y1="70%" y2="70%" stroke-linecap="butt" stroke="#ff00ff" opacity="0.5" stroke-width="20%" />
</svg>
</span>
</td>
<td>Véloroute internationale</td>
</tr>
<tr>
<td align="center">
<span style="display: inline-block; height: 1.5em; width: 8em;">
<svg width="100%" height="100%" xmlns="https://www.w3.org/2000/svg" version="1.1">
<line x1="1%" x2="150%" y1="70%" y2="70%" stroke-linecap="butt" stroke="#aa00ff" opacity="0.5" stroke-width="20%" />
</svg>
</span>
</td>
<td>Véloroute nationale</td>
</tr>
<tr>
<td align="center">
<span style="display: inline-block; height: 1.5em; width: 8em;">
<svg width="100%" height="100%" xmlns="https://www.w3.org/2000/svg" version="1.1">
<line x1="1%" x2="150%" y1="70%" y2="70%" stroke-linecap="butt" stroke="#5500ff" opacity="0.5" stroke-width="20%" />
</svg>
</span>
</td>
<td>Véloroute régionale</td>
</tr>
<tr>
<td align="center">
<span style="display: inline-block; height: 1.5em; width: 8em;">
<svg width="100%" height="100%" xmlns="https://www.w3.org/2000/svg" version="1.1">
<line x1="1%" x2="150%" y1="70%" y2="70%" stroke-linecap="butt" stroke="#0000ff" opacity="0.5" stroke-width="20%" />
</svg>
</span>
</td>
<td>Véloroute locale</td>
</tr>
<tr>
<td align="center">
<span style="display: inline-block; height: 1.5em; width: 8em;">
<svg width="100%" height="100%" xmlns="https://www.w3.org/2000/svg" version="1.1">
<line x1="1%" x2="150%" y1="70%" y2="70%" stroke-linecap="butt" stroke="#d15000" opacity="0.5" stroke-width="20%" />
</svg>
</span>
</td>
<td>Itinéraire VTT</td>
</tr>
</table>
<br>
<table>
<tr>
<td colspan=2 align="center">
<h4>Equipements spécifiques vélo</h4>
</td>
</tr>
<tr>
<td align="center"><img src="https://www.cyclosm.org/symbols/openstreetmap-carto/amenity/bicycle_repair_station.svg" width="30px" /></td>
<td>Station de réparation vélo</td>
</tr>
<tr>
<td align="center"><img src="https://www.cyclosm.org/symbols/osmandapp/amenity/compressed_air.svg" width="30px" /></td>
<td>Air compressé</td>
</tr>
<tr>
<td align="center"><img src="https://www.cyclosm.org/symbols/shop/convenience_air.svg" width="30px" /></td>
<td>Station service avec air compressé</td>
</tr>
<tr>
<td align="center"><span style="display: inline-block; width: 1em; height: 1em; background-color: blue; border-radius: 100%;"></span></td>
<td>Stationnement vélo</td>
</tr>
<tr>
<td align="center"><span style="display: inline-block; width: 1em; height: 1em; background-color: #0050ff; border-radius: 50%;"></span></td>
<td>Stationnement partagé vélo moto</td>
</tr>
<tr>
<td align="center"><img src="https://www.cyclosm.org/symbols/osm-bright-gl-style/amenities/bicycle_rental_11.svg" width="30px" /></td>
<td>Location vélo</td>
</tr>
<tr>
<td align="center"><img src="https://www.cyclosm.org/symbols/osm-bright-gl-style/amenities/bicycle_11.svg" width="30px" /></td>
<td>Boutique vélo</td>
</tr>
</table>
</div>

<br><br>
<hr>
Expand Down
6 changes: 4 additions & 2 deletions Style.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,7 @@
--navbar-text-color: hsl(0, 0%, 85%);
--navbar-text-color-focus: white;
--navbar-bg-contrast: hsl(0, 0%, 25%);
--bgtabledark: #25282E
}

body {
Expand Down Expand Up @@ -84,7 +85,7 @@ h3 {
h4 {
font-size: 1.45;
line-height: 2.5;
text-align: left;
border-radius: 0.3em;
background-color: var(--bg);
color: var(--text);
}
Expand Down Expand Up @@ -112,9 +113,10 @@ th, td {
border: 1px solid #6e6e6e;
border-radius: 0.3em;
padding: 0.3em;
background-color: var(--bgtabledark);
color: var(--text);
}


thead {
font-size: 1.2;
line-height: 1.5;
Expand Down

0 comments on commit acc1641

Please sign in to comment.