Index:Birdcraft-1897.djvu/styles.css

From Wikisource
Jump to navigation Jump to search
/* Styles related to the list of plates. */
.__platelist {
	margin: 2em auto;
}

.__platelist tr td:nth-child(1) {
	text-align: right;
	padding-right: 1em;
}
.__platelist tr td:nth-child(3) {
	text-align: right;
	padding-left: 1em;
}


/* Styles related to the plates. */
.__single > p {
	display: grid;
	grid-template-areas: 
      "plateno plateno"
      "image image"
      "name name"
      "subcap subcap"
      "male female"
      "length length";
}

.__double > p {
	display: grid;
	grid-template-areas: 
      "plateno plateno"
      "image1 image2"
      "name1 name2"
      "length1 length2";
    max-width: 100%;
    align-items: end;
}
.__tall > p {
	display: grid;
	grid-template-areas: 
      "plateno plateno"
      "image2 image2"
      "image1 image1"
      "name1 name2"
      "length1 length2";
}

.__name.__name1 {grid-area: name1;}
.__name.__name2 {grid-area: name2;}
.__length.__length1 {grid-area: length1;}
.__length.__length2 {grid-area: length2;}
.__image1 {
	grid-area: image1;
	margin: 2em auto;
}
.__image2 {
	grid-area: image2;
	margin: 2em auto;
}
.__image {
	grid-area: image;
	margin: 2em auto;
}
.__subcap {
	grid-area: subcap;
	text-align: right;
	font-weight: bold;
	display: block;
	margin-left: auto;
	margin-right: auto;
}
.__male {
	grid-area: male;
	text-align: left;
	padding-left: 4em;
	font-weight: bold;
}
.__female {
	grid-area: female;
	text-align: right;
	padding-right: 4em;
	font-weight: bold;
}

.__double .__image1, .__double .__image2 {
	max-width: 100%;
	height: auto;
}

.__plateno {
	grid-area: plateno;
	text-align: left;
	font-size: 120%;
	text-transform: uppercase;
	font-weight: bold;
}

.__name {
	grid-area: name;
	display: block;
	margin-left: auto;
	margin-right: auto;
	font-size: 120%;
	text-transform: uppercase;
	font-weight: bold;
}

.__length {
	grid-area: length;
	display: block;
	margin-left: auto;
	margin-right: auto;
	font-weight: bold;
}

/* Styles related to [[Template:Birdcraft plate]]. */
.__missing-value {
	color:red;
}

.__plate-demo-container {
	background: white;
	max-width: 512px;
	margin: 3em auto;
	box-shadow: rgba(255, 255, 255, 0.1) 0px 1px 1px 0px inset, rgba(50, 50, 93, 0.25) 0px 50px 100px -20px, rgba(0, 0, 0, 0.3) 0px 30px 60px -30px;
	padding: 1em;
}