camellia... continued!

Ta-da! A page within a page, tucked away to facilitate the presentation of the leaf shape. This one is a normal shape!

This layout is mobile-friendly, uses no javascript, and even (bonus?) works just fine if you do something like CSS Naked Day. I wouldn't recommend it if you're completely unfamiliar with HTML or CSS because you might find it a little confusing, but I've tried to put in comments to make everything reasonably clear.

If you want to use this layout, copy and paste THIS into your HTML file:

<!DOCTYPE html>
<html lang="en-US">
<head>
<link rel="icon" type="image/x-icon" href="leaf.gif"> 
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>camellia</title>
<link href="tealeaf.css" rel="stylesheet" type="text/css" media="all">
<link href="https://fonts.upset.dev/css2?family=Coiny&family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap" rel="stylesheet">
</head>
<body>

<div class="container">

<div class="shape-left"></div>
<div class="shape-right"></div>

<div class="leaftext">

<h1>camellia.</h1>

<p>
This is layout is a liiiittle fiddly the shaping of the text in this leaf means that there's a hard limit on how much you can put in this section. But don't worry! There's plenty more room - click the big circle!
</p>

<h2>Header 2</h2>
<p>
<b>This is bold.</b> <a href="https://www.google.com/">This is a link.</a> <i>This is italics.</i></p>

<blockquote>This is a blockquote. Phasellus hendrerit lorem in est suscipit tincidunt. Nunc facilisis vehicula venenatis. Suspendisse faucibus nec neque vel suscipit. Aenean mollis, ligula sed bibendum placerat, diam justo posuere dolor, sed rutrum est ex at nibh. Suspendisse potenti.
</p>
</blockquote>

<ol>
<li>This is a numbered list.</li>
<li>This is a numbered list.</li>
</ol>

<button>Button</button>

<p>Curabitur pellentesque blandit sodales. Mauris rhoncus feugiat dapibus. Nunc luctus ipsum odio. Vestibulum consequat suscipit malesuada. Sed eu pretium erat, eu lacinia ante. Phasellus ultricies, risus at volutpat dapibus, dolor magna molestie felis, vitae porta magna ligula eget augue. Nam viverra suscipit varius. Proin ac dignissim lacus. Donec at pharetra enim. Quisque sagittis sapien nec eros congue molestie. Nam rhoncus pulvinar est vel laoreet. Phasellus eu pretium arcu. Etiam faucibus eget orci ut porta. Quisque lobortis pharetra velit, eget malesuada sem mattis id. Aliquam libero ligula, ultricies sit amet egestas eu, luctus vitae turpis.
</p>
<p>
If you put any text after this, it will get cut off! Alas!!
</p>

</div>

<button popovertarget="popuppage">click!!</button>

</div>

<div class="topright">

<div class="updatescontent"> 
<p>Here you can put recent updates to your website. Or something else! It's a box.</p>

<ul>
<li>You can make many entries in this list. The box will scroll.</li>
<li>Lorem ipsum</li>
<li>Lorem ipsum</li>
<li>Lorem ipsum</li>
<li>Lorem ipsum</li>
<li>Lorem ipsum</li>
<li>Lorem ipsum</li>
<li>Lorem ipsum</li>
<li>Lorem ipsum</li>
<li>Lorem ipsum</li>
<li>Lorem ipsum</li>
<li>Lorem ipsum</li>
</ul>
</div>

<img src="dangle.png" id="vines">

</details>

<details name="minibox" id="two">

<summary>navigation</summary>

<p>Navigation links can go in here.</p>
<ul>
<li><a href="">Link</a></li>
<li><a href="">Link</a></li>
<li><a href="">Link</a></li>
<li><a href="">Link</a></li>
<li><a href="">Link</a></li>
<li><a href="">Link</a></li>
</ul>

</div>

<details name="minibox" id="three">

<summary>a third box</summary>

<div class="updatescontent">
<p>And here's a third box just in case.</p>

</div>

</details>

</div>

</div>

<div popover id="popuppage">

<button popovertarget="popuppage" popovertargetaction="hide" id="close">
close
</button>

<h1>camellia... continued!</h1>
  
<p> Ta-da! A page within a page, tucked away to facilitate the presentation of the leaf shape. This one is a normal shape!</p>

<p>This layout is mobile-friendly, uses no javascript, and even (bonus?) works just fine if you do something like CSS Naked Day. I wouldn't recommend it if you're completely unfamiliar with HTML or CSS because you might find it a little confusing, but I've tried to put in comments to make everything reasonably clear.</p>

<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus</p>

</body>
</html>

And put THIS in your CSS file:

/* CUSTOMIZING ZONE!!!

if you want to customize the colors, you can change them up here by changing these values! */

:root {
    --leafcolor: #718227;
    --boxbgcolor: #9fb348;
    --bordercolor: #323a0d;
    --textcolor: #eee3c8;
    --linkcolor: #decf92;
    --contrastcolor: #f7ea76;
}

/* and here are the two fonts used, so you can change them up here if you want. */

body {
    font-family: 'Montserrat', 'verdana', sans-serif;
    font-size: 10pt;
}

.container h1 {
    font-family: 'Coiny', 'Arial Black', sans-serif;
    font-size: 52pt;
}

/* you can change the bullet point for lists with this. just delete it if you want normal bullet points! */

ul li {
    list-style-type: "✿ ";
}

/* below is the rest of the layout! */

/* overall CSS */

* {
    box-sizing: border-box;
    scrollbar-width: thin;
    scrollbar-color: var(--leafcolor) var(--textcolor);
}

body {
    background-color: var(--textcolor);
}

::selection {
    background-color: var(--contrastcolor);
    color: var(--bordercolor)
}

a {
    font-weight: bold;
    color: var(--linkcolor);
}

a:visited {
    color: var(--bordercolor);
}

a:hover,
a:focus {
    color: var(--contrastcolor)
}

button {
    cursor: pointer;
    background-color: var(--contrastcolor);
    font: inherit;
    font-size: smaller;
    border: 1px var(--bordercolor) solid;
    border-radius: 10px;
    padding: 6px;
}

button:active {
    filter: brightness(80%);
}

blockquote {
    border-left: 5px solid var(--contrastcolor);
    padding-left: 20px;
    text-align: left;
}

ul {
    padding-left: 80px;
    text-align: left;
    list-style-position: inside;
}

ol {
    list-style-position: inside;
    padding-left: 80px;
}

img {
    max-width: 100%;
}

summary {
    cursor: pointer;
}

hr {
    width: 50%;
    border-top: var(--bordercolor) 1px solid
}

/* leaf shape stuff. the border-radius gives the div the leaf shape, and shape-left and shape-right make the text fit inside that shape. */

.container {
    margin: 100px auto;
    background-color: var(--leafcolor);
    width: 700px;
    border-bottom-left-radius: 600px;
    border-bottom-right-radius: 0px;
    border-top-right-radius: 600px;
    border-top-left-radius: 0px;
    height: 700px;
    position: relative;
    text-align: justify;
    color: var(--textcolor);
    border: 1px solid var(--bordercolor);
}

.shape-left {
    float: left;
    shape-outside: polygon(0.12% -0.44%, 0.96% 11.71%, 0px 696px, 100.14% 99.76%, 99.63% 92.1%, 88.73% 89.24%, 71.98% 84.13%, 51.53% 75.38%, 33.62% 65.34%, 19.96% 54.53%, 8.5% 41.32%, 14px 224px, 0.1% 21.32%, 0.24% 0.09%, 41.45% 0.35%, 73.01% 2.96%, 96% 7.67%, 84.51% -0.7%);
    width: 50%;
    height: 700px;
    shape-margin: 15px;
}

.shape-right {
    float: right;
    width: 50%;
    height: 700px;
    shape-outside: polygon(347px 2px, 3px 2px, 1.7% 8.3%, 19.91% 12.96%, 40.06% 20.36%, 59.25% 30.24%, 72.02% 38.47%, 81.85% 47.44%, 90% 56.61%, 95.1% 64.9%, 98.67% 75.97%, 100.02% 84.84%, 99.11% 96.48%, 98.85% 99.85%, 60.55% 99.92%, 37.99% 98.25%, 20.44% 96.14%, -1.55% 92%, 21.97% 99.59%, 99.62% 101%);
    shape-margin: 10px;
}

/* end of leaf shape */

/* this is the pagetitle h1 specifically, the one inside the leaf. */
.container h1 {
    position: absolute;
    text-align: left;
    top: -50px;
    left: -20px;
    letter-spacing: 3px;
    line-height: 1;
    text-shadow: -1px -1px 0 var(--leafcolor), 1px -1px 0 var(--leafcolor), -1px 1px 0 var(--leafcolor), 1px 1px 0 var(--leafcolor);
}

/* this is for the three miniboxes. they're all in a container called topright. */

.topright {
    position: absolute;
    right: 0;
    width: 250px;
    top: 50px;
}

.topright ul {
    padding-left: 0;
}

.topright details {
    position: absolute;
}

.topright summary {
    background: var(--leafcolor);
    border: 1px solid var(--bordercolor);
    border-radius: 5px;
    padding: 2px;
    padding-left: 15px;
    padding-right: 20px;
    width: fit-content;
    list-style-type: "+ ";
}

.topright details[open] summary {
    border-bottom-right-radius: 0px;
    border-bottom-left-radius: 0px;
    border-bottom: none;
    list-style-type: "- "
}

.updatescontent {
    background-color: var(--boxbgcolor);
    color: var(--bordercolor);
    height: 200px;
    border-bottom-left-radius: 5px;
    border-bottom-right-radius: 5px;
    border-top-right-radius: 5px;
    border: 1px solid var(--bordercolor);
    position: relative;
    z-index: 3;
    overflow: auto;
    scrollbar-width: thin;
    scrollbar-color: var(--textcolor) var(--bordercolor);
    padding: 15px;
    text-align: left;
    font-size: small;
    width: 250px;
}

.updatescontent p {
    margin-top: 0;
}

#two {
    margin-top: 50px;
    margin-left: 50px;
}

#three {
    margin-top: 100px;
    margin-left: 100px;
}

#vines {
    margin-top: -20px;
    z-index: 1;
    position: absolute;
    pointer-events: none;
}

/* end of top right miniboxes. */

/* this is the container for the big round button that opens the popup! */
.buttonbox {
    position: absolute;
    bottom: 0;
}

/* and this is the styling for the button itself. */
.buttonbox button {
    width: 150px;
    height: 150px;
    border-radius: 100%;
    border: 1px solid var(--bordercolor);
    background-color: var(--leafcolor);
    cursor: pointer;
    font: inherit;
    font-weight: bold;
    font-size: 16pt;
    color: var(--textcolor);
}

/* end of button stuff. */

/* this is the styling for the popup page */

#popuppage {
    overflow: auto;
    height: 650px;
    width: 600px;
    margin: 120px auto;
    color: var(--bordercolor);
    background: var(--textcolor);
    border: 1px solid var(--bordercolor);
    padding: 15px;
    border-radius: 5px;
    resize: both;
}

/* this is the styling for the button that closes the popup page. */
#close {
    position: absolute;
    top: 0;
    right: 5px;
    background-color: transparent;
    font: inherit;
    border: none;
}

#popuppage h2, #popuppage h1 {
    margin-top: 0;
}

/* below is the styling for small screens and mobile! a lot of things move around; "topright" goes on the bottom left, for one thing... */

@media only screen and (max-width: 600px) {

.container {
        border-radius: 10px;
        width: 95%;
        padding: 20px;
        height: unset;
        margin-bottom: 150px;
    }

blockquote {
        margin: auto;
    }

ul,
    ol {
        padding-left: 20px;
    }

.container h1 {
        margin-top: 30px;
        margin-left: 10px;
        font-size: 35pt;
    }

.shape-left {
        display: none;
    }

.shape-right {
        display: none;
    }

.buttonbox {
        bottom: -120px;
        right: 0;
    }

.buttonbox button {
        height: 100px;
        width: 100px;
    }

.topright {
        top: unset;
        bottom: -100px;
        left: 0;
        height: auto;
    }

#one,
    #two,
    #three {
        margin: unset;
        position: static;
    }

#vines {
        display: none;
    }

#popuppage {
        width: 100%;
    }
}

And remember to save this vine picture so you can use it (if you want to!):

Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus