New article, fix sass

3 files changed, 93 insertions, 26 deletions

diff --git a/styles/_alert.scss b/styles/_alert.scss
new file mode 100644
index 0000000..b0935ce
--- /dev/null
+++ b/styles/_alert.scss
@@ -0,0 +1,65 @@
+@use "./variables" as *;
+
+div[role="alert"] {
+  display: flex;
+  align-items: center;
+  justify-content: flex-start;
+  gap: 0.75rem;
+
+  padding: 1rem;
+  margin-block: 1.5rem;
+  margin-inline: 0.5rem;
+
+  border-radius: 0.5rem;
+
+  svg {
+    width: 1.5em;
+    height: 1.5em;
+    margin-inline-end: 0.5rem;
+    color: inherit;
+    vertical-align: middle;
+    flex-shrink: 0;
+  }
+
+  p {
+    margin-block: 0;
+  }
+
+  &::before {
+    flex-shrink: 0;
+    display: block;
+
+    width: 24px;
+    height: 24px;
+    line-height: 24px;
+
+    border-radius: 50%;
+    font-size: 1rem;
+
+    text-align: center;
+  }
+}
+
+div[role="alert"].note {
+  background-color: $noteBackground;
+  color: $noteText;
+  box-shadow: 0 0 0 1px $noteText;
+
+  &::before {
+    content: "i";
+    background-color: $noteText;
+    color: $light;
+  }
+}
+
+div[role="alert"].warning {
+  background-color: $warningBackground;
+  color: $warningText;
+  box-shadow: 0 0 0 1px $warningText;
+
+  &::before {
+    content: "!";
+    background-color: $warningText;
+    color: $light;
+  }
+}
diff --git a/styles/_variables.scss b/styles/_variables.scss
new file mode 100644
index 0000000..ce570f6
--- /dev/null
+++ b/styles/_variables.scss
@@ -0,0 +1,26 @@
+$titleFontStack: "Beiruti", "Arial", system-ui, sans-serif;
+$mainFontStack: "Sen Variable", "Arial", system-ui, sans-serif;
+$monoFontStack: "Fira Code", "Consolas", monospace;
+
+$accent: hsl(209, 94%, 42%);
+$accentLight: hsl(215, 90%, 60%);
+$accentDark: hsl(215, 90%, 30%);
+$secondary: hsl(48, 100%, 50%);
+$dark: hsl(340, 13%, 5%);
+
+$background: hsl(210, 40%, 96%);
+$light: hsl(214, 64%, 98%);
+$lightAlt: hsl(0, 0%, 100%);
+
+$noteBackground: hsl(210, 40%, 86%);
+$noteText: hsl(210, 40%, 40%);
+
+$warningBackground: hsl(40, 100%, 90%);
+$warningText: hsl(40, 100%, 30%);
+
+$shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.15);
+
+$floatingRadius: 0.5rem;
+
+$breakpointTablet: 480px;
+$breakpointDesktop: 1024px;
diff --git a/styles/shared.scss b/styles/shared.scss
index 46afa45..357ba7e 100644
--- a/styles/shared.scss
+++ b/styles/shared.scss
@@ -1,29 +1,5 @@
-$titleFontStack: "Beiruti", "Arial", system-ui, sans-serif;
-$mainFontStack: "Sen Variable", "Arial", system-ui, sans-serif;
-$monoFontStack: "Fira Code", "Consolas", monospace;
-
-$accent: hsl(209, 94%, 42%);
-$accentLight: hsl(215, 90%, 60%);
-$accentDark: hsl(215, 90%, 30%);
-$secondary: hsl(48, 100%, 50%);
-$dark: hsl(340, 13%, 5%);
-
-$background: hsl(210, 40%, 96%);
-$light: hsl(214, 64%, 98%);
-$lightAlt: hsl(0, 0%, 100%);
-
-$noteBackground: hsl(210, 40%, 86%);
-$noteText: hsl(210, 40%, 40%);
-
-$warningBackground: hsl(40, 100%, 90%);
-$warningText: hsl(40, 100%, 30%);
-
-$shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.15);
-
-$floatingRadius: 0.5rem;
-
-$breakpointTablet: 480px;
-$breakpointDesktop: 1024px;
+@use "./variables" as *;
+@use "./alert";
 
 :root {
   font: 400 16px/1.65 $mainFontStack;