silva
/
new_site
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Extract social and news as separate includes. Overall slight improvements.

This commit is contained in:
Maruan Al-Shedivat 2015-10-22 10:50:19 -04:00
parent e3dfbf67c7
commit 8a3e818873
12 changed files with 308 additions and 117 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
_includes/head.html
View File

@ -16,4 +16,5 @@
<script src="//cdnjs.cloudflare.com/ajax/libs/KaTeX/{{ site.katex_version }}/katex.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/KaTeX/{{ site.katex_version }}/katex.min.js"></script>
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css"> <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
<link rel="stylesheet" href="{{ site.baseurl }}/css/academicons.css">
</head> </head>

3
_includes/news.html Normal file
View File

@ -0,0 +1,3 @@
<div class="news">
<h2>news</h2>
</div>

13
_includes/social.html Normal file
View File

@ -0,0 +1,13 @@
<div class="social">
<span class="contacticon center">
<a href="mailto:you@example.com"><i class="fa fa-envelope-square"></i></a>
<a href="https://scholar.google.com" target="_blank" title="Google Scholar"><i class="ai ai-google-scholar-square"></i></a>
<a href="https://github.com" target="_blank" title="GitHub"><i class="fa fa-github-square"></i></a>
<a href="https://www.linkedin.com" target="_blank" title="LinkedIn"><i class="fa fa-linkedin-square"></i></a>
<a href="https://twitter.com" target="_blank" title="Twitter"><i class="fa fa-twitter-square"></i></a>
</span>
<div class="col three caption">
You can even add a little note about which of these is the best way to reach you.
</div>
</div>

10
_layouts/page.html
View File

@ -8,8 +8,16 @@ layout: default
<h5 class="post-description">{{ page.description }}</h5> <h5 class="post-description">{{ page.description }}</h5>
</header> </header>
<article class="post-content"> <article class="post-content clearfix">
{{ content }} {{ content }}
</article> </article>
{% if page.news %}
{% include news.html %}
{% endif %}
{% if page.social %}
{% include social.html %}
{% endif %}
</div> </div>

24
_pages/about.md
View File

@ -2,27 +2,13 @@
layout: page layout: page
permalink: / permalink: /
title: your name title: your name
description: Affiliations. Address. Contacts. Moto. Etc. description: <a href="">Affiliations</a>. Address. Contacts. Moto. Etc.
news: true
social: true
--- ---
<img class="col one right" src="/img/prof_pic.jpg"> <img class="col one right" src="/img/prof_pic.jpg">
<br/> Write your biography here. Tell the world about yourself. Link to your favorite [subreddit](http://reddit.com). You can put a picture in, too. The code is already in, just name your picture "prof_pic.jpg" and put it in the img folder.
Write your biography here. Tell the world about yourself. Link to your favorite <a href="http://reddit.com" target="blank">subreddit</a>. You can put a picture in, too. The code is already in, just name your picture "prof_pic.jpg" and put it in the img folder.
Link to your social media connections, too. This theme is set up to use <a href="http://fortawesome.github.io/Font-Awesome/" target="blank">Font Awesome icons</a>, like the ones below. Add your Facebook, Twitter, LinkedIn, or just disable all of them. Link to your social media connections, too. This theme is set up to use [Font Awesome icons](http://fortawesome.github.io/Font-Awesome/){:target="\_blank"} and [Academicons](https://jpswalsh.github.io/academicons/){:target="\_blank"}, like the ones below. Add your Facebook, Twitter, LinkedIn, Google Scholar, or just disable all of them.
<br/>
<hr/>
<br/>
<span class="contacticon center">
<a href="mailto:you@example.com"><i class="fa fa-envelope-square"></i></a>
<a href="https://github.com" target="_blank"><i class="fa fa-github-square"></i></a>
<a href="https://www.linkedin.com" target="_blank"><i class="fa fa-linkedin-square"></i></a>
<a href="https://twitter.com" target="_blank"><i class="fa fa-twitter-square"></i></a>
</span>
<div class="col three caption">
You can even add a little note about which of these is the best way to reach you.
</div>

5
_sass/_base.scss
View File

@ -145,6 +145,11 @@ article a {
} }
} }
.social a {
color: $text-color;
&:hover { color: $theme-color; }
}
/** /**

216
_sass/_layout.scss
View File

@ -70,6 +70,24 @@ display: line;
} }
} }
/**
* News block **********************************************************
*/
.news {
border-top: 1px solid $grey-color-light;
margin-top: 50px;
padding-top: 20px;
}
/**
* Social block **********************************************************
*/
.social {
border-top: 1px solid $grey-color-light;
margin-top: 50px;
padding-top: 20px;
}
/** /**
* Site footer ********************************************************** * Site footer **********************************************************
*/ */
@ -88,6 +106,7 @@ width: 100%;
a { color: #fff; } a { color: #fff; }
a:hover { color: $theme-color; } a:hover { color: $theme-color; }
} }
/** /**
* Pagination ********************************************************** * Pagination **********************************************************
*/ */
@ -104,86 +123,88 @@ a {
color: $theme-color; color: $theme-color;
} }
} }
/** /**
* Page content ********************************************************** * Page content **********************************************************
*/ */
.page-content { .page-content {
padding: 100px 0; /* VERTICAL PADDING FOR TITLE ON EVERY PAGE */ padding: 100px 0; /* VERTICAL PADDING FOR TITLE ON EVERY PAGE */
} }
.page-heading { .page-heading {
font-size: 20px; font-size: 20px;
} }
.post-list { .post-list {
margin: 0px 0; margin: 0px 0;
list-style: none; list-style: none;
> li {
margin-bottom: $vertical-spacing-unit; > li {
} margin-bottom: $vertical-spacing-unit;
}
} }
.contacticon { .contacticon {
font-size: 60px; display: block;
display:block; font-size: 60px;
margin: 10px; margin: 10px;
} }
.center{ .center{
text-align: center; text-align: center;
} }
/** /**
* Posts ********************************************************** * Posts **********************************************************
*/ */
.post-header { .post-header {
margin-bottom: $vertical-spacing-unit; margin-bottom: $vertical-spacing-unit;
} }
.post-title { .post-title {
font-size: 42px; font-size: 42px;
letter-spacing: -1px; letter-spacing: -1px;
line-height: 1; line-height: 1;
margin-bottom: 10px; margin-bottom: 10px;
@include media-query($on-laptop) { @include media-query($on-laptop) {
font-size: 36px; font-size: 36px;
} }
} }
.post-content { .post-content {
h2 { h2 {
font-size: 42px; font-size: 42px;
@include media-query($on-laptop) { @include media-query($on-laptop) {
font-size: 28px; font-size: 28px;
}
} }
h3 { }
font-size: 30px; h3 {
@include media-query($on-laptop) { font-size: 30px;
font-size: 22px; @include media-query($on-laptop) {
} font-size: 22px;
} }
h4 { }
font-size: 20px; h4 {
@include media-query($on-laptop) { font-size: 20px;
font-size: 18px; @include media-query($on-laptop) {
} font-size: 18px;
} }
}
} }
.post-meta { .post-meta {
font-size: $small-font-size; color: $grey-color;
color: $grey-color; font-size: $small-font-size;
margin-bottom: 0px; margin-bottom: 0px;
} }
.post-link { .post-link {
display: block; display: block;
font-size: 42px; font-size: 42px;
} }
/** Poem formatting ********************************************/ /** Poem formatting ********************************************/
.poem-title { .poem-title {
font-size: 24px; font-size: 24px;
letter-spacing: -1px; letter-spacing: -1px;
line-height: 1; line-height: 1;
@include media-query($on-laptop) { @include media-query($on-laptop) {
font-size: 16px; font-size: 16px;
} }
} }
/** /**
* Portfolio grid ********************************************************** * Portfolio grid **********************************************************
*/ */
@ -191,90 +212,91 @@ font-size: 16px;
// http://nicolasgallagher.com/micro-clearfix-hack/ // http://nicolasgallagher.com/micro-clearfix-hack/
.clearfix:before, .clearfix:before,
.clearfix:after { .clearfix:after {
content: " "; content: " ";
display: table; display: table;
} }
.clearfix:after { .clearfix:after {
clear: both; clear: both;
} }
.project { .project {
width: 33.33%; box-sizing: border-box;
height: 250px; float: left;
float: left; height: 250px;
vertical-align: middle; padding: 10px;
box-sizing: border-box; vertical-align: middle;
padding: 10px; width: 33.33%;
} }
.thumbnail{ .thumbnail {
width: 100%; overflow: hidden;
height: 230px; height: 230px;
overflow: hidden; width: 100%;
} }
.thumbnail img{ .thumbnail img{
width: 500px; height: auto;
height: auto; position: relative;
position: relative; left: -25%;
left: -25%; top: -5%;
top: -5%; width: 500px;
} }
.thumbnail a{ .thumbnail a{
float: left; float: left;
position: relative; position: relative;
width: 100%; width: 100%;
height: 230px; height: 230px;
} }
.thumbnail a span { .thumbnail a span {
display: none; display: none;
position: absolute; position: absolute;
top: 0; top: 0;
left: 0; left: 0;
bottom: 0; bottom: 0;
right: 0; right: 0;
background: rgba(0,0,0,0.4); background: rgba(0,0,0,0.4);
color: $grey-color-light; color: $grey-color-light;
padding: 40px; padding: 40px;
text-align: center; text-align: center;
} }
.thumbnail a:hover span { .thumbnail a:hover span {
display: block; display: block;
} }
/** /**
* Portfolio pages ********************************************************** * Portfolio pages **********************************************************
*/ */
.blankbox{ .blankbox{
background: $theme-color; background: $theme-color;
} }
.img_row{ .img_row{
height: $img_height; height: $img_height;
width: 100%; width: 100%;
overflow: hidden; overflow: hidden;
box-sizing:border-box; box-sizing:border-box;
padding: $img_spacing; padding: $img_spacing;
} }
.col{ .col{
width: 100%; width: 100%;
height: 100%; height: 100%;
float: left; float: left;
object-fit: cover; object-fit: cover;
box-sizing:border-box; box-sizing:border-box;
padding: $img_spacing; padding: $img_spacing;
} }
.right{ .right{
float: right; float: right;
} }
.one { .one {
width:33.33%; width:33.33%;
} }
.two { .two {
width: 66.66%; width: 66.66%;
} }
.three{ .three{
width: 100%; width: 100%;
} }
.caption{ .caption{
height: 100%; height: 100%;
color: $caption_color; color: $caption_color;
text-align: center; text-align: center;
vertical-align: middle; vertical-align: middle;
font-size: $caption_font_size; font-size: $caption_font_size;
} }

99
css/academicons.css Normal file
View File

@ -0,0 +1,99 @@
/*!
* Academicons 1.5.0 by James Walsh - https://github.com/jpswalsh
* Fonts generated using the IcoMoon app - http://icomoon.io/app
* Square icons designed to be used alongside Font Awesome square icons - https://fortawesome.github.io/Font-Awesome/
* License - Font: SIL OFL 1.1, CSS: MIT License
*/
@font-face {
font-family: 'academicons';
src:url('fonts/academicons.eot?qbqm87');
src:url('fonts/academicons.eot?#iefixqbqm87') format('embedded-opentype'),
url('fonts/academicons.ttf?qbqm87') format('truetype'),
url('fonts/academicons.woff?qbqm87') format('woff'),
url('fonts/academicons.svg?qbqm87#academicons') format('svg');
font-weight: normal;
font-style: normal;
}
.ai {
display:inline-block;
font:normal normal normal 14px/1 Academicons;
font-size:inherit;
text-rendering:auto;
-webkit-font-smoothing:antialiased;
-moz-osx-font-smoothing:grayscale;
}
.ai-google-scholar:before {
content: "\e600";
}
.ai-google-scholar-square:before {
content: "\e601";
}
.ai-researchgate:before {
content: "\e612";
}
.ai-researchgate-square:before {
content: "\e613";
}
.ai-mendeley:before {
content: "\e604";
}
.ai-mendeley-square:before {
content: "\e605";
}
.ai-orcid:before {
content: "\e606";
}
.ai-orcid-square:before {
content: "\e607";
}
.ai-impactstory:before {
content: "\e608";
}
.ai-impactstory-square:before {
content: "\e609";
}
.ai-academia:before {
content: "\e60a";
}
.ai-academia-square:before {
content: "\e60b";
}
.ai-zotero:before {
content: "\e60c";
}
.ai-zotero-square:before {
content: "\e60d";
}
.ai-figshare:before {
content: "\e60e";
}
.ai-figshare-square:before {
content: "\e60f";
}
.ai-dryad:before {
content: "\e610";
}
.ai-dryad-square:before {
content: "\e611";
}
.ai-arxiv:before {
content: "\e616";
}
.ai-arxiv-square:before {
content: "\e617";
}
.ai-scirate:before {
content: "\e614";
}
.ai-scirate-square:before {
content: "\e615";
}
.ai-researchgate-old:before {
content: "\e602";
}
.ai-researchgate-old-square:before {
content: "\e603";
}

BIN
css/fonts/academicons.eot Normal file
View File

Binary file not shown.

54
css/fonts/academicons.svg Normal file
View File

File diff suppressed because one or more lines are too long
Side by Side

After

Width:  |  Height:  |  Size: 88 KiB

BIN
css/fonts/academicons.ttf Normal file
View File

Binary file not shown.

BIN
css/fonts/academicons.woff Normal file
View File

Binary file not shown.