From a0a8911cc1c23aea062f4432a61bd1e39e0cea85 Mon Sep 17 00:00:00 2001 From: SamaraFellaDina Date: Tue, 18 Jun 2024 12:34:19 +0200 Subject: [PATCH] stijlen van de blog --- data.json | 20 ++++++++++++++++---- public/style.css | 6 +++--- 2 files changed, 19 insertions(+), 7 deletions(-) diff --git a/data.json b/data.json index 53a46e2..630437f 100644 --- a/data.json +++ b/data.json @@ -17,10 +17,10 @@ "title": "Digital gardening", "presentor": "Justus Sturkenboom", "type": "presentatie", - "short-description": "Justus heeft ons meer vertelt over `digital gardening`, waarbij hij stapsgewijs laat weten hoe jij je eigen plekje claimt op het web.", + "short-description": "Justus heeft ons meer vertelt over digital gardening, waarbij hij stapsgewijs laat weten hoe jij je eigen plekje claimt op het web.", "date": "15-03-2024", "semester":"2", - "description": "

Justus heeft ons meer vertelt over `digital gardening`, waarbij hij stapsgewijs laat weten hoe jij je eigen plekje claimt op het web.

Wat is Digital gardening?

1. Iedere keer dat je web doorloopt ondek je nieuwe dingen

2. Continue groei

3. Imperfectie & publiek leren

4. Erg persoonlijk en origineel

5. Samengaan van grote diverse inhoud

6. onafhankelijheid

Indieweb

", + "description": "

Justus heeft ons meer vertelt over digital gardening, waarbij hij stapsgewijs laat weten hoe jij je eigen plekje claimt op het web.

Wat is Digital gardening?

1. Iedere keer dat je web doorloopt ondek je nieuwe dingen

2. Continue groei

3. Imperfectie & publiek leren

4. Erg persoonlijk en origineel

5. Samengaan van grote diverse inhoud

6. onafhankelijheid

Indieweb

", "link-Github":"" }, { @@ -104,7 +104,7 @@ "short_description": "Alles over Transitions en transform in css", "date": "", "semester":"1", - "description": "

Transitions

Wat houdt transitions in? Dit zijn de properties die ervoor zorgen dat je een element kan laten in een `:hover` element. Het heet dan ook transities, omdat de vorm wijzig door bepaalde acties of triggers.

De basics

Voor Transitions heb je verschillende waarden die je er op kan gebruiken. Deze kunnen ook gedefineerd worden op de `x`, `y` en zelfs de `z` as. Je hebt de volgende 3 waardes:

Vervolgens kan je een `:hover` animatie ook defineren op duration, delay en zelfs timing-function. Wat houdt dat in

Je kan het `transition` element ook in een short-hand term bepalen.

Met de shorthand methode gaat de eerste waarde over de `transiton-duration`, bij de tweede waarde over `transition-delay` en de laatste over de `transition-timing-function`.

Wat valt nog meer op?

Je kan ook een custom timing-function geven aan een element. Je kan hem dus aanpassen, maar hoe doe je dat? Er werd een site laten zien genaamd Ceaser, waarbij gemakkelijk de code werd bepaald voor een transitie. Zo kan je uiteindelijk een custom transitie geven aan een animatie.

", + "description": "

Transitions

Wat houdt transitions in? Dit zijn de properties die ervoor zorgen dat je een element kan laten in een :hover element. Het heet dan ook transities, omdat de vorm wijzig door bepaalde acties of triggers.

De basics

Voor Transitions heb je verschillende waarden die je er op kan gebruiken. Deze kunnen ook gedefineerd worden op de x, y en zelfs de z as. Je hebt de volgende 3 waardes:

Vervolgens kan je een :hover animatie ook defineren op duration, delay en zelfs timing-function. Wat houdt dat in

Je kan het transition element ook in een short-hand term bepalen.

Met de shorthand methode gaat de eerste waarde over de transiton-duration, bij de tweede waarde over transition-delay en de laatste over de transition-timing-function.

Wat valt nog meer op?

Je kan ook een custom timing-function geven aan een element. Je kan hem dus aanpassen, maar hoe doe je dat? Er werd een site laten zien genaamd Ceaser, waarbij gemakkelijk de code werd bepaald voor een transitie. Zo kan je uiteindelijk een custom transitie geven aan een animatie.

", "link-Github": "https://github.com/SamaraFellaDina/we-love-web-notes/wiki/6.-Css-challenge-transitions-&-transforms" }, { @@ -130,5 +130,17 @@ "semester":"1", "description": "

Julia Miocene is een product designer die specialiseert is in het maken van geanimeerde code en speelt hier veel mee. In haar presentatie laat ze een aantal voorbeelden zien waaraan ze heeft gewerkt. Mijn eerste impressie was dat ik het er zelf nogal gecompliceerd uit vond zien, aangezien ik veel met After Effects heb gewerkt wat heel erg anders werkt.

Wie is Julia Miocene?

Zij maakt veel boeiende css animaties voor verschillende bedrijven en haar doel bij het maken van deze animaties is om meer leven aan te brengen hieraan. Op Codepen vind je veel meer werk van haar waarmee zij experimenteert. Zoals het voorbeeld hieronder.

Meer willen leren?

Voor degenen die geïnteresseerd waren in het starten met CSS-animaties, raadde ze bronnen aan zoals Codepen.io/challenges, Cssbattle.dev, en 100daysCSS.com.

", "link-Github":"https://github.com/SamaraFellaDina/we-love-web-notes/wiki/9-%E2%80%90-Julia-Miocene" - } + }, + { + "id": "12", + "slug": "Hello-world", + "title": "Hello world", + "presentor": "Hello world", + "type": "JS-fundamentals", + "short-description": "In deze blog ga ik kijken naar de verschillende Js fundamentals. Ik ga hier naar de belangrijke punten kijken die via deze bron word gegeven.", + "date": "", + "semester":"2", + "description":"", + "link-Github":"https://github.com/SamaraFellaDina/js-fundamentals/wiki/0-%E2%80%90-Hello-world" +} ]} \ No newline at end of file diff --git a/public/style.css b/public/style.css index 8a1456f..9436f59 100644 --- a/public/style.css +++ b/public/style.css @@ -97,6 +97,7 @@ a { display: flex; flex-direction: column; justify-content: center; + align-items: center; } .hoofdpagina { @@ -163,6 +164,7 @@ a { /* Styles for the hovered element */ .hoofdpagina-blogs ul li:hover { transform: scale(1.5); /* Scale up the hovered element */ + transition-duration: 200ms ease-out; border-radius: 15em; box-shadow: rgba(0, 0, 0, 0.25) 0px 54px 55px, rgba(0, 0, 0, 0.12) 0px -12px 30px, rgba(0, 0, 0, 0.12) 0px 4px 6px, rgba(0, 0, 0, 0.17) 0px 12px 13px, rgba(0, 0, 0, 0.09) 0px -3px 5px; z-index: 10; /* Bring the hovered element to the front */ @@ -226,9 +228,7 @@ a { .artikel { background-color: var(--color-light-pink); - display: flex; - align-items: flex-start; - flex-direction: column; + } .artikel section {