Difference between revisions of "Template:Intro to/styles.css"
Jump to navigation
Jump to search
imported>Pppery (Adding protection template) |
imported>Moxy |
||
| Line 1: | Line 1: | ||
| − | /* | + | /* */ |
.introto__main { | .introto__main { | ||
| − | display: flex; | + | display: flex; |
| − | box-sizing: border-box; | + | box-sizing: border-box; |
| − | + | flex-direction: row; | |
| − | + | flex-wrap: wrap; | |
| − | + | max-width: 1100px; | |
| − | max-width: 100%; | + | max-width: 100%; |
| − | overflow: hidden; | + | overflow: hidden; |
| − | border: 1px solid black; | + | border: 1px solid black; |
| − | margin: auto; | + | margin: auto; |
} | } | ||
.introto__main-title { | .introto__main-title { | ||
| − | font-size: 250%; | + | font-size: 250%; |
| − | background: #777; | + | background: #777; |
| − | color: #FFF; | + | color: #FFF; |
| − | text-align: center; | + | text-align: center; |
| − | align-items: center; | + | align-items: center; |
justify-content: center; | justify-content: center; | ||
} | } | ||
.introto__lead { | .introto__lead { | ||
| − | background:#EEE; | + | background: #EEE; |
| − | padding: 30px 60px; | + | padding: 30px 60px; |
margin-bottom: 30px; | margin-bottom: 30px; | ||
} | } | ||
.introto__base { | .introto__base { | ||
| − | max-width: 1060px; | + | max-width: 1060px; |
min-height: 55px; | min-height: 55px; | ||
| − | margin:auto; | + | margin: auto; |
| − | + | padding: 5px 20px; | |
| − | + | font-size: 1.1em; | |
| − | + | background: #EEE; | |
| − | + | border: 1px solid lightgrey; | |
| − | + | border-top: 3px solid lightgrey; | |
} | } | ||
.introto__tabs-main { | .introto__tabs-main { | ||
| Line 38: | Line 38: | ||
} | } | ||
.introto__tabs-title { | .introto__tabs-title { | ||
| − | font-size: 1.5em; | + | font-size: 1.5em; |
font-weight: bold; | font-weight: bold; | ||
| + | } | ||
| + | .introto__columns { | ||
| + | display: flex; | ||
| + | flex-direction: row; | ||
| + | flex-wrap: wrap-reverse; | ||
| + | justify-content: center; | ||
} | } | ||
.introto__columns-left { | .introto__columns-left { | ||
| − | display:inline-block; | + | display: inline-block; |
| − | min-width: 260px; | + | 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 { | .introto__columns-right { | ||
| − | display:inline-block; | + | display: inline-block; |
| − | flex:1 1 0; | + | flex: 1 1 0; |
| − | padding: 1em; | + | padding: 1em; |
| − | + | min-width: 250px; | |
| − | vertical-align:top; | + | vertical-align: top; |
| − | + | border-left: 1px solid #c9c9c9; | |
} | } | ||
| Line 64: | Line 77: | ||
@media screen and (min-width: 800px) { | @media screen and (min-width: 800px) { | ||
.introto__tabs-main { | .introto__tabs-main { | ||
| − | padding: | + | padding: 0.5em; |
} | } | ||
.introto__columns-right{ | .introto__columns-right{ | ||
padding: 40px; | padding: 40px; | ||
| + | } | ||
| + | .introto__columns-left { | ||
| + | padding-bottom: 80px; | ||
| + | } | ||
| + | .introto__columns-left-button{ | ||
| + | padding-bottom: 33px; | ||
} | } | ||
} | } | ||
Revision as of 12:34, 6 March 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;
}
}