Mikescher/www.mikescher.com
1
0
Fork 0
Code Actions

programs_view + css + media mixin

Browse Source
This commit is contained in:
Mike Schwörer 2018-01-20 14:41:21 +01:00
parent b241500129
commit d77954ddae
Signed by: Mikescher
GPG Key ID: D3C7172E0A70F8CF
19 changed files with 313 additions and 83 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

97
www/data/css/styles.css
View File

@ -1,3 +1,4 @@
/* 400px */
body { body {
background-color: #EEE; background-color: #EEE;
color: #CCC; color: #CCC;
@ -17,11 +18,23 @@ body {
@media (max-width: 767px) { @media (max-width: 767px) {
.content-responsive { .content-responsive {
width: auto; } } width: 95%;
@media (min-width: 768px) { width: calc(100% - 20px);
margin-left: auto;
margin-right: auto; } }
@media (min-width: 768px) and (max-width: 850px) {
.content-responsive { .content-responsive {
width: auto; } } width: 95%;
@media (min-width: 992px) { width: calc(100% - 20px);
margin-left: auto;
margin-right: auto; } }
@media (min-width: 851px) and (max-width: 991px) {
.content-responsive {
width: 95%;
width: calc(100% - 20px);
margin-left: auto;
margin-right: auto; } }
@media (min-width: 992px) and (max-width: 1199px) {
.content-responsive { .content-responsive {
width: 724px; } } width: 724px; } }
@media (min-width: 1200px) { @media (min-width: 1200px) {
@ -54,6 +67,15 @@ body {
background: -moz-linear-gradient(left, #CCC, #FFFFFF00); background: -moz-linear-gradient(left, #CCC, #FFFFFF00);
background: -webkit-linear-gradient(left, #CCC 0%, #FFFFFF00 100%); } background: -webkit-linear-gradient(left, #CCC 0%, #FFFFFF00 100%); }
@media (max-width: 991px) {
.contentheader h1 {
text-align: center;
margin-left: 10px;
margin-right: 10px; }
.contentheader hr {
background: -moz-radial-gradient(circle, #CCC, #FFFFFF00);
background: -webkit-radial-gradient(circle, #CCC 0%, #FFFFFF00 100%); } }
.blockcontent { .blockcontent {
display: block; display: block;
width: 100%; } width: 100%; }
@ -63,8 +85,11 @@ body {
.generic_collapsed { .generic_collapsed {
visibility: collapse !important; visibility: collapse !important;
display: none !important; } display: none !important;
width: 0 !important;
height: 0 !important; }
/* 400px */
#headerdiv { #headerdiv {
z-index: 999; z-index: 999;
background-color: #333; background-color: #333;
@ -133,6 +158,7 @@ body {
#content { #content {
padding-top: 0; } } padding-top: 0; } }
/* 400px */
html, body { html, body {
margin: 0; margin: 0;
padding: 0; padding: 0;
@ -162,10 +188,13 @@ html, body {
@media (max-width: 767px) { @media (max-width: 767px) {
#footerdiv { #footerdiv {
width: auto; } } width: auto; } }
@media (min-width: 768px) { @media (min-width: 768px) and (max-width: 850px) {
#footerdiv { #footerdiv {
width: auto; } } width: auto; } }
@media (min-width: 992px) { @media (min-width: 851px) and (max-width: 991px) {
#footerdiv {
width: auto; } }
@media (min-width: 992px) and (max-width: 1199px) {
#footerdiv { #footerdiv {
width: 724px; } } width: 724px; } }
@media (min-width: 1200px) { @media (min-width: 1200px) {
@ -184,6 +213,7 @@ html, body {
#footerdiv .footerspan2 { #footerdiv .footerspan2 {
display: none; display: none;
visibility: collapse; } } visibility: collapse; } }
/* 400px */
.bloglistelem_container { .bloglistelem_container {
display: flex; display: flex;
align-items: center; align-items: center;
@ -234,6 +264,7 @@ html, body {
@media (max-width: 767px) { @media (max-width: 767px) {
.ble_title { .ble_title {
font-size: 1.25em; } } font-size: 1.25em; } }
/* 400px */
.blogcontent { .blogcontent {
color: #333; color: #333;
border: 1px solid black; border: 1px solid black;
@ -317,6 +348,7 @@ html, body {
border: none !important; border: none !important;
background: transparent !important; } background: transparent !important; }
/* 400px */
#PEB_tableProblems .PEB_tablerowProblems:hover { #PEB_tableProblems .PEB_tablerowProblems:hover {
background-color: #888; } background-color: #888; }
#PEB_tableProblems .PEB_TC_Value { #PEB_tableProblems .PEB_TC_Value {
@ -431,7 +463,7 @@ html, body {
.bce_pag05 { .bce_pag05 {
flex-direction: row; } } flex-direction: row; } }
@media (min-width: 768px) { @media (min-width: 768px) and (max-width: 850px) {
.bce_pagination { .bce_pagination {
flex-direction: column; } flex-direction: column; }
@ -443,7 +475,19 @@ html, body {
.bce_pag05 { .bce_pag05 {
flex-direction: row; } } flex-direction: row; } }
@media (min-width: 992px) { @media (min-width: 851px) and (max-width: 991px) {
.bce_pagination {
flex-direction: column; }
.bce_pag20 {
flex-direction: column; }
.bce_pag10 {
flex-direction: row; }
.bce_pag05 {
flex-direction: row; } }
@media (min-width: 992px) and (max-width: 1199px) {
.bce_pagination { .bce_pagination {
flex-direction: column; } flex-direction: column; }
@ -467,9 +511,10 @@ html, body {
.bce_pag05 { .bce_pag05 {
flex-direction: row; } } flex-direction: row; } }
/* 400px */
.ev_master { .ev_master {
align-self: center; } align-self: center; }
@media (min-width: 850px) { @media (min-width: 851px) {
.ev_master { .ev_master {
padding-bottom: 80px; } } padding-bottom: 80px; } }
.ev_master .ev_code { .ev_master .ev_code {
@ -488,10 +533,14 @@ html, body {
.ev_master .ev_msg { .ev_master .ev_msg {
font-size: 15pt; } } font-size: 15pt; } }
/* 400px */
.prgl_parent { .prgl_parent {
display: flex; display: flex;
flex-direction: column; } flex-direction: column; }
@media (max-width: 850px) {
.prgl_parent {
align-items: center; } }
.prgl_elem { .prgl_elem {
display: flex; display: flex;
flex-direction: row; flex-direction: row;
@ -605,6 +654,7 @@ html, body {
.prgl_elem_sdesc { .prgl_elem_sdesc {
display: none; display: none;
visibility: hidden; } } visibility: hidden; } }
/* 400px */
.prgv_content { .prgv_content {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
@ -630,8 +680,9 @@ html, body {
margin-top: 15px; } margin-top: 15px; }
.prgv_left { .prgv_left {
display: inline-flex;
justify-content: center;
flex-grow: 1; flex-grow: 1;
text-align: center;
margin-left: 10px; margin-left: 10px;
margin-top: auto; margin-top: auto;
margin-bottom: auto; } margin-bottom: auto; }
@ -724,6 +775,27 @@ html, body {
background: -moz-radial-gradient(circle, #666, #FFFFFF00); background: -moz-radial-gradient(circle, #666, #FFFFFF00);
background: -webkit-radial-gradient(circle, #666 0%, #FFFFFF00 100%); } background: -webkit-radial-gradient(circle, #666 0%, #FFFFFF00 100%); }
@media (max-width: 991px) {
.prgv_content {
border: none; } }
@media (max-width: 767px) {
.prgv_top {
flex-direction: column;
margin-top: 0; }
.prgv_left {
margin: 0 10px 10px 10px; }
.prgv_right {
min-height: 0;
min-width: 0; }
.prgv_right_lang {
justify-content: space-evenly; }
#prgv_header h1 {
font-size: 28pt; } }
/* 400px */
.euler_pnl_base { .euler_pnl_base {
display: inline-flex; display: inline-flex;
flex-direction: column; flex-direction: column;
@ -817,6 +889,7 @@ html, body {
.euler_pnl_cell_notexist { .euler_pnl_cell_notexist {
background: #CCCCCC; } background: #CCCCCC; }
/* 400px */
.programs_pnl_base { .programs_pnl_base {
display: inline-flex; display: inline-flex;
flex-direction: column; flex-direction: column;
@ -900,6 +973,7 @@ html, body {
margin-right: 6px; } margin-right: 6px; }
.programs_pnl_base .programs_pnl_bottom_1, .programs_pnl_base .programs_pnl_bottom_2 { .programs_pnl_base .programs_pnl_bottom_1, .programs_pnl_base .programs_pnl_bottom_2 {
flex-direction: row; } } flex-direction: row; } }
/* 400px */
.bfjoust_runner_owner { .bfjoust_runner_owner {
border: 1px solid #888; border: 1px solid #888;
background: #F8F8F8; background: #F8F8F8;
@ -977,6 +1051,7 @@ html, body {
border-radius: 6px; border-radius: 6px;
border: 1px solid #CCC; } border: 1px solid #CCC; }
/* 400px */
.bce_code { .bce_code {
background: #F8F8F8; background: #F8F8F8;
color: black; color: black;

41
www/data/css/styles.min.css vendored
View File

@ -1,18 +1,23 @@
body{background-color:#EEE;color:#CCC;font-family:serif} body{background-color:#EEE;color:#CCC;font-family:serif}
#content{padding-top:64px;display:flex;justify-content:center;line-height:1.4;flex-direction:column;align-items:center} #content{padding-top:64px;display:flex;justify-content:center;line-height:1.4;flex-direction:column;align-items:center}
.content-responsive{margin-left:auto;margin-right:auto} .content-responsive{margin-left:auto;margin-right:auto}
@media(max-width:767px){.content-responsive{width:auto}} @media(max-width:767px){.content-responsive{width:95%;width:calc(100% - 20px);margin-left:auto;margin-right:auto}}
@media(min-width:768px){.content-responsive{width:auto}} @media(min-width:768px) and (max-width:850px){.content-responsive{width:95%;width:calc(100% - 20px);margin-left:auto;margin-right:auto}}
@media(min-width:992px){.content-responsive{width:724px}} @media(min-width:851px) and (max-width:991px){.content-responsive{width:95%;width:calc(100% - 20px);margin-left:auto;margin-right:auto}}
@media(min-width:992px) and (max-width:1199px){.content-responsive{width:724px}}
@media(min-width:1200px){.content-responsive{width:1170px}} @media(min-width:1200px){.content-responsive{width:1170px}}
.content-fullheight{flex-grow:1} .content-fullheight{flex-grow:1}
.contentheader{width:100%;color:#333;font-size:large} .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} .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}} @media(max-width:767px){.contentheader h1{font-size:32px}}
.contentheader hr{margin:0 0 25px 0;display:block;border:0;color:white;height:1px;background:#CCCCCCFF;background:-moz-linear-gradient(left,#CCC,#FFFFFF00);background:-webkit-linear-gradient(left,#CCC 0,#FFFFFF00 100%)} .contentheader hr{margin:0 0 25px 0;display:block;border:0;color:white;height:1px;background:#CCCCCCFF;background:-moz-linear-gradient(left,#CCC,#FFFFFF00);background:-webkit-linear-gradient(left,#CCC 0,#FFFFFF00 100%)}
@media(max-width:991px){
.contentheader h1{text-align:center;margin-left:10px;margin-right:10px}
.contentheader hr{background:-moz-radial-gradient(circle,#CCC,#FFFFFF00);background:-webkit-radial-gradient(circle,#CCC 0,#FFFFFF00 100%)}
}
.blockcontent{display:block;width:100%} .blockcontent{display:block;width:100%}
.generic_hidden{visibility:hidden !important} .generic_hidden{visibility:hidden !important}
.generic_collapsed{visibility:collapse !important;display:none !important} .generic_collapsed{visibility:collapse !important;display:none !important;width:0 !important;height:0 !important}
#headerdiv{z-index:999;background-color:#333;display:flex;border-bottom:1px solid #111;box-shadow:0 0 8px #000;position:fixed;width:100%} #headerdiv{z-index:999;background-color:#333;display:flex;border-bottom:1px solid #111;box-shadow:0 0 8px #000;position:fixed;width:100%}
#headerdiv .logowrapper{flex:initial;margin:0;padding:0;height:42px} #headerdiv .logowrapper{flex:initial;margin:0;padding:0;height:42px}
#headerdiv .logowrapper .logo{height:30px;margin:4px 0 8px 6px;flex:initial} #headerdiv .logowrapper .logo{height:30px;margin:4px 0 8px 6px;flex:initial}
@ -35,8 +40,9 @@ html,body{margin:0;padding:0;height:100%}
#content{padding-bottom:60px} #content{padding-bottom:60px}
#footerdiv{position:absolute;bottom:0;width:100%;height:60px;text-align:center;left:0;right:0;margin:0 auto} #footerdiv{position:absolute;bottom:0;width:100%;height:60px;text-align:center;left:0;right:0;margin:0 auto}
@media(max-width:767px){#footerdiv{width:auto}} @media(max-width:767px){#footerdiv{width:auto}}
@media(min-width:768px){#footerdiv{width:auto}} @media(min-width:768px) and (max-width:850px){#footerdiv{width:auto}}
@media(min-width:992px){#footerdiv{width:724px}} @media(min-width:851px) and (max-width:991px){#footerdiv{width:auto}}
@media(min-width:992px) and (max-width:1199px){#footerdiv{width:724px}}
@media(min-width:1200px){#footerdiv{width:1170px}} @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))} #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}} @media(max-width:850px){#footerdiv .footerspan2{display:none;visibility:collapse}}
@ -106,13 +112,19 @@ html,body{margin:0;padding:0;height:100%}
.bce_pag10{flex-direction:column} .bce_pag10{flex-direction:column}
.bce_pag05{flex-direction:row} .bce_pag05{flex-direction:row}
} }
@media(min-width:768px){ @media(min-width:768px) and (max-width:850px){
.bce_pagination{flex-direction:column} .bce_pagination{flex-direction:column}
.bce_pag20{flex-direction:column} .bce_pag20{flex-direction:column}
.bce_pag10{flex-direction:row} .bce_pag10{flex-direction:row}
.bce_pag05{flex-direction:row} .bce_pag05{flex-direction:row}
} }
@media(min-width:992px){ @media(min-width:851px) and (max-width:991px){
.bce_pagination{flex-direction:column}
.bce_pag20{flex-direction:column}
.bce_pag10{flex-direction:row}
.bce_pag05{flex-direction:row}
}
@media(min-width:992px) and (max-width:1199px){
.bce_pagination{flex-direction:column} .bce_pagination{flex-direction:column}
.bce_pag20{flex-direction:column} .bce_pag20{flex-direction:column}
.bce_pag10{flex-direction:row} .bce_pag10{flex-direction:row}
@ -125,7 +137,7 @@ html,body{margin:0;padding:0;height:100%}
.bce_pag05{flex-direction:row} .bce_pag05{flex-direction:row}
} }
.ev_master{align-self:center} .ev_master{align-self:center}
@media(min-width:850px){.ev_master{padding-bottom:80px}} @media(min-width:851px){.ev_master{padding-bottom:80px}}
.ev_master .ev_code{color:#000;text-align:center;font-size:150pt;font-weight:500;font-family:Consolas,Monaco,"Courier New",Menlo,monospace} .ev_master .ev_code{color:#000;text-align:center;font-size:150pt;font-weight:500;font-family:Consolas,Monaco,"Courier New",Menlo,monospace}
.ev_master .ev_msg{color:#888;text-align:center;font-size:25pt} .ev_master .ev_msg{color:#888;text-align:center;font-size:25pt}
@media(max-width:767px){ @media(max-width:767px){
@ -133,6 +145,7 @@ html,body{margin:0;padding:0;height:100%}
.ev_master .ev_msg{font-size:15pt} .ev_master .ev_msg{font-size:15pt}
} }
.prgl_parent{display:flex;flex-direction:column} .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{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:#999;box-shadow:0 0 4px #000}
.prgl_elem_left{padding:4px;display:flex} .prgl_elem_left{padding:4px;display:flex}
@ -165,7 +178,7 @@ html,body{margin:0;padding:0;height:100%}
#prgv_header h1{font-size:48pt;text-align:center;margin-top:5px} #prgv_header h1{font-size:48pt;text-align:center;margin-top:5px}
#prgv_header hr{background:-moz-radial-gradient(circle,#CCC,#FFFFFF00);background:-webkit-radial-gradient(circle,#CCC 0,#FFFFFF00 100%)} #prgv_header hr{background:-moz-radial-gradient(circle,#CCC,#FFFFFF00);background:-webkit-radial-gradient(circle,#CCC 0,#FFFFFF00 100%)}
.prgv_top{display:flex;flex-direction:row;margin-top:15px} .prgv_top{display:flex;flex-direction:row;margin-top:15px}
.prgv_left{flex-grow:1;text-align:center;margin-left:10px;margin-top:auto;margin-bottom:auto} .prgv_left{display:inline-flex;justify-content:center;flex-grow:1;margin-left:10px;margin-top:auto;margin-bottom:auto}
.prgv_left img{max-height:100%;max-width:100%} .prgv_left img{max-height:100%;max-width:100%}
.prgv_right{background:#BBB;border:1px solid #666;margin:0 10px;padding:8px 5px 2px 5px;min-height:250px;min-width:200px;display:grid;grid-template-columns:auto 1fr;grid-template-rows:auto auto auto auto auto 1fr auto;grid-column-gap:15px;grid-row-gap:2px} .prgv_right{background:#BBB;border:1px solid #666;margin:0 10px;padding:8px 5px 2px 5px;min-height:250px;min-width:200px;display:grid;grid-template-columns:auto 1fr;grid-template-rows:auto auto auto auto auto 1fr auto;grid-column-gap:15px;grid-row-gap:2px}
.prgv_right_key{font-weight:bold} .prgv_right_key{font-weight:bold}
@ -182,6 +195,14 @@ html,body{margin:0;padding:0;height:100%}
.prgv_right_lang img{display:inline;height:16pt;max-width:32px;margin:1px 2px 0 2px} .prgv_right_lang img{display:inline;height:16pt;max-width:32px;margin:1px 2px 0 2px}
.prgv_center{margin:0 8px 8px 8px;padding:16px;background:#EEE;border:1px solid rgba(0,0,0,0.15)} .prgv_center{margin:0 8px 8px 8px;padding:16px;background:#EEE;border:1px solid rgba(0,0,0,0.15)}
.prgv_sep{margin:40px 0 40px 0;display:block;border:0;color:white;height:1px;background:#666666FF;background:-moz-radial-gradient(circle,#666,#FFFFFF00);background:-webkit-radial-gradient(circle,#666 0,#FFFFFF00 100%)} .prgv_sep{margin:40px 0 40px 0;display:block;border:0;color:white;height:1px;background:#666666FF;background:-moz-radial-gradient(circle,#666,#FFFFFF00);background:-webkit-radial-gradient(circle,#666 0,#FFFFFF00 100%)}
@media(max-width:991px){.prgv_content{border:0}}
@media(max-width:767px){
.prgv_top{flex-direction:column;margin-top:0}
.prgv_left{margin:0 10px 10px 10px}
.prgv_right{min-height:0;min-width:0}
.prgv_right_lang{justify-content:space-evenly}
#prgv_header h1{font-size:28pt}
}
.euler_pnl_base{display:inline-flex;flex-direction:column;border:1px solid #AAA;border-radius:5px 5px 0 0;margin:15px} .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{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{color:#222;text-decoration:none;font-family:Lato,"Helvetica Neue",Helvetica,Arial,sans-serif;font-size:22px;font-weight:900}

4
www/data/css/styles_befungerunner.scss
View File

@ -80,7 +80,7 @@
} }
} }
@media (max-width: 767px) { @include rdmedia(0) {
.bce_code { .bce_code {
.bce_code_ctrl{ .bce_code_ctrl{
@ -133,7 +133,7 @@
flex-direction: column; flex-direction: column;
} }
} }
@media (max-width: 767px) { @include rdmedia(0) {
.bce_code_out { .bce_code_out {
flex-direction: column; flex-direction: column;

2
www/data/css/styles_bfjoustrunner.scss
View File

@ -21,7 +21,7 @@
.sink { height: 100px; } .sink { height: 100px; }
.bottomelem { height: 200px; } .bottomelem { height: 200px; }
@media (max-width: 767px) { @include rdmedia(0) {
.hsplit { display:block; } .hsplit { display:block; }
.hsplit_1 { display:block; width: calc(100% - 8px); } .hsplit_1 { display:block; width: calc(100% - 8px); }
.hsplit_2 { display:block; width: calc(100% - 8px); } .hsplit_2 { display:block; width: calc(100% - 8px); }

2
www/data/css/styles_bloglist.scss
View File

@ -43,5 +43,5 @@
margin: 2px 0 2px 10px; margin: 2px 0 2px 10px;
} }
@media(max-width:767px) { .ble_title { font-size: 1.25em; } } @include rdmedia(0) { .ble_title { font-size: 1.25em; } }

21
www/data/css/styles_blogview_befunge.scss
View File

@ -78,11 +78,11 @@
} }
@media(max-width:1199px) { @include rdmedia_range(0,3) {
#PEB_tableProblems tr td:nth-child(1), #PEB_tableProblems tr th:nth-child(1) { display: none; } #PEB_tableProblems tr td:nth-child(1), #PEB_tableProblems tr th:nth-child(1) { display: none; }
} }
@media(max-width:767px) { @include rdmedia(0) {
#PEB_tableProblems tr td:nth-child(1), #PEB_tableProblems tr th:nth-child(1) { display: none; } #PEB_tableProblems tr td:nth-child(1), #PEB_tableProblems tr th:nth-child(1) { display: none; }
#PEB_tableProblems tr td:nth-child(3), #PEB_tableProblems tr th:nth-child(3) { display: none; } #PEB_tableProblems tr td:nth-child(3), #PEB_tableProblems tr th:nth-child(3) { display: none; }
#PEB_tableProblems tr td:nth-child(4), #PEB_tableProblems tr th:nth-child(4) { display: none; } #PEB_tableProblems tr td:nth-child(4), #PEB_tableProblems tr th:nth-child(4) { display: none; }
@ -134,8 +134,7 @@
} }
@include rdmedia(0)
@media(max-width:767px)
{ {
.bce_pagination { flex-direction: column; } .bce_pagination { flex-direction: column; }
.bce_pag20 { flex-direction: column; } .bce_pag20 { flex-direction: column; }
@ -143,7 +142,7 @@
.bce_pag05 { flex-direction: row; } .bce_pag05 { flex-direction: row; }
} }
@media(min-width:768px) @include rdmedia(1)
{ {
.bce_pagination { flex-direction: column; } .bce_pagination { flex-direction: column; }
.bce_pag20 { flex-direction: column; } .bce_pag20 { flex-direction: column; }
@ -151,8 +150,7 @@
.bce_pag05 { flex-direction: row; } .bce_pag05 { flex-direction: row; }
} }
@include rdmedia(2)
@media(min-width:992px)
{ {
.bce_pagination { flex-direction: column; } .bce_pagination { flex-direction: column; }
.bce_pag20 { flex-direction: column; } .bce_pag20 { flex-direction: column; }
@ -160,8 +158,15 @@
.bce_pag05 { flex-direction: row; } .bce_pag05 { flex-direction: row; }
} }
@include rdmedia(3)
{
.bce_pagination { flex-direction: column; }
.bce_pag20 { flex-direction: column; }
.bce_pag10 { flex-direction: row; }
.bce_pag05 { flex-direction: row; }
}
@media(min-width:1200px) @include rdmedia(4)
{ {
.bce_pagination { flex-direction: column; } .bce_pagination { flex-direction: column; }
.bce_pag20 { flex-direction: row; } .bce_pag20 { flex-direction: row; }

73
www/data/css/styles_config.scss
View File

@ -13,3 +13,76 @@ $COL_HIGHLIGHT_RED: #442222;
$FONT_HEADER: Lato, "Helvetica Neue", Helvetica, Arial, sans-serif; $FONT_HEADER: Lato, "Helvetica Neue", Helvetica, Arial, sans-serif;
$FONT_CODE: Consolas, Monaco, "Courier New", Menlo, monospace; $FONT_CODE: Consolas, Monaco, "Courier New", Menlo, monospace;
$FONT_DEFAULT: serif; $FONT_DEFAULT: serif;
// [0] ResponsiveDesign Minimal Mobile
// content_width = auto
// header = vertical
$RD_0_MINIMOBILE_MIN: 0px; /* 400px */
$RD_0_MINIMOBILE_MAX: 767px;
// [1] ResponsiveDesign Normal Mobile
// content_width = auto
// header = vertical
$RD_1_NORMMOBILE_MIN: 768px;
$RD_1_NORMMOBILE_MAX: 850px;
// [2] ResponsiveDesign Small Desktop
// content_width = auto
// header = vertical
$RD_2_SMALLDESKTOP_MIN: 851px;
$RD_2_SMALLDESKTOP_MAX: 991px;
// [3] ResponsiveDesign Medium Desktop
// content_width = auto
// header = vertical
$RD_3_MEDDESKTOP_MIN: 992px;
$RD_3_MEDDESKTOP_MAX: 1199px;
// [4] ResponsiveDesign Large Desktop
// content_width = auto
// header = vertical
$RD_4_LARGEDESKTOP_MIN: 1200px;
$RD_4_LARGEDESKTOP_MAX: 99999px;
@function rdmedia_expr($min, $max) {
$w1: "";
$w2: "";
@if ($min == 0) { $w1: $RD_0_MINIMOBILE_MIN; }
@if ($min == 1) { $w1: $RD_1_NORMMOBILE_MIN; }
@if ($min == 2) { $w1: $RD_2_SMALLDESKTOP_MIN; }
@if ($min == 3) { $w1: $RD_3_MEDDESKTOP_MIN; }
@if ($min == 4) { $w1: $RD_4_LARGEDESKTOP_MIN; }
@if ($max == 0) { $w2: $RD_0_MINIMOBILE_MAX; }
@if ($max == 1) { $w2: $RD_1_NORMMOBILE_MAX; }
@if ($max == 2) { $w2: $RD_2_SMALLDESKTOP_MAX; }
@if ($max == 3) { $w2: $RD_3_MEDDESKTOP_MAX; }
@if ($max == 4) { $w2: $RD_4_LARGEDESKTOP_MAX; }
@if (($min == 0) and ($max == 4)) { @return "(all)"; }
@if ($min == 0 ) { @return "(max-width:"+$w2+")"; }
@if ($max == 4 ) { @return "(min-width:"+$w1+")"; }
@return "(min-width:"+$w1+") and (max-width:"+$w2+")";
}
@mixin rdmedia_range($min, $max) {
@media #{rdmedia_expr($min, $max)}
{
@content;
}
}
@mixin rdmedia($lvl) {
@media #{rdmedia_expr($lvl, $lvl)}
{
@content;
}
}

4
www/data/css/styles_errorview.scss
View File

@ -4,7 +4,7 @@
align-self: center; align-self: center;
@media(min-width:850px) {padding-bottom: 80px;} @include rdmedia_range(2,4) {padding-bottom: 80px;}
.ev_code { .ev_code {
color: #000; color: #000;
@ -20,7 +20,7 @@
font-size: 25pt; font-size: 25pt;
} }
@media(max-width:767px) { @include rdmedia(0) {
.ev_code { font-size: 75pt; } .ev_code { font-size: 75pt; }
.ev_msg { font-size: 15pt; } .ev_msg { font-size: 15pt; }
} }

4
www/data/css/styles_eulerpanel.scss
View File

@ -28,7 +28,7 @@
font-weight: 900; font-weight: 900;
} }
@media (max-width: 850px) { .euler_pnl_header a { font-size: 16px; } } @include rdmedia_range(0,1) { .euler_pnl_header a { font-size: 16px; } }
.euler_pnl_header a:hover { .euler_pnl_header a:hover {
text-decoration: underline; text-decoration: underline;
@ -49,7 +49,7 @@
flex-wrap: wrap; flex-wrap: wrap;
} }
@media (max-width: 850px) { .euler_pnl_row { flex-direction: column; } } @include rdmedia_range(0,1) { .euler_pnl_row { flex-direction: column; } }
.euler_pnl_row2 { .euler_pnl_row2 {
display: flex; display: flex;

11
www/data/css/styles_footer.scss
View File

@ -35,10 +35,11 @@ html, body {
//---------------------------------------------- //----------------------------------------------
@media(max-width:767px) { #footerdiv { width: auto; } } @include rdmedia(0) { #footerdiv { width: auto; } }
@media(min-width:768px) { #footerdiv { width: auto; } } @include rdmedia(1) { #footerdiv { width: auto; } }
@media(min-width:992px) { #footerdiv { width: 724px; } } @include rdmedia(2) { #footerdiv { width: auto; } }
@media(min-width:1200px){ #footerdiv { width: 1170px; } } @include rdmedia(3) { #footerdiv { width: 724px; } }
@include rdmedia(4) { #footerdiv { width: 1170px; } }
#footerdiv hr { #footerdiv hr {
margin-bottom: 5px; margin-bottom: 5px;
@ -50,6 +51,6 @@ html, body {
background: -webkit-gradient(radial, 50% 50%, 0, 50% 50%, 350, from($COL_TEXT_NORMAL), to($COL_TRANSPARENT)); background: -webkit-gradient(radial, 50% 50%, 0, 50% 50%, 350, from($COL_TEXT_NORMAL), to($COL_TRANSPARENT));
} }
@media (max-width: 850px) { @include rdmedia_range(0,1) {
#footerdiv .footerspan2 {display: none; visibility: collapse;} #footerdiv .footerspan2 {display: none; visibility: collapse;}
} }

35
www/data/css/styles_global.scss
View File

@ -22,10 +22,11 @@ body {
margin-right: auto; margin-right: auto;
} }
@media(max-width:767px) { .content-responsive { width: auto; } } @include rdmedia(0) { .content-responsive { width: 95%; width:calc(100% - 20px); margin-left: auto; margin-right: auto; } }
@media(min-width:768px) { .content-responsive { width: auto; } } @include rdmedia(1) { .content-responsive { width: 95%; width:calc(100% - 20px); margin-left: auto; margin-right: auto; } }
@media(min-width:992px) { .content-responsive { width: 724px; } } @include rdmedia(2) { .content-responsive { width: 95%; width:calc(100% - 20px); margin-left: auto; margin-right: auto; } }
@media(min-width:1200px){ .content-responsive { width: 1170px; } } @include rdmedia(3) { .content-responsive { width: 724px; } }
@include rdmedia(4) { .content-responsive { width: 1170px; } }
.content-fullheight { flex-grow: 1;} .content-fullheight { flex-grow: 1;}
@ -44,7 +45,7 @@ body {
} }
@media(max-width:767px) { .contentheader h1 { font-size: 32px; } } @include rdmedia(0) { .contentheader h1 { font-size: 32px; } }
.contentheader hr { .contentheader hr {
margin: 0 0 25px 0; margin: 0 0 25px 0;
@ -58,10 +59,30 @@ body {
background: -webkit-linear-gradient(left, $COL_TEXT_NORMAL 0%,$COL_TRANSPARENT 100%); background: -webkit-linear-gradient(left, $COL_TEXT_NORMAL 0%,$COL_TRANSPARENT 100%);
} }
@include rdmedia_range(0,2) {
.contentheader h1 {
text-align: center;
margin-left: 10px;
margin-right: 10px;
}
.contentheader hr {
background: -moz-radial-gradient( circle, $COL_TEXT_NORMAL, $COL_TRANSPARENT);
background: -webkit-radial-gradient(circle, $COL_TEXT_NORMAL 0%,$COL_TRANSPARENT 100%);
}
}
.blockcontent { .blockcontent {
display: block; display: block;
width: 100%; width: 100%;
} }
.generic_hidden { visibility: hidden !important; } .generic_hidden {
.generic_collapsed { visibility: collapse !important; display: none !important; } visibility: hidden !important;
}
.generic_collapsed {
visibility: collapse !important;
display: none !important;
width:0 !important;
height:0 !important;
}

2
www/data/css/styles_header.scss
View File

@ -72,7 +72,7 @@
} }
@media (max-width: 850px) { @include rdmedia_range(0,1) {
#headerdiv { #headerdiv {
position: static; position: static;

6
www/data/css/styles_programslist.scss
View File

@ -6,6 +6,8 @@
flex-direction: column; flex-direction: column;
} }
@include rdmedia_range(0,1) { .prgl_parent {align-items: center;} }
.prgl_elem { .prgl_elem {
display: flex; display: flex;
flex-direction: row; flex-direction: row;
@ -97,7 +99,7 @@
} }
@media(max-width:1199px) @include rdmedia_range(0,3)
{ {
.prgl_elem_title { .prgl_elem_title {
font-size: 22pt; font-size: 22pt;
@ -116,7 +118,7 @@
margin-bottom: 10px; margin-bottom: 10px;
} }
} }
@media (max-width: 850px) @include rdmedia_range(0,1)
{ {
.prgl_elem { .prgl_elem {
flex-direction: column; flex-direction: column;

2
www/data/css/styles_programspanel.scss
View File

@ -110,7 +110,7 @@
} }
} }
@media (max-width: 850px) { @include rdmedia_range(0,1) {
.programs_pnl_base { .programs_pnl_base {
width: 320px; width: 320px;

33
www/data/css/styles_programsview.scss
View File

@ -30,8 +30,10 @@
} }
.prgv_left { .prgv_left {
display: inline-flex;
justify-content: center;
flex-grow: 1; flex-grow: 1;
text-align: center;
margin-left: 10px; margin-left: 10px;
margin-top: auto; margin-top: auto;
@ -142,3 +144,32 @@
background: -moz-radial-gradient( circle, #666, #FFFFFF00); background: -moz-radial-gradient( circle, #666, #FFFFFF00);
background: -webkit-radial-gradient(circle, #666 0%, #FFFFFF00 100%); background: -webkit-radial-gradient(circle, #666 0%, #FFFFFF00 100%);
} }
@include rdmedia_range(0,2) {
.prgv_content { border: none; }
}
@include rdmedia(0) {
.prgv_top {
flex-direction: column;
margin-top: 0;
}
.prgv_left {
margin: 0 10px 10px 10px;
}
.prgv_right {
min-height: 0;
min-width: 0;
}
.prgv_right_lang {
justify-content: space-evenly;
}
#prgv_header h1 {
font-size: 28pt;
}
}

1
www/data/images/icons.svg
View File

@ -8,4 +8,5 @@
<path id="sourceforge" class="svg_path" d="M2.43 11.361c0-.372.303-.705.675-.705h6.968c.271-.003.486-.219.486-.488V8.713c0-.27-.219-.487-.488-.487H2.43C1.088 8.227 0 9.314 0 10.654v2.695c0 1.342 1.086 2.431 2.426 2.431h5.021c.372 0 .676.331.676.706v1.282c0 .371-.304.707-.676.707H.486c-.271 0-.485.217-.485.486v1.453c0 .268.216.486.485.486H8.13c1.34 0 2.426-1.087 2.426-2.427v-2.697c0-1.34-1.086-2.428-2.427-2.428H3.104c-.372 0-.675-.334-.675-.704v-1.283zm21.088-3.13h-5.024V5.525h5.02c.266 0 .483-.217.483-.486V3.585c0-.271-.215-.486-.484-.486h-5.019c-1.34 0-2.427 1.087-2.427 2.427v2.706H13.74c-.27 0-.484.218-.484.485v1.459c0 .268.216.484.483.484h2.325v7.953c0 .24.099.284.303.284.488 0 2.124-.91 2.124-1.688v-6.551h5.024c.266 0 .484-.218.484-.484v-1.46c0-.266-.219-.483-.484-.483h.003z"/> <path id="sourceforge" class="svg_path" d="M2.43 11.361c0-.372.303-.705.675-.705h6.968c.271-.003.486-.219.486-.488V8.713c0-.27-.219-.487-.488-.487H2.43C1.088 8.227 0 9.314 0 10.654v2.695c0 1.342 1.086 2.431 2.426 2.431h5.021c.372 0 .676.331.676.706v1.282c0 .371-.304.707-.676.707H.486c-.271 0-.485.217-.485.486v1.453c0 .268.216.486.485.486H8.13c1.34 0 2.426-1.087 2.426-2.427v-2.697c0-1.34-1.086-2.428-2.427-2.428H3.104c-.372 0-.675-.334-.675-.704v-1.283zm21.088-3.13h-5.024V5.525h5.02c.266 0 .483-.217.483-.486V3.585c0-.271-.215-.486-.484-.486h-5.019c-1.34 0-2.427 1.087-2.427 2.427v2.706H13.74c-.27 0-.484.218-.484.485v1.459c0 .268.216.484.483.484h2.325v7.953c0 .24.099.284.303.284.488 0 2.124-.91 2.124-1.688v-6.551h5.024c.266 0 .484-.218.484-.484v-1.46c0-.266-.219-.483-.484-.483h.003z"/>
<path id="wiki" class="svg_path" d="M22.5 16.875V1.125c0-.623-.502-1.125-1.125-1.125H6C3.516 0 1.5 2.016 1.5 4.5v15c0 2.484 2.016 4.5 4.5 4.5h15.375c.623 0 1.125-.502 1.125-1.125v-.75c0-.352-.164-.67-.417-.877-.197-.722-.197-2.78 0-3.502.253-.202.417-.52.417-.872zM7.5 6.281c0-.155.127-.281.281-.281h9.938c.155 0 .281.127 .281.281v.938c0 .155-.127.281-.281.281H7.781c-.155 0-.281-.127-.281-.281v-.937zm0 3c0-.155.127-.281.281-.281h9.938c.155 0 .281.127 .281.281v.938c0 .155-.127.281-.281.281H7.781c-.155 0-.281-.127-.281-.281v-.937zm11.878 11.719H6c-.83 0-1.5-.67-1.5-1.5 0-.825.675-1.5 1.5-1.5h13.378c-.089.802-.089 2.198 0 3z"/> <path id="wiki" class="svg_path" d="M22.5 16.875V1.125c0-.623-.502-1.125-1.125-1.125H6C3.516 0 1.5 2.016 1.5 4.5v15c0 2.484 2.016 4.5 4.5 4.5h15.375c.623 0 1.125-.502 1.125-1.125v-.75c0-.352-.164-.67-.417-.877-.197-.722-.197-2.78 0-3.502.253-.202.417-.52.417-.872zM7.5 6.281c0-.155.127-.281.281-.281h9.938c.155 0 .281.127 .281.281v.938c0 .155-.127.281-.281.281H7.781c-.155 0-.281-.127-.281-.281v-.937zm0 3c0-.155.127-.281.281-.281h9.938c.155 0 .281.127 .281.281v.938c0 .155-.127.281-.281.281H7.781c-.155 0-.281-.127-.281-.281v-.937zm11.878 11.719H6c-.83 0-1.5-.67-1.5-1.5 0-.825.675-1.5 1.5-1.5h13.378c-.089.802-.089 2.198 0 3z"/>
<path id="windows" class="svg_path" d="M0 3.449L9.75 2.1v9.451H0m10.949-9.602L24 0v11.4H10.949M0 12.6h9.75v9.451L0 20.699M10.949 12.6H24V24l-12.9-1.801"/> <path id="windows" class="svg_path" d="M0 3.449L9.75 2.1v9.451H0m10.949-9.602L24 0v11.4H10.949M0 12.6h9.75v9.451L0 20.699M10.949 12.6H24V24l-12.9-1.801"/>
<path id="alternativeto" class="svg_path" d="M10.664 3.548c-1.58.136-2.686.614-3.005 1.303-.103.211-.112.3-.112.914 0 .787.047 .938.356 1.111.258 .15.623 .141 1.284-.033 1.838-.473 3.389-.408 4.031.173 .281.253 .408.478 .497.9 .098.469 .103.459-.202.492-1.003.117-2.208.384-3.014.666-2.93 1.017-4.406 3.056-4.406 6.075 0 1.542.548 2.855 1.612 3.872.67 .633 1.481 1.055 2.419 1.256.609 .131 1.767.122 2.297-.023.516-.136 1.167-.45 1.519-.722l.277-.22.127 .248c.089.183 .173.272 .328.361 .206.113 .239.117 1.27.131 .708.009 1.13-.005 1.266-.037.258-.07.53-.338.6-.586.07-.262.07-11.081 0-11.672-.272-2.213-1.664-3.6-4.064-4.055-.872-.164-2.213-.23-3.08-.155zm3.108 10.045c-.014 1.636-.023 1.725-.122 2.006-.131.361-.277.605-.506.825-.652.633-1.903.572-2.475-.127-.427-.525-.591-1.359-.431-2.236.248-1.369 1.12-2.095 3.122-2.602l.398-.098.014 .258c.009.145 .009 1.031 0 1.973z"/>
</svg> </svg>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 7.3 KiB

After

Width:  |  Height:  |  Size: 8.2 KiB

5
www/pages/programs_view.php
View File

@ -34,9 +34,7 @@ if ($prog === NULL) httpError(404, 'Program not found');
<div class="contentheader" id="prgv_header"><h1><?php echo htmlspecialchars($prog['name']); ?></h1><hr/></div> <div class="contentheader" id="prgv_header"><h1><?php echo htmlspecialchars($prog['name']); ?></h1><hr/></div>
<div class="prgv_top"> <div class="prgv_top">
<div class="prgv_left"> <div class="prgv_left"><img src="<?php echo $prog['thumbnail_url']; ?>" alt="Thumbnail (<?php echo $prog['name'] ?>)" /></div>
<img src="<?php echo $prog['thumbnail_url']; ?>" alt="Thumbnail (<?php echo $prog['name'] ?>)" />
</div>
<div class="prgv_right"> <div class="prgv_right">
<div class="prgv_right_key" style="grid-row:1">Name:</div> <div class="prgv_right_key" style="grid-row:1">Name:</div>
<div class="prgv_right_value" style="grid-row:1"><a href="<?php echo $prog['url']; ?>"><?php echo htmlspecialchars($prog['name']) ?></a></div> <div class="prgv_right_value" style="grid-row:1"><a href="<?php echo $prog['url']; ?>"><?php echo htmlspecialchars($prog['name']) ?></a></div>
@ -63,6 +61,7 @@ if ($prog === NULL) httpError(404, 'Program not found');
if ($type === 'windowsstore') echo '<a class="prgv_dl_btn prgv_dl_winstore" href="'.$url.'"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 24 24"><use xlink:href="/data/images/icons.svg#windows" /></svg><span>Microsoft Store</span></a>'; if ($type === 'windowsstore') echo '<a class="prgv_dl_btn prgv_dl_winstore" href="'.$url.'"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 24 24"><use xlink:href="/data/images/icons.svg#windows" /></svg><span>Microsoft Store</span></a>';
if ($type === 'itunesstore') echo '<a class="prgv_dl_btn prgv_dl_appstore" href="'.$url.'"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 24 24"><use xlink:href="/data/images/icons.svg#apple" /></svg><span>App Store</span></a>'; if ($type === 'itunesstore') echo '<a class="prgv_dl_btn prgv_dl_appstore" href="'.$url.'"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 24 24"><use xlink:href="/data/images/icons.svg#apple" /></svg><span>App Store</span></a>';
if ($type === 'sourceforge') echo '<a class="prgv_dl_btn prgv_dl_sourceforge" href="'.$url.'"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 24 24"><use xlink:href="/data/images/icons.svg#sourceforge" /></svg><span>Sourceforge</span></a>'; if ($type === 'sourceforge') echo '<a class="prgv_dl_btn prgv_dl_sourceforge" href="'.$url.'"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 24 24"><use xlink:href="/data/images/icons.svg#sourceforge" /></svg><span>Sourceforge</span></a>';
if ($type === 'alternativeto') echo '<a class="prgv_dl_btn prgv_dl_alternativeto" href="'.$url.'"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 24 24"><use xlink:href="/data/images/icons.svg#alternativeto"/></svg><span>AlternativeTo</span></a>';
} }
?> ?>
</div> </div>

2
www/statics/programs/AlephNote_description.md
View File

@ -1,6 +1,6 @@
An extensible, lightweight desktop note client for multiple back-ends An extensible, lightweight desktop note client for multiple back-ends
![](https://raw.githubusercontent.com/Mikescher/AlephNote/master/docs/preview.png) &nbsp;
AlephNote is a lightweight note taking desktop app usable with multiple back-ends: AlephNote is a lightweight note taking desktop app usable with multiple back-ends:

1
www/statics/programs/__all.php
View File

@ -610,6 +610,7 @@ return
'download' => 'https://github.com/Mikescher/AlephNote/releases', 'download' => 'https://github.com/Mikescher/AlephNote/releases',
'github' => 'https://github.com/Mikescher/AlephNote/', 'github' => 'https://github.com/Mikescher/AlephNote/',
'homepage' => 'https://mikescher.github.io/AlephNote/', 'homepage' => 'https://mikescher.github.io/AlephNote/',
'alternativeto' => 'https://alternativeto.net/software/alephnote/',
], ],
], ],
]; ];