Component Templates
Page warnings-
<aside class="aside-fix" aria-label="Page content warnings">
<div class="content-warning">
<p class="content-warning-title"><i class="fa-solid fa-triangle-exclamation" aria-hidden="true" role="img"> </i> CONTENT WARNING <i class="fa-solid fa-triangle-exclamation" aria-hidden="true" role="img"></i></p>
<p class="content-warning-content">Latin</p>
</div>
</aside>
Hovers
<span id="hover-me" title="hovered B)" tabindex="0" role="tooltip">Hover me!</span>
Paragraph Styles
<!-- for indented -->
<p class="imain">text</p>
<!-- for quotes -->
<p class="quotes">text</p>
<!-- for hanging indents -->
<p class="hanging-indent">text<p>
Spoiler Box
<button class="spoiler-title" id="spoiler-title-1" onclick="spoilerShowHide('spoiler-title-1', 'cw-spoiler-box-1');" aria-expanded="false"><p class="content-warning-title"><i class="fa-solid fa-triangle-exclamation" aria-hidden="true" role="img"></i> Content Warning: spoiler box <i class="fa-solid fa-triangle-exclamation" aria-hidden="true" role="img"></i></p><p class="content-warning-content">Click to expand</p></button>
<div class="spoiler-box" id="cw-spoiler-box-1" style="display: none;"><p>This is within a spoiler box. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean varius enim ut magna pretium maximus. Praesent augue elit, laoreet at urna non, consequat facilisis tellus. Cras pharetra sem sem, sit amet suscipit metus pulvinar sed. Aliquam gravida tristique risus eget facilisis.</p></div>
Images. Set alt to " " for decorative images.
<div class="img-no-wrap">
<img src="img/img500.jpg" alt="">
<p class="img-desc">500 x 500 PlaceKitten. <a href="https://placekitten.com">Source.</a></p>
</div>
<div class="img-no-wrap">
<img src="img/450 400.jpg" alt="Four kitens in a basket.">
<p class="img-desc">450 x 400 PlaceKitten. <a href="https://placekitten.com">Source.</a></p>
</div>
<div class="img-wrap">
<img src="img/300 600.jpg" alt="A gray tabby kitten.">
<p class="img-desc">300 x 600 PlaceKitten. <a href="https://placekitten.com">Source.</a></p>
</div>
<div class="img-wrap-right">
<img src="img/300 600.jpg" alt="">
<p class="img-desc">300 x 600 PlaceKitten. <a href="https://placekitten.com">Source.</a></p>
</div>
Blank Page Template
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Plurality for Dummies - Page Title</title>
<link href="/style.css" rel="stylesheet" type="text/css" media="all">
<link rel="preconnect" href="https://fonts.googleapis.com"><link rel="preconnect" href="https://fonts.gstatic.com" crossorigin><link href="https://fonts.googleapis.com/css2?family=Arvo:wght@400;700&display=swap" rel="stylesheet">
<script src="https://kit.fontawesome.com/4d4c6d0168.js" crossorigin="anonymous"></script>
<script type="text/javascript" src="search/searchbar-init.js"></script>
<script type="text/javascript" src="onload.js"></script>
<script type="text/javascript" src="authors.js"></script>
</head>
<body onload="onload();">
<div id="main-wrapper">
<header>
<a href="#main" class="skip">Skip to main content</a>
<div class="header"><div class="header-text">Plurality for Dummies</div></div>
</header>
<nav><div id="navbar"></div></nav>
<section aria-label="Font-size controller">
<div id="access"> </div>
</section>
<main id="main"> <!-- marks it as the main section -->
<div id="content">
<!-- content -->
</div>
</main>
<div id="footer" role="contentinfo"></div>
</div>
<!-- Authors -->
<script type="text/javascript" src="author-insert.js"></script>
<script>
authorInsert("Aezielle Katarina Riddles"); /* change to system member names */
</script>
<!-- Accessibility -->
<script type="text/javascript" src="access.js"></script>
<!-- tool tips -->
<script src="https://unpkg.com/@popperjs/core@2"></script>
<script src="https://unpkg.com/tippy.js@6"></script>
<script>
// eighteenCheck();
// remove the above "//" to turn on 18+ check
tippy("[title]", {
maxWidth: '20rem',
theme: "custom",
content(reference) {
const title = reference.getAttribute("title");
reference.removeAttribute("title");
return title;
}
});
</script>
</body>
</html>