florent/pages
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Project page style fixes

Browse Source
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 %}
<!-- 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>
</nav>

6
_projects/1_project.markdown
View File

@ -1,6 +1,6 @@
---
layout: post
title: Project
layout: page
title: Project 1
description: a project with a background image
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:
---
layout: post
layout: page
title: Project
description: a project with a background image
img: /assets/img/12.jpg

6
_projects/2_project.markdown
View File

@ -1,6 +1,6 @@
---
layout: post
title: Project
layout: page
title: Project 2
description: a project with a background image
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:
---
layout: post
layout: page
title: Project
description: a project with a background image
img: /assets/img/12.jpg

6
_projects/3_project.markdown
View File

@ -1,6 +1,6 @@
---
layout: post
title: Project
layout: page
title: Project 3
description: a project that redirects to another website
img:
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:
---
layout: post
layout: page
title: Project
description: a project with a background image
img: /assets/img/12.jpg

6
_projects/4_project.markdown
View File

@ -1,6 +1,6 @@
---
layout: post
title: Project
layout: page
title: Project 4
description: another without an image
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:
---
layout: post
layout: page
title: Project
description: a project with a background image
img: /assets/img/12.jpg

6
_projects/5_project.markdown
View File

@ -1,6 +1,6 @@
---
layout: post
title: Project
layout: page
title: Project 5
description: a project with a background image
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:
---
layout: post
layout: page
title: Project
description: a project with a background image
img: /assets/img/12.jpg

6
_projects/6_project.markdown
View File

@ -1,6 +1,6 @@
---
layout: post
title: Project
layout: page
title: Project 6
description: a project with no image
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:
---
layout: post
layout: page
title: Project
description: a project with a background image
img: /assets/img/12.jpg

2
_sass/_base.scss
View File

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

7
_sass/_code.scss
View File

@ -10,7 +10,12 @@ 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 {

1
_sass/_media-queries.scss
View File

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

1
_sass/_profile.scss
View File

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

82
_sass/_projects.scss
View File

@ -5,37 +5,53 @@
padding: 10px;
vertical-align: middle;
width: 33.33%;
}
.thumbnail {
overflow: hidden;
height: 230px;
width: 100%;
}
.thumbnail img{
height: auto;
position: relative;
left: -25%;
top: -5%;
width: 500px;
}
.thumbnail a{
float: left;
height: 230px;
position: relative;
width: 100%;
}
.thumbnail a span {
display: none;
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
background: rgba(0,0,0,0.4);
color: $grey-color-light;
padding: 40px;
text-align: center;
}
.thumbnail a:hover span {
display: block;
.thumbnail {
overflow: hidden;
height: 200px;
width: 100%;
img {
height: auto;
position: relative;
left: -25%;
top: -5%;
width: 500px;
}
a {
float: left;
height: 230px;
position: relative;
width: 100%;
span {
display: none;
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
background: rgba(0,0,0,0.4);
color: $grey-color-light;
padding: 40px;
text-align: center;
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;
$theme-color: $purple;
$code-color: $dark-gray;
$text-color: $mid-gray;
$background-color: white;