Difference between revisions of "Template:Intro to/sandbox/styles.css"
< Template:Intro to | sandbox
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 |
||
| Line 2: | Line 2: | ||
.introto__main { | .introto__main { | ||
display: flex; | display: flex; | ||
| − | |||
box-sizing: border-box; | box-sizing: border-box; | ||
| − | |||
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;
}
}