interaktionsweise/hippie
1
1
Fork 0
Code Issues Pull requests Releases 3 Activity Actions

gulp and file structure overhaul

Browse source 
new gulp setup
including new npm packages
new file structure
moved all development files to source/
used files are in build/ now
This commit is contained in:
Stephan Hagedorn 2017-09-26 22:02:10 +02:00
parent 3a2140dad6
commit a4a1fbc14d
56 changed files with 6912 additions and 5247 deletions
Download patch file Download diff file Expand all files Collapse all files

176
source/style/modules/demo/_demo_module.scss Normal file
View file

@ -0,0 +1,176 @@
.demo__intro {
@extend .sec__main_center;
border-top-width: $border_width_8;
border-top-style: solid;
border-color: $basic_border_color;
padding-top: $space_3;
}
.demo__header {
padding: $double_space;
nav {
ul {
margin: 0;
}
}
}
.header__fancy {
background-color: transparentize($bravo_color, .4);
nav {
a {
background-color: transparentize($alpha_color, .4);
color: $alpha_color;
&:active,
&:focus,
&:hover {
background-color: rgba($brightest_color, .2);
color: $brightest_color;
}
}
}
}
.header__fix {
position: relative;
top: 0;
left: 0;
width: 100%;
background-color: transparentize($charlie_color, .4);
nav {
a {
&:active,
&:focus,
&:hover {
background-color: rgba($brightest_color, .2);
color: $brightest_color;
}
}
}
}
.demo__footer {
width: 100%;
// height: 128px;
padding: $double_space 0;
background-color: $dark_color;
color: $bright_color;
nav {
a {
color: $brightest_color;
}
}
}
.demo__avatar {
img {
opacity: 1;
width: 128px;
height: auto;
min-width: 128px;
min-height: 128px;
border-radius: 50%;
background-color: $delta_color;
}
}
.demo__flag {
height: 40vh;
}
.demo__credits {
margin: $space_3 0 $basic_space 0;
}
.demo__button_32 {
width: 32px;
height: 32px;
}
.demo__queries > p {
padding: $basic_padding;
}
.query__phoneUp {
background-color: rgba($basic_front_color, .2);
}
.query__phoneOnly {
@include forPhoneOnly { background-color: rgba($basic_front_color, .2); }
}
.query__tabletPortaitOnly {
@include forTabletPortraitOnly { background-color: rgba($basic_front_color, .2); }
}
.query__tabletPortraitUp {
@include forTabletPortraitUp { background-color: rgba($basic_front_color, .2); }
}
.query__tabletLandscapeOnly {
@include forTabletLandscapeOnly { background-color: rgba($basic_front_color, .2); }
}
.query__tabletLandscapeUp {
@include forTabletLandscapeUp { background-color: rgba($basic_front_color, .2); }
}
.query__desktopOnly {
@include forDesktopOnly { background-color: rgba($basic_front_color, .2); }
}
.query__desktopUp {
@include forDesktopUp { background-color: rgba($basic_front_color, .2); }
}
.query__bigDesktopUp {
@include forBigDesktopUp { background-color: rgba($basic_front_color, .2); }
}
.demo__query_example {
@include goingLarge($screen_tiny/1px) {background-color: $alpha_color; }
@include goingLarge($screen_small/1px) {background-color: $bravo_color; }
@include goingLarge($screen_medium/1px) {background-color: $charlie_color; }
@include goingLarge($screen_large/1px) {background-color: $delta_color; }
@include goingLarge($screen_huge/1px) {background-color: $echo_color; }
@include goingLarge($screen_gigantic/1px) {background-color: $foxtrot_color; }
margin-bottom: $space_3;
padding: $space_3;
text-align: center;
&:after {
@extend code;
@include goingLarge($screen_tiny/1px) {
& { content: '768px'; }
}
@include goingLarge($screen_small/1px) {
& { content: '1024px'; }
}
@include goingLarge($screen_medium/1px) {
& { content: '1280px'; }
}
@include goingLarge($screen_huge/1px) {
& { content: '1680px'; }
}
@include goingLarge($screen_gigantic/1px) {
& { content: '1920px'; }
}
content: '< 768px';
padding: $basic_padding;
border-radius: $basic_corner_radius;
background-color: rgba($basic_front_color, .2);
}
}