From 1e189ff81cbac64e376d90bad44a2a67365a170f Mon Sep 17 00:00:00 2001 From: Maruan Al-Shedivat Date: Sat, 27 May 2017 12:47:48 -0700 Subject: [PATCH] Project page style fixes --- _includes/header.html | 2 +- _projects/1_project.markdown | 6 +-- _projects/2_project.markdown | 6 +-- _projects/3_project.markdown | 6 +-- _projects/4_project.markdown | 6 +-- _projects/5_project.markdown | 6 +-- _projects/6_project.markdown | 6 +-- _sass/_base.scss | 2 +- _sass/_code.scss | 7 ++- _sass/_media-queries.scss | 1 - _sass/_profile.scss | 1 + _sass/_projects.scss | 82 +++++++++++++++++++++--------------- _sass/_variables.scss | 1 + 13 files changed, 77 insertions(+), 55 deletions(-) diff --git a/_includes/header.html b/_includes/header.html index 7992ffd..3897da5 100644 --- a/_includes/header.html +++ b/_includes/header.html @@ -26,7 +26,7 @@ {% endfor %} - vitae + diff --git a/_projects/1_project.markdown b/_projects/1_project.markdown index 8864d09..bc0c718 100644 --- a/_projects/1_project.markdown +++ b/_projects/1_project.markdown @@ -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 diff --git a/_projects/2_project.markdown b/_projects/2_project.markdown index 20acfe9..cd75394 100644 --- a/_projects/2_project.markdown +++ b/_projects/2_project.markdown @@ -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 diff --git a/_projects/3_project.markdown b/_projects/3_project.markdown index 440510e..240ac9b 100644 --- a/_projects/3_project.markdown +++ b/_projects/3_project.markdown @@ -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 diff --git a/_projects/4_project.markdown b/_projects/4_project.markdown index cd56bfd..e847e19 100644 --- a/_projects/4_project.markdown +++ b/_projects/4_project.markdown @@ -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 diff --git a/_projects/5_project.markdown b/_projects/5_project.markdown index 5173c03..2d6be14 100644 --- a/_projects/5_project.markdown +++ b/_projects/5_project.markdown @@ -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 diff --git a/_projects/6_project.markdown b/_projects/6_project.markdown index a4d6119..24ebf67 100644 --- a/_projects/6_project.markdown +++ b/_projects/6_project.markdown @@ -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 diff --git a/_sass/_base.scss b/_sass/_base.scss index 939d41d..2447ee0 100644 --- a/_sass/_base.scss +++ b/_sass/_base.scss @@ -6,7 +6,7 @@ html, body { } img { - max-width: 100%; + max-width: none; } em img { diff --git a/_sass/_code.scss b/_sass/_code.scss index f26c13d..3a20882 100644 --- a/_sass/_code.scss +++ b/_sass/_code.scss @@ -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 { diff --git a/_sass/_media-queries.scss b/_sass/_media-queries.scss index 83ff04c..fae069b 100644 --- a/_sass/_media-queries.scss +++ b/_sass/_media-queries.scss @@ -27,7 +27,6 @@ .site-header .site-nav { float: right; - margin-top: .25rem; } blockquote { diff --git a/_sass/_profile.scss b/_sass/_profile.scss index 8e12dae..27d9848 100644 --- a/_sass/_profile.scss +++ b/_sass/_profile.scss @@ -17,6 +17,7 @@ padding-top: 20px; h2 { + font-weight: bold; margin-top: 0; margin-bottom: 10px; } diff --git a/_sass/_projects.scss b/_sass/_projects.scss index 2713d2e..21d1edf 100644 --- a/_sass/_projects.scss +++ b/_sass/_projects.scss @@ -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; + } + } + } + } } diff --git a/_sass/_variables.scss b/_sass/_variables.scss index 1c152e1..ca63022 100644 --- a/_sass/_variables.scss +++ b/_sass/_variables.scss @@ -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;