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; 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 */ /* Color Classes */
.bg-dark { background-color: hsl( var(--color-dark) ); } .bg-dark { background-color: hsl( var(--color-dark) ); }
@ -158,6 +170,20 @@ input, button, textarea, select {
.uppercase { text-transform: uppercase; } .uppercase { text-transform: uppercase; }
.lowercase { text-transform: lowercase; } .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 */ /* 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"> <meta name="viewport" content="width=device-width, initial-scale=1">
<title>CSS Purgatory - Base</title> <title>CSS Purgatory - Base</title>
<link rel="stylesheet" href="index.css"> <link rel="stylesheet" href="index.css">
<!-- Base v1 --> <!-- Base v1.1 -->
</head> </head>
<body> <body>
<main> <main>
<header id="title"> <header id="title" class="hr">
<h1>Base</h1> <h1>Base</h1>
</header> </header>
<hr>
<article class=""> <article class="">
<section id="description"> <section id="description" class="hr">
<h2>Description</h2> <h2>Description</h2>
<div class="container"> <div class="container">
<p><em>Base</em> is not a style, it is a template for other styles to be copied from</p> <p><em>Base</em> is not a style, it is a template for other styles to be copied from</p>
</div> </div>
</section> </section>
<hr>
<section id="colors"> <section id="colors" class="hr">
<h2>Colors</h2> <h2>Colors</h2>
<div class="container flex"> <div class="container flex">
<div> <div>
@ -43,9 +40,9 @@
</div> </div>
</section> </section>
<hr>
<section id="typography"> <section id="typography" class="hr">
<h2>Typography</h2> <h2>Typography</h2>
<div class="container two-columns"> <div class="container two-columns">
<div> <div>
@ -92,19 +89,19 @@
</div> </div>
</section> </section>
<hr>
<section id="samples"> <section id="samples" class="hr">
<h2>Sample Pages</h2> <h2>Sample Pages</h2>
<ul class="container two-columns"> <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>Second Sample Page</a></li>
<li><a>Third Sample Page</a></li> <li><a>Third Sample Page</a></li>
</ul> </ul>
</section> </section>
</article> </article>
<hr>
<footer> <footer>
<a href="../">Return to Purgatory</a> <a href="../">Return to Purgatory</a>