WIP on master

2025-11-03 14:54:57 +01:00 · 2025-11-03 14:54:57 +01:00 · 80aaab46f2
commit 80aaab46f2
parent b6ab1ff50e
25 changed files with 6291 additions and 927 deletions
--- a/wwwroot/css/README.md
+++ b/wwwroot/css/README.md
@ -0,0 +1,152 @@
+# CSS Build Process
+
+Dette projekt bruger PostCSS til at kompilere moderne nested CSS til browser-kompatibel CSS.
+
+## Mappestruktur
+
+```
+wwwroot/css/
+├── src/                          # Source CSS filer med nesting
+│   ├── calendar-base-css.css
+│   ├── calendar-layout-css.css
+│   └── ...
+├── calendar-base-css.css         # Compiled CSS (genereret automatisk)
+├── calendar-layout-css.css       # Compiled CSS (genereret automatisk)
+└── ...
+```
+
+## Workflow
+
+### Development
+
+1. **Rediger CSS i `src/` mappen**
+   - Brug moderne CSS nesting
+   - Skriv nested selectors med `&`
+   - Brug CSS custom properties
+
+2. **Build CSS**
+   ```bash
+   npm run css:build
+   ```
+
+3. **Watch mode (auto-rebuild)**
+   ```bash
+   npm run css:watch
+   ```
+
+### Production
+
+```bash
+npm run css:build:prod
+```
+
+Dette vil:
+- Kompilere nested CSS
+- Tilføje vendor prefixes (autoprefixer)
+- Minificere CSS (cssnano)
+- Fjerne comments
+
+## CSS Nesting Eksempel
+
+### Source (src/calendar-layout-css.css)
+
+```css
+swp-allday-container {
+  display: grid;
+  
+  swp-allday-event {
+    height: 22px;
+    padding: 2px 4px;
+    
+    &[data-type="meeting"] {
+      background: var(--color-event-meeting);
+      
+      &.highlight {
+        background: var(--color-event-meeting-hl);
+      }
+    }
+    
+    &:hover {
+      opacity: 0.9;
+    }
+    
+    swp-event-title {
+      font-size: 12px;
+    }
+  }
+}
+```
+
+### Compiled (calendar-layout-css.css)
+
+```css
+swp-allday-container {
+  display: grid;
+}
+
+swp-allday-container swp-allday-event {
+  height: 22px;
+  padding: 2px 4px;
+}
+
+swp-allday-container swp-allday-event[data-type="meeting"] {
+  background: var(--color-event-meeting);
+}
+
+swp-allday-container swp-allday-event[data-type="meeting"].highlight {
+  background: var(--color-event-meeting-hl);
+}
+
+swp-allday-container swp-allday-event:hover {
+  opacity: 0.9;
+}
+
+swp-allday-container swp-allday-event swp-event-title {
+  font-size: 12px;
+}
+```
+
+## Fordele ved CSS Nesting
+
+1. **Mindre gentagelse** - Ingen behov for at gentage parent selectors
+2. **Bedre læsbarhed** - Strukturen matcher DOM hierarkiet
+3. **Lettere vedligeholdelse** - Relaterede styles er grupperet
+4. **Mindre CSS** - Færre bytes i source filer
+5. **Bedre organisation** - Logisk gruppering af styles
+
+## PostCSS Plugins
+
+- **postcss-nesting**: Konverterer nested CSS til flat CSS
+- **autoprefixer**: Tilføjer vendor prefixes automatisk
+- **cssnano**: Minificerer CSS i production mode
+
+## Vigtige Noter
+
+⚠️ **Rediger ALDRIG de compiled CSS filer direkte!**
+- Alle ændringer skal laves i `src/` mappen
+- De compiled filer bliver overskrevet ved hver build
+
+⚠️ **Husk at køre build før commit**
+- Sørg for at både source og compiled filer er opdateret
+- Kør `npm run css:build` før du committer
+
+## Browser Support
+
+PostCSS sikrer kompatibilitet med:
+- Chrome/Edge (sidste 2 versioner)
+- Firefox (sidste 2 versioner)
+- Safari (sidste 2 versioner)
+
+## Troubleshooting
+
+### CSS ændringer vises ikke
+
+1. Tjek at du har kørt `npm run css:build`
+2. Tjek at du redigerer filer i `src/` mappen
+3. Hard refresh browseren (Ctrl+Shift+R)
+
+### Build fejl
+
+1. Tjek CSS syntax i source filerne
+2. Sørg for at alle `{` har matchende `}`
+3. Tjek at nesting er korrekt formateret