Difference between revisions of "Template:Intro to/sandbox/styles.css"

From blackwiki
Jump to navigation Jump to search
imported>Sdkb
(Added positioning parameter to get shadow to display over base; removed unneeded parameter for base)
imported>JzG
m (Reverted edits by Sdkb (talk) to last version by Evolution and evolvability)
Line 2: Line 2:
 
.introto__main {
 
.introto__main {
 
display:        flex;
 
display:        flex;
position:      relative;
 
 
box-sizing:    border-box;
 
box-sizing:    border-box;
box-shadow:    2px 2px 2px #CCC;
 
 
flex-direction: row;
 
flex-direction: row;
 
flex-wrap:      wrap;
 
flex-wrap:      wrap;
Line 34: Line 32:
 
background: #EEE;
 
background: #EEE;
 
border:    1px solid lightgrey;
 
border:    1px solid lightgrey;
 +
border-top: 3px solid lightgrey;
 
}
 
}
 
.introto__tabs-main {
 
.introto__tabs-main {

Revision as of 15:35, 8 May 2020

/*  */
.introto__main {
	display:        flex;
	box-sizing:     border-box;
	flex-direction: row;
	flex-wrap:      wrap;
	max-width:      1100px;
	max-width:      100%;
	overflow:       hidden;
	border:         1px solid black;
	margin:         auto;
}
.introto__main-title {
	font-size:       250%;
	background:      #777;
	color:           #FFF;
	text-align:      center;
	align-items:     center;
	justify-content: center;
}
.introto__lead {
	background:    #EEE;
	padding:       30px 60px;
	margin-bottom: 30px;
}
.introto__base {
	max-width:  1060px;
	min-height: 55px;
	margin:     auto;
	padding:    5px 20px;
	font-size:  1.1em;
	background: #EEE;
	border:     1px solid lightgrey;
	border-top: 3px solid lightgrey;
}
.introto__tabs-main {
	height: auto;
}
.introto__tabs-title {
	font-size:   1.5em;
	font-weight: bold;
}
.introto__columns {
	display:         flex;
	flex-direction:  row;
	flex-wrap:       wrap-reverse;
	justify-content: center;
}
.introto__columns-left {
	display:        inline-block;
	flex:           0 1 0;
	position:       relative;
	vertical-align: top;
	min-width:      260px;
	padding-bottom: 50px;
}
.introto__columns-left-button {
	position:     absolute;
	bottom:       0;
	padding-left: 2em;
}
.introto__columns-right {
	display:        inline-block;
	flex:           1 1 0;
	padding:        1em;
	min-width:      250px;
	vertical-align: top;
	border-left:    1px solid #c9c9c9;
}

@media screen and (min-width: 1100px) {
	.introto__main {
		max-width: 1100px;
	}
}

@media screen and (min-width: 800px) {
	.introto__tabs-main {
		padding: 0.5em;
	}
	.introto__columns-right{
		padding: 40px;
	}
	.introto__columns-left {
		padding-bottom: 80px;
	}
	.introto__columns-left-button{
		padding-bottom: 33px;
	}
}