emilia
/
personal-website
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Changes to base styling 

Remove <hr> from document and replace with CSS
Add margin between sections
This commit is contained in:
Emilia Allison 2022-09-28 22:04:21 -04:00
parent b62f80656b
commit 7ba36b5b17
Signed by: emilia
GPG Key ID: 7A3F8997BFE894E0
2 changed files with 37 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

26
src/cool-stuff/css-purgatory/base/index.css
View File

@ -130,6 +130,18 @@ input, button, textarea, select {
max-width: 80rem;
}
.hr::after { /* Add fake hr after header */
content: '';
position: absolute;
display: block;
clear: both;
width: 100%;
height: 0.15rem;
background-color: black;
}
/* Color Classes */
.bg-dark { background-color: hsl( var(--color-dark) ); }
@ -158,6 +170,20 @@ input, button, textarea, select {
.uppercase { text-transform: uppercase; }
.lowercase { text-transform: lowercase; }
/* Semantic Tags and Their Classes */
header {
margin-bottom: 3vh;
}
section:not(:last-of-type) {
margin-bottom: 3vh;
}
footer {
margin-top: 3vh;
}
/* -------------------- */
/* Non-Reusable Classes */
/* -------------------- */

25
src/cool-stuff/css-purgatory/base/index.html
View File

@ -5,27 +5,24 @@
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>CSS Purgatory - Base</title>
<link rel="stylesheet" href="index.css">
<!-- Base v1 -->
<!-- Base v1.1 -->
</head>
<body>
<main>
<header id="title">
<header id="title" class="hr">
<h1>Base</h1>
</header>
<hr>
<article class="">
<section id="description">
<section id="description" class="hr">
<h2>Description</h2>
<div class="container">
<p><em>Base</em> is not a style, it is a template for other styles to be copied from</p>
</div>
</section>
<hr>
<section id="colors">
<section id="colors" class="hr">
<h2>Colors</h2>
<div class="container flex">
<div>
@ -43,9 +40,9 @@
</div>
</section>
<hr>
<section id="typography">
<section id="typography" class="hr">
<h2>Typography</h2>
<div class="container two-columns">
<div>
@ -92,19 +89,19 @@
</div>
</section>
<hr>
<section id="samples">
<section id="samples" class="hr">
<h2>Sample Pages</h2>
<ul class="container two-columns">
<li><a>First Sample Page</a></li>
<li><a href="samplepage">First Sample Page</a></li>
<li><a>Second Sample Page</a></li>
<li><a>Third Sample Page</a></li>
</ul>
</section>
</article>
<hr>
<footer>
<a href="../">Return to Purgatory</a>