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

programs_list

Browse Source
This commit is contained in:
Mike Schwörer
2018-01-04 16:55:26 +01:00
parent a48a9655b1
commit bfa6b89860
31 changed files with 1178 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -180,6 +180,10 @@ html, body {
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; } }
.bloglistelem_container {
display: flex;
align-items: center;
@@ -476,6 +480,104 @@ html, body {
.ev_master .ev_msg {
font-size: 15pt; } }
.prgl_parent {
display: flex;
flex-direction: column; }
.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 #000000; }
.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; }
.prgl_elem_title {
color: #222;
font-size: 40pt;
font-weight: bolder;
flex-grow: 1;
display: flex;
justify-content: center;
align-items: center; }
.prgl_elem_info {
display: flex;
flex-direction: row; }
.prgl_elem_subinfo {
flex: 1;
display: flex;
flex-direction: row; }
.prgl_elem_subinfo_caption {
color: #111;
font-weight: bold;
margin: 0 5px 0 10px; }
.prgl_elem_subinfo_data {
color: #555;
display: flex;
flex-direction: row;
align-items: center;
height: 100%; }
.prgl_elem_subinfo_data img {
display: inline;
height: 13pt;
margin: 1px 2px 0 2px; }
@media (max-width: 1199px) {
.prgl_elem_title {
font-size: 22pt; }
.prgl_elem_subinfo {
flex-direction: column; }
.prgl_elem_subinfo_data {
justify-content: center; }
.prgl_elem_subinfo_caption {
text-align: center; } }
@media (max-width: 850px) {
.prgl_elem {
flex-direction: column;
width: 350px; }
.prgl_elem_left img {
width: 100%; }
.prgl_elem_title {
font-size: 24pt;
word-wrap: break-word;
text-align: center; }
.prgl_elem_left {
justify-content: center; }
.prgl_elem_info {
flex-direction: column;
margin: 8px 0 8px 8px; }
.prgl_elem_subinfo {
flex-direction: row; } }
.euler_pnl_base {
display: inline-flex;
flex-direction: column;

1
www/data/css/styles.scss
View File

@@ -7,6 +7,7 @@
@import 'styles_blogview';
@import 'styles_blogview_befunge';
@import 'styles_errorview';
@import 'styles_programslist';
@import 'styles_eulerpanel';
@import 'styles_programspanel';

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

@@ -49,3 +49,7 @@ html, body {
background: #CCCCCCFF;
background: -webkit-gradient(radial, 50% 50%, 0, 50% 50%, 350, from($COL_TEXT_NORMAL), to($COL_TRANSPARENT));
}
@media (max-width: 850px) {
#footerdiv .footerspan2 {display: none; visibility: collapse;}
}

127
www/data/css/styles_programslist.scss Normal file
View File

@@ -0,0 +1,127 @@
@import 'styles_config';
.prgl_parent {
display: flex;
flex-direction: column;
}
.prgl_elem {
display: flex;
flex-direction: row;
text-decoration: none;
background: #BBB;
border: solid 1px #444;
margin: 5px 0;
&:hover {
background: #999;
box-shadow: 0 0 4px #000000;
}
}
.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;
}
.prgl_elem_title {
color: #222;
font-size: 40pt;
font-weight: bolder;
flex-grow: 1;
display: flex;
justify-content: center;
align-items: center;
}
.prgl_elem_info {
display:flex;
flex-direction: row;
}
.prgl_elem_subinfo {
flex: 1;
display: flex;
flex-direction: row;
}
.prgl_elem_subinfo_caption {
color: #111;
font-weight: bold;
margin: 0 5px 0 10px;
}
.prgl_elem_subinfo_data {
color: #555;
display: flex;
flex-direction: row;
align-items: center;
height: 100%;
}
.prgl_elem_subinfo_data img {
display: inline;
height: 13pt;
margin: 1px 2px 0 2px;
}
@media(max-width:1199px)
{
.prgl_elem_title {
font-size: 22pt;
}
.prgl_elem_subinfo {
flex-direction: column;
}
.prgl_elem_subinfo_data {
justify-content: center;
}
.prgl_elem_subinfo_caption {
text-align: center;
}
}
@media (max-width: 850px)
{
.prgl_elem {
flex-direction: column;
width: 350px;
}
.prgl_elem_left img {
width: 100%;
}
.prgl_elem_title {
font-size: 24pt;
word-wrap: break-word;
text-align: center;
}
.prgl_elem_left {
justify-content: center;
}
.prgl_elem_info {
flex-direction: column;
margin: 8px 0 8px 8px;
}
.prgl_elem_subinfo {
flex-direction: row;
}
}