tburette · January 30, 2024 17:23
diff --git a/fluid-main.html b/fluid-main.html
 <!DOCTYPE html>
 <html lang="en">

 <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
        }

        /* part of the fluid margin system */
        body {
            display: flex;
            align-items: center;
            justify-content: center;
            min-height: 100dvh;
        }

        main {
            border: 4px dashed pink;
            background-color: white;
            color: hotpink;

            /* fluid margins system
            - body {} above part of the system
            - works assuming on 1rem = 16px
            - 1.5rem : minimum margin on each side 1.5rem (on smallest viewport)
            10vw - 2rem : margin grow with viewport width but only starting at 560px ( (2rem+1.5rem)*10 )
            */
            margin-inline: max(1.5rem, 10vw - 2rem);
            /* maximum content width. Even on very large viewports */
            max-width: 57.5rem;

            /* minimum margin above and below (even on small viewport, even if scroll in the page) */
            margin-block: 5.625rem;
        }
    </style>
 </head>

 <body>
    <main>
        <h2>This</h2>
        <p>that</p>
        <p>end</p>
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Quaerat odit, vero ducimus rerum cum enim quis
        accusantium dolorum ad voluptate cupiditate quae minima ratione atque? Provident expedita iusto adipisci
        corrupti.
        Molestias nihil consequatur aperiam natus nam itaque ea quo labore expedita voluptatum sint amet tempore quia
        alias doloremque delectus, id sed explicabo. Odio doloribus eos placeat illo, nam nisi cumque?
    </main>
 </body>

 </html>
	<!DOCTYPE html>
	<html lang="en">

	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
	<style>
	* {
	margin: 0;
	}

	/* part of the fluid margin system */
	body {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 100dvh;
	}

	main {
	border: 4px dashed pink;
	background-color: white;
	color: hotpink;

	/* fluid margins system
	- body {} above part of the system
	- works assuming on 1rem = 16px
	- 1.5rem : minimum margin on each side 1.5rem (on smallest viewport)
	10vw - 2rem : margin grow with viewport width but only starting at 560px ( (2rem+1.5rem)*10 )
	*/
	margin-inline: max(1.5rem, 10vw - 2rem);
	/* maximum content width. Even on very large viewports */
	max-width: 57.5rem;

	/* minimum margin above and below (even on small viewport, even if scroll in the page) */
	margin-block: 5.625rem;
	}
	</style>
	</head>

	<body>
	<main>
	<h2>This</h2>
	<p>that</p>
	<p>end</p>
	Lorem ipsum dolor sit amet consectetur adipisicing elit. Quaerat odit, vero ducimus rerum cum enim quis
	accusantium dolorum ad voluptate cupiditate quae minima ratione atque? Provident expedita iusto adipisci
	corrupti.
	Molestias nihil consequatur aperiam natus nam itaque ea quo labore expedita voluptatum sint amet tempore quia
	alias doloremque delectus, id sed explicabo. Odio doloribus eos placeat illo, nam nisi cumque?
	</main>
	</body>

	</html>