What I have is a simple weblog consisting of HTML and CSS. I'd like you to pinpoint mistakes (smelly code and so on) and how to improve my code. Opinionated responses are welcomed, given that you can provide solid arguments backing them. I have validated both HTML and CSS, so there are no syntactic mistakes.
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
section, article, aside, footer, header, nav, main {
display: block;
}
html {
font-size: 62.5%;
}
h1, h2, h3, h4, h5, h6 {
font-weight: 300;
}
body {
font-family: Helvetica, sans-serif;
font-size: 1.5em;
line-height: 1.6;
max-width: 50em;
margin: 0 auto;
}
article {
padding: 4.5rem 0;
}
@media only screen and (max-width: 50em) {
article {
padding: 4.5rem;
}
}
p {
padding: 1.5rem 0;
}
nav {
margin: 1rem 0;
border-top: 1px solid #bbb;
border-bottom: 1px solid #bbb;
line-height: 4.5rem;
}
nav li {
display: inline;
margin-right: 1rem;
}
footer {
text-align: center;
}
.masthead {
text-align: center;
margin-top: 4rem;
margin-bottom: 3rem;
}
.article-header {
padding-bottom: 1.5rem;
border-bottom: 1px solid #bbb;
}
.post-date {
font-size: 1.22rem;
}
a:link {
color: #5995DA;
text-decoration: none;
}
a:visited {
color: #407FC7;
}
a:hover,
a:visited:hover {
color: #76AEED;
border-bottom: 1px solid #76AEED;
}
a:active,
a:visited:active {
color: #5995DA;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>My Weblog</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="Sample weblog for learning html5">
<link rel="stylesheet" href="weblog.css">
</head>
<body>
<header class="masthead">
<h1>My Weblog</h1>
<p>Minimalism at its best. Only cool stuff</p>
<nav>
<ul>
<li><a href="#">home</a></li>
<li><a href="#">blog</a></li>
<li><a href="#">gallery</a></li>
<li><a href="#">about</a></li>
</ul>
</nav>
</header>
<main>
<article>
<header class="article-header">
<h2>Travel day</h2>
<time datetime="2009-10-22" class="post-date">October 22, 2009</time>
</header>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec hendrerit felis accumsan turpis pretium tempor. Duis eu turpis nunc, ut euismod nisl. Aliquam erat volutpat. Proin eu eros mollis dui fringilla sodales. Curabitur venenatis tincidunt felis ac congue. Maecenas at odio dui, sit amet congue sapien. Proin placerat feugiat eros, non mollis quam pharetra at. Duis gravida eleifend ligula nec auctor. Fusce nulla diam, fringilla non ultrices in, iaculis eu tellus. Sed mollis consequat turpis sit amet facilisis. Donec pretium luctus aliquet. Curabitur placerat varius purus vel congue. Aliquam erat volutpat. Curabitur vitae eros sed turpis sollicitudin mattis. Morbi venenatis pulvinar nunc, at vulputate massa placerat a. Nam et tortor id nisi consequat tempor eget sit amet risus. Praesent bibendum, velit eu hendrerit porttitor, elit mauris posuere nisl, non pellentesque est leo a quam.</p>
</article>
<article>
<header class="article-header">
<h2>Mars, mars, mars...</h2>
<time datetime="2009-10-17" class="post-date">October 17, 2009</time>
</header>
<p>Sed ante mi, sagittis sed euismod sit amet, convallis et nibh. Etiam sit amet odio dui, id semper turpis. Mauris risus mauris, imperdiet pulvinar vehicula et, hendrerit vitae dui. Phasellus ultrices lacus rhoncus purus posuere rutrum. Maecenas mattis eleifend scelerisque. Nulla quam sem, facilisis ac ultrices et, tincidunt eu dolor. Mauris arcu est, porttitor eu blandit nec, pulvinar sed enim. Praesent diam felis, cursus at facilisis eu, mollis ut elit. Praesent rutrum porta euismod. Nulla facilisi. Suspendisse potenti. In auctor ultricies eleifend. Proin erat dolor, malesuada non tempus nec, tincidunt in mi.</p>
</article>
</main>
<footer>
<p>© 2017 Marcus Aurelius Antoninus Augustus</p>
</footer>
</body>
</html>
