diff --git a/05_react/unterricht/tag52/react-app/public/data/nerdshop-products.json b/05_react/unterricht/tag52/react-app/public/data/nerdshop-products.json new file mode 100644 index 0000000..f8db02d --- /dev/null +++ b/05_react/unterricht/tag52/react-app/public/data/nerdshop-products.json @@ -0,0 +1,119 @@ +[ + { + "_id": "675bee96bb39023b77e6cd92", + "title": "Smart Coffee Mug with LCD Level Indicator", + "sku": "MUG0007", + "stock": 25, + "price": 49.99, + "description": "Know exactly how much coffee you have left with this LCD-equipped mug.", + "tagline": "Never face an empty mug again." + }, + { + "_id": "675bee96bb39023b77e6cd93", + "title": "Bluetooth Coffee Mug with Fortune Telling Scanner", + "sku": "MUG0013", + "stock": 15, + "price": 99.99, + "description": "Get your daily fortune with every sip using this Bluetooth-connected mug.", + "tagline": "Coffee reading, made smart." + }, + { + "_id": "675bee96bb39023b77e6cd94", + "title": "South Pole Tested Pre-Warmed Ink Pen", + "sku": "OFF3145", + "stock": 34, + "price": 29.95, + "description": "Write smoothly even in the coldest conditions with this pre-warmed ink pen.", + "tagline": "The pen that conquers the cold." + }, + { + "_id": "675bee96bb39023b77e6cd95", + "title": "Ambidextrous Computer Mouse", + "sku": "COM1001", + "stock": 50, + "price": 19.9, + "description": "Finally, a mouse designed for both left and right-handed users.", + "tagline": "End the left-right struggle." + }, + { + "_id": "675bee96bb39023b77e6cd96", + "title": "Easter Egg Themed Webcam", + "sku": "COM0404", + "stock": 8, + "price": 14.99, + "description": "Add some festive flair to your video calls with this Easter egg webcam.", + "tagline": "Happy Easter, every day." + }, + { + "_id": "675bee96bb39023b77e6cd97", + "title": "Vulcan Language vi Cheatsheet", + "sku": "COM0001", + "stock": 6, + "price": 9.9, + "description": "Master the Vulcan language and vi editor simultaneously with this handy cheatsheet.", + "tagline": "Learn vi and Vulcan, live long and prosper." + }, + { + "_id": "675bee96bb39023b77e6cd98", + "title": "Klingon Language emacs Cheatsheet", + "sku": "COM1536", + "stock": 33, + "price": 9.9, + "description": "Conquer the Klingon language and emacs with this comprehensive cheatsheet.", + "tagline": "Learn emacs and Klingon, qapla'!" + }, + { + "_id": "675bee96bb39023b77e6cda0", + "title": "Self-Folding Laundry Basket", + "sku": "HME0023", + "stock": 15, + "price": 79.99, + "description": "Say goodbye to laundry clutter with this self-folding basket.", + "tagline": "Laundry day just got easier." + }, + { + "_id": "675bee96bb39023b77e6cda1", + "title": "Noise-Cancelling Headphones for Cats", + "sku": "PET0112", + "stock": 39, + "price": 39.95, + "description": "Give your cat the gift of silence with these noise-canceling headphones.", + "tagline": "Purrfect tranquility for your feline friend." + }, + { + "_id": "675bee96bb39023b77e6cda2", + "title": "Glow-in-the-Dark Toilet Paper", + "sku": "HME0221", + "stock": 65, + "price": 12.5, + "description": "Navigate your midnight bathroom trips with ease using this glow-in-the-dark toilet paper.", + "tagline": "A guiding light in the darkness." + }, + { + "_id": "675bee96bb39023b77e6cda3", + "title": "Automatic Plant Waterer with Compliment Dispenser", + "sku": "GRD0334", + "stock": 17, + "price": 69.99, + "description": "Keep your plants happy and hydrated with automatic watering and daily compliments.", + "tagline": "Nurture your plants, boost their self-esteem." + }, + { + "_id": "675bee96bb39023b77e6cda4", + "title": "Self-Stirring Cereal Bowl", + "sku": "KIT0445", + "stock": 55, + "price": 24.95, + "description": "Enjoy perfectly crunchy cereal every time with this self-stirring bowl.", + "tagline": "No more soggy surprises." + }, + { + "_id": "675bee96bb39023b77e6cda5", + "title": "Polygon Planet Lamp", + "sku": "LMP0556", + "stock": 4, + "price": 39.9, + "description": "Transform your space with the enchanting glow of a planetarium-inspired lamp.", + "tagline": "Bring the cosmos into your home." + } +] diff --git a/05_react/unterricht/tag52/react-app/public/fonts/amatic-sc-v26-latin/amatic-sc-v26-latin-700.woff2 b/05_react/unterricht/tag52/react-app/public/fonts/amatic-sc-v26-latin/amatic-sc-v26-latin-700.woff2 new file mode 100644 index 0000000..d0c13cc Binary files /dev/null and b/05_react/unterricht/tag52/react-app/public/fonts/amatic-sc-v26-latin/amatic-sc-v26-latin-700.woff2 differ diff --git a/05_react/unterricht/tag52/react-app/public/fonts/amatic-sc-v26-latin/amatic-sc-v26-latin-regular.woff2 b/05_react/unterricht/tag52/react-app/public/fonts/amatic-sc-v26-latin/amatic-sc-v26-latin-regular.woff2 new file mode 100644 index 0000000..804b1aa Binary files /dev/null and b/05_react/unterricht/tag52/react-app/public/fonts/amatic-sc-v26-latin/amatic-sc-v26-latin-regular.woff2 differ diff --git a/05_react/unterricht/tag52/react-app/public/fonts/merriweather-v30-latin/merriweather-v30-latin-300.woff2 b/05_react/unterricht/tag52/react-app/public/fonts/merriweather-v30-latin/merriweather-v30-latin-300.woff2 new file mode 100644 index 0000000..a119883 Binary files /dev/null and b/05_react/unterricht/tag52/react-app/public/fonts/merriweather-v30-latin/merriweather-v30-latin-300.woff2 differ diff --git a/05_react/unterricht/tag52/react-app/public/fonts/merriweather-v30-latin/merriweather-v30-latin-300italic.woff2 b/05_react/unterricht/tag52/react-app/public/fonts/merriweather-v30-latin/merriweather-v30-latin-300italic.woff2 new file mode 100644 index 0000000..0c7b8ed Binary files /dev/null and b/05_react/unterricht/tag52/react-app/public/fonts/merriweather-v30-latin/merriweather-v30-latin-300italic.woff2 differ diff --git a/05_react/unterricht/tag52/react-app/public/fonts/merriweather-v30-latin/merriweather-v30-latin-700.woff2 b/05_react/unterricht/tag52/react-app/public/fonts/merriweather-v30-latin/merriweather-v30-latin-700.woff2 new file mode 100644 index 0000000..a6919a9 Binary files /dev/null and b/05_react/unterricht/tag52/react-app/public/fonts/merriweather-v30-latin/merriweather-v30-latin-700.woff2 differ diff --git a/05_react/unterricht/tag52/react-app/public/fonts/merriweather-v30-latin/merriweather-v30-latin-700italic.woff2 b/05_react/unterricht/tag52/react-app/public/fonts/merriweather-v30-latin/merriweather-v30-latin-700italic.woff2 new file mode 100644 index 0000000..2048135 Binary files /dev/null and b/05_react/unterricht/tag52/react-app/public/fonts/merriweather-v30-latin/merriweather-v30-latin-700italic.woff2 differ diff --git a/05_react/unterricht/tag52/react-app/public/fonts/merriweather-v30-latin/merriweather-v30-latin-900.woff2 b/05_react/unterricht/tag52/react-app/public/fonts/merriweather-v30-latin/merriweather-v30-latin-900.woff2 new file mode 100644 index 0000000..4e3aec9 Binary files /dev/null and b/05_react/unterricht/tag52/react-app/public/fonts/merriweather-v30-latin/merriweather-v30-latin-900.woff2 differ diff --git a/05_react/unterricht/tag52/react-app/public/fonts/merriweather-v30-latin/merriweather-v30-latin-900italic.woff2 b/05_react/unterricht/tag52/react-app/public/fonts/merriweather-v30-latin/merriweather-v30-latin-900italic.woff2 new file mode 100644 index 0000000..d7cdeaa Binary files /dev/null and b/05_react/unterricht/tag52/react-app/public/fonts/merriweather-v30-latin/merriweather-v30-latin-900italic.woff2 differ diff --git a/05_react/unterricht/tag52/react-app/public/fonts/merriweather-v30-latin/merriweather-v30-latin-italic.woff2 b/05_react/unterricht/tag52/react-app/public/fonts/merriweather-v30-latin/merriweather-v30-latin-italic.woff2 new file mode 100644 index 0000000..38bfa01 Binary files /dev/null and b/05_react/unterricht/tag52/react-app/public/fonts/merriweather-v30-latin/merriweather-v30-latin-italic.woff2 differ diff --git a/05_react/unterricht/tag52/react-app/public/fonts/merriweather-v30-latin/merriweather-v30-latin-regular.woff2 b/05_react/unterricht/tag52/react-app/public/fonts/merriweather-v30-latin/merriweather-v30-latin-regular.woff2 new file mode 100644 index 0000000..6515c26 Binary files /dev/null and b/05_react/unterricht/tag52/react-app/public/fonts/merriweather-v30-latin/merriweather-v30-latin-regular.woff2 differ diff --git a/05_react/unterricht/tag52/react-app/public/fonts/open-sans-v40-latin/open-sans-v40-latin-300.woff2 b/05_react/unterricht/tag52/react-app/public/fonts/open-sans-v40-latin/open-sans-v40-latin-300.woff2 new file mode 100644 index 0000000..e000fcb Binary files /dev/null and b/05_react/unterricht/tag52/react-app/public/fonts/open-sans-v40-latin/open-sans-v40-latin-300.woff2 differ diff --git a/05_react/unterricht/tag52/react-app/public/fonts/open-sans-v40-latin/open-sans-v40-latin-300italic.woff2 b/05_react/unterricht/tag52/react-app/public/fonts/open-sans-v40-latin/open-sans-v40-latin-300italic.woff2 new file mode 100644 index 0000000..5167821 Binary files /dev/null and b/05_react/unterricht/tag52/react-app/public/fonts/open-sans-v40-latin/open-sans-v40-latin-300italic.woff2 differ diff --git a/05_react/unterricht/tag52/react-app/public/fonts/open-sans-v40-latin/open-sans-v40-latin-500.woff2 b/05_react/unterricht/tag52/react-app/public/fonts/open-sans-v40-latin/open-sans-v40-latin-500.woff2 new file mode 100644 index 0000000..a35be30 Binary files /dev/null and b/05_react/unterricht/tag52/react-app/public/fonts/open-sans-v40-latin/open-sans-v40-latin-500.woff2 differ diff --git a/05_react/unterricht/tag52/react-app/public/fonts/open-sans-v40-latin/open-sans-v40-latin-500italic.woff2 b/05_react/unterricht/tag52/react-app/public/fonts/open-sans-v40-latin/open-sans-v40-latin-500italic.woff2 new file mode 100644 index 0000000..039e72f Binary files /dev/null and b/05_react/unterricht/tag52/react-app/public/fonts/open-sans-v40-latin/open-sans-v40-latin-500italic.woff2 differ diff --git a/05_react/unterricht/tag52/react-app/public/fonts/open-sans-v40-latin/open-sans-v40-latin-600.woff2 b/05_react/unterricht/tag52/react-app/public/fonts/open-sans-v40-latin/open-sans-v40-latin-600.woff2 new file mode 100644 index 0000000..f67ef00 Binary files /dev/null and b/05_react/unterricht/tag52/react-app/public/fonts/open-sans-v40-latin/open-sans-v40-latin-600.woff2 differ diff --git a/05_react/unterricht/tag52/react-app/public/fonts/open-sans-v40-latin/open-sans-v40-latin-600italic.woff2 b/05_react/unterricht/tag52/react-app/public/fonts/open-sans-v40-latin/open-sans-v40-latin-600italic.woff2 new file mode 100644 index 0000000..bd6a4d1 Binary files /dev/null and b/05_react/unterricht/tag52/react-app/public/fonts/open-sans-v40-latin/open-sans-v40-latin-600italic.woff2 differ diff --git a/05_react/unterricht/tag52/react-app/public/fonts/open-sans-v40-latin/open-sans-v40-latin-700.woff2 b/05_react/unterricht/tag52/react-app/public/fonts/open-sans-v40-latin/open-sans-v40-latin-700.woff2 new file mode 100644 index 0000000..7e3b8b0 Binary files /dev/null and b/05_react/unterricht/tag52/react-app/public/fonts/open-sans-v40-latin/open-sans-v40-latin-700.woff2 differ diff --git a/05_react/unterricht/tag52/react-app/public/fonts/open-sans-v40-latin/open-sans-v40-latin-700italic.woff2 b/05_react/unterricht/tag52/react-app/public/fonts/open-sans-v40-latin/open-sans-v40-latin-700italic.woff2 new file mode 100644 index 0000000..2c96334 Binary files /dev/null and b/05_react/unterricht/tag52/react-app/public/fonts/open-sans-v40-latin/open-sans-v40-latin-700italic.woff2 differ diff --git a/05_react/unterricht/tag52/react-app/public/fonts/open-sans-v40-latin/open-sans-v40-latin-800.woff2 b/05_react/unterricht/tag52/react-app/public/fonts/open-sans-v40-latin/open-sans-v40-latin-800.woff2 new file mode 100644 index 0000000..cf65114 Binary files /dev/null and b/05_react/unterricht/tag52/react-app/public/fonts/open-sans-v40-latin/open-sans-v40-latin-800.woff2 differ diff --git a/05_react/unterricht/tag52/react-app/public/fonts/open-sans-v40-latin/open-sans-v40-latin-800italic.woff2 b/05_react/unterricht/tag52/react-app/public/fonts/open-sans-v40-latin/open-sans-v40-latin-800italic.woff2 new file mode 100644 index 0000000..17bc073 Binary files /dev/null and b/05_react/unterricht/tag52/react-app/public/fonts/open-sans-v40-latin/open-sans-v40-latin-800italic.woff2 differ diff --git a/05_react/unterricht/tag52/react-app/public/fonts/open-sans-v40-latin/open-sans-v40-latin-italic.woff2 b/05_react/unterricht/tag52/react-app/public/fonts/open-sans-v40-latin/open-sans-v40-latin-italic.woff2 new file mode 100644 index 0000000..84ee197 Binary files /dev/null and b/05_react/unterricht/tag52/react-app/public/fonts/open-sans-v40-latin/open-sans-v40-latin-italic.woff2 differ diff --git a/05_react/unterricht/tag52/react-app/public/fonts/open-sans-v40-latin/open-sans-v40-latin-regular.woff2 b/05_react/unterricht/tag52/react-app/public/fonts/open-sans-v40-latin/open-sans-v40-latin-regular.woff2 new file mode 100644 index 0000000..eaae942 Binary files /dev/null and b/05_react/unterricht/tag52/react-app/public/fonts/open-sans-v40-latin/open-sans-v40-latin-regular.woff2 differ diff --git a/05_react/unterricht/tag52/react-app/public/img/header-bg.jpg b/05_react/unterricht/tag52/react-app/public/img/header-bg.jpg new file mode 100644 index 0000000..7113677 Binary files /dev/null and b/05_react/unterricht/tag52/react-app/public/img/header-bg.jpg differ diff --git a/05_react/unterricht/tag52/react-app/public/img/logo-react.min.svg b/05_react/unterricht/tag52/react-app/public/img/logo-react.min.svg new file mode 100644 index 0000000..5fb5f94 --- /dev/null +++ b/05_react/unterricht/tag52/react-app/public/img/logo-react.min.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/05_react/unterricht/tag52/react-app/public/img/logo-react.svg b/05_react/unterricht/tag52/react-app/public/img/logo-react.svg new file mode 100644 index 0000000..08c4248 --- /dev/null +++ b/05_react/unterricht/tag52/react-app/public/img/logo-react.svg @@ -0,0 +1,1923 @@ + + \ No newline at end of file diff --git a/05_react/unterricht/tag52/react-app/public/img/slides/slide-01.jpg b/05_react/unterricht/tag52/react-app/public/img/slides/slide-01.jpg new file mode 100644 index 0000000..d98bbcc Binary files /dev/null and b/05_react/unterricht/tag52/react-app/public/img/slides/slide-01.jpg differ diff --git a/05_react/unterricht/tag52/react-app/public/img/slides/slide-02.jpg b/05_react/unterricht/tag52/react-app/public/img/slides/slide-02.jpg new file mode 100644 index 0000000..2b2d966 Binary files /dev/null and b/05_react/unterricht/tag52/react-app/public/img/slides/slide-02.jpg differ diff --git a/05_react/unterricht/tag52/react-app/public/img/slides/slide-03.jpg b/05_react/unterricht/tag52/react-app/public/img/slides/slide-03.jpg new file mode 100644 index 0000000..70509f3 Binary files /dev/null and b/05_react/unterricht/tag52/react-app/public/img/slides/slide-03.jpg differ diff --git a/05_react/unterricht/tag52/react-app/src/App.css b/05_react/unterricht/tag52/react-app/src/App.css deleted file mode 100644 index f90339d..0000000 --- a/05_react/unterricht/tag52/react-app/src/App.css +++ /dev/null @@ -1,184 +0,0 @@ -.counter { - font-size: 16px; - padding: 5px 10px; - border-radius: 5px; - color: var(--accent); - background: var(--accent-bg); - border: 2px solid transparent; - transition: border-color 0.3s; - margin-bottom: 24px; - - &:hover { - border-color: var(--accent-border); - } - &:focus-visible { - outline: 2px solid var(--accent); - outline-offset: 2px; - } -} - -.hero { - position: relative; - - .base, - .framework, - .vite { - inset-inline: 0; - margin: 0 auto; - } - - .base { - width: 170px; - position: relative; - z-index: 0; - } - - .framework, - .vite { - position: absolute; - } - - .framework { - z-index: 1; - top: 34px; - height: 28px; - transform: perspective(2000px) rotateZ(300deg) rotateX(44deg) rotateY(39deg) - scale(1.4); - } - - .vite { - z-index: 0; - top: 107px; - height: 26px; - width: auto; - transform: perspective(2000px) rotateZ(300deg) rotateX(40deg) rotateY(39deg) - scale(0.8); - } -} - -#center { - display: flex; - flex-direction: column; - gap: 25px; - place-content: center; - place-items: center; - flex-grow: 1; - - @media (max-width: 1024px) { - padding: 32px 20px 24px; - gap: 18px; - } -} - -#next-steps { - display: flex; - border-top: 1px solid var(--border); - text-align: left; - - & > div { - flex: 1 1 0; - padding: 32px; - @media (max-width: 1024px) { - padding: 24px 20px; - } - } - - .icon { - margin-bottom: 16px; - width: 22px; - height: 22px; - } - - @media (max-width: 1024px) { - flex-direction: column; - text-align: center; - } -} - -#docs { - border-right: 1px solid var(--border); - - @media (max-width: 1024px) { - border-right: none; - border-bottom: 1px solid var(--border); - } -} - -#next-steps ul { - list-style: none; - padding: 0; - display: flex; - gap: 8px; - margin: 32px 0 0; - - .logo { - height: 18px; - } - - a { - color: var(--text-h); - font-size: 16px; - border-radius: 6px; - background: var(--social-bg); - display: flex; - padding: 6px 12px; - align-items: center; - gap: 8px; - text-decoration: none; - transition: box-shadow 0.3s; - - &:hover { - box-shadow: var(--shadow); - } - .button-icon { - height: 18px; - width: 18px; - } - } - - @media (max-width: 1024px) { - margin-top: 20px; - flex-wrap: wrap; - justify-content: center; - - li { - flex: 1 1 calc(50% - 8px); - } - - a { - width: 100%; - justify-content: center; - box-sizing: border-box; - } - } -} - -#spacer { - height: 88px; - border-top: 1px solid var(--border); - @media (max-width: 1024px) { - height: 48px; - } -} - -.ticks { - position: relative; - width: 100%; - - &::before, - &::after { - content: ''; - position: absolute; - top: -4.5px; - border: 5px solid transparent; - } - - &::before { - left: 0; - border-left-color: var(--border); - } - &::after { - right: 0; - border-right-color: var(--border); - } -} diff --git a/05_react/unterricht/tag52/react-app/src/App.jsx b/05_react/unterricht/tag52/react-app/src/App.jsx index 174b3f1..7df15ad 100644 --- a/05_react/unterricht/tag52/react-app/src/App.jsx +++ b/05_react/unterricht/tag52/react-app/src/App.jsx @@ -1,122 +1,17 @@ -import { useState } from 'react' -import heroImg from './assets/hero.png' -import reactLogo from './assets/react.svg' -import viteLogo from './assets/vite.svg' -import './App.css' +import FooterMain from './components/footers/FooterMain'; +import HeaderMain from './components/headers/HeaderMain'; -function App() { - const [count, setCount] = useState(0) +function App(props) { + // const { } = props; return ( <> -
-
- - React logo - Vite logo -
-
-

Get started

-

- Edit src/App.jsx and save to test HMR -

-
- -
- -
- -
-
- -

Documentation

-

Your questions, answered

- -
-
- -

Connect with us

-

Join the Vite community

- -
-
- -
-
+ +
+

Hello

+
+ - ) + ); } - -export default App +export default App; diff --git a/05_react/unterricht/tag52/react-app/src/assets/hero.png b/05_react/unterricht/tag52/react-app/src/assets/hero.png deleted file mode 100644 index 02251f4..0000000 Binary files a/05_react/unterricht/tag52/react-app/src/assets/hero.png and /dev/null differ diff --git a/05_react/unterricht/tag52/react-app/src/assets/img/logo-react.min.svg b/05_react/unterricht/tag52/react-app/src/assets/img/logo-react.min.svg new file mode 100644 index 0000000..5fb5f94 --- /dev/null +++ b/05_react/unterricht/tag52/react-app/src/assets/img/logo-react.min.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/05_react/unterricht/tag52/react-app/src/assets/img/logo-react.min2.svg b/05_react/unterricht/tag52/react-app/src/assets/img/logo-react.min2.svg new file mode 100644 index 0000000..692d30f --- /dev/null +++ b/05_react/unterricht/tag52/react-app/src/assets/img/logo-react.min2.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/05_react/unterricht/tag52/react-app/src/assets/img/logo-react.svg b/05_react/unterricht/tag52/react-app/src/assets/img/logo-react.svg new file mode 100644 index 0000000..08c4248 --- /dev/null +++ b/05_react/unterricht/tag52/react-app/src/assets/img/logo-react.svg @@ -0,0 +1,1923 @@ + + \ No newline at end of file diff --git a/05_react/unterricht/tag52/react-app/src/components/footers/FooterMain.jsx b/05_react/unterricht/tag52/react-app/src/components/footers/FooterMain.jsx new file mode 100644 index 0000000..1c6a6dc --- /dev/null +++ b/05_react/unterricht/tag52/react-app/src/components/footers/FooterMain.jsx @@ -0,0 +1,46 @@ +const FooterMain = (props) => { + // const { } = props; + + return ( +
+
+
+
+
+

Contact

+
+ John Smith +
+ 1 Example Street +
+ Anytown, AB1 2CD +
+
+
+
+
+

More Information

+ +
+
+
+
+

Social Media

+ {/* social media icons */} +
+
+
+
+
+ ); +}; +export default FooterMain; diff --git a/05_react/unterricht/tag52/react-app/src/components/headers/HeaderMain.jsx b/05_react/unterricht/tag52/react-app/src/components/headers/HeaderMain.jsx new file mode 100644 index 0000000..2150dce --- /dev/null +++ b/05_react/unterricht/tag52/react-app/src/components/headers/HeaderMain.jsx @@ -0,0 +1,13 @@ +import LogoMain from '../logos/LogoMain'; + +const HeaderMain = () => { + return ( +
+
+ +
+
+ ); +}; + +export default HeaderMain; diff --git a/05_react/unterricht/tag52/react-app/src/components/logos/LogoMain.jsx b/05_react/unterricht/tag52/react-app/src/components/logos/LogoMain.jsx new file mode 100644 index 0000000..e33f1d3 --- /dev/null +++ b/05_react/unterricht/tag52/react-app/src/components/logos/LogoMain.jsx @@ -0,0 +1,12 @@ +import Logo from '../../assets/img/logo-react.min.svg'; + +const LogoMain = (props) => { + // const { } = props; + + return ( +
+ React +
+ ); +}; +export default LogoMain; diff --git a/05_react/unterricht/tag52/react-app/src/index.css b/05_react/unterricht/tag52/react-app/src/index.css deleted file mode 100644 index 2c84af0..0000000 --- a/05_react/unterricht/tag52/react-app/src/index.css +++ /dev/null @@ -1,111 +0,0 @@ -:root { - --text: #6b6375; - --text-h: #08060d; - --bg: #fff; - --border: #e5e4e7; - --code-bg: #f4f3ec; - --accent: #aa3bff; - --accent-bg: rgba(170, 59, 255, 0.1); - --accent-border: rgba(170, 59, 255, 0.5); - --social-bg: rgba(244, 243, 236, 0.5); - --shadow: - rgba(0, 0, 0, 0.1) 0 10px 15px -3px, rgba(0, 0, 0, 0.05) 0 4px 6px -2px; - - --sans: system-ui, 'Segoe UI', Roboto, sans-serif; - --heading: system-ui, 'Segoe UI', Roboto, sans-serif; - --mono: ui-monospace, Consolas, monospace; - - font: 18px/145% var(--sans); - letter-spacing: 0.18px; - color-scheme: light dark; - color: var(--text); - background: var(--bg); - font-synthesis: none; - text-rendering: optimizeLegibility; - -webkit-font-smoothing: antialiased; - -moz-osx-font-smoothing: grayscale; - - @media (max-width: 1024px) { - font-size: 16px; - } -} - -@media (prefers-color-scheme: dark) { - :root { - --text: #9ca3af; - --text-h: #f3f4f6; - --bg: #16171d; - --border: #2e303a; - --code-bg: #1f2028; - --accent: #c084fc; - --accent-bg: rgba(192, 132, 252, 0.15); - --accent-border: rgba(192, 132, 252, 0.5); - --social-bg: rgba(47, 48, 58, 0.5); - --shadow: - rgba(0, 0, 0, 0.4) 0 10px 15px -3px, rgba(0, 0, 0, 0.25) 0 4px 6px -2px; - } - - #social .button-icon { - filter: invert(1) brightness(2); - } -} - -body { - margin: 0; -} - -#root { - width: 1126px; - max-width: 100%; - margin: 0 auto; - text-align: center; - border-inline: 1px solid var(--border); - min-height: 100svh; - display: flex; - flex-direction: column; - box-sizing: border-box; -} - -h1, -h2 { - font-family: var(--heading); - font-weight: 500; - color: var(--text-h); -} - -h1 { - font-size: 56px; - letter-spacing: -1.68px; - margin: 32px 0; - @media (max-width: 1024px) { - font-size: 36px; - margin: 20px 0; - } -} -h2 { - font-size: 24px; - line-height: 118%; - letter-spacing: -0.24px; - margin: 0 0 8px; - @media (max-width: 1024px) { - font-size: 20px; - } -} -p { - margin: 0; -} - -code, -.counter { - font-family: var(--mono); - display: inline-flex; - border-radius: 4px; - color: var(--text-h); -} - -code { - font-size: 15px; - line-height: 135%; - padding: 4px 8px; - background: var(--code-bg); -} diff --git a/05_react/unterricht/tag52/react-app/src/main.jsx b/05_react/unterricht/tag52/react-app/src/main.jsx index b9a1a6d..afc3f15 100644 --- a/05_react/unterricht/tag52/react-app/src/main.jsx +++ b/05_react/unterricht/tag52/react-app/src/main.jsx @@ -1,10 +1,13 @@ -import { StrictMode } from 'react' -import { createRoot } from 'react-dom/client' -import './index.css' -import App from './App.jsx' +import { StrictMode } from 'react'; +import { createRoot } from 'react-dom/client'; + +// eigene separate Gestaltung mit main.scss (beinhaltet boostrap) +import './styles/main.scss'; + +import App from './App.jsx'; createRoot(document.getElementById('root')).render( , -) +); diff --git a/05_react/unterricht/tag52/react-app/src/styles/05_modules/_header-main.scss b/05_react/unterricht/tag52/react-app/src/styles/05_modules/_header-main.scss index 0516fc1..8b78bb8 100644 --- a/05_react/unterricht/tag52/react-app/src/styles/05_modules/_header-main.scss +++ b/05_react/unterricht/tag52/react-app/src/styles/05_modules/_header-main.scss @@ -16,7 +16,7 @@ max-height: 380px; } - background: $color-3 url('../img/header-image.webp') center no-repeat; + background: $color-3 url('/img/header-bg.jpg') center no-repeat; background-size: cover; &--min { diff --git a/05_react/unterricht/tag52/react-app/src/styles/05_modules/_index.scss b/05_react/unterricht/tag52/react-app/src/styles/05_modules/_index.scss index 06efadc..9ea0ada 100644 --- a/05_react/unterricht/tag52/react-app/src/styles/05_modules/_index.scss +++ b/05_react/unterricht/tag52/react-app/src/styles/05_modules/_index.scss @@ -1,7 +1,7 @@ @import 'button'; @import 'footer-main'; @import 'header-main'; -@import 'inputAmount'; +// @import 'inputAmount'; @import 'logo-main'; @import 'nav-menu'; // @import 'menu-main'; diff --git a/05_react/unterricht/tag52/react-app/vite.config.js b/05_react/unterricht/tag52/react-app/vite.config.js index 9982072..f14b0dc 100644 --- a/05_react/unterricht/tag52/react-app/vite.config.js +++ b/05_react/unterricht/tag52/react-app/vite.config.js @@ -1,7 +1,23 @@ -import react from '@vitejs/plugin-react' -import { defineConfig } from 'vite' +import react from '@vitejs/plugin-react'; +import { defineConfig } from 'vite'; // https://vite.dev/config/ export default defineConfig({ plugins: [react()], -}) + css: { + devSourcemap: true, // https://github.com/vitejs/vite/issues/8656#issuecomment-1159730991 + preprocessorOptions: { + scss: { + quietDeps: true, // Unix + silenceDeprecations: [ + 'color-functions', + 'global-builtin', + 'import', + 'legacy-js-api', + 'abs-percent', + 'if-function', + ], + }, + }, + }, +});