MediaWiki:Hauptseite.css: Unterschied zwischen den Versionen

aus Memory Alpha, der freien deutschen Star-Trek-Datenbank
Spring zu: Navigation, suche
Zeile 69: Zeile 69:
 
}
 
}
  
 +
#mf-mainseries .series {
 +
width: 100%;
 +
height: 125px;
 +
margin: 0 0 14px 0;
 +
overflow: hidden;
 +
}
 +
 +
#mf-mainseries .series img { /* May need more tweaking */
 +
min-width: 100%;
 +
min-height: 100%;
 +
width: auto;
 +
height: auto;
 +
}
 +
 +
#mf-mainseries .series a {
 +
width: 100%;
 +
height: 100%;
 +
text-align: left;
 +
box-sizing: border-box;
 +
padding: 5%; /* Changed from 16px */
 +
justify-content: flex-start;
 +
clip: auto;
 +
box-shadow: inset rgba(255, 255, 255, 0.1) 0 0 0 1px;
 +
z-index: 1;
 +
}
 +
 +
#mf-mainseries .series {
 +
bottom: 12px;
 +
right: 16px;
 +
left: auto;
 +
}
 
/*Kacheln*/
 
/*Kacheln*/
 
div.tabcontents.vertical-centered-content > div.content img  {
 
div.tabcontents.vertical-centered-content > div.content img  {

Version vom 29. Mai 2019, 15:12 Uhr

/*Für alles was da kommt... Nun nur noch für die Seriennavigation

Hauptseiten ReDesign 2.0 Rev. 3; Mai 2019*/

/*Responsible Design*/

* Screen widths: 0 < 950px < 1180px < 1650px < 2355px < 3000px */

/* width 0 < 950px */
.empty-tile    { display:none;  } /* No need space fillers */

@media screen and (min-width: 950px) { /* width 950px < 1180px */
	.categories      { max-width:750px; } /* Leave a 100px to 215px gap each side */
}

@media screen and (min-width: 1180px) { /* width 1180px < 1650px */
	.empty-tile, /*{ display:inline-block; }*/
	.categories    { max-width:950px;      } /* Leave a 115px to 200px gap each side */
}

@media screen and (min-width: 1650px) { /* width 1650px < 2355px */
	.nav-titlecard           { max-width:1415px; }
}

@media screen and (min-width: 2355px) { /* width 2355px < 3000px */
	.nav-titlecard,        /*{ max-width:2130px; }*/
	.infoblock-container   { max-width:2130px; }
}
@media screen and (min-width: 3000px) { /* width 3000px < inf */
	.categories            { max-width:2130px; }
	/*.nav-titlecard         { max-width:2130px; }*/
	/*.infoblock-container { max-width:2130px; }*/
}

/*Seriennavigation*/
.nav-titlecard{
	margin:0 auto;
	/*display:flex;
	flex-flow:row-reverse wrap-reverse;*/
	justify-content:center;
}

.series {
	display:inline-block;
	position:relative;
	font-size:0;
	margin:2px;
}
/*
.series a {
	width:100%;
	height:101%;
	clip:rect(0px,230px,125px,0px); 
	display:inline-block;
	font-style:normal;
	color:white;
	position:absolute;
	line-height:29px;
	font-size:25px;
	text-decoration:none;
	background-color:rgba(0,0,0, 0.6);*/
	/*display:flex;
	flex-direction:column;*/
/*	justify-content:center;
}*/

.series a:hover {
	background-color:rgba(0,0,0, 0.3);
}

#mf-mainseries .series {
	width: 100%;
	height: 125px;
	margin: 0 0 14px 0;
	overflow: hidden;
}

#mf-mainseries .series img { /* May need more tweaking */
	min-width: 100%;
	min-height: 100%;
	width: auto;
	height: auto;
}

#mf-mainseries .series a {
	width: 100%;
	height: 100%;
	text-align: left;
	box-sizing: border-box;
	padding: 5%; /* Changed from 16px */
	justify-content: flex-start;
	clip: auto;
	box-shadow: inset rgba(255, 255, 255, 0.1) 0 0 0 1px;
	z-index: 1;
}

#mf-mainseries .series {
	bottom: 12px;
	right: 16px;
	left: auto;
}
/*Kacheln*/
div.tabcontents.vertical-centered-content > div.content img  {
	position: relative;
    top: 50%;
    transform: translateY(-50%);
}

div.tabcontainer span.tab.explain {
	text-decoration: none;
}