YourWishes/domsPlace
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Moved About Page to homepage. Site is ready?

Browse Source
This commit is contained in:
Dominic Masters
2018-07-09 21:24:15 +10:00
parent 3275a4ebd3
commit 2d651160bd
18 changed files with 209 additions and 241 deletions
Download Patch File Download Diff File Expand all files Collapse all files

104
public/styles/pages/_about-page.scss
View File

@ -1,104 +0,0 @@
/*
* About Page
* Styles for the About Page, a simple page outlining some info about me.
*
* Dependencies:
* styles/settings/responsive.scss
* styles/tools/_flex.scss
* styles/tools/_responsive.scss
*
* Version:
* 1.0.0 - 2018/06/06
*/
.p-about-page {
&__promo {
padding: 6em 0;
background-size: 150% auto;
&-video {
background-image: url('./../images/patterns/florida.svg');
@extend %t-dp--shadow-3d;
}
&-programming {
background-image: url('./../images/patterns/rhythm-heaven.svg');
@extend %t-dp--shadow-3d;
}
&-platforms {
background-image: url('./../images/patterns/game-show.svg');
@extend %t-dp--shadow-3d;
}
&-work {
background-image: url('./../images/patterns/arcade.svg');
@extend %t-dp--shadow-3d;
}
}
&__brands {
@extend %t-flexbox;
@include t-align-items(stretch);
@include t-justify-content(space-between);
@include t-flex-wrap(wrap);
&-title {
}
&-brand {
width: 50%;
}
&-image {
display: block;
margin: 0 auto;
width: 100%;
height: 100%;
max-width: 5em;
max-height: 5em;
object-fit: contain;
object-position: center;
transition: all 0.2s $s-animation--ease-out;
}
&-link {
padding: 1em;
display: block;
height: 100%;
&:hover .p-about-page__brands-image {
@include t-rotate(10deg);
}
}
&-title { }
}
&__work-link,&__work-link-image {
display: block;
}
/* Media Queries */
@include t-media-query($s-xsmall-up) {
&__brands {
&-brand {
width: 25%;
}
}
}
@include t-media-query($s-small-up) {
&__brands {
&-link {
padding: 2em;
}
&-image {
max-width: 7em;
max-height: 6em;
}
}
}
}

101
public/styles/pages/_home-page.scss
View File

@ -1,19 +1,104 @@
/*
* Home Page
* Styles that are homepage specific.
* Styles for the Home Page, a simple page outlining some info about me.
*
* Dependencies:
*
* styles/settings/responsive.scss
* styles/tools/_flex.scss
* styles/tools/_responsive.scss
*
* Version:
* 1.0.0 - 2018/05/11
* 1.0.0 - 2018/06/06
*/
.p-home-page {
&__video-content {
padding: 1em 4em;
background: rgba(0, 0, 0, 0.75);
color: white;
&__promo {
padding: 6em 0;
background-size: 150% auto;
&-video {
background-image: url('./../images/patterns/florida.svg');
@extend %t-dp--shadow-3d;
}
&-programming {
background-image: url('./../images/patterns/rhythm-heaven.svg');
@extend %t-dp--shadow-3d;
}
&-platforms {
background-image: url('./../images/patterns/game-show.svg');
@extend %t-dp--shadow-3d;
}
&-work {
background-image: url('./../images/patterns/arcade.svg');
@extend %t-dp--shadow-3d;
}
}
&__brands {
@extend %t-flexbox;
@include t-align-items(stretch);
@include t-justify-content(space-between);
@include t-flex-wrap(wrap);
&-title {
}
&-brand {
width: 50%;
}
&-image {
display: block;
margin: 0 auto;
width: 100%;
height: 100%;
max-width: 5em;
max-height: 5em;
object-fit: contain;
object-position: center;
transition: all 0.2s $s-animation--ease-out;
}
&-link {
padding: 1em;
display: block;
height: 100%;
&:hover .p-about-page__brands-image {
@include t-rotate(10deg);
}
}
&-title { }
}
&__work-link,&__work-link-image {
display: block;
}
/* Media Queries */
@include t-media-query($s-xsmall-up) {
&__brands {
&-brand {
width: 25%;
}
}
}
@include t-media-query($s-small-up) {
&__brands {
&-link {
padding: 2em;
}
&-image {
max-width: 7em;
max-height: 6em;
}
}
}
}