KonnorRogers · August 22, 2025 05:30
diff --git a/index.html b/index.html
 <!doctype html>
 <html lang="en" class=""><head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Web Awesome Page Demo 1</title>
    <link rel="preconnect" href="https://early.webawesome.com">
    <link rel="stylesheet" href="https://early.webawesome.com/[email protected]/dist/styles/themes/default.css">
    <link rel="stylesheet" href="https://early.webawesome.com/[email protected]/dist/styles/webawesome.css">
    <script type="module" src="https://early.webawesome.com/[email protected]/dist/webawesome.loader.js"></script>
  </head>
  <body>
    <wa-page mobile-breakpoint="868" view="mobile" navigation-placement="start" disable-navigation-toggle="">
      <div id="main-content" slot="skip-to-content-target"></div>
      <header slot="header" style="display: flex; align-items: center; justify-content: space-between;">
        <span>
          <h1>Logo</h1>
          a nice one
        </span>
        <nav class="wa-desktop-only" style="display: flex; align-items: center; gap: 8px;">
          <a href="#">Home</a>
          <a href="#">About</a>
          <a href="#">Contact</a>
        </nav>
        <button class="wa-mobile-only" data-toggle-nav="">
          <wa-icon name="bars" label="Open navigation"></wa-icon>
        </button>
      </header>
      <div class="two-column wa-body-l">
        <main>
          <h1>Main Content</h1>
          <article>
            <h2>Soul man</h2>
            <p>A wonderful serenity has taken possession of my entire soul,
              like these sweet mornings of spring which I enjoy with my whole heart.
              I am alone, and feel the charm of existence in this spot,
              which was created for the bliss of souls like mine.
              I am so happy, my dear friend, so absorbed in the exquisite sense of mere tranquil existence,
              that I neglect my talents. I should be incapable of drawing a single stroke at the present moment;
              and yet I feel that I never was a greater artist than now.
              When, while the lovely valley teems with vapour around me, and the meridian sun strikes
              the upper surface of the impenetrable foliage of my trees, and but a few stray gleams steal
              into the inner sanctuary, I throw myself down among the tall grass by the trickling stream;
              and, as I lie close to the earth, a thousand unknown plants are noticed by me:
              when I hear the buzz of the little world among the stalks, and grow familiar with the countless
              indescribable forms of the insects and flies, then I feel the presence of the Almighty,
              who formed us in his own image, and the breath
            </p>
          </article>
        </main>
        <aside>
          <div>Block 1</div>
          <div>Block 2</div>
          <div>Block 3</div>
          <div>Block 4</div>
          <div>Block 5</div>
        </aside>
      </div>

      <div slot="mobile-navigation">
        <nav class="wa-stack">
          <a href="#">Home</a>
          <a href="#">About</a>
          <a href="#">Contact</a>
        </nav>
      </div>

      <footer slot="main-footer">
        &copy; 2025 some footer
      </footer>
    </wa-page>

    <style>
      wa-page {
        --menu-width: 0px;
        --aside-width: 0px;
      }

      .two-column {
        display: grid;
        grid-template-columns: 3fr 250px;
        gap: 1rem;
        padding: 1rem;
      }

      wa-page[view="mobile"] .two-column {
        grid-template-columns: minmax(0, 1fr);
      }

      wa-page::part(navigation-toggle) {
        display: none;
      }

      article {
        background: #eee;
        padding: 1rem;
        border-radius: 4px;
      }
      aside {
        display: flex;
        flex-wrap: wrap;
        gap: 0.5rem;
      }

      aside div {
        background: #fdd;
        padding: 0.5rem;
        flex: 1 1 200px; /* responsive width */
        text-align: center;
        border-radius: 4px;
        border: 3px solid red;
      }

      footer {
        background: #222;
        color: white;
        padding: 1em;
      }
    </style>
  </body>
 </html>
	<!doctype html>
	<html lang="en" class=""><head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Web Awesome Page Demo 1</title>
	<link rel="preconnect" href="https://early.webawesome.com">
	<link rel="stylesheet" href="https://early.webawesome.com/[email protected]/dist/styles/themes/default.css">
	<link rel="stylesheet" href="https://early.webawesome.com/[email protected]/dist/styles/webawesome.css">
	<script type="module" src="https://early.webawesome.com/[email protected]/dist/webawesome.loader.js"></script>
	</head>
	<body>
	<wa-page mobile-breakpoint="868" view="mobile" navigation-placement="start" disable-navigation-toggle="">
	<div id="main-content" slot="skip-to-content-target"></div>
	<header slot="header" style="display: flex; align-items: center; justify-content: space-between;">
	<span>
	<h1>Logo</h1>
	a nice one
	</span>
	<nav class="wa-desktop-only" style="display: flex; align-items: center; gap: 8px;">
	<a href="#">Home</a>
	<a href="#">About</a>
	<a href="#">Contact</a>
	</nav>
	<button class="wa-mobile-only" data-toggle-nav="">
	<wa-icon name="bars" label="Open navigation"></wa-icon>
	</button>
	</header>
	<div class="two-column wa-body-l">
	<main>
	<h1>Main Content</h1>
	<article>
	<h2>Soul man</h2>
	<p>A wonderful serenity has taken possession of my entire soul,
	like these sweet mornings of spring which I enjoy with my whole heart.
	I am alone, and feel the charm of existence in this spot,
	which was created for the bliss of souls like mine.
	I am so happy, my dear friend, so absorbed in the exquisite sense of mere tranquil existence,
	that I neglect my talents. I should be incapable of drawing a single stroke at the present moment;
	and yet I feel that I never was a greater artist than now.
	When, while the lovely valley teems with vapour around me, and the meridian sun strikes
	the upper surface of the impenetrable foliage of my trees, and but a few stray gleams steal
	into the inner sanctuary, I throw myself down among the tall grass by the trickling stream;
	and, as I lie close to the earth, a thousand unknown plants are noticed by me:
	when I hear the buzz of the little world among the stalks, and grow familiar with the countless
	indescribable forms of the insects and flies, then I feel the presence of the Almighty,
	who formed us in his own image, and the breath
	</p>
	</article>
	</main>
	<aside>
	<div>Block 1</div>
	<div>Block 2</div>
	<div>Block 3</div>
	<div>Block 4</div>
	<div>Block 5</div>
	</aside>
	</div>

	<div slot="mobile-navigation">
	<nav class="wa-stack">
	<a href="#">Home</a>
	<a href="#">About</a>
	<a href="#">Contact</a>
	</nav>
	</div>

	<footer slot="main-footer">
	© 2025 some footer
	</footer>
	</wa-page>

	<style>
	wa-page {
	--menu-width: 0px;
	--aside-width: 0px;
	}

	.two-column {
	display: grid;
	grid-template-columns: 3fr 250px;
	gap: 1rem;
	padding: 1rem;
	}

	wa-page[view="mobile"] .two-column {
	grid-template-columns: minmax(0, 1fr);
	}

	wa-page::part(navigation-toggle) {
	display: none;
	}

	article {
	background: #eee;
	padding: 1rem;
	border-radius: 4px;
	}
	aside {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	}

	aside div {
	background: #fdd;
	padding: 0.5rem;
	flex: 1 1 200px; /* responsive width */
	text-align: center;
	border-radius: 4px;
	border: 3px solid red;
	}

	footer {
	background: #222;
	color: white;
	padding: 1em;
	}
	</style>
	</body>
	</html>