content: css-introduction - add HighlightLines, change css-variable

ifpb · Oct 23, 2024 · a6dab95 · a6dab95
1 parent 6fe0e9c
commit a6dab95
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 10 deletions.
diff --git a/public/codes/css/introduction/css-variable/css/style.css b/public/codes/css/introduction/css-variable/css/style.css
@@ -1,17 +1,17 @@
 /* light mode */
 :root {
   --color-primary: #000;
-  --background-color: #fff;
+  --background-primary: #fff;
 }
 
 /* dark mode */
 :root.dark {
   --color-primary: #fff;
-  --background-color: #0d1117;
+  --background-primary: #0d1117;
 }
 
 body {
-  background: var(--background-color);
-  color: var(--color-primary) !important;
+  background: var(--background-primary);
+  color: var(--color-primary);
 }
 
diff --git a/src/content/classnotes/css/introduction/index.mdx b/src/content/classnotes/css/introduction/index.mdx
@@ -79,19 +79,21 @@ Exemplo:
 
 #### Elemento
 
-<CodeHtmlCssPreview src="/codes/css/introduction/selector-element" cssHighlightLines="1,5,11" />
+<CodeHtmlCssPreview src="/codes/css/introduction/selector-element" htmlHighlightLines="3,6,15" cssHighlightLines="1,5,11" />
+
+> Outras tags semânticas podem ser utilizadas no lugar da div: header, footer, header, main, nav, section, article, aside
 
 #### `#id`
 
-<CodeHtmlCssPreview src="/codes/css/introduction/selector-id" cssHighlightLines="5" />
+<CodeHtmlCssPreview src="/codes/css/introduction/selector-id" htmlHighlightLines="2" cssHighlightLines="5" />
 
 #### `.class`
 
-<CodeHtmlCssPreview src="/codes/css/introduction/selector-class" cssHighlightLines="5" />
+<CodeHtmlCssPreview src="/codes/css/introduction/selector-class" htmlHighlightLines="2,6" cssHighlightLines="5" />
 
 #### Descendant combinator
 
-<CodeHtmlCssPreview src="/codes/css/introduction/selector-descendant-combinator" cssHighlightLines="1" />
+<CodeHtmlCssPreview src="/codes/css/introduction/selector-descendant-combinator" htmlHighlightLines="2,8" cssHighlightLines="1" />
 
 ### Função
 
@@ -105,7 +107,7 @@ Exemplo:
 
 ### At-rules
 
-<CodeHtmlCssPreview src="/codes/css/introduction/at-rule-import" onlyBody={false} htmlHighlightLines="9" />
+<CodeHtmlCssPreview src="/codes/css/introduction/at-rule-import" onlyBody={false} codeTree={true} htmlHighlightLines="9" />
 
 ### Media Query
 
@@ -115,7 +117,7 @@ Exemplo:
 
 <CodeHtmlCssPreview src="/codes/css/introduction/css-variable" cssHighlightLines="3-4,9-10,14-15" htmlHighlightLines="2" onlyBody={false} showDarkMode={true} />
 
-<CodeHtmlPreview src="/codes/css/introduction/css-variable" htmlFile="light.html" htmlHighlightLines="2" onlyBody={false} />
+<CodeHtmlPreview src="/codes/css/introduction/css-variable" htmlFile="light.html" htmlHighlightLines="2" onlyBody={false} showDarkMode={false} />
 
 ### Unidades de Medida