Auto-resize large images to fit screen; Improve sharing style

This commit is contained in:
George Cushen 2016-05-20 00:21:48 +01:00
commit e714825a7a
7 changed files with 82 additions and 22 deletions

View file

@ -6,7 +6,7 @@
{{ range $paginator.Pages }}
<div>
<h2><a href="{{ .Permalink }}">{{ .Title }}</a></h2>
<p>{{ .Summary }}</p>
<div class="article-style"><p>{{ .Summary }}</p></div>
</div>
{{ end }}

View file

@ -7,7 +7,7 @@
{{ partial "article_metadata" (dict "content" . "is_list" 0) }}
<div class="post" itemprop="articleBody">
<div class="article-style" itemprop="articleBody">
{{ .Content }}
</div>
</article>

View file

@ -58,7 +58,7 @@
<div class="article-list-item" itemscope="" itemprop="blogPost">
<h3 class="post-title" itemprop="name"><a href="{{ .Permalink }}" itemprop="url">{{ .Title }}</a></h3>
{{ partial "article_metadata" (dict "content" . "is_list" 1) }}
<p itemprop="articleBody">
<p class="article-style" itemprop="articleBody">
{{ if .Truncated }}
{{ .Summary }}
{{ else }}

View file

@ -7,7 +7,7 @@
{{ with .Params.external_link }}<a class="btn btn-primary btn-outline" href="{{ . }}">Go to Project Site</a>{{ end }}
<div class="post" itemprop="articleBody">
<div class="article-style" itemprop="articleBody">
{{ .Content }}
</div>
</article>

View file

@ -60,7 +60,7 @@
<div class="space-below"></div>
{{ .Content }}
<div class="article-style">{{ .Content }}</div>
</div>

View file

@ -9,7 +9,7 @@
<div>
<h2><a href="{{ .Permalink }}">{{ .Title }}</a></h2>
{{ partial "article_metadata" (dict "content" . "is_list" 1) }}
<p>{{ .Summary }}</p>
<div class="article-style"><p>{{ .Summary }}</p></div>
</div>
{{ end }}

View file

@ -7,9 +7,7 @@
* Fonts
**************************************************/
@import url(//fonts.googleapis.com/css?family=Lato:400,700);
@import url(//fonts.googleapis.com/css?family=Roboto+Mono);
@import url(//fonts.googleapis.com/css?family=Merriweather);
@import url(//fonts.googleapis.com/css?family=Lato:400,700|Merriweather|Roboto+Mono);
/*************************************************
* Core
@ -82,10 +80,21 @@ h3.post-title a {
-webkit-transition: color 0.6s ease;
}
img, video {
height: auto;
max-width: 100%;
display: block;
}
pre, code {
font-family: 'Roboto Mono', 'Courier New', 'Courier', monospace;
}
pre {
margin: 0 0 1.5rem;
overflow: auto;
}
.space-below {
margin-bottom: 50px;
}
@ -136,12 +145,57 @@ footer p {
background-color: rgb(247, 247, 247);
}
/*************************************************
* Sharing
**************************************************/
.share-box {
float: right;
}
ul.share {
list-style: none;
text-align: right;
margin: 0;
padding: 0;
}
ul.share li {
display: inline-block;
}
ul.share li .fa {
display: inline-block;
width: 35px;
height: 35px;
line-height: 37px;
font-size: 18px;
text-align: center;
transition: all 150ms ease-in-out;
color: #fff;
}
ul.share li a {
background-color: #b5c6ce;
display: inline-block;
border-radius: 50%;
text-decoration: none !important;
}
ul.share li:hover .fa {
-moz-transform: scale(1.4);
-webkit-transform: scale(1.4);
transform: scale(1.4)
}
/*************************************************
* Blog Articles
**************************************************/
.article-metadata {
margin-bottom: 20px;
line-height: 37px; /* Match share bar line height. */
font-size: 14px;
}
.article-list-item {
@ -161,23 +215,29 @@ footer p {
color: #888;
}
ul.share {
list-style: none;
float: right;
.article-style img, .article-style video {
box-shadow: 0 0 1px #edefed;
-moz-box-shadow: 0 0 1px #edefed;
-webkit-box-shadow: 0 0 1px #edefed;
box-shadow: 1px 1px 0px #edefed,-1px -1px 0px #edefed,1px -1px 0px #edefed,-1px 1px 0px #edefed; */
-moz-box-shadow: 1px 1px 0px #edefed,-1px -1px 0px #edefed,1px -1px 0px #edefed,-1px 1px 0px #edefed;
-webkit-box-shadow: 1px 1px 0px #edefed,-1px -1px 0px #edefed,1px -1px 0px #edefed,-1px 1px 0px #edefed;
margin-left: auto;
margin-right: auto;
margin-top: 60px;
margin-bottom: 60px;
padding-left: 0;
padding-right: 0;
}
ul.share li {
margin-right: 3px;
margin-left: 3px;
display: inline-block;
.article-style figure {
margin-top: 60px;
margin-bottom: 60px;
}
ul.share li:last-child {
margin-right: 0px;
}
ul.share li i {
font-size: 1.75rem;
.article-style figure img {
margin-top: 0;
margin-bottom: 0;
}
#comments {