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 url(https://fonts.googleapis.com/css?family=Roboto:400,300,400italic,700);
|
||||||
@import (inline) "node_modules/animate.css/animate.css";
|
@import (inline) "node_modules/animate.css/animate.css";
|
||||||
@import (inline) "node_modules/normalize.css/normalize.css";
|
@import (inline) "node_modules/normalize.css/normalize.css";
|
||||||
|
@import 'homepage';
|
||||||
|
|
||||||
|
|
||||||
/* @group Mixins */
|
/* @group Mixins */
|
||||||
.transition(@value) {
|
.transition(@value) {
|
||||||
|
|
@ -49,131 +51,3 @@ a.no-color-change {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
/* @end Global */
|
/* @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