From 3f090d3f4b90ace50bb980b84042764189345c20 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Mike=20Schw=C3=B6rer?= Date: Fri, 29 Dec 2017 00:40:57 +0100 Subject: [PATCH] SCSS --- www/data/css/.gitignore | 3 + www/data/css/styles.css | 527 +++++++++++++--------------- www/data/css/styles.scss | 8 + www/data/css/styles_bloglist.scss | 44 +++ www/data/css/styles_config.scss | 5 + www/data/css/styles_eulerpanel.scss | 100 ++++++ www/data/css/styles_footer.scss | 19 + www/data/css/styles_global.scss | 67 ++++ www/data/css/styles_header.scss | 103 ++++++ www/data/css/styles_main.scss | 0 10 files changed, 592 insertions(+), 284 deletions(-) create mode 100644 www/data/css/.gitignore create mode 100644 www/data/css/styles.scss create mode 100644 www/data/css/styles_bloglist.scss create mode 100644 www/data/css/styles_config.scss create mode 100644 www/data/css/styles_eulerpanel.scss create mode 100644 www/data/css/styles_footer.scss create mode 100644 www/data/css/styles_global.scss create mode 100644 www/data/css/styles_header.scss create mode 100644 www/data/css/styles_main.scss diff --git a/www/data/css/.gitignore b/www/data/css/.gitignore new file mode 100644 index 0000000..5147ea5 --- /dev/null +++ b/www/data/css/.gitignore @@ -0,0 +1,3 @@ +*.css.map +*.css +!*styles.css \ No newline at end of file diff --git a/www/data/css/styles.css b/www/data/css/styles.css index 4fe3835..905681f 100644 --- a/www/data/css/styles.css +++ b/www/data/css/styles.css @@ -1,321 +1,280 @@ -html, body{ height:100%; margin:0; } +html, body { + height: 100%; + margin: 0; } body { - margin: 0; - background-color: #EEE; - - color: #CCC; - - display:flex; - flex-direction:column; -} + margin: 0; + background-color: #EEE; + color: #CCC; + display: flex; + flex-direction: column; } #content { - padding-top: 64px; - display: flex; - justify-content: center; + padding-top: 64px; + display: flex; + justify-content: center; + line-height: 1.4; } - line-height: 1.4; -} +/*############################################################################*/ +.content-responsive { + margin-left: auto; + margin-right: auto; } + +@media (max-width: 767px) { + .content-responsive { + width: auto; } } +@media (min-width: 768px) { + .content-responsive { + width: auto; } } +@media (min-width: 992px) { + .content-responsive { + width: 724px; } } +@media (min-width: 1200px) { + .content-responsive { + width: 1170px; } } +.contentheader { + width: 100%; + color: #333; + font-size: large; } + +.contentheader h1 { + font-family: Lato, "Helvetica Neue", Helvetica, Arial, sans-serif; + font-size: 32px; + font-weight: 900; + margin-bottom: 0; } + +@media (max-width: 767px) { + .contentheader h1 { + font-size: 32px; } } +.contentheader hr { + margin: 0 0 25px 0; + display: block; + border: none; + color: white; + height: 1px; + background: #CCCCCCFF; + background: -moz-linear-gradient(left, #CCC, #FFFFFF00); + background: -webkit-linear-gradient(left, #CCC 0%, #FFFFFF00 100%); } + +.blockcontent { + display: block; + width: 100%; } .headerdiv { - background-color: #333; - display: flex; - border-bottom: 1px solid #111; - box-shadow: 0 0 8px #000000; - position: fixed; - width: 100%; -} - -.headerdiv .logowrapper { + background-color: #333; + display: flex; + border-bottom: 1px solid #111; + box-shadow: 0 0 8px #000000; + position: fixed; + width: 100%; } + .headerdiv .logowrapper { flex: initial; margin: 0; padding: 0; - height: 42px; -} - -.headerdiv > .logowrapper > .logo { - height: 30px; - margin: 4px 0px 8px 6px; - flex: initial; -} - -.tabrow { + height: 42px; } + .headerdiv .logowrapper .logo { + height: 30px; + margin: 4px 0px 8px 6px; + flex: initial; } + .headerdiv .tabrow { display: flex; - flex: auto; -} - -.tab { - display: flex; - justify-content: center; - align-items: center; - - background-color: #222; - color: #CCC; - border-left: 1px solid #000; - border-right: 1px solid #000; - font-weight: bold; - text-decoration: none; - - margin: 0px 0px 0px 20px; - padding: 2px 5px; - min-width: 64px; - text-align: center; - - flex: initial; -} - -.tab:hover { - cursor: pointer; - background-color: #555; -} - -.tab_github { - background-color: #4078c0; - border-left: 1px solid #111; - border-right: 1px solid #111; - color: black; -} - -.tab_split { - flex: auto; -} - -.tab_github:hover { - background-color: #c9510c; - color: black; -} + flex: auto; } + .headerdiv .tabrow .tab { + display: flex; + justify-content: center; + align-items: center; + background-color: #222; + color: #CCC; + border-left: 1px solid #000; + border-right: 1px solid #000; + font-weight: bold; + text-decoration: none; + margin: 0px 0px 0px 20px; + padding: 2px 5px; + min-width: 64px; + text-align: center; + flex: initial; } + .headerdiv .tabrow .tab:hover { + cursor: pointer; + background-color: #555; } + .headerdiv .tabrow .tab_split { + flex: auto; } + .headerdiv .tabrow .tab_github { + background-color: #4078c0; + border-left: 1px solid #111; + border-right: 1px solid #111; + color: black; } + .headerdiv .tabrow .tab_github:hover { + background-color: #c9510c; + color: black; } @media (max-width: 850px) { + .headerdiv { + position: static; } - .headerdiv { - position: static; - } - - .logowrapper { - display: flex; - align-items: center; - justify-content: center; - } - - .headerdiv { - flex-direction: column; - } - - .tabrow { - flex-direction: column; - } - - .tab { - border: 1px solid #000; - font-weight: bold; - - margin: 5px 10px; - } - - #content { - padding-top: 0px; - } -} - - -/*############################################################################*/ - -.euler_pnl_base { - display: inline-flex; - flex-direction: column; - - border: 1px solid #AAA; - border-radius: 5px 5px 0 0; - margin: 15px; -} - -.euler_pnl_header { + .logowrapper { display: flex; align-items: center; - justify-content: center; + justify-content: center; } - padding: 4px; - background: #AAA; -} + .headerdiv { + flex-direction: column; } -.euler_pnl_header a { - color: #222; + .tabrow { + flex-direction: column; } + + .tab { + border: 1px solid #000; font-weight: bold; - text-decoration: none; - - font-size: large; -} - -.euler_pnl_header a:hover { - text-decoration: underline; -} - -.euler_pnl_content { - display: flex; - flex-direction: column; - - background: #DDD; - - padding: 6px; -} - -.euler_pnl_row { - display: flex; - flex-direction: row; - flex-wrap: wrap; -} - -@media (max-width: 850px) { .euler_pnl_row { flex-direction: column; } } - -.euler_pnl_row2 { - display: flex; - flex-direction: row; -} - -.euler_pnl_cell { - width: 24px; - height: 24px; - font-size: 11px; - - margin: 3px; - - border: 1px solid #333; - - display: flex; - align-items: center; - justify-content: center; -} - -.euler_pnl_cell:hover { - box-shadow: 0 0 4px #000000; -} - -.euler_pnl_cell a { - color: black; - text-decoration: none; - width: 100%; - height: 100%; - display: flex; - justify-content: center; - align-items: center; -} - -.euler_pnl_cell a:hover { - color: black; - text-decoration: none; -} - -.euler_pnl_cell a:visited { - color: black; - text-decoration: none; -} - -.euler_pnl_celltime_perfect { background: #98C398; } -.euler_pnl_celltime_good { background: #B9D89B; } -.euler_pnl_celltime_ok { background: #D8D898; } -.euler_pnl_celltime_bad { background: #D8B298; } -.euler_pnl_celltime_fail { background: #D89D9D; } -.euler_pnl_cell_notexist { background: #CCCCCC; } - -.content-responsive { - margin-left: auto; - margin-right: auto; -} - -@media(max-width:767px) { .content-responsive { width: auto; } } -@media(min-width:768px) { .content-responsive { width: auto; } } -@media(min-width:992px) { .content-responsive { width: 724px; } } -@media(min-width:1200px){ .content-responsive { width: 1170px; } } + margin: 5px 10px; } + #content { + padding-top: 0px; } } #footerdiv { - margin-top:auto; - padding-bottom: 10px; + margin-top: auto; + padding-bottom: 10px; + background-color: transparent; + text-align: center; } - background-color: transparent; - text-align: center; -} #footerdiv hr { - margin-bottom: 5px; - display:block; - border:none; - color:white; - height:1px; - background: #CCCCCCFF; - background: -webkit-gradient(radial, 50% 50%, 0, 50% 50%, 350, from(#CCCCCCFF), to(#FFFFFF00)); -} - -.contentheader { - width: 100%; - color: #333; - font-size: large; -} - -.contentheader h1 { - - font-family: Lato, "Helvetica Neue", Helvetica, Arial, sans-serif; - font-size: 48px; - font-weight: 900; - margin-bottom: 0; - -} - -@media(max-width:767px) { .contentheader h1 { font-size: 32px; } } - -.contentheader hr { - margin: 0 0 25px 0; - - display:block; - border:none; - color:white; - height:1px; - background: #CCCCCCFF; - background: -moz-linear-gradient( left, #CCCCCCFF, #FFFFFF00); - background: -webkit-linear-gradient(left, #CCCCCCFF 0%,#FFFFFF00 100%); -} - -.blockcontent { - display: block; - width: 100%; -} + margin-bottom: 5px; + display: block; + border: none; + color: white; + height: 1px; + background: #CCCCCCFF; + background: -webkit-gradient(radial, 50% 50%, 0, 50% 50%, 350, from(#CCC), to(#FFFFFF00)); } .bloglistelem_container { - display: flex; - align-items: center; - flex-direction: column; -} + display: flex; + align-items: center; + flex-direction: column; } .bloglistelem { - width: 100%; - - border: solid 1px #444; - margin: 10px 5px; - color: #333; - text-decoration: none; -} + width: 100%; + border: solid 1px #444; + margin: 10px 5px; + color: #333; + text-decoration: none; } .bloglistelem:hover { - box-shadow: 0 0 4px #000000; -} + box-shadow: 0 0 4px #000000; } -.ble_blog { background-color: #BBB; } -.ble_log { background-color: #DDD; } +.ble_blog { + background-color: #BBB; } -.ble_blog .ble_date { background-color: #AAA; } -.ble_log .ble_date { background-color: #CCC; } +.ble_log { + background-color: #DDD; } + +.ble_blog .ble_date { + background-color: #AAA; } + +.ble_log .ble_date { + background-color: #CCC; } .ble_date { - background-color: #AAA; - padding: 2px; - font-style: italic; -} + background-color: #AAA; + padding: 2px; + font-size: 0.8em; + font-style: italic; } .ble_title { - font-weight: bold; - font-size: 1.5em; - text-align: left; - margin: 2px 0 2px 10px; -} + font-weight: bold; + font-size: 1.2em; + text-align: left; + margin: 2px 0 2px 10px; } -@media(max-width:767px) { .ble_title { font-size: 1.25em; } } +@media (max-width: 767px) { + .ble_title { + font-size: 1.25em; } } +.euler_pnl_base { + display: inline-flex; + flex-direction: column; + border: 1px solid #AAA; + border-radius: 5px 5px 0 0; + margin: 15px; } +.euler_pnl_header { + display: flex; + align-items: center; + justify-content: center; + padding: 4px; + background: #AAA; } + +.euler_pnl_header a { + color: #222; + text-decoration: none; + font-family: Lato, "Helvetica Neue", Helvetica, Arial, sans-serif; + font-size: 22px; + font-weight: 900; } + +.euler_pnl_header a:hover { + text-decoration: underline; } + +.euler_pnl_content { + display: flex; + flex-direction: column; + background: #DDD; + padding: 6px; } + +.euler_pnl_row { + display: flex; + flex-direction: row; + flex-wrap: wrap; } + +@media (max-width: 850px) { + .euler_pnl_row { + flex-direction: column; } } +.euler_pnl_row2 { + display: flex; + flex-direction: row; } + +.euler_pnl_cell { + width: 24px; + height: 24px; + font-size: 11px; + margin: 3px; + border: 1px solid #333; + display: flex; + align-items: center; + justify-content: center; } + +.euler_pnl_cell:hover { + box-shadow: 0 0 4px #000000; } + +.euler_pnl_cell a { + color: black; + text-decoration: none; + width: 100%; + height: 100%; + display: flex; + justify-content: center; + align-items: center; } + +.euler_pnl_cell a:hover { + color: black; + text-decoration: none; } + +.euler_pnl_cell a:visited { + color: black; + text-decoration: none; } + +.euler_pnl_celltime_perfect { + background: #98C398; } + +.euler_pnl_celltime_good { + background: #B9D89B; } + +.euler_pnl_celltime_ok { + background: #D8D898; } + +.euler_pnl_celltime_bad { + background: #D8B298; } + +.euler_pnl_celltime_fail { + background: #D89D9D; } + +.euler_pnl_cell_notexist { + background: #CCCCCC; } + +/*# sourceMappingURL=styles.css.map */ diff --git a/www/data/css/styles.scss b/www/data/css/styles.scss new file mode 100644 index 0000000..addaef4 --- /dev/null +++ b/www/data/css/styles.scss @@ -0,0 +1,8 @@ +@import 'styles_global'; +@import 'styles_header'; +@import 'styles_footer'; + +@import 'styles_main'; +@import 'styles_bloglist'; + +@import 'styles_eulerpanel'; \ No newline at end of file diff --git a/www/data/css/styles_bloglist.scss b/www/data/css/styles_bloglist.scss new file mode 100644 index 0000000..db9ee5d --- /dev/null +++ b/www/data/css/styles_bloglist.scss @@ -0,0 +1,44 @@ +@import 'styles_config'; + + +.bloglistelem_container { + display: flex; + align-items: center; + flex-direction: column; +} + +.bloglistelem { + width: 100%; + + border: solid 1px #444; + margin: 10px 5px; + color: #333; + text-decoration: none; +} + +.bloglistelem:hover { + box-shadow: 0 0 4px #000000; +} + +.ble_blog { background-color: #BBB; } +.ble_log { background-color: #DDD; } + +.ble_blog .ble_date { background-color: #AAA; } +.ble_log .ble_date { background-color: #CCC; } + +.ble_date { + background-color: #AAA; + padding: 2px; + font-size: 0.8em; + font-style: italic; +} + +.ble_title { + font-weight: bold; + font-size: 1.2em; + text-align: left; + margin: 2px 0 2px 10px; +} + +@media(max-width:767px) { .ble_title { font-size: 1.25em; } } + diff --git a/www/data/css/styles_config.scss b/www/data/css/styles_config.scss new file mode 100644 index 0000000..fa2a878 --- /dev/null +++ b/www/data/css/styles_config.scss @@ -0,0 +1,5 @@ +$COL_BACKGROUND: #EEE; +$COL_TEXT_NORMAL: #CCC; +$COL_TRANSPARENT: #FFFFFF00; + +$FONT_HEADER: Lato, "Helvetica Neue", Helvetica, Arial, sans-serif; \ No newline at end of file diff --git a/www/data/css/styles_eulerpanel.scss b/www/data/css/styles_eulerpanel.scss new file mode 100644 index 0000000..a5a1815 --- /dev/null +++ b/www/data/css/styles_eulerpanel.scss @@ -0,0 +1,100 @@ +@import 'styles_config'; + +.euler_pnl_base { + display: inline-flex; + flex-direction: column; + + border: 1px solid #AAA; + border-radius: 5px 5px 0 0; + margin: 15px; +} + +.euler_pnl_header { + display: flex; + align-items: center; + justify-content: center; + + padding: 4px; + background: #AAA; +} + +.euler_pnl_header a { + color: #222; + text-decoration: none; + + + font-family: $FONT_HEADER; + font-size: 22px; + font-weight: 900; +} + +.euler_pnl_header a:hover { + text-decoration: underline; +} + +.euler_pnl_content { + display: flex; + flex-direction: column; + + background: #DDD; + + padding: 6px; +} + +.euler_pnl_row { + display: flex; + flex-direction: row; + flex-wrap: wrap; +} + +@media (max-width: 850px) { .euler_pnl_row { flex-direction: column; } } + +.euler_pnl_row2 { + display: flex; + flex-direction: row; +} + +.euler_pnl_cell { + width: 24px; + height: 24px; + font-size: 11px; + + margin: 3px; + + border: 1px solid #333; + + display: flex; + align-items: center; + justify-content: center; +} + +.euler_pnl_cell:hover { + box-shadow: 0 0 4px #000000; +} + +.euler_pnl_cell a { + color: black; + text-decoration: none; + width: 100%; + height: 100%; + display: flex; + justify-content: center; + align-items: center; +} + +.euler_pnl_cell a:hover { + color: black; + text-decoration: none; +} + +.euler_pnl_cell a:visited { + color: black; + text-decoration: none; +} + +.euler_pnl_celltime_perfect { background: #98C398; } +.euler_pnl_celltime_good { background: #B9D89B; } +.euler_pnl_celltime_ok { background: #D8D898; } +.euler_pnl_celltime_bad { background: #D8B298; } +.euler_pnl_celltime_fail { background: #D89D9D; } +.euler_pnl_cell_notexist { background: #CCCCCC; } diff --git a/www/data/css/styles_footer.scss b/www/data/css/styles_footer.scss new file mode 100644 index 0000000..70881e6 --- /dev/null +++ b/www/data/css/styles_footer.scss @@ -0,0 +1,19 @@ +@import 'styles_config'; + +#footerdiv { + margin-top:auto; + padding-bottom: 10px; + + background-color: transparent; + text-align: center; +} + +#footerdiv hr { + margin-bottom: 5px; + display:block; + border:none; + color:white; + height:1px; + background: #CCCCCCFF; + background: -webkit-gradient(radial, 50% 50%, 0, 50% 50%, 350, from($COL_TEXT_NORMAL), to($COL_TRANSPARENT)); +} diff --git a/www/data/css/styles_global.scss b/www/data/css/styles_global.scss new file mode 100644 index 0000000..c59462f --- /dev/null +++ b/www/data/css/styles_global.scss @@ -0,0 +1,67 @@ +@import 'styles_config'; + +html, body{ height:100%; margin:0; } + +body { + margin: 0; + background-color: $COL_BACKGROUND; + + color: $COL_TEXT_NORMAL; + + display:flex; + flex-direction:column; +} + +#content { + padding-top: 64px; + display: flex; + justify-content: center; + + line-height: 1.4; +} + +/*############################################################################*/ + +.content-responsive { + margin-left: auto; + margin-right: auto; +} + +@media(max-width:767px) { .content-responsive { width: auto; } } +@media(min-width:768px) { .content-responsive { width: auto; } } +@media(min-width:992px) { .content-responsive { width: 724px; } } +@media(min-width:1200px){ .content-responsive { width: 1170px; } } + +.contentheader { + width: 100%; + color: #333; + font-size: large; +} + +.contentheader h1 { + + font-family: $FONT_HEADER; + font-size: 32px; + font-weight: 900; + margin-bottom: 0; + +} + +@media(max-width:767px) { .contentheader h1 { font-size: 32px; } } + +.contentheader hr { + margin: 0 0 25px 0; + + display:block; + border:none; + color:white; + height:1px; + background: #CCCCCCFF; + background: -moz-linear-gradient( left, $COL_TEXT_NORMAL, $COL_TRANSPARENT); + background: -webkit-linear-gradient(left, $COL_TEXT_NORMAL 0%,$COL_TRANSPARENT 100%); +} + +.blockcontent { + display: block; + width: 100%; +} diff --git a/www/data/css/styles_header.scss b/www/data/css/styles_header.scss new file mode 100644 index 0000000..eb08107 --- /dev/null +++ b/www/data/css/styles_header.scss @@ -0,0 +1,103 @@ +@import 'styles_config'; + +.headerdiv { + background-color: #333; + display: flex; + border-bottom: 1px solid #111; + box-shadow: 0 0 8px #000000; + position: fixed; + width: 100%; + + .logowrapper { + flex: initial; + margin: 0; + padding: 0; + height: 42px; + + .logo { + height: 30px; + margin: 4px 0px 8px 6px; + flex: initial; + } + } + + .tabrow { + display: flex; + flex: auto; + + .tab { + display: flex; + justify-content: center; + align-items: center; + + background-color: #222; + color: $COL_TEXT_NORMAL; + border-left: 1px solid #000; + border-right: 1px solid #000; + font-weight: bold; + text-decoration: none; + + margin: 0px 0px 0px 20px; + padding: 2px 5px; + min-width: 64px; + text-align: center; + + flex: initial; + + &:hover { + cursor: pointer; + background-color: #555; + } + } + + .tab_split { + flex: auto; + } + + .tab_github { + background-color: #4078c0; + border-left: 1px solid #111; + border-right: 1px solid #111; + color: black; + + &:hover { + background-color: #c9510c; + color: black; + } + } + } +} + + +@media (max-width: 850px) { + + .headerdiv { + position: static; + } + + .logowrapper { + display: flex; + align-items: center; + justify-content: center; + } + + .headerdiv { + flex-direction: column; + } + + .tabrow { + flex-direction: column; + } + + .tab { + border: 1px solid #000; + font-weight: bold; + + margin: 5px 10px; + } + + #content { + padding-top: 0px; + } +} + diff --git a/www/data/css/styles_main.scss b/www/data/css/styles_main.scss new file mode 100644 index 0000000..e69de29