Initial commit

2026-04-23 21:38:24 -04:00
commit 63e12a9636
1762 changed files with 1672620 additions and 0 deletions
@@ -0,0 +1,101 @@
+# Razor @ Symbol Fix
+
+## 🐛 Issue Found
+
+**Error:** "The name 'media' does not exist in the current context"
+
+**Location:** Views with CSS `@media` queries
+
+## 🔍 Root Cause
+
+In Razor views (.cshtml files), the `@` symbol has special meaning - it's used to switch from HTML to C# code. When you write CSS directly in a Razor view, you need to escape `@` symbols in CSS at-rules like `@media`.
+
+## ✅ Fix Applied
+
+Changed all `@media` to `@@media` in:
+1. ✅ `Views/Home/Index.cshtml` (line 217)
+2. ✅ `Views/Shared/_Layout.cshtml` (line 233)
+
+## 📝 The Fix
+
+### Before (❌ Causes Error):
+```css
+<style>
+    @media (max-width: 768px) {
+        /* styles */
+    }
+</style>
+```
+
+### After (✅ Correct):
+```css
+<style>
+    @@media (max-width: 768px) {
+        /* styles */
+    }
+</style>
+```
+
+## 💡 Why Double @@?
+
+In Razor syntax:
+- `@` = Switch to C# code
+- `@@` = Escape sequence that outputs a single `@` character
+
+So `@@media` in Razor becomes `@media` in the final HTML.
+
+## 🎯 Other CSS At-Rules That Need Escaping
+
+If you add any of these CSS at-rules in Razor views, remember to escape them:
+
+```css
+@@media (min-width: 1024px) { }      /* Media queries */
+@@keyframes fadeIn { }               /* Animations */
+@@import url('fonts.css');          /* Imports */
+@@font-face { }                     /* Custom fonts */
+@@supports (display: grid) { }      /* Feature queries */
+```
+
+## ✅ Best Practice: External CSS
+
+To avoid this issue entirely, you can:
+
+### Option 1: Use External CSS File (Recommended)
+Create `wwwroot/css/site.css` and link it in your layout:
+```html
+<link rel="stylesheet" href="~/css/site.css" />
+```
+
+No need to escape @ symbols in .css files!
+
+### Option 2: Keep Inline (Current Approach)
+Just remember to use `@@` for all CSS at-rules.
+
+## 🔧 If You See This Error Again
+
+1. **Look for CSS at-rules** in your .cshtml file
+2. **Find any `@` symbols** in `<style>` tags
+3. **Double them** → Change `@` to `@@`
+4. **Rebuild** and the error will be gone
+
+## 🎯 Quick Test
+
+The error is now fixed! When you run the app:
+
+```bash
+cd src/PowderCoating.Web
+dotnet run
+```
+
+Navigate to `https://localhost:7001` and you should see the beautiful login page without errors!
+
+## 📋 Files Fixed
+
+1. ✅ `Views/Home/Index.cshtml` - Login page
+2. ✅ `Views/Shared/_Layout.cshtml` - Main layout
+
+Both now properly escape the @ symbol in CSS media queries.
+
+---
+
+**The Razor parsing error is now fixed! The login page should render perfectly.** ✅