From 3ecbaf0bffd82ecb4722c87b3be68e6137516a10 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Mike=20Schw=C3=B6rer?= Date: Fri, 26 Jan 2018 19:19:56 +0100 Subject: [PATCH] style unification (no more dropshadows) (no more rounded corners) --- www/data/css/styles.css | 257 ++++++++++-------- www/data/css/styles.min.css | 63 +++-- www/data/css/styles.scss | 2 +- www/data/css/styles_bloglist.scss | 14 +- ...efunge.scss => styles_blogview_euler.scss} | 4 +- www/data/css/styles_config.scss | 4 + www/data/css/styles_eulerpanel.scss | 47 +--- www/data/css/styles_header.scss | 2 +- www/data/css/styles_main.scss | 48 ++++ www/data/css/styles_programslist.scss | 8 +- www/data/css/styles_programspanel.scss | 167 +++++------- www/fragments/eulerpanel.php | 6 +- www/fragments/programspanel.php | 6 +- www/index.php | 4 +- 14 files changed, 323 insertions(+), 309 deletions(-) rename www/data/css/{styles_blogview_befunge.scss => styles_blogview_euler.scss} (98%) diff --git a/www/data/css/styles.css b/www/data/css/styles.css index 25ecc77..b4e8563 100644 --- a/www/data/css/styles.css +++ b/www/data/css/styles.css @@ -147,7 +147,7 @@ body { border-right: 1px solid #000; font-weight: bold; text-decoration: none; - margin: 0px 0px 0px 20px; + margin: 0 0 0 20px; padding: 2px 5px; min-width: 64px; text-align: center; @@ -249,6 +249,43 @@ html, body { display: none; visibility: collapse; } } /* 400px */ +.index_pnl_base { + display: inline-flex; + flex-direction: column; + border: 1px solid black; + margin: 15px; + width: 652px; } + +.index_pnl_header { + display: flex; + align-items: center; + justify-content: center; + padding: 4px; + background: #AAA; } + +.index_pnl_header a { + color: #222; + text-decoration: none; + font-family: Lato, "Helvetica Neue", Helvetica, Arial, sans-serif; + font-size: 22px; + font-weight: 900; } + +@media (max-width: 850px) { + .index_pnl_header a { + font-size: 16px; } } +.index_pnl_header a:hover { + text-decoration: underline; } + +.index_pnl_content { + display: flex; + flex-direction: column; + background: #DDD; + padding: 6px; } + +@media (max-width: 850px) { + .index_pnl_base { + width: 330px; } } +/* 400px */ .bloglistelem_container { display: flex; align-items: center; @@ -261,9 +298,6 @@ html, body { color: #333; text-decoration: none; } -.bloglistelem:hover { - box-shadow: 0 0 4px #000000; } - .ble_blog { background-color: #BBB; } @@ -281,11 +315,30 @@ html, body { .ble_log { color: #555; } +.bloglistelem:hover { + border: solid 1px black; } + +.ble_blog:hover { + background-color: white; + color: black; } + .ble_log:hover { - color: #333; } + background-color: white; + color: black; } + +.ble_blog:hover .ble_date { + background-color: white; + color: black; + border-bottom: 1px solid black; } + +.ble_log:hover .ble_date { + background-color: white; + color: black; + border-bottom: 1px solid black; } .ble_date { background-color: #AAA; + border-bottom: 1px solid transparent; padding: 2px; font-size: 0.8em; font-style: italic; } @@ -373,7 +426,7 @@ html, body { /* 400px */ #PEB_tableProblems .PEB_tablerowProblems:hover { - background-color: #888; } + background-color: #999; } #PEB_tableProblems .PEB_TC_Value { font-family: Consolas, Monaco, "Courier New", Menlo, monospace; } #PEB_tableProblems .PEB_TC_Value:not(:hover) { @@ -572,8 +625,15 @@ html, body { border: solid 1px #444; margin: 5px 0; } .prgl_elem:hover { - background: #999; - box-shadow: 0 0 4px #000000; } + background: white; + color: black; + border: solid 1px black; } + .prgl_elem:hover .prgl_elem_sdesc { + color: black; } + .prgl_elem:hover .prgl_elem_subinfo_caption { + color: black; } + .prgl_elem:hover .prgl_elem_subinfo_data { + color: black; } .prgl_elem_left { padding: 4px; @@ -945,39 +1005,6 @@ html, body { margin: 5px 0 20px 0; } /* 400px */ -.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; } - -@media (max-width: 850px) { - .euler_pnl_header a { - font-size: 16px; } } -.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; @@ -1001,7 +1028,9 @@ html, body { justify-content: center; } .euler_pnl_cell:hover { - box-shadow: 0 0 4px #000000; } + background-color: white; + color: black; + border: 1px solid black; } .euler_pnl_cell a { color: black; @@ -1039,89 +1068,81 @@ html, body { background: #CCCCCC; } /* 400px */ -.programs_pnl_base { - display: inline-flex; - flex-direction: column; - border: 1px solid #AAA; - border-radius: 5px 5px 0 0; - margin: 15px; - width: 652px; } - -.programs_pnl_header { - display: flex; - align-items: center; - justify-content: center; - padding: 4px; - background: #AAA; } - -.programs_pnl_header a { - color: #222; - text-decoration: none; - font-family: Lato, "Helvetica Neue", Helvetica, Arial, sans-serif; - font-size: 22px; - font-weight: 900; } - .programs_pnl_content { display: flex; flex-direction: row; flex-wrap: wrap; - justify-content: center; - background: #DDD; - padding: 6px; } - .programs_pnl_content .programs_pnl_entry { - display: flex; - flex-direction: column; - width: 190px; - border: 1px solid #333; - background: #AAA; - color: #000; - text-decoration: none; - margin: 4px; } - .programs_pnl_content .programs_pnl_entry:hover { - box-shadow: 0 0 8px #000000; } - .programs_pnl_content .programs_pnl_img { - display: flex; - flex-direction: column; - justify-content: flex-start; - margin: 4px; } - .programs_pnl_content .programs_pnl_img img { - width: 100%; - height: auto; } - .programs_pnl_content .programs_pnl_center { - display: flex; - justify-content: center; - align-items: flex-end; - text-align: center; + justify-content: center; } + +.programs_pnl_entry { + display: flex; + flex-direction: column; + width: 190px; + border: 1px solid #333; + background: #AAA; + color: #000; + text-decoration: none; + margin: 4px; } + .programs_pnl_entry:hover { + background: white; color: black; - font-weight: bolder; - font-size: 15pt; - flex-grow: 1; - margin: 0 2px; } - .programs_pnl_content .programs_pnl_bottom { - background: #888; - display: flex; - flex-direction: row; } - .programs_pnl_content .programs_pnl_bottom_1, .programs_pnl_content .programs_pnl_bottom_2 { - flex-grow: 1; - text-align: center; - display: flex; - flex-direction: column; } - .programs_pnl_content .programs_pnl_bottom_sub_top { - color: #444; } - .programs_pnl_content .programs_pnl_bottom_sub_bot { - color: #111; - font-weight: bolder; } + border: 1px solid black; } + .programs_pnl_entry:hover .programs_pnl_center { + color: black; } + .programs_pnl_entry:hover .programs_pnl_bottom { + background: white; + border-top: 1px solid black; } + +.programs_pnl_img { + display: flex; + flex-direction: column; + justify-content: flex-start; + margin: 4px; } + +.programs_pnl_img img { + width: 100%; + height: auto; } + +.programs_pnl_center { + display: flex; + justify-content: center; + align-items: flex-end; + text-align: center; + color: black; + font-weight: bolder; + font-size: 15pt; + flex-grow: 1; + margin: 0 2px; } + +.programs_pnl_bottom { + background: #888; + border-top: 1px solid transparent; + display: flex; + flex-direction: row; } + +.programs_pnl_bottom_1, .programs_pnl_bottom_2 { + flex-grow: 1; + text-align: center; + display: flex; + flex-direction: column; } + +.programs_pnl_bottom_sub_top { + color: #444; } + +.programs_pnl_bottom_sub_bot { + color: #111; + font-weight: bolder; } @media (max-width: 850px) { - .programs_pnl_base { - width: 320px; } - .programs_pnl_base .programs_pnl_entry { - width: 100%; } - .programs_pnl_base .programs_pnl_bottom_sub_top { - margin-left: 4px; - margin-right: 6px; } - .programs_pnl_base .programs_pnl_bottom_1, .programs_pnl_base .programs_pnl_bottom_2 { - flex-direction: row; } } + .programs_pnl_entry { + width: 100%; } + + .programs_pnl_bottom_sub_top { + margin-left: 4px; + margin-right: 6px; } + + .programs_pnl_bottom_1, .programs_pnl_bottom_2 { + flex-direction: row; } } /* 400px */ .bfjoust_runner_owner { border: 1px solid #888; diff --git a/www/data/css/styles.min.css b/www/data/css/styles.min.css index 74d83ba..595d0b2 100644 --- a/www/data/css/styles.min.css +++ b/www/data/css/styles.min.css @@ -53,16 +53,26 @@ html,body{margin:0;padding:0;height:100%} @media(min-width:1200px){#footerdiv{width:1170px}} #footerdiv hr{margin-bottom:5px;display:block;border:0;color:white;height:1px;background:#CCCCCCFF;background:-webkit-gradient(radial,50% 50%,0,50% 50%,350,from(#CCC),to(#FFFFFF00))} @media(max-width:850px){#footerdiv .footerspan2{display:none;visibility:collapse}} +.index_pnl_base{display:inline-flex;flex-direction:column;border:1px solid black;margin:15px;width:652px} +.index_pnl_header{display:flex;align-items:center;justify-content:center;padding:4px;background:#AAA} +.index_pnl_header a{color:#222;text-decoration:none;font-family:Lato,"Helvetica Neue",Helvetica,Arial,sans-serif;font-size:22px;font-weight:900} +@media(max-width:850px){.index_pnl_header a{font-size:16px}} +.index_pnl_header a:hover{text-decoration:underline} +.index_pnl_content{display:flex;flex-direction:column;background:#DDD;padding:6px} +@media(max-width:850px){.index_pnl_base{width:330px}} .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 #000} .ble_blog{background-color:#BBB} .ble_log{background-color:#DDD} .ble_blog .ble_date{background-color:#AAA;color:#333} .ble_log .ble_date{background-color:#CCC;color:#333} .ble_log{color:#555} -.ble_log:hover{color:#333} -.ble_date{background-color:#AAA;padding:2px;font-size:.8em;font-style:italic} +.bloglistelem:hover{border:solid 1px black} +.ble_blog:hover{background-color:white;color:black} +.ble_log:hover{background-color:white;color:black} +.ble_blog:hover .ble_date{background-color:white;color:black;border-bottom:1px solid black} +.ble_log:hover .ble_date{background-color:white;color:black;border-bottom:1px solid black} +.ble_date{background-color:#AAA;border-bottom:1px solid transparent;padding:2px;font-size:.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}} .base_markdown code{font-family:Consolas,Monaco,"Courier New",Menlo,monospace;direction:ltr;text-align:left;white-space:pre;word-spacing:normal;word-break:normal;-moz-tab-size:4;tab-size:4;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;hyphens:none} @@ -82,7 +92,7 @@ html,body{margin:0;padding:0;height:100%} .notable{width:unset !important;border:none !important} .notable th,.notable td,.notable tr{border:none !important;background:transparent !important} .blogcontent_euler,.blogcontent_markdown,.blogcontent_plain{width:90%} -#PEB_tableProblems .PEB_tablerowProblems:hover{background-color:#888} +#PEB_tableProblems .PEB_tablerowProblems:hover{background-color:#999} #PEB_tableProblems .PEB_TC_Value{font-family:Consolas,Monaco,"Courier New",Menlo,monospace} #PEB_tableProblems .PEB_TC_Value:not(:hover){color:transparent;-o-transition:.5s;-ms-transition:.5s;-moz-transition:.5s;-webkit-transition:.5s;transition:.5s} #PEB_tableProblems .PEB_TC_Value:hover{color:#333;-o-transition:.5s;-ms-transition:.5s;-moz-transition:.5s;-webkit-transition:.5s;transition:.5s} @@ -152,7 +162,10 @@ html,body{margin:0;padding:0;height:100%} .prgl_parent{display:flex;flex-direction:column} @media(max-width:850px){.prgl_parent{align-items:center}} .prgl_elem{display:flex;flex-direction:row;text-decoration:none;background:#BBB;border:solid 1px #444;margin:5px 0} -.prgl_elem:hover{background:#999;box-shadow:0 0 4px #000} +.prgl_elem:hover{background:white;color:black;border:solid 1px black} +.prgl_elem:hover .prgl_elem_sdesc{color:black} +.prgl_elem:hover .prgl_elem_subinfo_caption{color:black} +.prgl_elem:hover .prgl_elem_subinfo_data{color:black} .prgl_elem_left{padding:4px;display:flex} .prgl_elem_left img{width:250px;height:100%;min-height:100px} .prgl_elem_right{display:flex;flex-direction:column;flex-grow:1} @@ -231,17 +244,11 @@ html,body{margin:0;padding:0;height:100%} #loginform div{display:flex;flex-direction:column} #loginform div button{margin:10px 0;padding:0} .loginerror{display:flex;background:#f44;font-weight:bold;padding:0 5px;margin:5px 0 20px 0} -.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} -@media(max-width:850px){.euler_pnl_header a{font-size:16px}} -.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 #000} +.euler_pnl_cell:hover{background-color:white;color:black;border:1px solid black} .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} @@ -251,24 +258,22 @@ html,body{margin:0;padding:0;height:100%} .euler_pnl_celltime_bad{background:#d8b298} .euler_pnl_celltime_fail{background:#d89d9d} .euler_pnl_cell_notexist{background:#ccc} -.programs_pnl_base{display:inline-flex;flex-direction:column;border:1px solid #AAA;border-radius:5px 5px 0 0;margin:15px;width:652px} -.programs_pnl_header{display:flex;align-items:center;justify-content:center;padding:4px;background:#AAA} -.programs_pnl_header a{color:#222;text-decoration:none;font-family:Lato,"Helvetica Neue",Helvetica,Arial,sans-serif;font-size:22px;font-weight:900} -.programs_pnl_content{display:flex;flex-direction:row;flex-wrap:wrap;justify-content:center;background:#DDD;padding:6px} -.programs_pnl_content .programs_pnl_entry{display:flex;flex-direction:column;width:190px;border:1px solid #333;background:#AAA;color:#000;text-decoration:none;margin:4px} -.programs_pnl_content .programs_pnl_entry:hover{box-shadow:0 0 8px #000} -.programs_pnl_content .programs_pnl_img{display:flex;flex-direction:column;justify-content:flex-start;margin:4px} -.programs_pnl_content .programs_pnl_img img{width:100%;height:auto} -.programs_pnl_content .programs_pnl_center{display:flex;justify-content:center;align-items:flex-end;text-align:center;color:black;font-weight:bolder;font-size:15pt;flex-grow:1;margin:0 2px} -.programs_pnl_content .programs_pnl_bottom{background:#888;display:flex;flex-direction:row} -.programs_pnl_content .programs_pnl_bottom_1,.programs_pnl_content .programs_pnl_bottom_2{flex-grow:1;text-align:center;display:flex;flex-direction:column} -.programs_pnl_content .programs_pnl_bottom_sub_top{color:#444} -.programs_pnl_content .programs_pnl_bottom_sub_bot{color:#111;font-weight:bolder} +.programs_pnl_content{display:flex;flex-direction:row;flex-wrap:wrap;justify-content:center} +.programs_pnl_entry{display:flex;flex-direction:column;width:190px;border:1px solid #333;background:#AAA;color:#000;text-decoration:none;margin:4px} +.programs_pnl_entry:hover{background:white;color:black;border:1px solid black} +.programs_pnl_entry:hover .programs_pnl_center{color:black} +.programs_pnl_entry:hover .programs_pnl_bottom{background:white;border-top:1px solid black} +.programs_pnl_img{display:flex;flex-direction:column;justify-content:flex-start;margin:4px} +.programs_pnl_img img{width:100%;height:auto} +.programs_pnl_center{display:flex;justify-content:center;align-items:flex-end;text-align:center;color:black;font-weight:bolder;font-size:15pt;flex-grow:1;margin:0 2px} +.programs_pnl_bottom{background:#888;border-top:1px solid transparent;display:flex;flex-direction:row} +.programs_pnl_bottom_1,.programs_pnl_bottom_2{flex-grow:1;text-align:center;display:flex;flex-direction:column} +.programs_pnl_bottom_sub_top{color:#444} +.programs_pnl_bottom_sub_bot{color:#111;font-weight:bolder} @media(max-width:850px){ - .programs_pnl_base{width:320px} - .programs_pnl_base .programs_pnl_entry{width:100%} - .programs_pnl_base .programs_pnl_bottom_sub_top{margin-left:4px;margin-right:6px} - .programs_pnl_base .programs_pnl_bottom_1,.programs_pnl_base .programs_pnl_bottom_2{flex-direction:row} + .programs_pnl_entry{width:100%} + .programs_pnl_bottom_sub_top{margin-left:4px;margin-right:6px} + .programs_pnl_bottom_1,.programs_pnl_bottom_2{flex-direction:row} } .bfjoust_runner_owner{border:1px solid #888;background:#f8f8f8;padding:6px} .bfjoust_runner_owner .hsplit{display:flex;flex-direction:row;flex-wrap:nowrap} diff --git a/www/data/css/styles.scss b/www/data/css/styles.scss index 23d97f0..c5948b4 100644 --- a/www/data/css/styles.scss +++ b/www/data/css/styles.scss @@ -5,7 +5,7 @@ @import 'styles_main'; @import 'styles_bloglist'; @import 'styles_blogview'; -@import 'styles_blogview_befunge'; +@import 'styles_blogview_euler'; @import 'styles_errorview'; @import 'styles_programslist'; @import 'styles_programsview'; diff --git a/www/data/css/styles_bloglist.scss b/www/data/css/styles_bloglist.scss index 8c93bcd..d2d46ca 100644 --- a/www/data/css/styles_bloglist.scss +++ b/www/data/css/styles_bloglist.scss @@ -16,21 +16,23 @@ 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; color: $COL_TEXT_DARK; } .ble_log .ble_date { background-color: #CCC; color: $COL_TEXT_DARK; } -.ble_log { color: $COL_TEXT_DARK_LIGHTER; } -.ble_log:hover { color: $COL_TEXT_DARK; } +.ble_log { color: $COL_TEXT_DARK_LIGHTER; } + +.bloglistelem:hover { border: solid 1px $COL_COMPLEXHOVER_BRD; } +.ble_blog:hover { background-color: $COL_COMPLEXHOVER_BG; color: $COL_COMPLEXHOVER_FG; } +.ble_log:hover { background-color: $COL_COMPLEXHOVER_BG; color: $COL_COMPLEXHOVER_FG; } +.ble_blog:hover .ble_date { background-color: $COL_COMPLEXHOVER_BG; color: $COL_COMPLEXHOVER_FG; border-bottom: 1px solid $COL_COMPLEXHOVER_BRD; } +.ble_log:hover .ble_date { background-color: $COL_COMPLEXHOVER_BG; color: $COL_COMPLEXHOVER_FG; border-bottom: 1px solid $COL_COMPLEXHOVER_BRD; } .ble_date { background-color: #AAA; + border-bottom: 1px solid transparent; padding: 2px; font-size: 0.8em; font-style: italic; diff --git a/www/data/css/styles_blogview_befunge.scss b/www/data/css/styles_blogview_euler.scss similarity index 98% rename from www/data/css/styles_blogview_befunge.scss rename to www/data/css/styles_blogview_euler.scss index 5912ac4..c385bcd 100644 --- a/www/data/css/styles_blogview_befunge.scss +++ b/www/data/css/styles_blogview_euler.scss @@ -3,7 +3,7 @@ #PEB_tableProblems { .PEB_tablerowProblems { } - .PEB_tablerowProblems:hover { background-color: #888; } + .PEB_tablerowProblems:hover { background-color: #999; } .PEB_tablecellProblems { } @@ -94,8 +94,6 @@ padding: 0 5px; } - - .bce_pagination { display:flex; diff --git a/www/data/css/styles_config.scss b/www/data/css/styles_config.scss index 3e4e99d..f93c590 100644 --- a/www/data/css/styles_config.scss +++ b/www/data/css/styles_config.scss @@ -7,6 +7,10 @@ $COL_TEXT_DARK: #333; $COL_TEXT_DARK_LIGHTER: #555; $COL_TRANSPARENT: #FFFFFF00; +$COL_COMPLEXHOVER_BG: white; +$COL_COMPLEXHOVER_FG: black; +$COL_COMPLEXHOVER_BRD: black; + $COL_GITHUB: #4078C0; $COL_HIGHLIGHT_RED: #442222; diff --git a/www/data/css/styles_eulerpanel.scss b/www/data/css/styles_eulerpanel.scss index 26efc29..fa80f81 100644 --- a/www/data/css/styles_eulerpanel.scss +++ b/www/data/css/styles_eulerpanel.scss @@ -1,48 +1,5 @@ @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: $COL_TEXT_DARK_DARKER; - text-decoration: none; - - - font-family: $FONT_HEADER; - font-size: 22px; - font-weight: 900; -} - -@include rdmedia_range(0,1) { .euler_pnl_header a { font-size: 16px; } } - -.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; @@ -71,7 +28,9 @@ } .euler_pnl_cell:hover { - box-shadow: 0 0 4px #000000; + background-color: $COL_COMPLEXHOVER_BG; + color: $COL_COMPLEXHOVER_FG; + border: 1px solid $COL_COMPLEXHOVER_BRD; } .euler_pnl_cell a { diff --git a/www/data/css/styles_header.scss b/www/data/css/styles_header.scss index 0cf59e5..e5e8d48 100644 --- a/www/data/css/styles_header.scss +++ b/www/data/css/styles_header.scss @@ -39,7 +39,7 @@ font-weight: bold; text-decoration: none; - margin: 0px 0px 0px 20px; + margin: 0 0 0 20px; padding: 2px 5px; min-width: 64px; text-align: center; diff --git a/www/data/css/styles_main.scss b/www/data/css/styles_main.scss index e69de29..276e09e 100644 --- a/www/data/css/styles_main.scss +++ b/www/data/css/styles_main.scss @@ -0,0 +1,48 @@ +@import 'styles_config'; + +.index_pnl_base { + display: inline-flex; + flex-direction: column; + + border: 1px solid black; + margin: 15px; + + width: 652px; +} + +.index_pnl_header { + display: flex; + align-items: center; + justify-content: center; + + padding: 4px; + background: #AAA; +} + +.index_pnl_header a { + color: $COL_TEXT_DARK_DARKER; + text-decoration: none; + + font-family: $FONT_HEADER; + font-size: 22px; + font-weight: 900; +} + +@include rdmedia_range(0,1) { .index_pnl_header a { font-size: 16px; } } + +.index_pnl_header a:hover { + text-decoration: underline; +} + +.index_pnl_content { + display: flex; + flex-direction: column; + + background: #DDD; + + padding: 6px; +} + +@include rdmedia_range(0,1) { + .index_pnl_base { width: 330px; } +} diff --git a/www/data/css/styles_programslist.scss b/www/data/css/styles_programslist.scss index aee3696..5fc3750 100644 --- a/www/data/css/styles_programslist.scss +++ b/www/data/css/styles_programslist.scss @@ -18,8 +18,12 @@ margin: 5px 0; &:hover { - background: #999; - box-shadow: 0 0 4px #000000; + background: $COL_COMPLEXHOVER_BG; + color: $COL_COMPLEXHOVER_FG; + border: solid 1px $COL_COMPLEXHOVER_BRD; + .prgl_elem_sdesc { color: $COL_COMPLEXHOVER_FG; } + .prgl_elem_subinfo_caption { color: $COL_COMPLEXHOVER_FG; } + .prgl_elem_subinfo_data { color: $COL_COMPLEXHOVER_FG; } } } diff --git a/www/data/css/styles_programspanel.scss b/www/data/css/styles_programspanel.scss index d3acaba..fd2faae 100644 --- a/www/data/css/styles_programspanel.scss +++ b/www/data/css/styles_programspanel.scss @@ -1,131 +1,102 @@ @import 'styles_config'; -.programs_pnl_base { - display: inline-flex; - flex-direction: column; - - border: 1px solid #AAA; - border-radius: 5px 5px 0 0; - margin: 15px; - - width: 652px; -} - -.programs_pnl_header { - display: flex; - align-items: center; - justify-content: center; - - padding: 4px; - background: #AAA; -} - -.programs_pnl_header a { - color: $COL_TEXT_DARK_DARKER; - text-decoration: none; - - - font-family: $FONT_HEADER; - font-size: 22px; - font-weight: 900; -} - .programs_pnl_content { display: flex; flex-direction: row; flex-wrap: wrap; justify-content: center; +} - background: #DDD; +.programs_pnl_entry { + display: flex; + flex-direction: column; - padding: 6px; + width: 190px; - .programs_pnl_entry { - display: flex; - flex-direction: column; + border: 1px solid #333; + background: #AAA; + color: #000; + text-decoration: none; - width: 190px; + margin: 4px; - border: 1px solid #333; - background: #AAA; - color: #000; - text-decoration: none; + &:hover { + background: $COL_COMPLEXHOVER_BG; + color: $COL_COMPLEXHOVER_FG; + border: 1px solid $COL_COMPLEXHOVER_BRD; - margin: 4px; - - &:hover { - box-shadow: 0 0 8px #000000; - } + .programs_pnl_center { color: $COL_COMPLEXHOVER_FG; } + .programs_pnl_bottom { background: $COL_COMPLEXHOVER_BG; border-top: 1px solid $COL_COMPLEXHOVER_BRD; } } +} - .programs_pnl_img { - display:flex; - flex-direction: column; - justify-content: flex-start; +.programs_pnl_img { + display:flex; + flex-direction: column; + justify-content: flex-start; - margin: 4px; - } + margin: 4px; +} - .programs_pnl_img img { - width: 100%; - height: auto; - } +.programs_pnl_img img { + width: 100%; + height: auto; +} - .programs_pnl_center { - display: flex; - justify-content: center; - align-items: flex-end; - text-align: center; +.programs_pnl_center { + display: flex; + justify-content: center; + align-items: flex-end; + text-align: center; - color: black; - font-weight: bolder; - font-size: 15pt; + color: black; + font-weight: bolder; + font-size: 15pt; - flex-grow: 1; + flex-grow: 1; - margin: 0 2px; - } + margin: 0 2px; +} - .programs_pnl_bottom { - background: #888; - display: flex; - flex-direction: row; - } +.programs_pnl_bottom { + background: #888; + border-top: 1px solid transparent; - .programs_pnl_bottom_1, .programs_pnl_bottom_2 { - flex-grow: 1; - text-align: center; + display: flex; + flex-direction: row; +} - display:flex; - flex-direction: column; - } +.programs_pnl_bottom_1, .programs_pnl_bottom_2 { + flex-grow: 1; + text-align: center; - .programs_pnl_bottom_sub_top { - color: #444; - } + display:flex; + flex-direction: column; +} - .programs_pnl_bottom_sub_bot { - color: #111; - font-weight: bolder; - } +.programs_pnl_bottom_sub_top { + color: #444; +} + +.programs_pnl_bottom_sub_bot { + color: #111; + font-weight: bolder; } @include rdmedia_range(0,1) { - .programs_pnl_base { - width: 320px; - .programs_pnl_entry { - width: 100%; - } - - .programs_pnl_bottom_sub_top { - margin-left: 4px; - margin-right: 6px; - } - - .programs_pnl_bottom_1, .programs_pnl_bottom_2 { - flex-direction: row; - } + .programs_pnl_entry { + width: 100%; } + + .programs_pnl_bottom_sub_top { + margin-left: 4px; + margin-right: 6px; + } + + .programs_pnl_bottom_1, .programs_pnl_bottom_2 { + flex-direction: row; + } + } diff --git a/www/fragments/eulerpanel.php b/www/fragments/eulerpanel.php index 53c93f5..294880d 100644 --- a/www/fragments/eulerpanel.php +++ b/www/fragments/eulerpanel.php @@ -6,12 +6,12 @@ $RATING_CLASSES = ['euler_pnl_celltime_perfect', 'euler_pnl_celltime_good', 'euler_pnl_celltime_ok', 'euler_pnl_celltime_bad', 'euler_pnl_celltime_fail']; ?> -
+
-
+
Project Euler with Befunge-93
-
+
-
+
-
+
Newly added software
-
+
send by mail +//TODO crosslinks to /about/ (goodreads, github, reddit, gitea, delphipraxis, stackoverflow)