diff --git a/images/_ex/bt-maijla.png b/images/_ex/bt-maijla.png deleted file mode 100644 index b87ae9d..0000000 Binary files a/images/_ex/bt-maijla.png and /dev/null differ diff --git a/images/_ex/css-ine.png b/images/_ex/css-ine.png deleted file mode 100644 index f0159ec..0000000 Binary files a/images/_ex/css-ine.png and /dev/null differ diff --git a/images/_ex/css-maijla.png b/images/_ex/css-maijla.png deleted file mode 100644 index 8989264..0000000 Binary files a/images/_ex/css-maijla.png and /dev/null differ diff --git a/images/_ex/css-stefan.png b/images/_ex/css-stefan.png deleted file mode 100644 index b2baeef..0000000 Binary files a/images/_ex/css-stefan.png and /dev/null differ diff --git a/images/_ex/hcd-roshnie.png b/images/_ex/hcd-roshnie.png deleted file mode 100644 index c8c4deb..0000000 Binary files a/images/_ex/hcd-roshnie.png and /dev/null differ diff --git a/images/_ex/mp-giovanni-en-first.png b/images/_ex/mp-giovanni-en-first.png deleted file mode 100644 index 142cb71..0000000 Binary files a/images/_ex/mp-giovanni-en-first.png and /dev/null differ diff --git a/images/_ex/pwa-nina.png b/images/_ex/pwa-nina.png deleted file mode 100644 index 95ff49b..0000000 Binary files a/images/_ex/pwa-nina.png and /dev/null differ diff --git a/images/_ex/rtw-melvin.png b/images/_ex/rtw-melvin.png deleted file mode 100644 index d3799ec..0000000 Binary files a/images/_ex/rtw-melvin.png and /dev/null differ diff --git a/images/_ex/wafs-maijla.png b/images/_ex/wafs-maijla.png deleted file mode 100644 index 0dd8c59..0000000 Binary files a/images/_ex/wafs-maijla.png and /dev/null differ diff --git a/images/bt-maijla-2x.png b/images/bt-maijla-2x.png deleted file mode 100644 index fa80817..0000000 Binary files a/images/bt-maijla-2x.png and /dev/null differ diff --git a/images/bt-maijla-2x.webp b/images/bt-maijla-2x.webp deleted file mode 100644 index 548da0b..0000000 Binary files a/images/bt-maijla-2x.webp and /dev/null differ diff --git a/images/bt-maijla.png b/images/bt-maijla.png index 3fa660f..fa80817 100644 Binary files a/images/bt-maijla.png and b/images/bt-maijla.png differ diff --git a/images/bt-maijla.webp b/images/bt-maijla.webp index bcd5004..548da0b 100644 Binary files a/images/bt-maijla.webp and b/images/bt-maijla.webp differ diff --git a/images/css-ine-2x.png b/images/css-ine-2x.png deleted file mode 100644 index 0489824..0000000 Binary files a/images/css-ine-2x.png and /dev/null differ diff --git a/images/css-ine-2x.webp b/images/css-ine-2x.webp deleted file mode 100644 index 9ff482a..0000000 Binary files a/images/css-ine-2x.webp and /dev/null differ diff --git a/images/css-ine.png b/images/css-ine.png index 79c84d8..0489824 100644 Binary files a/images/css-ine.png and b/images/css-ine.png differ diff --git a/images/css-ine.webp b/images/css-ine.webp index 6280437..9ff482a 100644 Binary files a/images/css-ine.webp and b/images/css-ine.webp differ diff --git a/images/css-maijla-2x.png b/images/css-maijla-2x.png deleted file mode 100644 index e096383..0000000 Binary files a/images/css-maijla-2x.png and /dev/null differ diff --git a/images/css-maijla-2x.webp b/images/css-maijla-2x.webp deleted file mode 100644 index fdbd812..0000000 Binary files a/images/css-maijla-2x.webp and /dev/null differ diff --git a/images/css-maijla.png b/images/css-maijla.png index 92e3b23..e096383 100644 Binary files a/images/css-maijla.png and b/images/css-maijla.png differ diff --git a/images/css-maijla.webp b/images/css-maijla.webp index 0c8f56b..fdbd812 100644 Binary files a/images/css-maijla.webp and b/images/css-maijla.webp differ diff --git a/images/css-stefan-2x.png b/images/css-stefan-2x.png deleted file mode 100644 index 333e5e3..0000000 Binary files a/images/css-stefan-2x.png and /dev/null differ diff --git a/images/css-stefan-2x.webp b/images/css-stefan-2x.webp deleted file mode 100644 index 3e02bf3..0000000 Binary files a/images/css-stefan-2x.webp and /dev/null differ diff --git a/images/css-stefan.png b/images/css-stefan.png index 5d971dd..333e5e3 100644 Binary files a/images/css-stefan.png and b/images/css-stefan.png differ diff --git a/images/css-stefan.webp b/images/css-stefan.webp index 3ce8196..3e02bf3 100644 Binary files a/images/css-stefan.webp and b/images/css-stefan.webp differ diff --git a/images/hcd-roshnie-2x.png b/images/hcd-roshnie-2x.png deleted file mode 100644 index 80dffce..0000000 Binary files a/images/hcd-roshnie-2x.png and /dev/null differ diff --git a/images/hcd-roshnie-2x.webp b/images/hcd-roshnie-2x.webp deleted file mode 100644 index da2adeb..0000000 Binary files a/images/hcd-roshnie-2x.webp and /dev/null differ diff --git a/images/hcd-roshnie.png b/images/hcd-roshnie.png index edd8108..80dffce 100644 Binary files a/images/hcd-roshnie.png and b/images/hcd-roshnie.png differ diff --git a/images/hcd-roshnie.webp b/images/hcd-roshnie.webp index 63dfe43..da2adeb 100644 Binary files a/images/hcd-roshnie.webp and b/images/hcd-roshnie.webp differ diff --git a/images/mp-giovanni-en-first-2x.png b/images/mp-giovanni-en-first-2x.png deleted file mode 100644 index d30643a..0000000 Binary files a/images/mp-giovanni-en-first-2x.png and /dev/null differ diff --git a/images/mp-giovanni-en-first-2x.webp b/images/mp-giovanni-en-first-2x.webp deleted file mode 100644 index 16d99c6..0000000 Binary files a/images/mp-giovanni-en-first-2x.webp and /dev/null differ diff --git a/images/mp-giovanni-en-first.png b/images/mp-giovanni-en-first.png index 2f6512a..d30643a 100644 Binary files a/images/mp-giovanni-en-first.png and b/images/mp-giovanni-en-first.png differ diff --git a/images/mp-giovanni-en-first.webp b/images/mp-giovanni-en-first.webp index 09148fe..16d99c6 100644 Binary files a/images/mp-giovanni-en-first.webp and b/images/mp-giovanni-en-first.webp differ diff --git a/images/pwa-nina-2x.png b/images/pwa-nina-2x.png deleted file mode 100644 index 6186990..0000000 Binary files a/images/pwa-nina-2x.png and /dev/null differ diff --git a/images/pwa-nina-2x.webp b/images/pwa-nina-2x.webp deleted file mode 100644 index d3c0058..0000000 Binary files a/images/pwa-nina-2x.webp and /dev/null differ diff --git a/images/pwa-nina.png b/images/pwa-nina.png index 750d136..6186990 100644 Binary files a/images/pwa-nina.png and b/images/pwa-nina.png differ diff --git a/images/pwa-nina.webp b/images/pwa-nina.webp index 9a89b34..d3c0058 100644 Binary files a/images/pwa-nina.webp and b/images/pwa-nina.webp differ diff --git a/images/rtw-melvin-2x.png b/images/rtw-melvin-2x.png deleted file mode 100644 index ff2429d..0000000 Binary files a/images/rtw-melvin-2x.png and /dev/null differ diff --git a/images/rtw-melvin-2x.webp b/images/rtw-melvin-2x.webp deleted file mode 100644 index 3992f47..0000000 Binary files a/images/rtw-melvin-2x.webp and /dev/null differ diff --git a/images/rtw-melvin.png b/images/rtw-melvin.png index f93c6ac..ff2429d 100644 Binary files a/images/rtw-melvin.png and b/images/rtw-melvin.png differ diff --git a/images/rtw-melvin.webp b/images/rtw-melvin.webp index dc41cca..3992f47 100644 Binary files a/images/rtw-melvin.webp and b/images/rtw-melvin.webp differ diff --git a/images/wafs-maijla-2x.png b/images/wafs-maijla-2x.png deleted file mode 100644 index 1fc0263..0000000 Binary files a/images/wafs-maijla-2x.png and /dev/null differ diff --git a/images/wafs-maijla-2x.webp b/images/wafs-maijla-2x.webp deleted file mode 100644 index 9459597..0000000 Binary files a/images/wafs-maijla-2x.webp and /dev/null differ diff --git a/images/wafs-maijla.png b/images/wafs-maijla.png index 42aad66..1fc0263 100644 Binary files a/images/wafs-maijla.png and b/images/wafs-maijla.png differ diff --git a/images/wafs-maijla.webp b/images/wafs-maijla.webp index 43a7277..9459597 100644 Binary files a/images/wafs-maijla.webp and b/images/wafs-maijla.webp differ diff --git a/index.html b/index.html index 46ea0ba..4e5a06c 100644 --- a/index.html +++ b/index.html @@ -35,16 +35,11 @@

Minor Web Design & Development

Introductie

De minor Web Design & Development is voor ontwerpers die coden én developers die ontwerpen. In de minor leer je interactieve toepassingen ontwerpen en bouwen met HTML, CSS en JavaScript.

-

In vijf vakken en twee projecten leer je alles over het web → browsers, - toegankelijkheid, API’s, JSON, rapid prototyping, CSS, real-time, experiment, debuggen, PE, responsive, ontwerpen in de browser, microinteracties, documenteren …

+

In vijf vakken en twee projecten leer je alles over het web: browsers, toegankelijkheid, API’s, rapid prototyping, JSON, real-time, experiment, debuggen, PE, responsive, ontwerpen in de browser, CSS, microinteracties, documenteren …

-

In de minor werken we in het studio-model. We hebben een eigen vaste ruimte waar je werkt en - aan lessen en colleges deelneemt. De werklast is full-time. Je werkt 40 uur per week in de - studio.

+

In de minor werken we in het studio-model. We hebben een eigen vaste ruimte waar je werkt en aan lessen en colleges deelneemt. De werklast is full-time. Je werkt 40 uur per week in de studio.

-

De minor is dé webdev en design minor van CMD van de Hogeschool van - Amsterdam.

+

De minor is dé webdev en design minor van CMD van de Hogeschool van Amsterdam.

@@ -64,7 +59,7 @@

CSS to the Rescue

Human Centred Design Progressive Web App Meesterproef Web Apps from Scratch CSS to the Rescue Real-time Web CSS to the Rescue Browser Technologies Browser Technologies Minor Web Design & Development

- Vragen, opmerkingen en feedback van studenten over de minor (uit de jaarlijkse anonieme evaluatie). + Vragen, opmerkingen en feedback van studenten over de minor (uit de anonieme evaluaties).

diff --git a/static/styles/getinspired.css b/static/styles/getinspired.css index 5e27ad8..0d0a2fd 100644 --- a/static/styles/getinspired.css +++ b/static/styles/getinspired.css @@ -91,7 +91,7 @@ section.agenda article div h4 { max-width: 20rem; margin:0; - font-size:clamp(1.25em, 6vw, 1.5em); + font-size:clamp(1.33em, 6vw, 1.5em); font-weight:300; line-height:1.2; text-wrap:balance; @@ -107,6 +107,7 @@ section.agenda article div p { /* an activity - p - date, time and co - history */ section.agenda article div p s { + display:block; opacity: .33; text-decoration-color:var(--wdd-accent); } @@ -143,9 +144,9 @@ section.agenda article img { drop-shadow(-.3em -.3em var(--wdd-lime)); filter: - drop-shadow(0 .4em .2em color-mix(in oklch, var(--wdd-blue), transparent 25%)) - drop-shadow(.3em -.3em .2em color-mix(in oklch, var(--wdd-yellow), transparent 25%)) - drop-shadow(-.3em -.3em .2em color-mix(in oklch, var(--wdd-lime), transparent 25%)); + drop-shadow(0 .4em .2em color-mix(in oklab, var(--wdd-blue), transparent 25%)) + drop-shadow(.3em -.3em .2em color-mix(in oklab, var(--wdd-yellow), transparent 25%)) + drop-shadow(-.3em -.3em .2em color-mix(in oklab, var(--wdd-lime), transparent 25%)); } @media (width > 27.5em) { @@ -165,13 +166,17 @@ section.agenda article img { left:0; } - @media (any-pointer: fine) { - section.agenda article div p:nth-of-type(2) *:not(s):before { - filter: grayscale(1) contrast(.75); - transition:.2s; - } + section.agenda article div p:nth-of-type(2) s *:before { + filter: grayscale(1) contrast(.75); } + /* @media (any-pointer: fine) { */ + /* section.agenda article div p:nth-of-type(2) *:not(s):before { */ + /* filter: grayscale(1) contrast(.75); */ + /* transition:.2s; */ + /* } */ + /* } */ + section.agenda article div p:nth-of-type(2) .date:before { content:"📆 "; } @@ -189,8 +194,8 @@ section.agenda article img { } /* hover */ - section.agenda article:hover div p:nth-of-type(2) *:before, - section.agenda article:focus-within div p:nth-of-type(2) *:before { - filter:unset; - } + /* section.agenda article:hover div p:nth-of-type(2) *:before, */ + /* section.agenda article:focus-within div p:nth-of-type(2) *:before { */ + /* filter:unset; */ + /* } */ } \ No newline at end of file diff --git a/static/styles/home.css b/static/styles/home.css index d81872f..21f0066 100644 --- a/static/styles/home.css +++ b/static/styles/home.css @@ -83,9 +83,21 @@ padding:0 .25em .125em; font-size:1em; line-height:1.25em; - backdrop-filter: brightness(1.5) blur(1rem) contrast(.85); + + background-color: var(--bg-body-trans); +} + +@supports (backdrop-filter:blur(5px)) or (-webkit-backdrop-filter:blur(5px)) { + #impression > ul li h3, + #impression > ul li p { + background-color: transparent; + -webkit-backdrop-filter: brightness(1.5) blur(1rem) contrast(.85); + backdrop-filter: brightness(1.5) blur(1rem) contrast(.85); + } } + + @media screen and (prefers-color-scheme:dark) { #impression > ul li h3, #impression > ul li p { diff --git a/static/styles/style.css b/static/styles/style.css index 345a008..0b7d59f 100644 --- a/static/styles/style.css +++ b/static/styles/style.css @@ -546,6 +546,8 @@ section:nth-of-type(1) aside { /* 3D translucent effect */ @media (width > 75em) and (prefers-reduced-motion:no-preference) { section:nth-of-type(1) { + max-width:28em; + transform: perspective(32em) translateX(-4em) diff --git a/static/styles/sub.css b/static/styles/sub.css index 84613c5..3a5866d 100644 --- a/static/styles/sub.css +++ b/static/styles/sub.css @@ -5,6 +5,8 @@ section:nth-of-type(1) { @media (width > 75em) and (prefers-reduced-motion:no-preference) { section:nth-of-type(1) { + max-width:28em; + transform: perspective(28em) translateX(-2em) diff --git a/voorkennis/index.html b/voorkennis/index.html index e806043..6ff1bf0 100644 --- a/voorkennis/index.html +++ b/voorkennis/index.html @@ -37,7 +37,7 @@

Minor Web Design & Development

- Lees hier wat je als start moet kunnen en kennen voor de minor + Lees hier wat je als start moet kunnen en kennen en hoe je je optimaal kunt voorbereiden.