Debes de aplicarle display:inline
a los h3
para que ocupen solo su espacio. Despues aplicales a los span
de los .article
display:block
para convertirlos en elementos de bloque y empujen a los h3
abajo y quede como lo deseas. Los span
los puedes convertir en div
para sean elementos de bloque por defecto y asi no tener que especificar la regla css pero ya eso lo dejare a tu decision.
Aqui el codigo. Puse las nuevas reglas css de primero para que puedas identificarlas facilmente:
.article span {
color: #a9a9a9;
font-weight: 300;
display:block;
}
.article h3 {
display: inline;
}
.article h3:hover {
text-decoration:undeline;
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-size: 16px;
background-color: #fff;
}
body {
max-width: 1200px;
margin: 0 auto;
font-family: 'Roboto', sans-serif;
}
a {
color: #333;
}
header {
display: flex;
flex-direction: column;
align-items: center;
margin-top: 2rem;
margin-bottom: 1.5rem;
}
header > a > img {
width: 120px;
height: auto;
border-radius: 50%;
margin-bottom: 1.2rem;
}
header > a {
color: #333;
text-decoration: none;
}
header > a:hover {
color: #0d0d0d;
text-decoration: underline;
}
header > a > h1 {
font-size: 2.7rem;
}
header > nav {
border: solid 1px #dedede;
border-left: none;
border-right: none;
padding: 0.2rem 0 0.5rem 0;
text-transform: uppercase;
font-weight: 300;
font-size: 1.6rem;
letter-spacing: 1px;
}
header > nav > a {
margin-left: 0.8rem;
margin-right: 0.8rem;
color: #858585;
text-decoration: none;
}
header > nav > a:hover {
text-decoration: underline;
color: #333333;
}
#articles {
width: 50%;
margin: 0 auto;
}
.article {
border-bottom: solid 1px #dedede;
padding-top: 0.7rem;
padding-bottom: 0.7rem;
}
.titular {
font-size: 1.3rem;
margin-top: 0.5rem;
}
.article > a {
text-decoration: none;
}
.article > a:hover {
text-decoration: underline;
}
footer {
display: flex;
flex-direction: column;
text-align: center;
color: #333;
margin: 0 auto;
width: 50%;
margin-top: 2.5rem;
}
footer a {
color: #858585;
text-decoration: none;
}
.iconoSocial {
font-size: 1.6rem;
color: #858585;
}
.iconoSocial:hover {
color: #333333;
}
.contenedorIconos {
display: flex;
margin-bottom: 1rem;
}
.espaciado {
width: 1rem;
height: 1rem;
background-color: transparent;
}
#contenedorCreditos {
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
}
.iconoCredito {
font-size: 1.4rem;
}
.html5 {
color: #f16529;
margin-left: 0.2rem;
margin-right: 0.3rem;
}
.css3 {
color: #1c88c7;
margin-right: 0.2rem;
}
.corazon {
color: #d36060;
margin-left: 0.2rem;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Pedro Fumero</title>
<link rel="stylesheet" href="css/styles.css">
<link href="https://fonts.googleapis.com/css?family=Roboto:300,400,700" rel="stylesheet">
<link rel="stylesheet" href="http://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css">
</head>
<body>
<header>
<a href="/"><img src="img/foto.jpg" alt="Foto del bloguero"></a>
<a href="#"><h1>Pedro Fumero</h1></a>
<div class="contenedorIconos">
<a href="http://google.com"><i class="ion-social-twitter iconoSocial primero"></i></a>
<div class="espaciado"></div>
<a href="#"><i class="ion-social-github iconoSocial"></i></a>
</div>
<nav>
<a href="#">Blog</a>
<a href="#">Talks</a>
<a href="#">Book</a>
<a href="#">Newletter</a>
<a href="#">Podcast</a>
<a href="#">About</a>
</nav>
</header>
<section id="articles">
<div class="article">
<span>August 7, 2017</span>
<a href="#"><h3 class="titular">CSS Utility Classes and "Separation of Concerns"</h3></a>
</div>
<div class="article">
<span>April 21, 2017</span>
<a href="#"><h3 class="titular">The $61,392 Book Launch That Let Me Quit My Job</h3></a>
</div>
<div class="article">
<span>April 3, 2017</span>
<a href="#"><h3 class="titular">Detecting Out of Sync Mocks in Mockery</h3></a>
</div>
<div class="article">
<span>March 2, 2017</span>
<a href="#"><h3 class="titular">What's KiteTail?</h3></a>
</div>
</section>
<footer>
<div id="contenedorCreditos">
Creado con
<i class="ion-social-html5 iconoCredito html5"></i>
<i class="ion-social-css3 iconoCredito css3"></i>
y mucho
<i class="ion-heart iconoCredito corazon"></i>
</div>
<a href="#">Pedro Fumero</a>
2017
</footer>
</body>
</html>