Emeljük ki a legfelső sort, adjunk neki egy szürkés színt, legyen nagyobb a betűtípusa és más a szövegszín. Csináljunk egy ehhez hasonlót az első oszloppal is.
text-align:center;/* Középre igazítjuk a szöveget */
}
```
Most az eseményeknek adjunk stílust. Nézzük meg mi lenne, ha kikapcsolnánk a `max-width` tulajdonságot. Figyeljünk oda arra is, hogy esemény méretétől függően törjön a cím.
``` css
.event{
background-color:rgb(23,166,151);
border-radius:5px;/* lekerekítjük a négy sarkát */
word-wrap:break-word;/* Ha kell, akkor törd szét a szót, hogy ne lógjon túl */
}
/* Csak az 1 óra hosszú, vagy az ütköző eseményeknél lesz aktiválva */
.eventSubdivide.eventTitle,.length--1.eventTitle{
overflow:hidden;/* Elrejtjük a görgetősávat */
white-space:nowrap;/* Szóköznél nem kezdünk új sort ha nincs elég hely */
}
.eventTime{
font-size:small;/* Az idő legyen kisebb */
font-weight:300;/* Ne legyen annyira vastag */
}
```
És végül, amitől hoszabbak lesznek.
``` css
.length--1{
/* Mennyi cellát foglaljon el */
grid-row-end:span1;/* 1, azaz 1 cellát foglaljon el */
}
.length--2{
grid-row-end:span2;/* 2, azaz 2 cellát foglaljon el */
}
.length--4{
grid-row-end:span4;/* 4, azaz 4 cellát foglaljon el */
}
```
## 4. responsive.css
Ha túl keskeny a kijelző, akkor nem a legjobb a megjelenés. Ezt javítsuk ki azzal, hogy még jobban reszponzívvá tesszük a naptárat.
Kezdjük azzal, hogy megkeressük azt a pontot, ahol megtörni látszik a megjelenés.
``` css
/* 1380px vagy annál keskenyebb a kijelző, akkor aktiválódik */
@mediaonlyscreenand(max-width:1380px){
/* ide írjuk a további módosításokat */
}
```
Ha nem tud a teljes naptár egészében megjelenni a kijelzőn, akkor legyen napi nézet.
``` css
main{
display:block;/* blokként jelenjen meg a tartalma */
max-width:800px;/* Maximum eddig nyoljon szét a tartalom */
/* Helyezzük középre, de most használjunk valami régit */
margin-left:auto;
margin-right:auto;
}
body{
display:block;/* flexel nem fog működni, így visszatérünk blockra */
}
```
Rejtsük el az idő oszlopot, nem kell az nekünk.
``` css
.time{
display:none;/* Nem fog megjelenni */
}
```
Apránként oldjuk meg, hogy minden szétnyúljon ebben a nézetben.
``` css
/* Ez mindennek a konténere, ha nem nyúlik szét, akkor semmi sem fog */
.day{
width:100%;/* Reszponzívan próbáld kitölteni a szabad helyet */
}
/* gridről térjünk át flexre, de oszlopos legyen a megjelenés */
.dayEvents{
display:flex;
flex-direction:column;
}
.event{
margin:5px10px;
max-width:100%;/* Használjuk fel az összes szabad helyet */
}
```
Most már csak az ütköző elemekkel van probléma. Ehhez használjuk ki azt, hogy elég csak az egyiknek belső margót megadni. Így itt is marad a 10 pixel belső távolság.
``` css
/* Csak az ütköző eseményekre alkalmazzuk */
.eventSubdivide.event{
/* Ezzel fogják fele-fele arányban elfoglalni a helyet */
min-width:calc(50%-15px);/* Kiszámoljuk, mennyi legyen a minimális szélesség */
}
/* Elég csak az elsőnek a belső margoját módosítani */
.eventSubdivide.event:first-child{
margin-right:0;
}
```
## Hogyan csíkozzuk be?
Vegyük észre, hogy a vízszintes csíkozás lehetetlen. A függőleges még éppen, hogy lehetséges.
De mi most mégis megoldjuk a vízszintes csíkozást a *repeating-linear-gradient* használva.
A workshopon való jelenlét megszerzéséhez szükséges a házi feladatnak az elkészítése. Ehhez használd nyugodtan azt a kódot, amit a workshop ideje alatt készítettél, vagy az itt található mintakódot.
-[A feladat szövege itt érhető el.](https://github.com/gergoradeczki/schdesign-web-tutorial-1/raw/main/homework/homework.pdf)
### Feladatok
1. Legyen egyszerűen sötét témájúvá váltható a naptár!
1.*Hint: lehet érdemes külön css fájlt és (1 db) osztályt létrehozni*
2. Legyen több esemény stílus!
1.*Hint: most minden esemény ugyan olyan, lehessen pl. színt, szövegtípust stb. választani.*
3. Legyen CSS változón keresztül módosítható a naptár tetejének és időoszlopának a színe!
1.*Hint: nézz utána hogyan kell CSS változót létrehozni és ügyelj arra, hogy jó helyen hozd őket létre.*
Beadni a `gergo.radeczki@schdesign.hu` email címre lehet.<br>Tárgynak add meg, hogy `[Webfejlesztés alapok HF]`.
