clean up after pull request
- added es6 uglify - pimped status pages in demo-index - added first modular hippie file
This commit is contained in:
Stephan Hagedorn
parent
b9003c4a28
commit
bcc5ab661a
13 changed files with 202 additions and 52 deletions
|
|
@ -6,14 +6,14 @@ function setup() {
|
|||
}
|
||||
|
||||
// get document coordinates of the element
|
||||
// function getCoords(elem) {
|
||||
// let box = elem.getBoundingClientRect();
|
||||
//
|
||||
// return {
|
||||
// top: box.top + pageYOffset,
|
||||
// left: box.left + pageXOffset
|
||||
// };
|
||||
// }
|
||||
function getCoords(elem) {
|
||||
let box = elem.getBoundingClientRect();
|
||||
|
||||
return {
|
||||
top: box.top + pageYOffset,
|
||||
left: box.left + pageXOffset
|
||||
};
|
||||
}
|
||||
|
||||
// https://stackoverflow.com/a/488073/1444149
|
||||
function Utils() {
|
||||
|
|
|
|||
|
|
@ -33,7 +33,10 @@ $( document ).ready(function() {
|
|||
$(this).next(".exp_pop").css({
|
||||
"top": ev.pageY - $(this).next(".exp_pop").outerHeight() - 4,
|
||||
"left": ev.pageX + 8
|
||||
// "left": ev.pageX - $(this).offset().left + 8
|
||||
});
|
||||
// TODO - needs more love
|
||||
console.log(ev.pageX);
|
||||
}
|
||||
);
|
||||
|
||||
|
|
|
|||
|
|
@ -57,7 +57,7 @@
|
|||
// Additional modules can be defined here
|
||||
// -----------------------------------------------------------------------------
|
||||
@import "modules/vendor";
|
||||
//@import modules/all deprecated because of the new vendor mixin
|
||||
// @import modules/all deprecated because of the new vendor mixin
|
||||
// @import "modules/YOUR-MODULE/YOUR-FILES";
|
||||
|
||||
// Basic styles - this is the core of definitions
|
||||
|
|
|
|||
|
|
@ -55,7 +55,9 @@ pre {
|
|||
|
||||
// Quote
|
||||
blockquote {
|
||||
margin: $basic_space $basic_indent;
|
||||
margin: $basic_space 0;
|
||||
padding-right: $basic_indent;
|
||||
padding-left: $basic_indent;
|
||||
}
|
||||
|
||||
.quote__mark {
|
||||
|
|
@ -225,24 +227,20 @@ div {
|
|||
.box__placeholder {
|
||||
width: 100%;
|
||||
height: $space_4;
|
||||
border: $border_width_4 solid rgba($darkest_color,.1);
|
||||
border: $border_width_4 solid rgba($alpha_color,.1);
|
||||
border-radius: $basic_corner;
|
||||
padding: $basic_space;
|
||||
background-color: rgba($darkest_color,.1);
|
||||
svg {
|
||||
vertical-align: top;
|
||||
}
|
||||
background-color: rgba($alpha_color,.2);
|
||||
}
|
||||
|
||||
.box__placeholder_bkg {
|
||||
width: 100%;
|
||||
height: $space_4;
|
||||
border: $border_width_4 solid rgba($darkest_color,.1);
|
||||
height: $space_4 * 2;
|
||||
border: $border_width_4 solid rgba($brightest_color,.1);
|
||||
border-radius: $basic_corner;
|
||||
padding: $basic_space;
|
||||
/*data:[<mime type>][;charset=<charset>][;base64],<encoded data>*/
|
||||
background: url("data:image/svg+xml;utf8,<svg version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0' y='0' width='100%' height='100%'><line x1='2%' y1='2%' x2='98%' y2='98%' stroke='#000' stroke-width='.5'/><line x1='0' y1='100%' x2='100%' y2='0' stroke='#000' stroke-width='.5'/></svg>") no-repeat;
|
||||
background-color: rgba($darkest_color,.1);
|
||||
background: url("data:image/svg+xml;utf8,<svg version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0' y='0' width='100%' height='100%'><line x1='0' y1='0' x2='100%' y2='100%' stroke='#FFF' stroke-width='.5'/><line x1='0' y1='100%' x2='100%' y2='0' stroke='#FFF' stroke-width='.5'/></svg>") no-repeat;
|
||||
background-color: rgba($brightest_color,.1);
|
||||
}
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -59,8 +59,6 @@ section {
|
|||
}
|
||||
|
||||
.sec__main_status {
|
||||
@extend .sec__main_center;
|
||||
position: relative;
|
||||
border-top-width: $border_width_8;
|
||||
border-top-style: solid;
|
||||
border-color: $basic_border_color;
|
||||
|
|
|
|||
|
|
@ -80,6 +80,10 @@ dfn {
|
|||
|
||||
}
|
||||
|
||||
address {
|
||||
|
||||
}
|
||||
|
||||
abbr {
|
||||
|
||||
}
|
||||
|
|
|
|||
|
|
@ -59,6 +59,26 @@
|
|||
margin-right: $space_3;
|
||||
}
|
||||
|
||||
.main_center {
|
||||
& > * {
|
||||
margin-right: (100% - $basic_width) / 2;
|
||||
margin-left: (100% - $basic_width) / 2;
|
||||
|
||||
@include forTabletPortraitUp {
|
||||
margin-right: (100% - $width_small) / 2;
|
||||
margin-left: (100% - $width_small) / 2;
|
||||
}
|
||||
@include forTabletLandscapeUp {
|
||||
margin-right: 1(00% - $width_medium) / 2;
|
||||
margin-left: 1(00% - $width_medium) / 2;
|
||||
}
|
||||
@include forBigDesktopUp {
|
||||
margin-right: (100% - $width_large) / 2;
|
||||
margin-left: (100% - $width_large) / 2;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
// Clearing and floating
|
||||
|
|
|
|||
101
source/style/maintenance.scss
Normal file
101
source/style/maintenance.scss
Normal file
|
|
@ -0,0 +1,101 @@
|
|||
/*
|
||||
* # TABLE OF CONTENTS
|
||||
*
|
||||
* - Reset
|
||||
* - Global functions and mixins
|
||||
* - Configuration
|
||||
* - Special modules
|
||||
* - Basic styles
|
||||
* - Common
|
||||
* - Typography
|
||||
*
|
||||
* - Sections
|
||||
* - Grouping
|
||||
* - Textlevel
|
||||
* - Embedded
|
||||
* - Tables
|
||||
* - Interactive
|
||||
* - Modules
|
||||
*
|
||||
*/
|
||||
|
||||
|
||||
// Reset
|
||||
// Use a file outside of hippie i.e. vendor/normalize.css
|
||||
// -----------------------------------------------------------------------------
|
||||
@import "../../vendor/normalizecss/normalize.css";
|
||||
// @import "vendor/YOUR-FILES.css";
|
||||
|
||||
|
||||
|
||||
// Functions and Mixins
|
||||
// Important code constructions
|
||||
// -----------------------------------------------------------------------------
|
||||
@import "functions/all";
|
||||
@import "mixins/all";
|
||||
|
||||
|
||||
|
||||
// Fonts
|
||||
// Use a central file outside of hippie for font definitions with @font-face
|
||||
// -----------------------------------------------------------------------------
|
||||
// @import "vendor/fonts.css";
|
||||
|
||||
|
||||
|
||||
// Global configuration with default values
|
||||
// Adjustments can be made by copying values from _config.scss to _override.scss
|
||||
// Be careful though changes will get lost if hippie gets updated
|
||||
// -----------------------------------------------------------------------------
|
||||
// @import "global/default"; // DO NOT EDIT
|
||||
@import "settings"; // EDIT
|
||||
@import "global/config"; // DO NOT EDIT
|
||||
|
||||
|
||||
|
||||
// Modules and variables
|
||||
// Additional modules can be defined here
|
||||
// -----------------------------------------------------------------------------
|
||||
// @import "modules/vendor";
|
||||
// @import modules/all deprecated because of the new vendor mixin
|
||||
// @import "modules/YOUR-MODULE/YOUR-FILES";
|
||||
|
||||
// Basic styles - this is the core of definitions
|
||||
// Individual styles can be added her
|
||||
// -----------------------------------------------------------------------------
|
||||
@import "global/common";
|
||||
@import "elements/typography";
|
||||
// Following the w3c document element structure
|
||||
// https://w3c.github.io/html/index.html#contents
|
||||
@import "elements/sections";
|
||||
@import "elements/grouping";
|
||||
@import "elements/textlevel";
|
||||
@import "elements/embedded";
|
||||
@import "elements/tables";
|
||||
@import "elements/interactive";
|
||||
// @import "YOU-NAME-IT";
|
||||
|
||||
// Individual Modules and variables
|
||||
// in dependency to other styles
|
||||
// Additional modules can be defined here
|
||||
// -----------------------------------------------------------------------------
|
||||
@import "modules/breakpoint/breakpoint_module";
|
||||
// @import "modules/navigation/nav_module";
|
||||
@import "modules/tables/tables_module";
|
||||
// @import "modules/card/card_module";
|
||||
// @import "modules/editor/editor_module";
|
||||
// @import "modules/explanation/explanation_module";
|
||||
// @import "modules/print/print_module";
|
||||
// @import "modules/YOUR-MODULE/YOUR-FILES";
|
||||
|
||||
|
||||
|
||||
// Demonstration
|
||||
@import "modules/demo/demo_module";
|
||||
|
||||
|
||||
|
||||
// Not yet sorted
|
||||
// @import "elements/new";
|
||||
|
||||
// NOTE // No css rules allowed in here
|
||||
|
|
@ -1,9 +1,11 @@
|
|||
.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;
|
||||
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue