3. Week 3
Op dinsdag was ik begonnen met een aantal kleine aanpassingen maken en daarna was ik verder gegaan met mediaqueries. Ik kwam er al snel achter dat er iets niet klopt in mijn code doordat er een fout was in de specificity, vanwege dat heb ik een deel van mijn code eerst gerefactored.
.section:nth-of-type(2) {
background: repeating-linear-gradient(135deg, rgba(255, 255, 255, 0.418), rgba(0, 0, 0, 0.558));
backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.37);
border-bottom: 3px solid white; border-top: 3px solid white; width: 100%;
align-items: center; display: flex; flex-direction: column; justify-content: center;
h3, p, a {
color: var(--black);
h3 {
max-width: 300px;
}
}
.story-head {
align-items: center; background-color: black; display: flex; flex-direction: column;
justify-content: center; padding: 0 0 2em 0; width: 100%;
h2 {
text-transform: uppercase; width: 11em;
max-width: 60rem; margin: .75em 0;
}
form {
display: flex; flex-wrap: nowrap; flex-direction: row; gap: 1em; width: 88dvw;
overflow: scroll; justify-content: start; scroll-snap-type: x mandatory;
> button {
align-items: center; background-color: var(--white); border-radius: var(--radius-2); display: flex;
flex-direction: row; justify-content: center; padding: .15em .5em; scroll-snap-align: center;
scrollbar-width: none;
> img {
border-radius: var(--radius-3); object-fit: cover; height:1em;
width: 2em;margin: 0 .5em 0 0;
}
}
}
form::-webkit-scrollbar {
display: none;
}
} /* story-head end tag */
.story-container {
display: flex; flex-wrap: nowrap; height: 22.5em; width: 100%; gap: .5em;
scroll-snap-type: x mandatory; overflow: scroll; justify-content: center;
margin: 2em 0 0 0;
> .indicator {
border-radius: var(--radius-2); width: 20px; height: 400px; scroll-snap-align: start;
transition: all 1s cubic-bezier(0.075, 0.82, 0.165, 1); overflow: hidden;
}
.gallery {
display: flex; justify-content: space-between;
width: 100%; overflow-x: scroll;
}
.gallery-item {
display: -webkit-inline-box; justify-content: center; align-items: start; height: 320px;
margin: 0 5px; overflow: hidden; background-color: var(--white);
border-radius: 2px; position: relative;
}
.story-img {
width: 200px; height: 130px; object-fit: contain; transform: scale(2);
}
.indicator:hover {
width: 200px;
.gallery-content {
display: flex; flex: wrap; flex-direction: row; background-color: var(--white); width: 200px;
height: 140px; position: absolute; bottom: 0em; z-index: 10;
.story-header {
display: flex; justify-content: space-between; width: 17em; padding: .5em 1em 0;
}
.lang-img {
width: 3em; height: 2em; object-fit: cover; padding: .5em 0 0 0;
}
.story-sum {
font-weight: 100; max-width: 190px; white-space: nowrap;
overflow: hidden; text-overflow: ellipsis; padding: .5em 1em 0;
}
.sub-buttons {
display: flex; flex-direction: row; justify-content: space-around; margin: 1em 0 0 0;
width: inherit; gap: 1em; position: absolute; bottom: 1em; right: 1em;
p {
margin: .20em 1em 0 0;
}
button {
margin: .25em 0 0 0;
}
}
}
}
}
ul::-webkit-scrollbar {
display: none;
}
.tab-buttons {
display: flex; flex-direction: row; gap: 7em; margin: 0 0 2em 0;
> button {
background-color: var(--white); color: var(--black); font-size: 18px;
padding: .5em .75em; border-radius: var(--radius-2);
}
}
}
Mobile -Tablet (not finished version)
Als eerste heb ik firefox getest, het design is compleet hetzelfde en de functies (playlist liken) werken nogsteeds. Verder werkt de clientside Javascript ook nogsteed en alle hovers (CSS) werken ook. Daarna heb ik Chrome getest, hier was het resultaat hetzelfde als Firefox. In Vivaldi was het resultaat hetzelfde als de voorgaande browsers, ook heb ik 'vertaal pagina' getest via Vivaldi, als je dit doet ontstaan er een 1 error in het design, bij stories komt de titel en summary op de verkeerde plaatst te staan. Voor de rest was alles werkend.
Als ik aan het coderen ben check ik de voortgang via Safari hierdoor zijn de functies, hovers en design de standaard en is alles werkend.
Het ontwerp van TuMi Mundo hebben we vooraf ontvangen van een vormgever. Het ontvangen ontwerp bevat alleen een mobil-first ontwerp, ik heb het originele ontwerpt wat aangepast en dat is ook de schets daarvan. Verder heb ik verschillende schermgroottes geschetst en het design wat per breakpoint veranderd.
Op elke pagina is in het ontwerp een andere kleur als achtergrond, ik wil het originele idee aanhouden maar inplaats van een statisch gradient als achtergrond wil ik een geanimeerd gradient in de background. Verder wil ik per pagina alleen de gebruikte hue teruglaten komen op de pagina en niet een ander hue, dit is omdat het anders te druk wordt. Om onderscheid en contrast te maken, maak ik gebruik van highlights en shadow hues. In de schets heb ik een overzicht gemaakt op welke pagina welke hues moeten komen en heb ik een schets gemaakt van een gradient.
Ik heb de buttons werkend gemaakt via Javascript, als de JS uitstaat dan is de standaard in html van die buttons "hidden". Hierdoor zijn niet werkende buttons niet zichtbaar.
<button title="previous" class="prevBTN" hidden>Vorige</button>
<button title="next" class="nextBTN" hidden>Volgende</button>