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;
}

7
public/styles/index.scss
View File

@ -22,6 +22,8 @@
@import './tools/_responsive.scss';
@import './tools/_transform.scss';
@import './tools/_mixin.absolute-centering.scss';
//Resets
@import './../../node_modules/normalize.css/normalize.css';
@ -35,17 +37,22 @@
@import './elements/_table.scss';
//Objects
@import './objects/_button.scss';
//Components
@import './components/_app.scss';
@import './components/_footer.scss';
@import './components/_form.scss';
@import './components/_header.scss';
@import './components/_menu.scss';
@import './components/_navbar.scss';
@import './components/_page.scss';
@import './components/_page--style-contact.scss';
@import './components/_section.scss';
@import './components/_section--style-blank-promo.scss';
@import './components/_section--style-body.scss';
@import './components/_section--style-poly.scss';
@import './components/_section--style-three.scss';
//Utilities

35
public/styles/objects/_button.scss Normal file
View File

@ -0,0 +1,35 @@
/*
* Form
* Styles for form elements
*
* Dependencies:
*
* Version:
* 1.0.0 - 2018/03/07
*/
$c-button--shadow-offset: 5px;
$c-button--background: white;
$c-button--border: $s-color--border--default;
$c-button--text: $s-color--text;
.o-button {
display: inline-block;
padding: 0.5em 1em;
border: $c-button--border;
@include t-box-shadow(-$c-button--shadow-offset, $c-button--shadow-offset, 0px, rgba(0, 0, 0, 0.5));
background: $c-button--background;
text-decoration: none;
color: $c-button--text;
transition: all 0.1s $s-animation--ease-out-curve;
&:hover {
text-decoration: none;
color: $c-button--text;
@include t-box-shadow(-0, 0, 0px, rgba(0, 0, 0, 0.5));
@include t-transform(translate(-$c-button--shadow-offset, $c-button--shadow-offset))
}
~ .o-button {
margin-left: $c-button--shadow-offset * 2;
}
}

8
public/styles/settings/colors.scss
View File

@ -11,12 +11,14 @@
//Fonts
$s-color--text: black;
$s-color--links: #FC78DE;
$s-color--links-hover: lighten($s-color--links, 20%);
$s-color--links-hover: $s-color--links;
//Backgrounds
$s-color--background-default: white;
$s-color--background-default: #FEFCF8;
$s-color--background-top: #2BF;
$s-color--background-bottom: #FCF;
//Borders
$s-border--default: 1px solid #DDD;
$s-thickness--border-default: 1px;
$s-thickness--border-thick: 3px;
$s-color--border--default: $s-thickness--border-default solid #DDD;

40
public/styles/tools/_mixin.absolute-centering.scss Normal file
View File

@ -0,0 +1,40 @@
/*
* Absolute Position Centering
* Provides mixins to center using absolute positioning and transforms
*
* Dependencies:
* tools/_mixin.transform.scss
*
* Version:
* 1.0.0 - 2018/01/29
*/
@mixin t-absolute-center-x-y() {
position: absolute;
left: 50%;
top: 50%;
@include t-translate(-50%, -50%);
}
@mixin t-absolute-center-x() {
position: absolute;
left: 50%;
@include t-translate-x(-50%);
}
@mixin t-absolute-center-y() {
position: absolute;
top: 50%;
@include t-translate-y(-50%);
}
%t-absolute-center-x-y {
@include t-absolute-center-x-y();
}
%t-absolute-center-x {
@include t-absolute-center-x();
}
%t-absolute-center-y {
@include t-absolute-center-y();
}