/css-to-the-rescue-1920

CSS to the Rescue @cmda-minor-web 19-20

Primary LanguageHTML

Live Demo Screenshot

The restaurant at the end of the universe

pure css progressive enhanced progressive enhanced

Table of contents

A cosmic journey that pisses off multiple Sci-fi fanbases

startrek starwars douglas adams

In three weeks I create an innovative, experimental, yet pleasurable user experience by using CSS and SVG. No Javascrpt allowed. The goal is to create a cosmic journey to the restaurant at the end of the universe, experimenting with media queries for color (dark/light), language settings, reduced motion etc.

How to install

Requirements

  • Node
  • Yarn

Step by step

  1. Clone the project
  2. Open terminal and navigate to the directory
  3. Run yarn
  4. Run yarn dev
  5. Open a browser and navigate to localhost:10001

Or go straight to aaraar.github.io/css-to-the-rescue-1920

How to use

The journey has several layers to display the menu. When opening the site in light-mode (OS or browser setting) there will be all kinds of pop-ups blocking you from using the site. Popups These pop-ups will be in an alien language, however they contain the crucial hint to continue. Either change the HTML lang from '👽' to 'en' to read it or copy and paste it somewhere else. When the OS or browser is in darkmode, these pop-ups disappear and you can use the warpdrive (Star Trek reference in a D. Adams Joke? Yes!) Warpdrive Click it and a Tie fighter will appear and flies through space (EVEN STAR WARS JOKES!!?? YES!!) You will fly to the restaurant at the end of the universe and the menu portions will fly by. Tiefighter Did not get a chance to read it? Maybe try flying with a reduced motion (hint) No motion

Checklist

  • Fly through space
  • Moving menu parts
  • Menu layout with grid
  • Cursor simulates spaceship
  • Alien language on light mode
  • Reduced motion menu
  • Pop-ups
  • Interactive Menu in conjunction with the spaceship
  • Hold menu parts when flying through
  • Interactivity
  • Dynamic menu layout

Learning goals

  • Understanding the broader scope of CSS: You can show that CSS can be used for more than just styling web pages.
  • Understanding the progressive enhancement parts of CSS: You can show that you can use the cascade, inheritance and specificity in your project
  • Understanding the interactive parts of CSS: Is the UX fully enhanced within in given CSS scope?
  • Stretching the learning goals as far as possible

Goals of this week:

  • Be inspired
  • Discuss hot CSS topics.
  • Get going!