MediaWiki:Hauptseite.css: Unterschied zwischen den Versionen

aus Memory Alpha, der freien deutschen Star-Trek-Datenbank
Spring zu: Navigation, suche
Zeile 39: Zeile 39:
 
flex-flow:row-reverse wrap-reverse;*/
 
flex-flow:row-reverse wrap-reverse;*/
 
justify-content:center;
 
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); /*Notwendig?*/
 +
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);
 
}
 
}

Version vom 13. Mai 2019, 13:30 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); /*Notwendig?*/	
	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);
}