collin/collinenlucy.nl
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Adding some responsive sizing to website

Browse source
This commit is contained in:
Collin Duncan 2025-06-25 17:31:34 +02:00
parent 645d6b617a
commit 2ae8f6b58d
No known key found for this signature in database
2 changed files with 53 additions and 8 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

6
client/index.html
View file

@ -8,7 +8,7 @@
<div class="contents fontM"> <div class="contents fontM">
<div> <div>
<h2 class="textLeft fontL colorLightGreen">When?</h2> <h2 class="textLeft fontL colorLightGreen">When?</h2>
<p>Saturday 16th of May 2026.</p> <p>Saturday 16th of May 2026</p>
<br/> <br/>
@ -31,8 +31,8 @@
</p> </p>
</a> </a>
<br/> <br/>
<iframe width="425" height="350" src="https://www.openstreetmap.org/export/embed.html?bbox=4.991877973079682%2C52.436195297048144%2C4.994031786918641%2C52.43801523045145&amp;layer=mapnik&amp;marker=52.43710609072568%2C4.992956221103668" style="border: 1px solid black"></iframe><br/> <iframe class="map" src="https://www.openstreetmap.org/export/embed.html?bbox=4.991877973079682%2C52.436195297048144%2C4.994031786918641%2C52.43801523045145&amp;layer=mapnik&amp;marker=52.43710609072568%2C4.992956221103668" style="border: 1px solid black"></iframe><br/>
<a href="https://www.openstreetmap.org/node/2869212621"><h5 class="fontS">View</h5></a> <a href="https://www.openstreetmap.org/node/2869212621"><h5 class="fontS">Open Map</h5></a>
</div> </div>
</div> </div>
<div class="rsvpButton textCenter backgroundLightGreen hidden"> <div class="rsvpButton textCenter backgroundLightGreen hidden">

53
client/style.css
View file

@ -2,14 +2,12 @@
* { * {
padding: 0; padding: 0;
margin: 0; margin: 0;
color: black;
} }
a { a {
text-decoration: underline;
}
a:visited {
color: inherit; color: inherit;
text-decoration: underline;
} }
ul { ul {
@ -26,6 +24,7 @@ body {
min-height: 100%; min-height: 100%;
width: auto; width: auto;
display: block; display: block;
box-sizing: border-box;
} }
/* #region reusable */ /* #region reusable */
@ -88,6 +87,7 @@ body {
.fontXS { .fontXS {
font-size: 1vmin; font-size: 1vmin;
} }
/* #endregion */ /* #endregion */
.title { .title {
@ -102,6 +102,50 @@ body {
height: auto; height: auto;
padding: 50px; padding: 50px;
} }
@media (max-width: 539px) {
.contents {
padding-left: 5px;
padding-right: 5px;
}
}
@media (min-width: 540px) and (max-width: 999px) {
.contents {
padding-left: 100px;
padding-right: 100px;
}
}
@media (min-width: 1000px) {
.contents {
padding-left: 25%;
padding-right: 25%;
}
}
.map {
width: 100%;
}
@media (max-width: 539px) {
.map {
height: 200px;
}
}
@media (min-width: 540px) and (max-width: 999px) {
.map {
height: 400px;
}
}
@media (min-width: 1000px) {
.map {
height: 600px;
}
}
/* #endregion /* #endregion
/* #region rsvp */ /* #region rsvp */
@ -116,4 +160,5 @@ body {
mix-blend-mode: color-dodge; mix-blend-mode: color-dodge;
cursor: pointer; cursor: pointer;
} }
/* #endregion */ /* #endregion */