Prerelase changes 2.0
This commit is contained in:
@ -5,13 +5,23 @@
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: 'coolvetica', sans-serif;
|
||||
font-family: 'Kanit', sans-serif;
|
||||
font-weight: 500;
|
||||
font-style: normal;
|
||||
color: var(--clr-Murrey);
|
||||
background-color: var(--clr-Lavender);
|
||||
}
|
||||
|
||||
main {
|
||||
margin: 0 var(--container-size);
|
||||
footer {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
margin: .5rem;
|
||||
text-align: center;
|
||||
font-size: 1rem;
|
||||
font-weight: 300;
|
||||
a, p {
|
||||
color: var(--clr-Murrey);
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,62 +1,38 @@
|
||||
nav {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
background-color: var(--clr-Melon);
|
||||
padding: 1rem var(--container-size);
|
||||
font-family: 'coolvetica';
|
||||
|
||||
.nav-right, .nav-left {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
background-color: var(--clr-Melon);
|
||||
padding: 1rem var(--container-size);
|
||||
align-items: center;
|
||||
gap: 2rem;
|
||||
}
|
||||
|
||||
.nav-right, .nav-left {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 2rem;
|
||||
}
|
||||
.nav-right > a {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.nav-right > a {
|
||||
display: flex;
|
||||
}
|
||||
.nav-btn {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.nav-btn {
|
||||
display: none;
|
||||
}
|
||||
a {
|
||||
text-decoration: none;
|
||||
font-size: 1.5rem;
|
||||
font-weight: 700;
|
||||
font-size: normal;
|
||||
color: var(--clr-Murrey);
|
||||
}
|
||||
|
||||
a {
|
||||
text-decoration: none;
|
||||
font-size: 1.5rem;
|
||||
font-weight: 700;
|
||||
font-size: normal;
|
||||
color: var(--clr-Murrey);
|
||||
}
|
||||
img {
|
||||
height: 2rem;
|
||||
}
|
||||
|
||||
img {
|
||||
height: 2rem;
|
||||
}
|
||||
|
||||
.nav-left img {
|
||||
height: 4rem;
|
||||
}
|
||||
.nav-left img {
|
||||
height: 4rem;
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 768px) {
|
||||
nav {
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
.nav-right {
|
||||
display: none !important;
|
||||
}
|
||||
.mobile-visible {
|
||||
display: flex !important;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
width: 100%;
|
||||
margin-top: 2rem;
|
||||
}
|
||||
|
||||
.nav-btn {
|
||||
display: flex !important;
|
||||
align-items: center;
|
||||
|
||||
img {
|
||||
height: 3rem;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
101
sass/main.scss
101
sass/main.scss
@ -3,17 +3,12 @@ main {
|
||||
gap: 2rem;
|
||||
margin-top: 2rem;
|
||||
margin-bottom: 2rem;
|
||||
margin-left: 20vw;
|
||||
margin-right: 20vw;
|
||||
padding: 0 var(--container-size);
|
||||
|
||||
.news-wrapper {
|
||||
max-width: 80vw;
|
||||
.aside-wrapper {
|
||||
min-width: 20vw;
|
||||
}
|
||||
|
||||
.aside-wrapper {
|
||||
min-width: 20vw;
|
||||
|
||||
}
|
||||
aside{
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
@ -29,6 +24,7 @@ main {
|
||||
width: 100%;
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
|
||||
a.vstupenky {
|
||||
width: 80%;
|
||||
background-color: var(--clr-Melon);
|
||||
@ -42,8 +38,16 @@ main {
|
||||
border-radius: 15px;
|
||||
border-style: solid;
|
||||
border-width: 3px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
.vstupenky:hover span{
|
||||
transform: translateX(0.5rem);
|
||||
}
|
||||
.vstupenky span {
|
||||
transition: 300ms ease;
|
||||
}
|
||||
|
||||
.infotable {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
@ -54,7 +58,7 @@ main {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 4rem;
|
||||
gap: 2rem;
|
||||
color: var(--clr-Murrey);
|
||||
text-align: left;
|
||||
|
||||
@ -62,6 +66,7 @@ main {
|
||||
h3 {
|
||||
font-weight: 900;
|
||||
}
|
||||
|
||||
p {
|
||||
font-weight: 500;
|
||||
}
|
||||
@ -77,81 +82,5 @@ main {
|
||||
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;
|
||||
}
|
||||
}
|
||||
|
||||
122
sass/responsivity.scss
Normal file
122
sass/responsivity.scss
Normal file
@ -0,0 +1,122 @@
|
||||
@media only screen and (min-width: 0px) and (max-width: 954px) {
|
||||
nav {
|
||||
flex-wrap: wrap;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
width: 100vw;
|
||||
}
|
||||
.nav-right {
|
||||
display: none !important;
|
||||
}
|
||||
.mobile-visible {
|
||||
display: flex !important;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
width: 100%;
|
||||
gap: 0rem !important;
|
||||
}
|
||||
.mobile-visible > *:first-child{
|
||||
border-top: 1px solid var(--clr-Murrey);
|
||||
|
||||
}
|
||||
.mobile-visible > * {
|
||||
display: grid;
|
||||
place-content: center;
|
||||
width: 100%;
|
||||
padding: 1rem 0;
|
||||
border-bottom: 1px solid var(--clr-Murrey);
|
||||
}
|
||||
|
||||
.nav-btn {
|
||||
display: flex !important;
|
||||
align-items: center;
|
||||
|
||||
img {
|
||||
height: 3rem;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
|
||||
.vstupenky {
|
||||
font-size: 1.5rem !important;
|
||||
width: 70vw !important;
|
||||
}
|
||||
main {
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
margin-top: 8rem !important;
|
||||
}
|
||||
main aside .info-wrapper img {
|
||||
width: 50px;
|
||||
}
|
||||
.aside-wrapper {
|
||||
order: -1;
|
||||
}
|
||||
.info-wrapper {
|
||||
gap: 1rem !important;
|
||||
}
|
||||
|
||||
footer:not(.footer-mobile) {
|
||||
display: none !important;
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (min-width: 955px) and (max-width: 1090px) {
|
||||
.vstupenky {
|
||||
font-size: 1.5rem !important;
|
||||
}
|
||||
main {
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
.aside-wrapper {
|
||||
order: -1;
|
||||
}
|
||||
.info-wrapper {
|
||||
gap: 1rem !important;
|
||||
}
|
||||
:root {
|
||||
--container-size: 20vw;
|
||||
}
|
||||
footer:not(.footer-mobile) {
|
||||
display: none !important;
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (min-width: 1091px) and (max-width: 1499px) {
|
||||
:root {
|
||||
--container-size: 10vw;
|
||||
}
|
||||
.aside-wrapper {
|
||||
min-width: 40vw !important;
|
||||
}
|
||||
.news-wrapper {
|
||||
max-width: 50vw !important;
|
||||
}
|
||||
}
|
||||
|
||||
/* Extra large devices (large laptops and desktops, 1200px and up) */
|
||||
@media only screen and (min-width: 1500px) and (max-width: 1999px) {
|
||||
:root {
|
||||
--container-size: 15vw;
|
||||
}
|
||||
.aside-wrapper {
|
||||
min-width: 35vw !important;
|
||||
}
|
||||
.news-wrapper {
|
||||
max-width: 50vw !important;
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (min-width: 2000px) {
|
||||
:root {
|
||||
--container-size: 25vw;
|
||||
}
|
||||
.aside-wrapper {
|
||||
min-width: 25vw !important;
|
||||
}
|
||||
.news-wrapper {
|
||||
max-width: 50vw !important;
|
||||
}
|
||||
}
|
||||
|
||||
@ -7,7 +7,7 @@
|
||||
--clr-Blush: #cf6379;
|
||||
--clr-Melon: #ffadad;
|
||||
--clr-cards: #e4e3ff;
|
||||
--container-size: 10vw;
|
||||
--container-size: 5vw;
|
||||
}
|
||||
|
||||
|
||||
|
||||
Reference in New Issue
Block a user