80 lines
1.4 KiB
CSS
80 lines
1.4 KiB
CSS
/* Reading School 2018, CSS*/
|
|
.carousel-inner {
|
|
height: 250px;
|
|
border-radius: 4px;
|
|
overflow: hidden auto;
|
|
margin-bottom: 15px;
|
|
background: rgba(10,10,10,0.2);
|
|
}
|
|
.presentation-image {
|
|
width: 70%;
|
|
box-shadow: 3px 3px 6px 2px rgba(10,10,10,0.5);
|
|
margin: 10px;
|
|
border-radius: 6px;
|
|
}
|
|
|
|
/* place carousel indicators between the two buttons (next & previous) */
|
|
.presentation-flexbox {
|
|
display: -webkit-box;
|
|
display: -moz-box;
|
|
display: -ms-flexbox;
|
|
display: -webkit-flex;
|
|
display: flex;
|
|
|
|
-webkit-flex-flow: row wrap;
|
|
flex-flow: row wrap;
|
|
justify-content: space-between;
|
|
}
|
|
.carousel-indicators {
|
|
order: 1;
|
|
}
|
|
.presentation-button-left {
|
|
order: 0;
|
|
}
|
|
.presentation-button-right {
|
|
order: 2;
|
|
}
|
|
|
|
.carousel-inner .item {
|
|
height: 100%;
|
|
width: 100%;
|
|
border: none;
|
|
padding: 15px;
|
|
}
|
|
|
|
.carousel-indicators li {
|
|
border: 1px solid var(--mdc-theme-secondary);
|
|
margin-top: 12px;
|
|
}
|
|
.carousel-indicators .active {
|
|
background-color: var(--mdc-theme-secondary);
|
|
}
|
|
|
|
/* revert changes made by Bootstrap */
|
|
.carousel-indicators {
|
|
margin: 0;
|
|
position: initial;
|
|
width: auto;
|
|
}
|
|
|
|
/* add side margins depending on screen size */
|
|
#main-content {
|
|
text-align: left;
|
|
margin: 20px 15%;
|
|
}
|
|
@media screen and (max-width: 1000px) {
|
|
#main-content {
|
|
margin: 20px 10%;
|
|
}
|
|
}
|
|
@media screen and (max-width: 800px) {
|
|
#main-content {
|
|
margin: 20px 5%;
|
|
}
|
|
}
|
|
@media screen and (max-width: 600px) {
|
|
#main-content {
|
|
margin: 20px;
|
|
}
|
|
}
|