epickiwi/2026.camp.carte
1
1
Fork 0
Code Issues 2 Pull requests Projects Releases 6 Packages Wiki Activity Actions

Ajout d'une feuille de style pour nos amis les PC

Browse source
This commit is contained in:
EpicKiwi 2026-06-28 17:51:16 +02:00
parent 0db54f17cd
commit 709a83fc3f
Signed by: epickiwi
GPG key ID: C4B28FD2729941CE
4 changed files with 147 additions and 16 deletions
Download patch file Download diff file Expand all files Collapse all files

85
assets/neon-border-image-corner.svg Normal file
View file

@ -0,0 +1,85 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!-- Created with Inkscape (http://www.inkscape.org/) -->
<svg
width="100"
height="100"
viewBox="0 0 100 100"
version="1.1"
id="svg1"
xml:space="preserve"
inkscape:version="1.4 (e7c3feb100, 2024-10-09)"
sodipodi:docname="mockup.svg"
inkscape:export-filename="assets/neon-border-image-corner.svg"
inkscape:export-xdpi="96"
inkscape:export-ydpi="96"
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
xmlns="http://www.w3.org/2000/svg"
xmlns:svg="http://www.w3.org/2000/svg"><sodipodi:namedview
id="namedview1"
pagecolor="#ffffff"
bordercolor="#999999"
borderopacity="1"
inkscape:showpageshadow="2"
inkscape:pageopacity="0"
inkscape:pagecheckerboard="0"
inkscape:deskcolor="#d1d1d1"
inkscape:document-units="px"
inkscape:zoom="0.5227542"
inkscape:cx="900.0406"
inkscape:cy="1710.1728"
inkscape:window-width="2549"
inkscape:window-height="1367"
inkscape:window-x="56"
inkscape:window-y="50"
inkscape:window-maximized="0"
inkscape:current-layer="layer2"><inkscape:page
x="0"
y="0"
width="100"
height="100"
id="page2"
margin="0"
bleed="0" /></sodipodi:namedview><defs
id="defs1" /><g
inkscape:groupmode="layer"
id="layer2"
inkscape:label="Default Mobile"
transform="translate(-1178,-1289.783)"><g
id="g4-3"
inkscape:label="neon-border-image-corner"
inkscape:export-filename="assets/neon-border-image.svg"
inkscape:export-xdpi="96"
inkscape:export-ydpi="96"
transform="translate(0,-127.2171)"><rect
style="fill:#000000;fill-opacity:1;stroke:none;stroke-width:1.58144;stroke-dasharray:none;stroke-opacity:1;paint-order:stroke markers fill"
id="rect17-4-3-5"
width="100"
height="100"
x="1178"
y="1417" /><path
style="fill:#000000;fill-opacity:1;stroke:#ffbf3e;stroke-width:4;stroke-dasharray:none;stroke-opacity:1;paint-order:stroke markers fill"
d="m 1178,1419 h 100"
id="path17-2-5-6"
sodipodi:nodetypes="cc" /><path
style="fill:#000000;fill-opacity:1;stroke:#ff4e00;stroke-width:4;stroke-dasharray:none;stroke-opacity:1;paint-order:stroke markers fill"
d="m 1178,1423 h 100"
id="path17-9-2-6-2"
sodipodi:nodetypes="cc" /><path
style="fill:#000000;fill-opacity:1;stroke:#8800ff;stroke-width:4;stroke-dasharray:none;stroke-opacity:1;paint-order:stroke markers fill"
d="m 1178,1427 h 100"
id="path17-9-6-6-2-9"
sodipodi:nodetypes="cc" /><path
style="fill:#000000;fill-opacity:1;stroke:#ffbf3e;stroke-width:4;stroke-dasharray:none;stroke-opacity:1;paint-order:stroke markers fill"
d="m 1276,1417 v 100"
id="path17-2-5-6-9"
sodipodi:nodetypes="cc" /><path
style="fill:#000000;fill-opacity:1;stroke:#ff4e00;stroke-width:3.91918;stroke-dasharray:none;stroke-opacity:1;paint-order:stroke markers fill"
d="m 1272,1421 v 96"
id="path17-9-2-6-2-3"
sodipodi:nodetypes="cc" /><path
style="fill:#000000;fill-opacity:1;stroke:#8800ff;stroke-width:3.83667;stroke-dasharray:none;stroke-opacity:1;paint-order:stroke markers fill"
d="m 1268,1425 v 92"
id="path17-9-6-6-2-9-6"
sodipodi:nodetypes="cc" /></g></g></svg>
Side by side

After

Width:  |  Height:  |  Size: 3.5 KiB

57
css/style-desktop.css Normal file
View file

@ -0,0 +1,57 @@
#main-header {
flex-direction: row;
align-items: stretch;
background: radial-gradient(black, transparent 50%);
background-size: 40rem 20rem;
background-repeat: no-repeat;
background-position: -15rem -10rem;
}
body {
display: grid;
grid-template-columns: min-content 1fr;
grid-template-rows: min-content 1fr min-content;
max-height: 100vh;
column-gap: 10px;
}
body > #main-header {
grid-column: 1 / 3;
grid-row: 1;
z-index: 100;
}
body > #result-panel-dialog {
grid-column: 1;
grid-row: 1 / 4;
padding-top: calc(clamp(2rem, 10vh, 5rem) + 45px);
}
body > #search-section {
grid-column: 2;
grid-row: 3;
}
#result-panel-dialog {
box-sizing: border-box;
width: 35vw;
min-width: 200px;
max-height: 100vh;
height: min-content;
overflow-x: hidden;
overflow-y: auto;
background: transparent;
align-self: flex-end;
pointer-events: none;
}
#result-panel-dialog > * {
pointer-events: all;
}
#result-panel {
border-image: url("../assets/neon-border-image-corner.svg") 12;
border-right: 5.5px white solid;
}

20
css/style.css
View file

@ -34,14 +34,11 @@ body > hr {
#main-header {
display: flex;
justify-content: start;
align-items: stretch;
flex-direction: row;
background: radial-gradient(black, transparent 50%);
background-size: 40rem 20rem;
background-repeat: no-repeat;
background-position: -15rem -10rem;
align-items: center;
flex-direction: column;
background: linear-gradient(to bottom, black, transparent);
padding: 15px;
padding-bottom: 30px;
@ -52,15 +49,6 @@ body > hr {
}
}
@media screen and (max-width: 600px) {
#main-header {
flex-direction: column;
align-items: center;
background: linear-gradient(to bottom, black, transparent);
}
}
#main-header #logo {
max-height: clamp(2rem, 10vh, 5rem);
filter: drop-shadow(rgba(0,0,0,0.5) 0 0 10px);

1
index.html
View file

@ -6,6 +6,7 @@
<title>Carte Interhack Camp 2026</title>
<link rel="stylesheet" href="./js/lib/leaflet/leaflet.css">
<link rel="stylesheet" href="./css/style.css">
<link rel="stylesheet" href="./css/style-desktop.css" media="screen and (min-width: 600px)">
<link rel="stylesheet" href="./css/widgets.css">
<script type="module" src="./js/index.js"></script>
<script type="module" src="./js/components/bidi-panel.js"></script>