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</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="/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 id="header-text"></div></div>
</header>
<nav><div id="navbar"></div></nav>
<main id="main"> <!-- marks it as the main section -->
<div id="content">
<aside class="aside-fix" aria-label="main content"> <!-- all content goes in between the ASIDE tags -->>
<h1>Header</h1>
<p>content</p>
</aside>
<aside class="aside-fix">
<h1 id="author-list">Authors</h1>
<div id="authors" class="authors">
<!-- leave blank -->
</div>
</aside>
<aside class="aside-fix">
<h1 id="reference-list">References</h1>
<p>Please note Plurality for Dummies does not necessarily endorse all the of the following sources as a whole, and warns that triggering content may be found within the sources.</p>
<p class="hanging-indent">
Reference
</p>
</aside>
</div>
</main>
<div id="footer"></div>
</div>
<!-- Authors -->
<script type="text/javascript" src="/author-insert.js"></script>
<script>
authorInsert("Author"); // change to author's name, can do "Ciel Aezielle Desmond Riddle" for multiple
</script>
<!-- Accessibility -->
<script src="https://website-widgets.pages.dev/dist/sienna.min.js" defer></script>
<!-- tool tips -->
<script src="https://unpkg.com/@popperjs/core@2"></script>
<script src="https://unpkg.com/tippy.js@6"></script>
<script>
// eighteenCheck();
// take away the // above to turn on 18+ checker
tippy("[title]", {
maxWidth: '20rem',
theme: "custom",
content(reference) {
const title = reference.getAttribute("title");
reference.removeAttribute("title");
return title;
}
});
</script>
</body>
</html>