Requirements updated and new nunjucks variables
Fixed problems with base paths.
This commit is contained in:
Stephan Hagedorn
parent
8567604ea6
commit
b2ea5b01aa
26 changed files with 1404 additions and 1228 deletions
|
|
@ -1,252 +1,252 @@
|
|||
.demo__intro {
|
||||
@extend .sec_main_center;
|
||||
@extend .sec_main_status;
|
||||
}
|
||||
|
||||
.demo__status {
|
||||
@extend .sec_main_status;
|
||||
position: relative;
|
||||
min-height: 50vh;
|
||||
border-color: $foxtrot_color;
|
||||
|
||||
h1:first-of-type {
|
||||
margin-top: 0;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
@media (max-height: 512px) {
|
||||
.pos_abs {
|
||||
position: static !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.demo__header {
|
||||
padding: $space_double;
|
||||
|
||||
nav {
|
||||
|
||||
ul {
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.header_fancy {
|
||||
background-color: transparentize($bravo_color, 0.4);
|
||||
|
||||
nav {
|
||||
|
||||
a {
|
||||
background-color: transparentize($alpha_color, 0.4);
|
||||
color: $alpha_color;
|
||||
|
||||
&:active,
|
||||
&:focus,
|
||||
&:hover {
|
||||
background-color: rgba($color_brightest, 0.2);
|
||||
color: $color_brightest;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.header_fix {
|
||||
position: relative;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
background-color: transparentize($charlie_color, 0.4);
|
||||
|
||||
nav {
|
||||
|
||||
a {
|
||||
|
||||
&:active,
|
||||
&:focus,
|
||||
&:hover {
|
||||
background-color: rgba($color_brightest, 0.2);
|
||||
color: $color_brightest;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.demo__footer {
|
||||
width: 100%;
|
||||
// height: 128px;
|
||||
padding: $space_double 0;
|
||||
background-color: $color_dark;
|
||||
color: $color_bright;
|
||||
|
||||
nav {
|
||||
|
||||
a {
|
||||
color: $color_brightest;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.demo__sprite_down {
|
||||
@include sprite($down);
|
||||
// width: 32px;
|
||||
// height: 32px;
|
||||
// background-image: url(../art/sprites.png);
|
||||
// background-position: -32px 0;
|
||||
}
|
||||
|
||||
.demo__sprite_up {
|
||||
@include sprite($up);
|
||||
// width: 32px;
|
||||
// height: 64px;
|
||||
// background-image: url(../art/sprites.png);
|
||||
// background-position: 0 0;
|
||||
}
|
||||
|
||||
.demo__sprite_meta {
|
||||
@include sprite($meta);
|
||||
// width: 32px;
|
||||
// height: 32px;
|
||||
// background-image: url(../art/sprites.png);
|
||||
// background-position: -32px 32px;
|
||||
}
|
||||
|
||||
.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_small 0 $space_basic 0;
|
||||
}
|
||||
|
||||
.demo__button_32 {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
}
|
||||
|
||||
|
||||
|
||||
.demo__queries > p {
|
||||
padding: $padding_basic;
|
||||
}
|
||||
|
||||
.query_phoneUp {
|
||||
@include forPhoneUp {background-color: rgba($color_text_basic, 0.2)};
|
||||
}
|
||||
|
||||
.query_phoneOnly {
|
||||
@include forPhoneOnly { background-color: rgba($color_text_basic, 0.2); }
|
||||
}
|
||||
|
||||
.query_tabletPortaitOnly {
|
||||
@include forTabletPortraitOnly { background-color: rgba($color_text_basic, 0.2); }
|
||||
}
|
||||
|
||||
.query_tabletPortraitUp {
|
||||
@include forTabletPortraitUp { background-color: rgba($color_text_basic, 0.2); }
|
||||
}
|
||||
|
||||
.query_tabletLandscapeOnly {
|
||||
@include forTabletLandscapeOnly { background-color: rgba($color_text_basic, 0.2); }
|
||||
}
|
||||
|
||||
.query_tabletLandscapeUp {
|
||||
@include forTabletLandscapeUp { background-color: rgba($color_text_basic, 0.2); }
|
||||
}
|
||||
|
||||
.query_desktopOnly {
|
||||
@include forDesktopOnly { background-color: rgba($color_text_basic, 0.2); }
|
||||
}
|
||||
|
||||
.query_desktopUp {
|
||||
@include forDesktopUp { background-color: rgba($color_text_basic, 0.2); }
|
||||
}
|
||||
|
||||
.query_bigDesktopUp {
|
||||
@include forBigDesktopUp { background-color: rgba($color_text_basic, 0.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_small;
|
||||
padding: $space_small;
|
||||
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: $padding_basic;
|
||||
border-radius: $radius_basic;
|
||||
color: $color_brightest;
|
||||
background-color: rgba($color_front_basic, 0.2);
|
||||
}
|
||||
}
|
||||
|
||||
// Tables
|
||||
.demo__td_no_bl {
|
||||
border-left: none;
|
||||
}
|
||||
|
||||
.demo__td_no_br {
|
||||
border-right: none;
|
||||
}
|
||||
|
||||
.demo__td_pr {
|
||||
padding-right: $space_double;
|
||||
}
|
||||
|
||||
.demo__td_pl {
|
||||
padding-left: $space_double;
|
||||
}
|
||||
|
||||
// Index
|
||||
// -----------------------------------------------------------------------------
|
||||
.wrap {
|
||||
display: flex;
|
||||
// height: 100%;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.hello {
|
||||
flex: 0 1 auto;
|
||||
width: 80%;
|
||||
|
||||
ul {
|
||||
padding: 1em 5em;
|
||||
background-color: $color_darker;
|
||||
}
|
||||
}
|
||||
.demo__intro {
|
||||
@extend .sec_main_center;
|
||||
@extend .sec_main_status;
|
||||
}
|
||||
|
||||
.demo__status {
|
||||
@extend .sec_main_status;
|
||||
position: relative;
|
||||
min-height: 50vh;
|
||||
border-color: $foxtrot_color;
|
||||
|
||||
h1:first-of-type {
|
||||
margin-top: 0;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
@media (max-height: 512px) {
|
||||
.pos_abs {
|
||||
position: static !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.demo__header {
|
||||
padding: $space_double;
|
||||
|
||||
nav {
|
||||
|
||||
ul {
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.header_fancy {
|
||||
background-color: transparentize($bravo_color, 0.4);
|
||||
|
||||
nav {
|
||||
|
||||
a {
|
||||
background-color: transparentize($alpha_color, 0.4);
|
||||
color: $alpha_color;
|
||||
|
||||
&:active,
|
||||
&:focus,
|
||||
&:hover {
|
||||
background-color: rgba($color_brightest, 0.2);
|
||||
color: $color_brightest;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.header_fix {
|
||||
position: relative;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
background-color: transparentize($charlie_color, 0.4);
|
||||
|
||||
nav {
|
||||
|
||||
a {
|
||||
|
||||
&:active,
|
||||
&:focus,
|
||||
&:hover {
|
||||
background-color: rgba($color_brightest, 0.2);
|
||||
color: $color_brightest;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.demo__footer {
|
||||
width: 100%;
|
||||
// height: 128px;
|
||||
padding: $space_double 0;
|
||||
background-color: $color_dark;
|
||||
color: $color_bright;
|
||||
|
||||
nav {
|
||||
|
||||
a {
|
||||
color: $color_brightest;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.demo__sprite_down {
|
||||
@include sprite($down);
|
||||
// width: 32px;
|
||||
// height: 32px;
|
||||
// background-image: url(../art/sprites.png);
|
||||
// background-position: -32px 0;
|
||||
}
|
||||
|
||||
.demo__sprite_up {
|
||||
@include sprite($up);
|
||||
// width: 32px;
|
||||
// height: 64px;
|
||||
// background-image: url(../art/sprites.png);
|
||||
// background-position: 0 0;
|
||||
}
|
||||
|
||||
.demo__sprite_meta {
|
||||
@include sprite($meta);
|
||||
// width: 32px;
|
||||
// height: 32px;
|
||||
// background-image: url(../art/sprites.png);
|
||||
// background-position: -32px 32px;
|
||||
}
|
||||
|
||||
.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_small 0 $space_basic 0;
|
||||
}
|
||||
|
||||
.demo__button_32 {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
}
|
||||
|
||||
|
||||
|
||||
.demo__queries > p {
|
||||
padding: $padding_basic;
|
||||
}
|
||||
|
||||
.query_phoneUp {
|
||||
@include forPhoneUp {background-color: rgba($color_text_basic, 0.2)};
|
||||
}
|
||||
|
||||
.query_phoneOnly {
|
||||
@include forPhoneOnly { background-color: rgba($color_text_basic, 0.2); }
|
||||
}
|
||||
|
||||
.query_tabletPortaitOnly {
|
||||
@include forTabletPortraitOnly { background-color: rgba($color_text_basic, 0.2); }
|
||||
}
|
||||
|
||||
.query_tabletPortraitUp {
|
||||
@include forTabletPortraitUp { background-color: rgba($color_text_basic, 0.2); }
|
||||
}
|
||||
|
||||
.query_tabletLandscapeOnly {
|
||||
@include forTabletLandscapeOnly { background-color: rgba($color_text_basic, 0.2); }
|
||||
}
|
||||
|
||||
.query_tabletLandscapeUp {
|
||||
@include forTabletLandscapeUp { background-color: rgba($color_text_basic, 0.2); }
|
||||
}
|
||||
|
||||
.query_desktopOnly {
|
||||
@include forDesktopOnly { background-color: rgba($color_text_basic, 0.2); }
|
||||
}
|
||||
|
||||
.query_desktopUp {
|
||||
@include forDesktopUp { background-color: rgba($color_text_basic, 0.2); }
|
||||
}
|
||||
|
||||
.query_bigDesktopUp {
|
||||
@include forBigDesktopUp { background-color: rgba($color_text_basic, 0.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_small;
|
||||
padding: $space_small;
|
||||
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: $padding_basic;
|
||||
border-radius: $radius_basic;
|
||||
color: $color_brightest;
|
||||
background-color: rgba($color_front_basic, 0.2);
|
||||
}
|
||||
}
|
||||
|
||||
// Tables
|
||||
.demo__td_no_bl {
|
||||
border-left: none;
|
||||
}
|
||||
|
||||
.demo__td_no_br {
|
||||
border-right: none;
|
||||
}
|
||||
|
||||
.demo__td_pr {
|
||||
padding-right: $space_double;
|
||||
}
|
||||
|
||||
.demo__td_pl {
|
||||
padding-left: $space_double;
|
||||
}
|
||||
|
||||
// Index
|
||||
// -----------------------------------------------------------------------------
|
||||
.wrap {
|
||||
display: flex;
|
||||
// height: 100%;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.hello {
|
||||
flex: 0 1 auto;
|
||||
width: 80%;
|
||||
|
||||
ul {
|
||||
padding: 1em 5em;
|
||||
background-color: $color_darker;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue