fr/web-semprace
1
0
Fork 0
Code Pull Requests Activity

prerelease changes

Browse Source
This commit is contained in:
Filip Rojek
2023-11-30 14:02:52 +01:00
parent bf050186fa
commit 0ef26dddfd
21 changed files with 572 additions and 268 deletions
Download Patch File Download Diff File Expand all files Collapse all files

17
sass/global.scss
View File

@ -1,14 +1,17 @@
* {
padding: 0;
margin: 0;
box-sizing: border-box;
padding: 0;
margin: 0;
box-sizing: border-box;
}
body {
font-family: 'Kanit', sans-serif;
background-color: var(--clr-lavender);
font-family: 'coolvetica', sans-serif;
font-weight: 500;
font-style: normal;
color: var(--clr-Murrey);
background-color: var(--clr-Lavender);
}
main {
margin: 0 var(--container-size);
}
margin: 0 var(--container-size);
}

9
sass/header.scss
View File

@ -1,7 +1,7 @@
nav {
display: flex;
justify-content: space-between;
background-color: var(--clr-melon);
background-color: var(--clr-Melon);
padding: 1rem var(--container-size);
.nav-right, .nav-left {
@ -21,8 +21,9 @@ nav {
a {
text-decoration: none;
font-size: 1.5rem;
font-weight: bold;
color: var(--clr-murrey);
font-weight: 700;
font-size: normal;
color: var(--clr-Murrey);
}
img {
@ -58,4 +59,4 @@ nav {
cursor: pointer;
}
}
}
}

215
sass/main.scss
View File

@ -1,130 +1,157 @@
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;
gap: 2rem;
margin-top: 2rem;
margin-bottom: 2rem;
flex-direction: column;
align-items: center;
padding: 2rem;
background-color: var(--clr-LavenderLight);
border-radius: 15px;
top: 0;
section#news {
width: 60vw;
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;
}
aside{
width: 40vw;
display: flex;
flex-direction: column;
align-items: center;
padding: 2rem;
background-color: var(--clr-cards);
border-radius: 15px;
position: sticky;
top: 0;
section#vstupenky-wrapper {
display: flex;
justify-content: center;
width: 100%;
margin-bottom: 2rem;
}
a.vstupenky {
width: 80%;
background-color: orange;
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;
img {
width: 100px;
}
}
.info-wrapper:nth-child(even) {
flex-direction: row-reverse;
text-align: right;
}
.infotable {
display: flex;
flex-direction: column;
gap: 2rem;
}
footer {
display: flex;
justify-content: center;
flex-direction: column;
align-items: center;
margin: .5rem;
font-size: 0.7rem;
a, p {
color: var(--clr-murrey);
.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 {
width: 100vw !important;
}
.vstupenky {
font-size: 1.5rem !important;
}
#vstupenky-wrapper {
}
.vstupenky {
font-size: 1.5rem !important;
}
}
/* Extra small devices (phones, 600px and down) */
@media only screen and (max-width: 600px) {
aside, main section#news {
width: 95vw !important;
}
body {
background-color: red;
}
}
/* Small devices (portrait tablets and large phones, 600px and up) */
@media only screen and (min-width: 600px) and (max-width: 768px) {
aside, main section#news {
width: 90vw !important;
}
}
/* Medium devices (landscape tablets, 768px and up) */
@media only screen and (min-width: 768px) and (max-width: 992px) {
aside, main section#news {
width: 60vw !important;
}
}
/* Large devices (laptops/desktops, 992px and up) */
@media only screen and (max-width: 992px) {
main {
flex-direction: column;
align-items: center;
main {
flex-direction: column;
align-items: center;
margin-left: 2vw !important;
margin-right: 2vw !important;
}
.aside-wrapper {
order: -1;
order: -1;
}
.info-wrapper {
gap: 1rem !important;
}
}
/* Extra large devices (large laptops and desktops, 1200px and up) */
@media only screen and (max-width: 1200px) {
@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;
}
}

62
sass/news.scss
View File

@ -1,30 +1,42 @@
.news-wrapper {
display: flex;
flex-direction: column;
gap: 1rem;
color: var(--clr-murrey);
display: flex;
flex-direction: column;
gap: 1rem;
color: var(--clr-Murrey);
.news-card {
position: relative;
background-color: var(--clr-cards);
border-radius: 1rem;
padding: 1rem;
.pin-img {
width: 1rem;
position: absolute;
right: 1rem;
display: none;
}
.news-card {
position: relative;
background-color: var(--clr-LavenderLight);
border-radius: 1rem;
padding: 1rem;
.pin-img {
width: 1rem;
position: absolute;
right: 1rem;
display: none;
}
h3 {
font-family: "coolveltica", sans-serif;
font-weight: 900;
font-style: normal;
}
.pinned {
order: -1;
}
.pinned .pin-img {
display: block;
}
iframe.video {
border-radius: 15px;
aspect-ratio: 16/9;
width: min(560px, 100%);
.date {
margin-bottom: 1rem;
}
}
.pinned {
order: -1;
}
.pinned .pin-img {
display: block;
}
iframe.video {
aspect-ratio: 16/9;
}
.instagram-media, img:not(.pin-img), iframe.video {
border-radius: 15px !important;
width: 100% !important;
max-width: none !important;
min-width: 0 !important;
}
}

51
sass/vars.scss
View File

@ -1,9 +1,50 @@
:root {
--clr-blue: #576ca8;
--clr-lavender: #d3d2ef;
--clr-murrey: #79214c;
--clr-blush: #cf6379;
--clr-melon: #ffadad;
--clr-TrueBlue: #576ca8; /* TrueBlue */
--clr-TrueBlueDark: #444B64;
--clr-Lavender: #d3d2ef;
--clr-LavenderLight: #E3E2F7;
--clr-Murrey: #792a4c;
--clr-Blush: #cf6379;
--clr-Melon: #ffadad;
--clr-cards: #e4e3ff;
--container-size: 10vw;
}
/*
TrueBlue - 576CA8H
TrueBlueDarker - 444B64
Lavender - D3D2EF
LavenderLighter - E3E2F7
Murrey - 792A4C
Blush - CF6379
Melon - FFADAD
Coolvetica Light
font-family: "coolvetica", sans-serif;
font-weight: 300;
font-style: normal;
Coolvetica Book
font-family: "coolvetica", sans-serif;
font-weight: 400;
font-style: normal;
Coolvetica Regular
font-family: "coolvetica", sans-serif;
font-weight: 500;
font-style: normal;
Coolvetica Bold
font-family: "coolvetica", sans-serif;
font-weight: 700;
font-style: normal;
Coolvetica Heavy
font-family: "coolvetica", sans-serif;
font-weight: 900;
font-style: normal;
use.typekit.net
*/