Merge pull request #426 from nuejs/dev

1.0.0-RC.2

Author: tipiirai

packages/examples/simple-blog/.gitignore

@@ -1,2 +1,2 @@
-*.zip
 *.gz
+.env

packages/examples/simple-blog/@global/colors.css

@@ -1,3 +1,4 @@
+
 :root {
 
   /* slate gray */
@@ -12,10 +13,6 @@
   --main-500: #3b82f6;
   --main-600: #2563eb;
 
-  /* gradients */
-  --pink-gradient: linear-gradient(#e879f9, #ec4899);
-  --blue-gradient: linear-gradient(#0ea5e9, #67e8f9);
-
   /* special colors */
   --marker: #ffff7a;
 }

packages/examples/simple-blog/@global/layout.css

@@ -1,5 +1,5 @@
 
-/* all reset/normalization you need */
+/* CSS reset */
 *, *::before, *::after {
   box-sizing: border-box;
 }
@@ -35,7 +35,7 @@ body {
     > header { margin-bottom: 2rem }
 
     > section {
-      max-width: 650px;
+      max-width: 700px;
       margin: 0 auto;
     }
   }

packages/examples/simple-blog/@global/typography.css

@@ -31,7 +31,7 @@ a {
     font-weight: 500;
     color: var(--gray-900);
 
-    &[aria-selected] {
+    &[aria-current] {
       text-decoration: 2px underline var(--main-500);
       text-underline-offset: 8px;
     }

packages/examples/simple-blog/@library/cards.css

@@ -1,4 +1,12 @@
 
+/* generic wrapper decorations  */
+
+/* gradients */
+:root {
+  --pink-gradient: linear-gradient(#e879f9, #ec4899);
+  --blue-gradient: linear-gradient(#0ea5e9, #67e8f9);
+}
+
 .pink, .blue {
   background-image: var(--pink-gradient);
   padding: 3em 0 0 3em;

packages/examples/simple-blog/@library/gallery.css

@@ -1,22 +1,25 @@
 
-ul:has(time) {
+/*
+  Reusable gallery component. Used on front page
+*/
+
+.gallery {
+  margin-block: 4rem;
   list-style: none;
-  margin: 4em 0;
-  padding: 0;;
+  padding: 0;
 
-  
-  li {
-    margin-bottom: 3em;
-  }
+  li { margin-bottom: 10% }
 
   figure {
     transition: transform .1s;
-    align-items: center;
+    align-items: flex-start;
     display: flex;
-    margin: 1em 0;
     gap: 3rem;
-    margin: 0;
     &:hover { transform: scale(1.01) }
+
+    @media(width < 900) {
+      img { display: none }
+    }
   }
 
   time {
@@ -31,11 +34,13 @@ ul:has(time) {
     font-size: 1.05em;
     font-weight: 500;
     line-height: 1.5;
-    margin: .3em 0 0;
+    margin: 0;
   }
 
+  p { margin-block: .5em }
+
   img {
-    max-width: 12em;
+    max-width: 18em;
     border-radius: 4px;
   }
 }

packages/examples/simple-blog/blog/class-naming-strategies.md

@@ -2,11 +2,11 @@
 title: CSS class naming strategies for scaleable dashboard design
 og: img/dashboard-3.png
 thumb: img/dashboard-thumb.png
-date: 2024-03-13
+date: 2024-08-13
 credits: ui8
 ---
 
-In web development, CSS and design work hand-in-hand to create compelling user experiences. CSS brings designs to life digitally, translating visual mockups into actual rendered elements. But CSS also informs the design process itself. Understanding its capabilities and limitations allows designers to craft effective layouts and interfaces.
+In web development, CSS and design work hand-in-hand to create compelling user experiences. CSS brings designs to life digitally, translating visual mockups into actual rendered elements.
 
 ## Keep them short
 
@@ -39,6 +39,12 @@ On the development side, CSS itself involves visual design skills. Bringing a la
 
 Overall, CSS is a uniquely visual language, with a direct impact on user-facing design. By embracing its connection to the design process, both designers and developers can build interfaces that are engaging and "CSS-native". The closer these roles work together, the better the end result. (edited)
 
+
+## Conclusion
+
+In conclusion, thoughtfully naming CSS classes, IDs, and other selectors is an important part of keeping stylesheets scalable and maintainable. Use semantic, descriptive names that communicate what a selector is styling. Implement methodical naming conventions and structures for better organization.
+
+
 ``` .pink
 .pink {
   background-image: linear-gradient(#e879f9, #ec4899);
@@ -54,10 +60,4 @@ Overall, CSS is a uniquely visual language, with a direct impact on user-facing
 }
 ```
 
-## Conclusion
-
-In conclusion, thoughtfully naming CSS classes, IDs, and other selectors is an important part of keeping stylesheets scalable and maintainable. Use semantic, descriptive names that communicate what a selector is styling. Implement methodical naming conventions and structures for better organization.
-
-[! img/dashboard-2.png]
-
 Avoid repetitive and overly specific names by separating structural styles from visual ones. And don’t be afraid to chain multiple classes together for more modular and flexible selectors.

packages/examples/simple-blog/blog/color-strategies.md

@@ -3,10 +3,24 @@ title: Practical strategies for using colors in CSS
 credits: BalkanBrothers
 thumb: img/colors-thumb.png
 og: img/colors-2.jpg
-date: 2024-05-23
+date: 2024-11-23
 ---
 
-Working with color is one of the most fun parts of web design. But if you don't use them right in your CSS code, colors can also tank a site's usability and accessibility. In this post, we'll explore simple, real-world tips for effectively using color in your stylesheets.
+Working with color is one of the most fun parts of web design. In this post, we'll explore simple, real-world tips for effectively using color in your stylesheets.
+
+
+
+## How to create a foolproof color palette
+
+Choosing the right colors for a website can be tricky. Get one wrong and your entire design can feel off. Luckily, there are some simple strategies to create a foolproof web color palette:
+
+- **Limit your palette** — Stick to just 2-4 core colors for most sites. Too many colors look disjointed.
+
+- **Focus on one dominant hue** — Pick one main color and derive the rest of the palette from it. This creates cohesion.
+
+- **Use color wheel relationships** — Choose adjacent or complementary colors on the wheel for built-in harmony.
+
+- **Consider tone and contrast** — Include light, medium and dark tones for visual interest. Test contrast for accessibility.
 
 ``` css .blue
 /* Tab styling */
@@ -26,19 +40,7 @@ Working with color is one of the most fun parts of web design. But if you don't
 }
 ```
 
-## How to create a foolproof color palette
-
-Choosing the right colors for a website can be tricky. Get one wrong and your entire design can feel off. Luckily, there are some simple strategies to create a foolproof web color palette:
 
-- **Limit your palette** — Stick to just 2-4 core colors for most sites. Too many colors look disjointed.
-
-- **Focus on one dominant hue** — Pick one main color and derive the rest of the palette from it. This creates cohesion.
-
-- **Use color wheel relationships** — Choose adjacent or complementary colors on the wheel for built-in harmony.
-
-- **Consider tone and contrast** — Include light, medium and dark tones for visual interest. Test contrast for accessibility.
-
-[image img/colors-1.png]
 
 Considering the different formatting options, you can optimize CSS color usage for any need. Use hex for one-off values, RGBA where you require opacity control, HSL for color adjustments, variables for theming, and preprocessor operations for transformations. With the right format, implementing colors in CSS becomes much more flexible and manageable.
 
@@ -65,4 +67,22 @@ When adding color in CSS, you have a few formatting options to choose from. Each
 
 They allow for millions of specific color values in a compact 6-character string. But RGB and HSL values also have advantages. RGB provides an easy way to adjust opacity with the alpha channel. And HSL makes it simple to tweak hue, saturation and lightness independently.
 
+``` css .blue
+/* Tab styling */
+[role=tablist] {
+  background: rgba(0, 0, 0, .7);
+  background-size: 3.8em;
+> padding: .7em 1.3em 0;
+> overflow: hidden;
+> display: flex;
+
+  a {
+    color: #fff9;
+    padding: .2em 1em .4em;
+    font-size: 90%;
+    cursor: pointer;
+  }
+}
+```
+
 For colors tied to theme values, CSS custom properties (variables) are extremely useful. You can update colors site-wide just by changing the variable values. Preprocessors like Sass take this a step further, allowing color operations like lightening and darkening right in the stylesheet.