1
0
web-semprace/sass/main.scss
2023-11-30 14:02:52 +01:00

158 lines
2.9 KiB
SCSS

main {
display: flex;
gap: 2rem;
margin-top: 2rem;
margin-bottom: 2rem;
margin-left: 20vw;
margin-right: 20vw;
.news-wrapper {
max-width: 80vw;
}
.aside-wrapper {
min-width: 20vw;
}
aside{
display: flex;
flex-direction: column;
align-items: center;
padding: 2rem;
background-color: var(--clr-LavenderLight);
border-radius: 15px;
top: 0;
section#vstupenky-wrapper {
display: flex;
justify-content: center;
width: 100%;
margin-bottom: 2rem;
}
a.vstupenky {
width: 80%;
background-color: var(--clr-Melon);
padding: 1rem 2rem;
color: var(--clr-Murrey);
text-decoration: none;
font-weight: bold;
font-size: 2rem;
text-align: center;
border-color: var(--clr-Murrey);
border-radius: 15px;
border-style: solid;
border-width: 3px;
}
.infotable {
display: flex;
flex-direction: column;
gap: 2rem;
}
.info-wrapper {
display: flex;
align-items: center;
justify-content: center;
gap: 4rem;
color: var(--clr-Murrey);
text-align: left;
.text {
h3 {
font-weight: 900;
}
p {
font-weight: 500;
}
}
img {
width: 100px;
}
}
.info-wrapper:nth-child(even) {
flex-direction: row-reverse;
text-align: right;
}
}
footer {
display: flex;
justify-content: center;
flex-direction: column;
align-items: center;
margin: .5rem;
font-size: 1rem;
font-weight: 300;
a, p {
color: var(--clr-Murrey);
}
}
}
@media only screen and (max-width: 500px) {
#vstupenky-wrapper {
}
.vstupenky {
font-size: 1.5rem !important;
}
}
/* Extra small devices (phones, 600px and down) */
@media only screen and (max-width: 600px) {
}
/* Small devices (portrait tablets and large phones, 600px and up) */
@media only screen and (min-width: 600px) and (max-width: 768px) {
}
/* Medium devices (landscape tablets, 768px and up) */
@media only screen and (min-width: 768px) and (max-width: 992px) {
}
/* Large devices (laptops/desktops, 992px and up) */
@media only screen and (max-width: 992px) {
main {
flex-direction: column;
align-items: center;
margin-left: 2vw !important;
margin-right: 2vw !important;
}
.aside-wrapper {
order: -1;
}
.info-wrapper {
gap: 1rem !important;
}
}
/* Extra large devices (large laptops and desktops, 1200px and up) */
@media only screen and (max-width: 1500px) {
main {
margin-left: 10vw;
margin-right: 10vw;
}
.aside-wrapper {
min-width: 40vw !important;
}
.news-wrapper {
max-width: 70vw !important;
}
}
@media only screen and (min-width: 1500px) and (max-width: 2000px) {
main {
margin-left: 15vw;
margin-right: 15vw;
}
.aside-wrapper {
min-width: 35vw !important;
}
}