Clean up HTML

2factorauth · Dec 11, 2023 · 5917a58 · 5917a58
1 parent aee2a4b
commit 5917a58
Show file tree

Hide file tree

Showing 3 changed files with 34 additions and 24 deletions.
diff --git a/.gitignore b/.gitignore
@@ -0,0 +1 @@
+index.css*
diff --git a/index.html b/index.html
@@ -7,17 +7,19 @@
   <link rel="icon" href="https://raw.githubusercontent.com/2factorauth/branding/master/logo/icon.svg" type="image/svg+xml">
   <link rel="icon" href="https://raw.githubusercontent.com/2factorauth/branding/master/logo/icon.png" type="image/png">
   <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Roboto:wght@100;300&display=swap">
-  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-icons/1.11.2/font/bootstrap-icons.min.css" integrity="sha512-D1liES3uvDpPrgk7vXR/hR/sukGn7EtDWEyvpdLsyalQYq6v6YUsTUJmku7B4rcuQ21rf0UTksw2i/2Pdjbd3g==" crossorigin="anonymous" referrerpolicy="no-referrer" />
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-icons/1.11.2/font/bootstrap-icons.min.css" integrity="sha512-D1liES3uvDpPrgk7vXR/hR/sukGn7EtDWEyvpdLsyalQYq6v6YUsTUJmku7B4rcuQ21rf0UTksw2i/2Pdjbd3g==" crossorigin="anonymous" referrerpolicy="no-referrer">
   <link rel="stylesheet" href="index.css">
 </head>
 <body>
-<div class="breakpoint">
+
+<section class="breakpoint">
   <div>
     <h1>2factorauth</h1>
     <h2 class="sub-topic">Brand guidelines</h2>
   </div>
-</div>
-<div class="container" id="projects-page">
+</section>
+
+<section id="projects-page">
   <article>
     <h1>Projects</h1>
     <p>2factorauth primarily maintains two website directories. One lists MFA/2FA authentication support, and the other is WebAuthn/Passkey authentication support.</p>
@@ -46,11 +48,13 @@ <h1>Projects</h1>
       </div>
     </div>
   </main>
-</div>
-<div class="breakpoint">
+</section>
+
+<section class="breakpoint">
   <h1>Logo</h1>
-</div>
-<div class="container">
+</section>
+
+<section>
   <article>
     <h1>Logo Usage</h1>
     <p>The logo of 2factorauth features a smartphone with a keyhole and a key inserted.</p>
@@ -61,18 +65,20 @@ <h1>Logo Usage</h1>
   <main>
     <div id="logo-grid">
       <picture>
-        <source srcset="https://raw.githubusercontent.com/2factorauth/branding/master/logo/icon.svg" type="image/svg+xml" sizes="any">
-        <source srcset="https://raw.githubusercontent.com/2factorauth/branding/master/logo/icon_hdpi.png" type="image/png" sizes="4000x4000">
-        <img src="https://raw.githubusercontent.com/2factorauth/branding/master/logo/icon.png" alt="Rounded logo" sizes="512x512" width="512">
+        <source srcset="https://raw.githubusercontent.com/2factorauth/branding/master/logo/icon.svg" type="image/svg+xml">
+        <source srcset="https://raw.githubusercontent.com/2factorauth/branding/master/logo/icon_hdpi.png 4000w" type="image/png">
+        <img src="https://raw.githubusercontent.com/2factorauth/branding/master/logo/icon.png" alt="Rounded logo" sizes="512px" width="512">
       </picture>
-      <img src="https://raw.githubusercontent.com/2factorauth/branding/master/logo/icon_square.png" alt="Square logo">
+      <img src="https://raw.githubusercontent.com/2factorauth/branding/master/logo/icon_square.png" alt="Square logo" width="512">
     </div>
   </main>
-</div>
-<div class="breakpoint">
+</section>
+
+<section class="breakpoint">
   <h1>Colors</h1>
-</div>
-<div class="container">
+</section>
+
+<section>
   <article>
     <h1>Brand color</h1>
     <p>The 2factorauth brand color is a greenish-blue turquoise shade.</p>
@@ -89,8 +95,9 @@ <h1>Brand color</h1>
       <div>HSV:</div><div>175, 71, 81</div>
     </div>
   </main>
-</div>
-<div class="container">
+</section>
+
+<section>
   <article class="light">
     <h1>Light Color Pallet</h1>
     <p>The directories feature a light theme with a clear white background, a slightly tinted secondary background, and category buttons. Box shadows are used to emphasize larger interaction blocks, giving a clean and modern look.</p>
@@ -106,8 +113,9 @@ <h1>Light Color Pallet</h1>
       <div class="category-btn"><span>Category Button</span></div>
     </div>
   </main>
-</div>
-<div class="container alternative-bg">
+</section>
+
+<section class="alternative-bg">
   <article class="dark">
     <h1>Dark Color Pallet</h1>
     <p>The directories use the following colors for their dark theme.</p>
@@ -123,6 +131,7 @@ <h1>Dark Color Pallet</h1>
       <div class="category-btn"><span>Category Button</span></div>
     </div>
   </main>
-</div>
+</section>
+
 </body>
 </html>
diff --git a/index.scss b/index.scss
@@ -30,7 +30,7 @@ body {
   }
 }
 
-.container {
+section:not(.breakpoint) {
   height: 100vh;
   left: 0;
   right: 0;
@@ -336,11 +336,11 @@ main:has(.projects) {
     size: 1920px 1080px;
     margin: 0;
   }
-  .breakpoint, .container {
+  section {
     height: 1080px !important;
     width: 1920px !important;
   }
-  .container {
+  section:not(.breakpoint) {
     grid-template-columns: 35rem 1fr;
   }
   article {