garrettmills/back2semantics
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Initial import

Browse Source
This commit is contained in:
Garrett Mills 2021-03-09 15:26:58 -06:00
commit f6db2252e5
Signed by: garrettmills
GPG Key ID: D2BF5FBA8298F246
3 changed files with 122 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
.gitignore vendored Normal file
View File

@ -0,0 +1 @@
.idea*

41
index.html Normal file
View File

@ -0,0 +1,41 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="description" content="back2semantics is a minimalist single-page ideology based on semantic HTML.">
<meta name="author" content="Garrett Mills <shout@garrettmills.dev>">
<title>home | back2semantics</title>
<link rel="stylesheet" href="lib/b2s.css">
<script>
if ( window.location.href.indexOf('#') < 0 ) {
window.location.href = window.location.href + '#home'
}
</script>
</head>
<body>
<header class="breadcrumbs">back2semantics <a href="#navigation">navigation</a></header>
<nav id="navigation">
<h1>navigation</h1>
<ul>
<li><a href="#home">home</a></li>
<li><a href="#about">about</a></li>
</ul>
</nav>
<section id="home">
<h1>back2semantics</h1>
<p>The modern web is bloated. Let's get back to basics.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce malesuada tempus lorem in porttitor. Etiam laoreet velit posuere nisl vehicula, a euismod libero vestibulum. Proin faucibus leo eget diam tristique varius. Quisque quis orci eros. Sed hendrerit lectus ut leo aliquet, pulvinar porttitor nulla dapibus. Vestibulum fringilla enim a rutrum rhoncus. Integer bibendum diam vel scelerisque bibendum. Aenean at ex justo. Aenean interdum tellus vitae justo accumsan sollicitudin. Mauris dui leo, malesuada ac dignissim id, finibus ac mi. Proin pellentesque vulputate tortor vitae viverra. Nunc at porttitor libero. Nunc ante tortor, tempor in massa sit amet, viverra viverra dolor. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Aliquam urna lectus, varius sit amet turpis vitae, lobortis tempor eros. Aliquam erat volutpat.</p>
<p>Aenean non euismod felis, at facilisis augue. Aliquam ornare lacinia convallis. Integer eget hendrerit nibh. Vestibulum volutpat hendrerit lacinia. Nam lectus urna, convallis non fermentum eget, sollicitudin sed mi. Mauris dictum ac eros sit amet euismod. Morbi vel nulla mauris. Vivamus fermentum arcu non nibh aliquet, nec hendrerit leo condimentum. Aenean lacinia purus libero, id gravida ex semper sit amet.</p>
<a href="#about">Learn More</a>
</section>
<section id="about">
<h2>about b2s</h2>
<p>This is some about text.</p>
</section>
<footer>
copyright &copy; 2021 <a href="https://garrettmills.dev/" target="_blank">Garrett Mills</a>&nbsp;&nbsp; | &nbsp;&nbsp;<a href="#navigation">navigation</a>
</footer>
</body>
</html>

80
lib/b2s.css Normal file
View File

@ -0,0 +1,80 @@
html, body {
margin: 0;
padding: 0;
top: 0;
left: 0;
background: #eee;
font-family: sans-serif;
color: #333;
}
section, nav, header, footer {
max-width: 800px;
margin-left: auto;
margin-right: auto;
padding-left: 10px;
padding-right: 10px;
}
section, nav {
min-height: 100vh;
padding-top: 20px;
display: none;
}
header {
padding: 10px 0;
font-weight: bold;
font-size: 1.3em;
}
header a {
font-size: 0.8em;
font-weight: normal;
margin-left: 15px;
}
nav ul {
list-style-type: none;
padding: 0;
margin: 0;
}
nav ul li {
border-bottom: 1px solid #aaa;
transition: background 0.1s linear;
}
nav ul li:nth-child(1) {
border-top: 1px solid #aaa;
}
nav ul li:hover {
background: #f6f6f6;
}
nav ul li a {
padding: 10px;
display: block;
text-decoration: none;
}
:target {
display: block;
}
footer {
padding: 20px 0;
color: #666;
}
@media only screen and (max-width: 768px) {
section, nav, header, footer {
max-width: 100%;
}
header, footer {
padding-left: 10px;
padding-right: 10px;
}
}