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

Update, built Contact Page

Browse Source
This commit is contained in:
Dominic Masters
2018-03-10 21:26:44 +11:00
parent ceb48e104c
commit c24c29c899
33 changed files with 1041 additions and 134 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
public/styles/components/_app.scss
View File

@ -14,6 +14,7 @@
.c-app {
width: 100%;
height: 100%;
min-height: 100vh;
overflow-x: hidden;
position: relative;
}

12
public/styles/components/_footer.scss
View File

@ -10,15 +10,21 @@
* Version:
* 1.0.0 - 2018/03/03
*/
$c-footer--text-color: black;
$c-footer--background-color: white;
$c-footer--text-color: $s-color--text;
$c-footer--background-color: $s-color--background-default;
.c-footer__ghost {
margin-top: 5em;
min-height: 3em;
}
.c-footer {
margin-top: 5em;
width: 100%;
background: $c-footer--background-color;
@extend %t-flexbox;
@include t-flex-wrap(wrap);
position: absolute;
bottom: 0;
}
.c-footer__copyright {

35
public/styles/components/_form.scss Normal file
View File

@ -0,0 +1,35 @@
/*
* Form
* Styles for form elements
*
* Dependencies:
*
* Version:
* 1.0.0 - 2018/03/07
*/;
$c-form--shadow-offset: 5px;
.c-form {
}
.c-form__label {
display: block;
padding-bottom: 0.25em;
}
.c-form__group {
margin-bottom: 1.5em;
}
//Form input
.c-form-input {
width: 400px;
max-width: 100%;
border: $s-color--border--default;
padding: 0.5em;
@include t-box-shadow(-$c-form--shadow-offset, $c-form--shadow-offset, 0px, rgba(0, 0, 0, 0.5));
}
.c-form-input--multiline {
min-height: 10em;
}

107
public/styles/components/_menu.scss
View File

@ -3,10 +3,113 @@
* Styles for the menu
*
* Dependencies:
* styles/settings/animation.scss
* styles/settings/responsive.scss
* styles/tools/_mixin.absolute-centering.scss
*
* Version:
* 1.0.0 - 2018/03/01
* 1.0.0 - 2018/03/04
*/
.c-menu {
$c-menu--z-index: 1000;
$c-menu--button--z-index: $c-menu--z-index + 10;
$c-menu--list--z-index: $c-menu--z-index + 20;
body.is-menu-open {
overflow: hidden;
}
.c-menu__wrapper {
position: relative;
}
.c-menu__button {
font-size: 1.5em;
padding: 0.5em 0.75em;
position: relative;
z-index: $c-menu--button--z-index;
}
.c-menu {
position: absolute;
top: 50%;
left: 50%;
border-left: 1px solid red;
}
.c-menu__fix {
position: relative;
}
.c-menu__container {
@extend %t-absolute-center-x-y;
width: 0px;
height: 0px;
border-radius: 50%;
z-index: $c-menu--z-index;
background: white;
overflow: hidden;
transition:
width 0.2s $s-animation--ease-out-curve,
height 0.2s $s-animation--ease-out-curve,
;
&.open {
width: 250vmax;
height: 250vmax;
}
}
.c-menu__body {
position: absolute;
top: 50%;
left: 50%;
z-index: $c-menu--list--z-index;
}
.c-menu__groups {
@extend %t-flexbox;
@include t-flex-wrap(wrap);
/*position: absolute;
left: 2em;
top: -1.5em;*/
top: 0l;
width: 100vw;
height: 100vh;
position: fixed;
overflow-y: auto;
}
.c-menu__group {
padding: 1em;
width: 100%;
}
.c-menu__group-title {
}
.c-menu__item {
display: block;
}
@include t-media-query($s-xsmall-up) {
.c-menu__button {
padding: 0.75em 1em;
}
.c-menu__group {
width: 50%;
}
}
@include t-media-query($s-medium-up) {
.c-menu__group {
width: (100% / 3);
}
}
@include t-media-query($s-large-up) {
.c-menu__group {
width: 25%;
}
}

35
public/styles/components/_navbar.scss
View File

@ -14,8 +14,7 @@
* 1.0.0 - 2018/02/23
*/
$c-navbar--z-index: 100;
$c-navbar--link-border: $s-border--default;
$c-navbar--background: white;
$c-navbar--background: $s-color--background-default;
$c-navbar--link-offset: 5px;
.c-navbar {
@ -29,12 +28,6 @@ $c-navbar--link-offset: 5px;
@extend %t-flexbox;
}
//Menu Button
.c-navbar__menu-button {
font-size: 1.5em;
padding: 0.5em 0.75em;
}
//Logo
.c-navbar__logo-container {
@include t-align-self(center);
@ -51,27 +44,26 @@ $c-navbar--link-offset: 5px;
width: 100%;
text-align: right;
display: none;
@include t-justify-content(flex-end);
}
.c-navbar__link {
@extend %s-font--navigation;
height: 100%;
font-size: 1.2em;
padding: 0 1.5em;
display: inline-table;
@extend %t-inline-flex;
@include t-align-items(center);
&.active {
border-bottom: $s-thickness--border-thick solid $s-color--links;
}
}
.c-navbar__link-text {
display: table-cell;
vertical-align: middle;
}
//Responsive queries
@include t-media-query($s-xsmall-up) {
.c-navbar__menu-button {
font-size: 2em;
}
//vertical-align: middle;
}
@include t-media-query($s-small-up) {
@ -83,12 +75,11 @@ $c-navbar--link-offset: 5px;
}
.c-navbar__links {
displaY: block;
@include t-flexbox;
}
.c-navbar__link {
background: white;
background: $s-color--background-default;
transition: all 0.2s $s-animation--ease-out-curve;
margin-left: $c-navbar--link-offset;
@include t-translate(0em, 0em);

32
public/styles/components/_page--style-contact.scss Normal file
View File

@ -0,0 +1,32 @@
/*
* Contact Page
* Styles for page elements
*
* Dependencies:
* styles/settings/responsive.scss
* styles/tools/_repsonsive.scss
* styles/tools/_flex.scss
* styles/components/_style.scss
*
* Version:
* 1.0.0 - 2018/03/10
*/
.c-page--style-contact {
}
.c-page--style-container__split {
@extend %t-flexbox;
@include t-flex-wrap(wrap);
}
.c-page--style-container__split-part {
width: 100%;
}
@include t-media-query($s-small-up) {
.c-page--style-container__split {
@include t-flex-wrap(nowrap);
}
}

12
public/styles/components/_section--style-blank-promo.scss Normal file
View File

@ -0,0 +1,12 @@
/*
* Blank Promo Section Style
* Styles for blank promo style section
*
* Dependencies:
*
* Version:
* 1.0.0 - 2018/02/28
*/
.c-section--style-blank-promo {
height: 30vmin;
}

1
public/styles/components/_section--style-body.scss
View File

@ -18,6 +18,7 @@
@include t-media-query($s-small-up) {
.c-section--style-body {
margin-left: 4%;
width: 96%;
@include t-box-shadow(-10px, 10px, 0px, rgba(0, 0, 0, 0.5));
}
}

15
public/styles/components/_section--style-poly.scss
View File

@ -8,18 +8,3 @@
* Version:
* 1.0.0 - 2018/02/28
*/
.c-section--style-poly {
height: 60vmin;
position: relative;
z-index: -1;
overflow-y: visible;
}
.c-section--style-poly__canvas {
width: 100%;
height: 100%;
height: 80vmin;
top: 0;
left: 0;
position: absolute;
}

25
public/styles/components/_section--style-three.scss Normal file
View File

@ -0,0 +1,25 @@
/*
* Section Style Three
* Styles for Three JS section elements
*
* Dependencies:
* styles/components/_section.scss
*
* Version:
* 1.0.0 - 2018/02/28
*/
.c-section--style-three {
height: 60vmin;
position: relative;
z-index: -1;
overflow-y: visible;
}
.c-section--style-three__canvas {
width: 100%;
height: 100%;
height: 80vmin;
top: 0;
left: 0;
position: absolute;
}