Made the landing page
* Unneeded demo files where removed
* Content was added
* I changed things to make the site work without javascript
* It still uses javascript, but disabeling javascript made it that text wasn't shown, this isn't the case any more
* I just removed the class from the body element
* When opening the site it has a weird "jump" effect instead of comming up. This could be better, but is good enough for now
* I only removed the class in the html, not from the css or javascript
* This should also be done, but feels like too much work for now
* Images didn't properly fit any more when javascript was disabled. This has been fixed with css and there is no distinction anymore between js and non-js
* This probably means that there is javascript or something that should be removed. I didn't do that
* The "Our Services" section had three shades for the children, but then fell back on the first shade for other sections. It now uses two shades, one for odd children and one for even children
This commit is contained in:
Ilja
38
original/assets/sass/layout/_footer.scss
Normal file
38
original/assets/sass/layout/_footer.scss
Normal file
@@ -0,0 +1,38 @@
|
||||
///
|
||||
/// Hyperspace by HTML5 UP
|
||||
/// html5up.net | @ajlkn
|
||||
/// Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
|
||||
///
|
||||
|
||||
/* Footer */
|
||||
|
||||
#footer {
|
||||
#sidebar + #wrapper + & {
|
||||
margin-left: _size(sidebar-width);
|
||||
|
||||
@include breakpoint('<=large') {
|
||||
margin-left: 0;
|
||||
}
|
||||
}
|
||||
|
||||
> .inner {
|
||||
a {
|
||||
border-bottom-color: _palette(border);
|
||||
|
||||
&:hover {
|
||||
border-bottom-color: transparent;
|
||||
}
|
||||
}
|
||||
|
||||
.menu {
|
||||
font-size: 0.8em;
|
||||
color: _palette(border);
|
||||
}
|
||||
}
|
||||
|
||||
#header + #wrapper + & {
|
||||
> .inner {
|
||||
margin: 0 auto;
|
||||
}
|
||||
}
|
||||
}
|
||||
92
original/assets/sass/layout/_header.scss
Normal file
92
original/assets/sass/layout/_header.scss
Normal file
@@ -0,0 +1,92 @@
|
||||
///
|
||||
/// Hyperspace by HTML5 UP
|
||||
/// html5up.net | @ajlkn
|
||||
/// Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
|
||||
///
|
||||
|
||||
/* Header */
|
||||
|
||||
#header {
|
||||
@include vendor('display', 'flex');
|
||||
background-color: _palette(accent1);
|
||||
cursor: default;
|
||||
padding: 1.75em 2em;
|
||||
|
||||
> .title {
|
||||
border: 0;
|
||||
color: _palette(fg-bold);
|
||||
display: block;
|
||||
font-size: 1.25em;
|
||||
font-weight: _font(weight-bold);
|
||||
}
|
||||
|
||||
> nav {
|
||||
@include vendor('flex', '1');
|
||||
text-align: right;
|
||||
|
||||
> ul {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
|
||||
> li {
|
||||
display: inline-block;
|
||||
margin-left: 1.75em;
|
||||
padding: 0;
|
||||
vertical-align: middle;
|
||||
|
||||
&:first-child {
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
a {
|
||||
border: 0;
|
||||
color: _palette(fg-light);
|
||||
display: inline-block;
|
||||
font-size: 0.6em;
|
||||
font-weight: _font(weight-bold);
|
||||
letter-spacing: _font(kerning-alt);
|
||||
text-transform: uppercase;
|
||||
|
||||
&:hover {
|
||||
color: _palette(fg);
|
||||
}
|
||||
|
||||
&.active {
|
||||
color: _palette(fg-bold);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@include breakpoint('<=small') {
|
||||
padding: 1em 2em;
|
||||
}
|
||||
|
||||
@include breakpoint('<=xsmall') {
|
||||
display: block;
|
||||
padding: 0 2em;
|
||||
text-align: left;
|
||||
|
||||
.title {
|
||||
font-size: 1.25em;
|
||||
padding: 1em 0;
|
||||
}
|
||||
|
||||
> nav {
|
||||
border-top: solid 1px _palette(border);
|
||||
text-align: inherit;
|
||||
|
||||
> ul {
|
||||
> li {
|
||||
margin-left: 1.5em;
|
||||
|
||||
a {
|
||||
height: 6em;
|
||||
line-height: 6em;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
33
original/assets/sass/layout/_intro.scss
Normal file
33
original/assets/sass/layout/_intro.scss
Normal file
@@ -0,0 +1,33 @@
|
||||
///
|
||||
/// Hyperspace by HTML5 UP
|
||||
/// html5up.net | @ajlkn
|
||||
/// Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
|
||||
///
|
||||
|
||||
/* Intro */
|
||||
|
||||
#intro {
|
||||
background-attachment: fixed;
|
||||
background-image: url('images/intro.svg');
|
||||
background-position: top right;
|
||||
background-repeat: no-repeat;
|
||||
background-size: 100% 100%;
|
||||
|
||||
p {
|
||||
font-size: 1.25em;
|
||||
|
||||
@include breakpoint('<=medium') {
|
||||
br {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
@include breakpoint('<=small') {
|
||||
font-size: 1em;
|
||||
}
|
||||
}
|
||||
|
||||
@include breakpoint('<=large') {
|
||||
background-attachment: scroll;
|
||||
}
|
||||
}
|
||||
185
original/assets/sass/layout/_sidebar.scss
Normal file
185
original/assets/sass/layout/_sidebar.scss
Normal file
@@ -0,0 +1,185 @@
|
||||
///
|
||||
/// Hyperspace by HTML5 UP
|
||||
/// html5up.net | @ajlkn
|
||||
/// Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
|
||||
///
|
||||
|
||||
/* Sidebar */
|
||||
|
||||
#sidebar {
|
||||
@include padding(2.5em, 2.5em);
|
||||
background: _palette(bg);
|
||||
cursor: default;
|
||||
height: 100vh;
|
||||
left: 0;
|
||||
overflow-x: hidden;
|
||||
overflow-y: auto;
|
||||
position: fixed;
|
||||
text-align: right;
|
||||
top: 0;
|
||||
width: _size(sidebar-width);
|
||||
z-index: _misc(z-index-base);
|
||||
|
||||
> .inner {
|
||||
@include vendor('display', 'flex');
|
||||
@include vendor('flex-direction', 'column');
|
||||
@include vendor('justify-content', 'center');
|
||||
@include vendor('transform', 'translateY(0)');
|
||||
@include vendor('transition', (
|
||||
'opacity #{_duration(activation)} ease',
|
||||
));
|
||||
min-height: 100%;
|
||||
opacity: 1;
|
||||
width: 100%;
|
||||
|
||||
body.is-ie & {
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
nav {
|
||||
> ul {
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
|
||||
> li {
|
||||
@include vendor('transform', 'translateY(0)');
|
||||
@include vendor('transition', (
|
||||
'opacity #{_duration(activation) * 0.15} ease',
|
||||
'transform #{_duration(activation) * 0.75} ease'
|
||||
));
|
||||
margin: 1.5em 0 0 0;
|
||||
opacity: 1;
|
||||
padding: 0;
|
||||
position: relative;
|
||||
|
||||
&:first-child {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
@for $i from 1 through _misc(max-sidebar-links) {
|
||||
&:nth-child(#{$i}) {
|
||||
@include vendor('transition-delay', '#{(_duration(activation) * 0.2 * $i) + (_duration(activation) * 0.25)}');
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
a {
|
||||
@include vendor('transition', 'color #{_duration(transition)} ease');
|
||||
border: 0;
|
||||
color: _palette(fg-light);
|
||||
display: block;
|
||||
font-size: 0.6em;
|
||||
font-weight: _font(weight-bold);
|
||||
letter-spacing: _font(kerning-alt);
|
||||
line-height: 1.75;
|
||||
outline: 0;
|
||||
padding: 1.35em 0;
|
||||
position: relative;
|
||||
text-decoration: none;
|
||||
text-transform: uppercase;
|
||||
|
||||
&:before,
|
||||
&:after {
|
||||
border-radius: 0.2em;
|
||||
bottom: 0;
|
||||
content: '';
|
||||
height: 0.2em;
|
||||
position: absolute;
|
||||
right: 0;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
&:before {
|
||||
background: lighten(_palette(bg), 5);
|
||||
}
|
||||
|
||||
&:after {
|
||||
@include vendor('background-image', 'linear-gradient(to right, #{_palette(accent1)}, #{_palette(accent3)})');
|
||||
@include vendor('transition', 'max-width #{_duration(transition)} ease');
|
||||
max-width: 0;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
color: _palette(fg);
|
||||
}
|
||||
|
||||
&.active {
|
||||
color: _palette(fg-bold);
|
||||
|
||||
&:after {
|
||||
max-width: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
body.is-preload & {
|
||||
> .inner {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
nav {
|
||||
ul {
|
||||
li {
|
||||
@include vendor('transform', 'translateY(2em)');
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@include breakpoint('<=large') {
|
||||
height: _size(sidebar-height);
|
||||
left: 0;
|
||||
line-height: _size(sidebar-height);
|
||||
overflow: hidden;
|
||||
padding: 0;
|
||||
text-align: center;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
|
||||
> .inner {
|
||||
@include vendor('flex-direction', 'row');
|
||||
@include vendor('align-items', 'stretch');
|
||||
height: inherit;
|
||||
line-height: inherit;
|
||||
}
|
||||
|
||||
nav {
|
||||
height: inherit;
|
||||
line-height: inherit;
|
||||
|
||||
ul {
|
||||
@include vendor('display', 'flex');
|
||||
height: inherit;
|
||||
line-height: inherit;
|
||||
margin: 0;
|
||||
|
||||
li {
|
||||
display: block;
|
||||
height: inherit;
|
||||
line-height: inherit;
|
||||
margin: 0 0 0 2em;
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
|
||||
a {
|
||||
height: inherit;
|
||||
line-height: inherit;
|
||||
padding: 0;
|
||||
|
||||
&:after {
|
||||
background-image: none;
|
||||
background-color: _palette(accent3);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@include breakpoint('<=small') {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
30
original/assets/sass/layout/_wrapper.scss
Normal file
30
original/assets/sass/layout/_wrapper.scss
Normal file
@@ -0,0 +1,30 @@
|
||||
///
|
||||
/// Hyperspace by HTML5 UP
|
||||
/// html5up.net | @ajlkn
|
||||
/// Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
|
||||
///
|
||||
|
||||
/* Wrapper (main) */
|
||||
|
||||
#wrapper {
|
||||
#sidebar + & {
|
||||
margin-left: _size(sidebar-width);
|
||||
|
||||
@include breakpoint('<=large') {
|
||||
margin-left: 0;
|
||||
padding-top: _size(sidebar-height);
|
||||
}
|
||||
|
||||
@include breakpoint('<=small') {
|
||||
padding-top: 0;
|
||||
}
|
||||
}
|
||||
|
||||
#header + & {
|
||||
> .wrapper {
|
||||
> .inner {
|
||||
margin: 0 auto;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user