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 2025-06-30 12:37:33 +02:00
parent e4bbee0a4b
commit b9c3ad4297
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>
<h2 class="textLeft fontL colorLightGreen">When?</h2>
<p>Saturday 16th of May 2026.</p>
<p>Saturday 16th of May 2026</p>
<br/>
@ -31,8 +31,8 @@
</p>
</a>
<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/>
<a href="https://www.openstreetmap.org/node/2869212621"><h5 class="fontS">View</h5></a>
<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">Open Map</h5></a>
</div>
</div>
<div class="rsvpButton textCenter backgroundLightGreen hidden">

55
client/style.css
View file

@ -2,14 +2,12 @@
* {
padding: 0;
margin: 0;
color: black;
}
a {
text-decoration: underline;
}
a:visited {
color: inherit;
text-decoration: underline;
}
ul {
@ -26,6 +24,7 @@ body {
min-height: 100%;
width: auto;
display: block;
box-sizing: border-box;
}
/* #region reusable */
@ -69,7 +68,7 @@ body {
background-color: #8cad87;
}
.fontXL {
.fontXL {
font-size: 10vmin;
}
@ -88,6 +87,7 @@ body {
.fontXS {
font-size: 1vmin;
}
/* #endregion */
.title {
@ -102,6 +102,50 @@ body {
height: auto;
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
/* #region rsvp */
@ -116,4 +160,5 @@ body {
mix-blend-mode: color-dodge;
cursor: pointer;
}
/* #endregion */