use custom elements instead of classes
Some checks failed
deploy / test (push) Has been cancelled

This commit is contained in:
nora 2026-04-10 20:22:14 +02:00
parent aa9ed79163
commit 3d80f5896e
7 changed files with 25 additions and 25 deletions

View file

@ -15,7 +15,7 @@ body {
height: 100%; height: 100%;
} }
.main { main {
width: 100%; width: 100%;
height: 100%; height: 100%;

View file

@ -7,7 +7,7 @@
<title>Womangling</title> <title>Womangling</title>
</head> </head>
<body> <body>
<main class="main"> <main>
<div class="content"> <div class="content">
<h1>Learn C++ Itanium Symbol Mangling</h1> <h1>Learn C++ Itanium Symbol Mangling</h1>
<noscript> <noscript>

View file

@ -7,7 +7,7 @@
<title>Womangling</title> <title>Womangling</title>
</head> </head>
<body> <body>
<main class="main"> <main>
<div class="content" id="content-area"> <div class="content" id="content-area">
<h1> <h1>
<a class="root-link" href=".">Learn C++ Itanium Symbol Mangling</a> <a class="root-link" href=".">Learn C++ Itanium Symbol Mangling</a>
@ -31,7 +31,7 @@
For every exercise, there will be a small quiz. If you complete the For every exercise, there will be a small quiz. If you complete the
quiz, you can continue quiz, you can continue
</p> </p>
<div class="quiz-section"> <quiz-section>
<p>To complete the first quiz, press the button below.</p> <p>To complete the first quiz, press the button below.</p>
<form data-challenge="1"> <form data-challenge="1">
<button <button
@ -43,7 +43,7 @@
</button> </button>
<div class="error"></div> <div class="error"></div>
</form> </form>
</div> </quiz-section>
</section> </section>
<section data-step="1" class="step"> <section data-step="1" class="step">
<p> <p>
@ -81,7 +81,7 @@ extern "C" {
But once again, the symbol name will simply be But once again, the symbol name will simply be
<code>main</code> because no mangling is applied. <code>main</code> because no mangling is applied.
</p> </p>
<div class="quiz-section"> <quiz-section>
<p>What is the mangled symbol of the following function?</p> <p>What is the mangled symbol of the following function?</p>
<pre class="code"> <pre class="code">
extern "C" { extern "C" {
@ -99,7 +99,7 @@ extern "C" {
</button> </button>
<div class="error"></div> <div class="error"></div>
</form> </form>
</div> </quiz-section>
</section> </section>
<section data-step="2" class="step"> <section data-step="2" class="step">
<p>Congrats on answering your first mangling question!</p> <p>Congrats on answering your first mangling question!</p>

View file

@ -7,7 +7,7 @@
<title>Womangling</title> <title>Womangling</title>
</head> </head>
<body> <body>
<main class="main"> <main>
<div class="content" id="content-area"> <div class="content" id="content-area">
<h1> <h1>
<a class="root-link" href=".">Learn C++ Itanium Symbol Mangling</a> <a class="root-link" href=".">Learn C++ Itanium Symbol Mangling</a>
@ -54,7 +54,7 @@ void f() {}
We will see the <code>v</code> function type a lot in the rest of 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. this guide. It stands for a function that takes no arguments.
</p> </p>
<div class="quiz-section"> <quiz-section>
<p> <p>
Which of these symbols cannot possibly be a mangled C++ symbol? Which of these symbols cannot possibly be a mangled C++ symbol?
Answer with the name of the symbol. Answer with the name of the symbol.
@ -79,7 +79,7 @@ void f() {}
</button> </button>
<div class="error"></div> <div class="error"></div>
</form> </form>
</div> </quiz-section>
</section> </section>
<section data-step="1" class="step"> <section data-step="1" class="step">
<p> <p>
@ -97,7 +97,7 @@ void hello_world() {}
then appended to the previously mentioned prefix <code>_Z</code> and 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. then we add the type, which is just <code>v</code> here, at the end.
</p> </p>
<div class="quiz-section"> <quiz-section>
<p>What is the mangling of the following identifier?</p> <p>What is the mangling of the following identifier?</p>
<pre class="code"> <pre class="code">
void meow() {} void meow() {}
@ -117,7 +117,7 @@ void meow() {}
</button> </button>
<div class="error"></div> <div class="error"></div>
</form> </form>
</div> </quiz-section>
</section> </section>
<section data-step="2" class="step"> <section data-step="2" class="step">
<p> <p>
@ -172,7 +172,7 @@ namespace a {
previously mentioned characters around them. previously mentioned characters around them.
</p> </p>
<div class="quiz-section"> <quiz-section>
<p>What is the mangling of the following identifier?</p> <p>What is the mangling of the following identifier?</p>
<pre class="code"> <pre class="code">
namespace cats { namespace cats {
@ -196,7 +196,7 @@ namespace cats {
</button> </button>
<div class="error"></div> <div class="error"></div>
</form> </form>
</div> </quiz-section>
</section> </section>
<section data-step="3" class="step"> <section data-step="3" class="step">
<p> <p>

View file

@ -7,7 +7,7 @@
<title>Womangling</title> <title>Womangling</title>
</head> </head>
<body> <body>
<main class="main"> <main>
<div class="content" id="content-area"> <div class="content" id="content-area">
<h1> <h1>
<a class="root-link" href=".">Learn C++ Itanium Symbol Mangling</a> <a class="root-link" href=".">Learn C++ Itanium Symbol Mangling</a>
@ -85,7 +85,7 @@ void a(int x, int *y, double &z) {}
<code>int*</code> (<code>Pi</code>), and a <code>int*</code> (<code>Pi</code>), and a
<code>double&</code> (<code>Rd</code>). <code>double&</code> (<code>Rd</code>).
</p> </p>
<div class="quiz-section"> <quiz-section>
<p>What is the mangled symbol of the following function?</p> <p>What is the mangled symbol of the following function?</p>
<pre class="code"> <pre class="code">
void hello(int **programmer, long day, float &r) {} void hello(int **programmer, long day, float &r) {}
@ -102,7 +102,7 @@ void hello(int **programmer, long day, float &r) {}
</button> </button>
<div class="error"></div> <div class="error"></div>
</form> </form>
</div> </quiz-section>
</section> </section>
<section data-step="1" class="step"> <section data-step="1" class="step">
<p> <p>
@ -115,7 +115,7 @@ namespace outer::inner {
} }
</pre> </pre>
<p>This will be mangled as <code>_ZN5outer5inner3yesEiiRl</code></p> <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> <p>What is the mangled symbol of the following function?</p>
<pre class="code"> <pre class="code">
namespace very::much::nested { namespace very::much::nested {
@ -137,7 +137,7 @@ namespace very::much::nested {
</button> </button>
<div class="error"></div> <div class="error"></div>
</form> </form>
</div> </quiz-section>
</section> </section>
<section data-step="2" class="step"> <section data-step="2" class="step">
<p>Let's look at a few more common types.</p> <p>Let's look at a few more common types.</p>
@ -155,7 +155,7 @@ namespace very::much::nested {
In the future there might be a part of the website where you can In the future there might be a part of the website where you can
memorize these encodings more easily. memorize these encodings more easily.
</p> </p>
<div class="quiz-section"> <quiz-section>
<p>What is the mangled symbol of the following function?</p> <p>What is the mangled symbol of the following function?</p>
<pre class="code"> <pre class="code">
void name(unsigned long long a, unsigned short b, char c, int d) {} void name(unsigned long long a, unsigned short b, char c, int d) {}
@ -175,7 +175,7 @@ void name(unsigned long long a, unsigned short b, char c, int d) {}
</button> </button>
<div class="error"></div> <div class="error"></div>
</form> </form>
</div> </quiz-section>
</section> </section>
<section data-step="3" class="step"> <section data-step="3" class="step">

View file

@ -7,7 +7,7 @@
<title>Womangling</title> <title>Womangling</title>
</head> </head>
<body> <body>
<main class="main"> <main>
<div class="content" id="content-area"> <div class="content" id="content-area">
<h1> <h1>
<a class="root-link" href=".">Learn C++ Itanium Symbol Mangling</a> <a class="root-link" href=".">Learn C++ Itanium Symbol Mangling</a>
@ -104,7 +104,7 @@ int main() {
that isn't stored in the symbol for efficiency) that isn't stored in the symbol for efficiency)
</li> </li>
</ul> </ul>
<div class="quiz-section"> <quiz-section>
<p> <p>
What is the mangled symbol of the following instantiation of What is the mangled symbol of the following instantiation of
empty? empty?
@ -128,7 +128,7 @@ int main() {
</button> </button>
<div class="error"></div> <div class="error"></div>
</form> </form>
</div> </quiz-section>
</section> </section>
<section data-step="1" class="step"> <section data-step="1" class="step">
<p class="lesson-last-paragraph"> <p class="lesson-last-paragraph">

View file

@ -8,7 +8,7 @@
<title>Womangling</title> <title>Womangling</title>
</head> </head>
<body> <body>
<main class="main"> <main>
<div class="content" id="content-area"> <div class="content" id="content-area">
<h1> <h1>
<a class="root-link" href="..">Learn C++ Itanium Symbol Mangling</a> <a class="root-link" href="..">Learn C++ Itanium Symbol Mangling</a>