Externalised homepage styles
This commit is contained in:
Jake Howard
parent
dbabb4aee7
commit
9578a7eff7
2 changed files with 127 additions and 128 deletions
125
static/src/less/homepage.less
Normal file
125
static/src/less/homepage.less
Normal file
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -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*/
|
||||
Reference in a new issue