Skip to content

Commit

Permalink
Browse files Browse the repository at this point in the history
refactor(home): create styles for home
  • Loading branch information
gael-boyenval committed Jun 16, 2017
1 parent b586cd9 commit 9865ea5
Show file tree
Hide file tree
Showing 6 changed files with 131 additions and 80 deletions.
56 changes: 28 additions & 28 deletions _sass/includes/_header.scss
Expand Up @@ -5,15 +5,26 @@
padding: 20px 45px;
background: $brand-color;
border-bottom: 1px solid $border-color;
float: left;
width: 100%;

.branding {
.branding-container {
flex: auto;
display: block;
}

.branding {
display: inline-block;
width: 160px;
height: 60px;

@media (max-width: 480px) {
margin-bottom: 10px;
margin-bottom: 5px;
width: 120px;
height: 40px;
}

&:hover {
background: none;
text-decoration: none;
}

&:before {
Expand All @@ -26,6 +37,8 @@

@media (max-width: 480px) {
margin: 0 auto;
width: 120px;
height: 40px;
}
}
}
Expand All @@ -35,18 +48,18 @@
}

.avatar {
height: 2em;
width: 2em;
height: 2rem;
width: 2rem;
float: left;
margin-top: -3px;
border-radius: 0.2em;
margin-right: 1em;
border-radius: 0.2rem;
margin-right: 1rem;
}

.site-title {
float: left;
font-weight: bold;
font-size: 1em;
font-size: 1rem;
line-height: 1.5;
}

Expand All @@ -62,31 +75,18 @@

li {
display: inline-block;
margin-right: 0.4em;
margin-right: 0.4rem;
}
}

.branding,
.site-nav {
.search-bar {}

.branding-container,
.site-nav,
.search-bar {
@media (max-width: 480px) {
flex: 0 0 100%;
text-align: center;
}
}
}


/*
.search {
display: block;
background: $brand-black;
color: #F5F5F5;
@media (min-width: 480px) {
margin-left: 15px;
}
@media (max-width: 480px) {
margin-top: 10px;
}
}*/
32 changes: 26 additions & 6 deletions _sass/layouts/_index.scss
Expand Up @@ -5,7 +5,7 @@
width: 100%;
background-color:$header-desc-background-color;
background-size: cover;
font-size: 1.2em;
font-size: 1.2rem;
text-align: center;
color: $header-desc-text-color;
}
Expand All @@ -14,24 +14,44 @@
}
// Post listing
.posts {
.post-teaser {
@extend %padding-regular;
&-teaser {
width: 100%;
margin-bottom: 0;
display: inline-block;
background-size: $feature-image-size;
border-bottom: 1px solid $border-color;

p a:hover {
@extend %link-hover;
}
}

&-title {
@extend %h2;
margin: 0 0 5px;

a {
color: $brand-black;
text-decoration: none;
}
}

&-date {
display: inline-block;
margin-bottom: 1.5rem;
}

&-button {
margin-top: 1.5rem;
}

.excerpt {
margin-top: 1em;
margin-top: 1rem;
margin-bottom: 1.5rem;
}
}
// Pagination
.pagination .button {
margin: 0 1.5em;
margin: 0 1.5rem;
i {
vertical-align: middle;
}
Expand Down
43 changes: 7 additions & 36 deletions _sass/layouts/_posts.scss
@@ -1,48 +1,35 @@
article,
.comments {
@extend %padding-regular;
border-bottom: 1px solid $border-color;
float: left;
width: 100%;
}

article {
header {
margin-bottom: 6%;
text-align: center;
}
a:hover {
@extend %link-hover;
}
.footnotes {
font-size: 0.9em;
}
}
header {
h1 {
margin: 0;
}
.meta {
color: rgba($brand-black, .5);
font-size: 0.9em;
letter-spacing: 0.1em;
margin: 0;
text-transform: uppercase;
font-size: 0.9rem;
}
}

.feature-image {
padding: 0%;
.post-link {
color: $feature-image-text-color;
}

header {
color: $feature-image-text-color;
background-size: $feature-image-size;
margin-bottom: 0;
padding: $padding-large/2.5 $padding-large;
.meta {
color: rgba($feature-image-text-color, .7);
}
}

.post-content {
@extend %padding-regular;
}
Expand All @@ -59,28 +46,12 @@ header {
}

.page-title {
font-size: 1.2em;
margin-bottom: 1em;
font-size: 1.2rem;
margin-bottom: 1rem;
width: 100%;
}

a {
padding: 2em 3em;
border: 1px solid rgba(255, 255, 255, 0);
text-align: center;
width: 50%;
}
a:hover {
@extend a.button:hover;
}

i {
vertical-align: middle;
}
}
// Share button
.share-button {
width:100%;
float: left;
@extend %padding-regular;
}
20 changes: 20 additions & 0 deletions _sass/objects/_buttons.scss
@@ -0,0 +1,20 @@
.button {
font-size: 1.1rem;
text-transform: uppercase;
font-family: $font-family-headings;
font-weight: lighter;
color: $brand-black;
display: inline-block;
letter-spacing: 0.05em;
text-decoration: underline;

&:hover {
text-decoration: none;
background: $brand-yellow;
}

&:visited,
&:visited:hover {
color: #999;
}
}
35 changes: 35 additions & 0 deletions _sass/objects/_meta.scss
@@ -0,0 +1,35 @@
.meta {
position: relative;

@media (min-width: 480px) {
font-size: 1.5rem;
}

@media (max-width: 480px) {
font-size: 1.3rem;
}

&-content {
font-family: $font-family-headings;
display: inline-block;
font-weight: lighter;
margin-left: 1%;
margin: 0;
z-index: 1;
position: relative;
text-transform: uppercase;
letter-spacing: 0.05em
}

&:before {
content: "";
position: absolute;
z-index: 0;
bottom: -6px;
left: -1%;
display: block;
width: 108%;
height: 1.1em;
background-color: $brand-yellow;
}
}
25 changes: 15 additions & 10 deletions index.html
Expand Up @@ -12,19 +12,24 @@

<div class="posts">
{% for post in paginator.posts %}
<div class="post-teaser">
<header>
<h1>
<a class="post-link" href="{{ post.url | prepend: site.baseurl }}">
<div class="posts-teaser slice">
<div class="container">
<h2 class="posts-title">
<a class="no-link-style" href="{{ post.url | prepend: site.baseurl }}">
{{ post.title }}
</a>
</h1>
<p class="meta">
{{ post.date | date: "%B %-d, %Y" }} - {% include reading_time.html content=post.content %}
</h2>

<time class="posts-date meta">
<span class="meta-content">
{{ post.date | date: "%B %-d, %Y" }} - {% include reading_time.html content=post.content %}
</span>
</time>

<p class="excerpt">
{{ post.excerpt }}
</p>
</header>
<div class="excerpt">
{{ post.excerpt }}

<a class="button" href="{{ post.url | prepend: site.baseurl }}">
{{ site.theme_settings.str_continue_reading }}
</a>
Expand Down

0 comments on commit 9865ea5

Please sign in to comment.