use custom elements instead of classes

Noratrieb · Noratrieb · commit 3d80f5896e7a · 2026-04-10T20:22:34.000+02:00
diff --git a/index.css b/index.css
@@ -15,7 +15,7 @@ body {
   height: 100%;
 }
 
-.main {
+main {
   width: 100%;
   height: 100%;
 
diff --git a/index.html b/index.html
@@ -7,7 +7,7 @@
     <title>Womangling</title>
   </head>
   <body>
-    <main class="main">
+    <main>
       <div class="content">
         <h1>Learn C++ Itanium Symbol Mangling</h1>
         <noscript>
diff --git a/lesson-0.html b/lesson-0.html
@@ -7,7 +7,7 @@
     <title>Womangling</title>
   </head>
   <body>
-    <main class="main">
+    <main>
       <div class="content" id="content-area">
         <h1>
           <a class="root-link" href=".">Learn C++ Itanium Symbol Mangling</a>
@@ -31,7 +31,7 @@ <h2>Lesson 0: Intro and C names</h2>
             For every exercise, there will be a small quiz. If you complete the
             quiz, you can continue
           </p>
-          <div class="quiz-section">
+          <quiz-section>
             <p>To complete the first quiz, press the button below.</p>
             <form data-challenge="1">
               <button
@@ -43,7 +43,7 @@ <h2>Lesson 0: Intro and C names</h2>
               </button>
               <div class="error"></div>
             </form>
-          </div>
+          </quiz-section>
         </section>
         <section data-step="1" class="step">
           <p>
@@ -81,7 +81,7 @@ <h2>Lesson 0: Intro and C names</h2>
             But once again, the symbol name will simply be
             <code>main</code> because no mangling is applied.
           </p>
-          <div class="quiz-section">
+          <quiz-section>
             <p>What is the mangled symbol of the following function?</p>
             <pre class="code">
 extern "C" {
@@ -99,7 +99,7 @@ <h2>Lesson 0: Intro and C names</h2>
               </button>
               <div class="error"></div>
             </form>
-          </div>
+          </quiz-section>
         </section>
         <section data-step="2" class="step">
           <p>Congrats on answering your first mangling question!</p>
diff --git a/lesson-1.html b/lesson-1.html
@@ -7,7 +7,7 @@
     <title>Womangling</title>
   </head>
   <body>
-    <main class="main">
+    <main>
       <div class="content" id="content-area">
         <h1>
           <a class="root-link" href=".">Learn C++ Itanium Symbol Mangling</a>
@@ -54,7 +54,7 @@ <h2>Lesson 1: Basics</h2>
             We will see the <code>v</code> function type a lot in the rest of
             this guide. It stands for a function that takes no arguments.
           </p>
-          <div class="quiz-section">
+          <quiz-section>
             <p>
               Which of these symbols cannot possibly be a mangled C++ symbol?
               Answer with the name of the symbol.
@@ -79,7 +79,7 @@ <h2>Lesson 1: Basics</h2>
               </button>
               <div class="error"></div>
             </form>
-          </div>
+          </quiz-section>
         </section>
         <section data-step="1" class="step">
           <p>
@@ -97,7 +97,7 @@ <h2>Lesson 1: Basics</h2>
             then appended to the previously mentioned prefix <code>_Z</code> and
             then we add the type, which is just <code>v</code> here, at the end.
           </p>
-          <div class="quiz-section">
+          <quiz-section>
             <p>What is the mangling of the following identifier?</p>
             <pre class="code">
 void meow() {}
@@ -117,7 +117,7 @@ <h2>Lesson 1: Basics</h2>
               </button>
               <div class="error"></div>
             </form>
-          </div>
+          </quiz-section>
         </section>
         <section data-step="2" class="step">
           <p>
@@ -172,7 +172,7 @@ <h2>Lesson 1: Basics</h2>
             previously mentioned characters around them.
           </p>
 
-          <div class="quiz-section">
+          <quiz-section>
             <p>What is the mangling of the following identifier?</p>
             <pre class="code">
 namespace cats {
@@ -196,7 +196,7 @@ <h2>Lesson 1: Basics</h2>
               </button>
               <div class="error"></div>
             </form>
-          </div>
+          </quiz-section>
         </section>
         <section data-step="3" class="step">
           <p>
diff --git a/lesson-2.html b/lesson-2.html
@@ -7,7 +7,7 @@
     <title>Womangling</title>
   </head>
   <body>
-    <main class="main">
+    <main>
       <div class="content" id="content-area">
         <h1>
           <a class="root-link" href=".">Learn C++ Itanium Symbol Mangling</a>
@@ -85,7 +85,7 @@ <h2>Lesson 2: Arguments</h2>
             <code>int*</code> (<code>Pi</code>), and a
             <code>double&</code> (<code>Rd</code>).
           </p>
-          <div class="quiz-section">
+          <quiz-section>
             <p>What is the mangled symbol of the following function?</p>
             <pre class="code">
 void hello(int **programmer, long day, float &r) {}
@@ -102,7 +102,7 @@ <h2>Lesson 2: Arguments</h2>
               </button>
               <div class="error"></div>
             </form>
-          </div>
+          </quiz-section>
         </section>
         <section data-step="1" class="step">
           <p>
@@ -115,7 +115,7 @@ <h2>Lesson 2: Arguments</h2>
 }
           </pre>
           <p>This will be mangled as <code>_ZN5outer5inner3yesEiiRl</code></p>
-          <div class="quiz-section">
+          <quiz-section>
             <p>What is the mangled symbol of the following function?</p>
             <pre class="code">
 namespace very::much::nested {
@@ -137,7 +137,7 @@ <h2>Lesson 2: Arguments</h2>
               </button>
               <div class="error"></div>
             </form>
-          </div>
+          </quiz-section>
         </section>
         <section data-step="2" class="step">
           <p>Let's look at a few more common types.</p>
@@ -155,7 +155,7 @@ <h2>Lesson 2: Arguments</h2>
             In the future there might be a part of the website where you can
             memorize these encodings more easily.
           </p>
-          <div class="quiz-section">
+          <quiz-section>
             <p>What is the mangled symbol of the following function?</p>
             <pre class="code">
 void name(unsigned long long a, unsigned short b, char c, int d) {}
@@ -175,7 +175,7 @@ <h2>Lesson 2: Arguments</h2>
               </button>
               <div class="error"></div>
             </form>
-          </div>
+          </quiz-section>
         </section>
 
         <section data-step="3" class="step">
diff --git a/lesson-3.html b/lesson-3.html
@@ -7,7 +7,7 @@
     <title>Womangling</title>
   </head>
   <body>
-    <main class="main">
+    <main>
       <div class="content" id="content-area">
         <h1>
           <a class="root-link" href=".">Learn C++ Itanium Symbol Mangling</a>
@@ -104,7 +104,7 @@ <h2>Lesson 3: Basic Templates</h2>
               that isn't stored in the symbol for efficiency)
             </li>
           </ul>
-          <div class="quiz-section">
+          <quiz-section>
             <p>
               What is the mangled symbol of the following instantiation of
               empty?
@@ -128,7 +128,7 @@ <h2>Lesson 3: Basic Templates</h2>
               </button>
               <div class="error"></div>
             </form>
-          </div>
+          </quiz-section>
         </section>
         <section data-step="1" class="step">
           <p class="lesson-last-paragraph">
diff --git a/practice/primitive-types.html b/practice/primitive-types.html
@@ -8,7 +8,7 @@
     <title>Womangling</title>
   </head>
   <body>
-    <main class="main">
+    <main>
       <div class="content" id="content-area">
         <h1>
           <a class="root-link" href="..">Learn C++ Itanium Symbol Mangling</a>

Original file line number	Diff line number	Diff line change
`@@ -15,7 +15,7 @@ body {`
`15`	`15`	`height: 100%;`
`16`	`16`	`}`
`17`	`17`
`18`		`-.main {`
	`18`	`+main {`
`19`	`19`	`width: 100%;`
`20`	`20`	`height: 100%;`
`21`	`21`