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

Project page style fixes

This commit is contained in:
Maruan Al-Shedivat 2017-05-27 12:47:48 -07:00
parent ace8110b89
commit 1e189ff81c
13 changed files with 77 additions and 55 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
_includes/header.html
View File

@ -26,7 +26,7 @@
{% endfor %} {% endfor %}
<!-- CV link --> <!-- CV link -->
<a class="page-link" href="{{ '/assets/pdf/CV.pdf' | prepend: site.baseurl | prepend: site.url }}">vitae</a> <!-- <a class="page-link" href="{{ '/assets/pdf/CV.pdf' | prepend: site.baseurl | prepend: site.url }}">vitae</a> -->
</div> </div>
</nav> </nav>

6
_projects/1_project.markdown
View File

@ -1,6 +1,6 @@
--- ---
layout: post layout: page
title: Project title: Project 1
description: a project with a background image description: a project with a background image
img: /assets/img/12.jpg img: /assets/img/12.jpg
--- ---
@ -10,7 +10,7 @@ Every project has a beautiful feature shocase page. It's easy to include images,
To give your project a background in the portfolio page, just add the img tag to the front matter like so: To give your project a background in the portfolio page, just add the img tag to the front matter like so:
--- ---
layout: post layout: page
title: Project title: Project
description: a project with a background image description: a project with a background image
img: /assets/img/12.jpg img: /assets/img/12.jpg

6
_projects/2_project.markdown
View File

@ -1,6 +1,6 @@
--- ---
layout: post layout: page
title: Project title: Project 2
description: a project with a background image description: a project with a background image
img: /assets/img/2.jpg img: /assets/img/2.jpg
--- ---
@ -10,7 +10,7 @@ Every project has a beautiful feature shocase page. It's easy to include images,
To give your project a background in the portfolio page, just add the img tag to the front matter like so: To give your project a background in the portfolio page, just add the img tag to the front matter like so:
--- ---
layout: post layout: page
title: Project title: Project
description: a project with a background image description: a project with a background image
img: /assets/img/12.jpg img: /assets/img/12.jpg

6
_projects/3_project.markdown
View File

@ -1,6 +1,6 @@
--- ---
layout: post layout: page
title: Project title: Project 3
description: a project that redirects to another website description: a project that redirects to another website
img: img:
redirect: https://unsplash.com redirect: https://unsplash.com
@ -11,7 +11,7 @@ Every project has a beautiful feature shocase page. It's easy to include images,
To give your project a background in the portfolio page, just add the img tag to the front matter like so: To give your project a background in the portfolio page, just add the img tag to the front matter like so:
--- ---
layout: post layout: page
title: Project title: Project
description: a project with a background image description: a project with a background image
img: /assets/img/12.jpg img: /assets/img/12.jpg

6
_projects/4_project.markdown
View File

@ -1,6 +1,6 @@
--- ---
layout: post layout: page
title: Project title: Project 4
description: another without an image description: another without an image
img: img:
--- ---
@ -10,7 +10,7 @@ Every project has a beautiful feature shocase page. It's easy to include images,
To give your project a background in the portfolio page, just add the img tag to the front matter like so: To give your project a background in the portfolio page, just add the img tag to the front matter like so:
--- ---
layout: post layout: page
title: Project title: Project
description: a project with a background image description: a project with a background image
img: /assets/img/12.jpg img: /assets/img/12.jpg

6
_projects/5_project.markdown
View File

@ -1,6 +1,6 @@
--- ---
layout: post layout: page
title: Project title: Project 5
description: a project with a background image description: a project with a background image
img: /assets/img/1.jpg img: /assets/img/1.jpg
--- ---
@ -10,7 +10,7 @@ Every project has a beautiful feature shocase page. It's easy to include images,
To give your project a background in the portfolio page, just add the img tag to the front matter like so: To give your project a background in the portfolio page, just add the img tag to the front matter like so:
--- ---
layout: post layout: page
title: Project title: Project
description: a project with a background image description: a project with a background image
img: /assets/img/12.jpg img: /assets/img/12.jpg

6
_projects/6_project.markdown
View File

@ -1,6 +1,6 @@
--- ---
layout: post layout: page
title: Project title: Project 6
description: a project with no image description: a project with no image
img: img:
--- ---
@ -10,7 +10,7 @@ Every project has a beautiful feature shocase page. It's easy to include images,
To give your project a background in the portfolio page, just add the img tag to the front matter like so: To give your project a background in the portfolio page, just add the img tag to the front matter like so:
--- ---
layout: post layout: page
title: Project title: Project
description: a project with a background image description: a project with a background image
img: /assets/img/12.jpg img: /assets/img/12.jpg

2
_sass/_base.scss
View File

@ -6,7 +6,7 @@ html, body {
} }
img { img {
max-width: 100%; max-width: none;
} }
em img { em img {

7
_sass/_code.scss
View File

@ -10,7 +10,12 @@ code {
} }
code { code {
color: $text-color; color: $code-color;
font-size: 85%;
padding-bottom: 0.1em;
padding-left: 0.2em;
padding-right: 0.2em;
padding-top: 0.1em;
} }
pre { pre {

1
_sass/_media-queries.scss
View File

@ -27,7 +27,6 @@
.site-header .site-nav { .site-header .site-nav {
float: right; float: right;
margin-top: .25rem;
} }
blockquote { blockquote {

1
_sass/_profile.scss
View File

@ -17,6 +17,7 @@
padding-top: 20px; padding-top: 20px;
h2 { h2 {
font-weight: bold;
margin-top: 0; margin-top: 0;
margin-bottom: 10px; margin-bottom: 10px;
} }

82
_sass/_projects.scss
View File

@ -5,37 +5,53 @@
padding: 10px; padding: 10px;
vertical-align: middle; vertical-align: middle;
width: 33.33%; width: 33.33%;
}
.thumbnail { .thumbnail {
overflow: hidden; overflow: hidden;
height: 230px; height: 200px;
width: 100%; width: 100%;
}
.thumbnail img{ img {
height: auto; height: auto;
position: relative; position: relative;
left: -25%; left: -25%;
top: -5%; top: -5%;
width: 500px; width: 500px;
} }
.thumbnail a{
float: left; a {
height: 230px; float: left;
position: relative; height: 230px;
width: 100%; position: relative;
} width: 100%;
.thumbnail a span {
display: none; span {
position: absolute; display: none;
top: 0; position: absolute;
left: 0; top: 0;
bottom: 0; left: 0;
right: 0; bottom: 0;
background: rgba(0,0,0,0.4); right: 0;
color: $grey-color-light; background: rgba(0,0,0,0.4);
padding: 40px; color: $grey-color-light;
text-align: center; padding: 40px;
} text-align: center;
.thumbnail a:hover span {
display: block; h1 {
font-size: 1.5rem;
margin: 0;
}
p {
color: $grey-color-light;
}
}
&:hover {
span {
display: block;
}
}
}
}
} }

1
_sass/_variables.scss
View File

@ -70,6 +70,7 @@ $darken-3: rgba(#000,.25) !default;
$darken-4: rgba(#000,.5) !default; $darken-4: rgba(#000,.5) !default;
$theme-color: $purple; $theme-color: $purple;
$code-color: $dark-gray;
$text-color: $mid-gray; $text-color: $mid-gray;
$background-color: white; $background-color: white;