301 lines
6.8 KiB
Plaintext
301 lines
6.8 KiB
Plaintext
/* Common styles are "mobile first" and arrange the site elements one
|
|
* underneath each other and display the mobile navigation and selection
|
|
* boxes. */
|
|
|
|
/* For large displays we rearrange a desktop design with 2 columns and
|
|
* traditional navigation menue */
|
|
@media(min-width: 780px) { //oder 1024?
|
|
|
|
header {
|
|
#service-panel {
|
|
|
|
#service-panel-wrapper {
|
|
display: flex;
|
|
|
|
div {
|
|
padding-top: 0.8em;
|
|
|
|
&#language-switcher {
|
|
flex: 1;
|
|
|
|
button {
|
|
display: none;
|
|
}
|
|
|
|
ul {
|
|
background-color: transparent;
|
|
display : block;
|
|
margin-left : 0;
|
|
padding-left : 0;
|
|
|
|
li {
|
|
margin-left: 1em;
|
|
}
|
|
}
|
|
}
|
|
|
|
&#shortcuts {
|
|
flex : 1;
|
|
text-align: right;
|
|
|
|
button {
|
|
display: none;
|
|
}
|
|
|
|
ul {
|
|
display : block;
|
|
margin-right : 0;
|
|
padding-right: 0;
|
|
|
|
li {
|
|
margin-right: 1em;
|
|
}
|
|
}
|
|
}
|
|
|
|
ul {
|
|
li {
|
|
display: inline-block;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
nav#main-navigation {
|
|
button {
|
|
display: none;
|
|
}
|
|
|
|
div#nav-wrapper {
|
|
display : table;
|
|
height : 100%;
|
|
margin-left : auto;
|
|
margin-right : auto;
|
|
padding-bottom: 0;
|
|
text-align : center;
|
|
vertical-align: middle;
|
|
|
|
ul {
|
|
display : table-cell;
|
|
height : 100%;
|
|
vertical-align: middle;
|
|
|
|
li {
|
|
display : table-cell;
|
|
height : 100%;
|
|
vertical-align: middle;
|
|
|
|
&.active {
|
|
border: none;
|
|
}
|
|
}
|
|
|
|
ul { //submenu items
|
|
display: none;
|
|
}
|
|
}
|
|
}
|
|
|
|
ul { // eigentlich ueberfluessig
|
|
margin-left : 0;
|
|
margin-right : 0;
|
|
padding-left : 0;
|
|
padding-right: 0;
|
|
list-style : none;
|
|
|
|
li {
|
|
display: inline;
|
|
}
|
|
}
|
|
}
|
|
|
|
div#breadcrumbs-top {
|
|
font-size : 1em;
|
|
padding-left: 0;
|
|
}
|
|
|
|
div#main-wrapper {
|
|
display : -webkit-flex;
|
|
display : flex;
|
|
max-width : @dim-page-width;
|
|
margin-left : auto;
|
|
margin-right: auto;
|
|
|
|
main {
|
|
-webkit-flex: 3;
|
|
flex : 3;
|
|
/*max-width: 60em;*/
|
|
/*margin-left: auto;*/
|
|
/*margin-right: auto;*/
|
|
div.related-links-file-attachments {
|
|
display: -webkit-flex;
|
|
display: flex;
|
|
|
|
ul {
|
|
-webkit-flex: 1;
|
|
flex : 1;
|
|
}
|
|
}
|
|
}
|
|
|
|
nav.subnav {
|
|
-webkit-flex: 1;
|
|
flex : 1;
|
|
display:block //testweise
|
|
}
|
|
}
|
|
|
|
main {
|
|
dl.event-details {
|
|
-moz-column-count : 2;
|
|
-webkit-column-count: 2;
|
|
column-count : 2;
|
|
}
|
|
|
|
div.scipublication {
|
|
div.data {
|
|
display: -webkit-flex;
|
|
display: flex;
|
|
|
|
dl {
|
|
-webkit-flex : 3;
|
|
flex : 3;
|
|
-moz-column-count : 2;
|
|
-webkit-column-count: 2;
|
|
column-count : 2;
|
|
}
|
|
|
|
div.export-links {
|
|
-webkit-flex: 1;
|
|
flex : 1;
|
|
order : 2;
|
|
margin-left : 2em;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
main.welcome {
|
|
display: -webkit-flex;
|
|
display: flex;
|
|
|
|
div#left {
|
|
-webkit-flex: 3;
|
|
flex : 3;
|
|
}
|
|
|
|
aside {
|
|
margin-top : 1em;
|
|
margin-left : 2em;
|
|
-webkit-flex: 1;
|
|
flex : 1;
|
|
}
|
|
}
|
|
} // media(min-width: 780px)
|
|
|
|
|
|
|
|
/* With display width smaller as the @dim-page-width restriction we add a bit
|
|
of padding @dim-page-width currently 1280px */
|
|
@media(max-width: @dim-page-width) {
|
|
|
|
div#breadcrumbs-top {
|
|
padding-left : 0.3em;
|
|
padding-right: 0.3em;
|
|
}
|
|
|
|
div#main-wrapper {
|
|
padding-left : 0.3em;
|
|
padding-right: 0.3em;
|
|
}
|
|
|
|
div.nav-quicklinks {
|
|
padding-left : +0.3em;
|
|
padding-right: +0.3em;
|
|
|
|
dl {
|
|
padding : +0 +0.3em;
|
|
}
|
|
}
|
|
|
|
footer {
|
|
#footer-wrapper {
|
|
padding-left : 0.3em;
|
|
padding-right: 0.3em;
|
|
|
|
#breadcrumbs-bottom {
|
|
// margin-left : 1em;
|
|
// margin-right: 1em;
|
|
}
|
|
|
|
div#footer-logo-wrapper {
|
|
// margin-left : 1em;
|
|
}
|
|
|
|
ul#footer-links {
|
|
right: 0.3 em;
|
|
}
|
|
}
|
|
|
|
ul#footer-links {
|
|
right: 0.3 em;
|
|
}
|
|
}
|
|
}
|
|
|
|
|
|
/* mobile displays */
|
|
@media(max-width: 480px) {
|
|
|
|
header {
|
|
#service-panel {
|
|
height: 30%;
|
|
|
|
#service-panel-wrapper {
|
|
|
|
div#language-switcher {
|
|
|
|
button {
|
|
font-size : 0.85em;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.header-logo {
|
|
height: 60%;
|
|
|
|
img {
|
|
width: 22%;
|
|
}
|
|
|
|
p {
|
|
display: none;
|
|
}
|
|
}
|
|
//#shortcuts {
|
|
// display: none;
|
|
//}
|
|
}
|
|
|
|
nav#main-navigation {
|
|
min-height: 30%;
|
|
|
|
div#nav-wrapper {
|
|
height: 30%;
|
|
|
|
button {
|
|
font-size : 1.4em;
|
|
margin-top : 0.08em;
|
|
margin-left : 0.35em;
|
|
}
|
|
}
|
|
}
|
|
|
|
div#breadcrumbs-top {
|
|
display: none;
|
|
}
|
|
}
|