From 9578a7eff7bbd5880c8b02b5762684cccfc8d7f0 Mon Sep 17 00:00:00 2001 From: Jake Howard Date: Thu, 12 Nov 2015 18:20:42 +0000 Subject: [PATCH] Externalised homepage styles --- static/src/less/homepage.less | 125 ++++++++++++++++++++++++++++++++ static/src/less/style.less | 130 +--------------------------------- 2 files changed, 127 insertions(+), 128 deletions(-) create mode 100644 static/src/less/homepage.less diff --git a/static/src/less/homepage.less b/static/src/less/homepage.less new file mode 100644 index 0000000..9d9670b --- /dev/null +++ b/static/src/less/homepage.less @@ -0,0 +1,125 @@ +.index { + #header { + height: 100vh; + background: #232323; + background-size: cover; + background-position: fixed; + .jumbotron { + margin-top: 5vh; + text-align: center; + background-color: transparent; + color: white; + padding-bottom: 0; + margin-bottom: 0; + h1 { + margin-bottom: 15px; + } + .icon { + cursor: pointer; + .transition(color 0.4s); + &:hover { + color: #ff7f00; + } + } + } + } + #intro-text { + background-color: #333; + .container { + text-align: center; + margin-top: 35px; + margin-bottom: 35px; + color: white; + font-size: 17px; + } + } + + + #project-images { + background: url(http://catesmechanical.com/images/blueprint-background1.jpg); + background-size: cover; + .container { + text-align: center; + margin-top: 20px; + margin-bottom: 35px; + font-size: 16px; + h1 { + margin-top: 0; + color: white; + font-size: 40px; + } + @media screen and (max-width: @screen-xs-max) { + .wrapper, + .wrapper .project { + height: 275px; + width: 275px; + } + } + + @media screen and (min-width: @screen-sm-min) { + .wrapper, + .wrapper .project { + height: 200px; + width: 200px; + } + } + @media screen and (min-width: @screen-md-min) { + .wrapper, + .wrapper .project { + height: 280px; + width: 280px; + } + } + & > div { + margin: 10px 0; + } + + .wrapper { + color: white; + margin: 0 auto; + cursor: pointer; + background-size: cover; + background-position: center; + .box-shadow(0px 4px 5px 2px rgba(0,0,0,0.7)); + + &:hover .project { + opacity: 1; + } + + &.college { + background-image: url(http://cdn.ttgtmedia.com/rms/computerweekly/39826_college-of-richard-collyer.gif); + } + &.personal { + background-image: url(http://www.inzeed.com/kaleidoscope/wp-content/uploads/2014/11/stock-footage-computer-code-background1.jpg); + } + &.work { + background-image: url(http://www.recommendedagencies.com/images/logos/dabapps-logo-1432733278.jpg); + } + + & .project { + padding: 15px; + .transition(~"opacity 0.5s ease-in"); + opacity: 0; + background-color: rgba(0,0,0,0.6); + + p, a.btn { + font-size: 12px; + } + h4 { + font-size: 23px; + } + } + } + } + } + #twitter-feed { + height: 75vh; + text-align: center; + .twitter-icon { + & > div{ + height: 200px; + width: 200px; + } + } + } +} \ No newline at end of file diff --git a/static/src/less/style.less b/static/src/less/style.less index f41688a..cd9587e 100644 --- a/static/src/less/style.less +++ b/static/src/less/style.less @@ -4,6 +4,8 @@ // @import url(https://fonts.googleapis.com/css?family=Roboto:400,300,400italic,700); @import (inline) "node_modules/animate.css/animate.css"; @import (inline) "node_modules/normalize.css/normalize.css"; +@import 'homepage'; + /* @group Mixins */ .transition(@value) { @@ -49,131 +51,3 @@ a.no-color-change { } } /* @end Global */ - -/* @group Homepage */ -.index { - #header { - height: 100vh; - background: #232323; - background-size: cover; - background-position: fixed; - .jumbotron { - margin-top: 5vh; - text-align: center; - background-color: transparent; - color: white; - padding-bottom: 0; - margin-bottom: 0; - h1 { - margin-bottom: 15px; - } - .icon { - cursor: pointer; - .transition(color 0.4s); - &:hover { - color: #ff7f00; - } - } - } - } - #intro-text { - background-color: #333; - .container { - text-align: center; - margin-top: 35px; - margin-bottom: 35px; - color: white; - font-size: 17px; - } - } - - - #project-images { - background: url(http://catesmechanical.com/images/blueprint-background1.jpg); - background-size: cover; - .container { - text-align: center; - margin-top: 20px; - margin-bottom: 35px; - font-size: 16px; - h1 { - margin-top: 0; - color: white; - font-size: 40px; - } - @media screen and (max-width: @screen-xs-max) { - .wrapper, - .wrapper .project { - height: 275px; - width: 275px; - } - } - - @media screen and (min-width: @screen-sm-min) { - .wrapper, - .wrapper .project { - height: 200px; - width: 200px; - } - } - @media screen and (min-width: @screen-md-min) { - .wrapper, - .wrapper .project { - height: 280px; - width: 280px; - } - } - & > div { - margin: 10px 0; - } - - .wrapper { - color: white; - margin: 0 auto; - cursor: pointer; - background-size: cover; - background-position: center; - .box-shadow(0px 4px 5px 2px rgba(0,0,0,0.7)); - - &:hover .project { - opacity: 1; - } - - &.college { - background-image: url(http://cdn.ttgtmedia.com/rms/computerweekly/39826_college-of-richard-collyer.gif); - } - &.personal { - background-image: url(http://www.inzeed.com/kaleidoscope/wp-content/uploads/2014/11/stock-footage-computer-code-background1.jpg); - } - &.work { - background-image: url(http://www.recommendedagencies.com/images/logos/dabapps-logo-1432733278.jpg); - } - - & .project { - padding: 15px; - .transition(~"opacity 0.5s ease-in"); - opacity: 0; - background-color: rgba(0,0,0,0.6); - - p, a.btn { - font-size: 12px; - } - h4 { - font-size: 23px; - } - } - } - } - } - #twitter-feed { - height: 75vh; - text-align: center; - .twitter-icon { - & > div{ - height: 200px; - width: 200px; - } - } - } -} -/* @end Homepage*/ \ No newline at end of file