From 0e9b688ddf07d767894dc91489f8ad331acb5493 Mon Sep 17 00:00:00 2001
From: Reza Mahdi <rmahdi.develop@gmail.com>
Date: Sun, 21 Dec 2025 14:53:52 +0330
Subject: [PATCH 1/2] add styles for github alerts

---
 sass/alerts.scss | 47 +++++++++++++++++++++++++++++++++++++++++++++++
 sass/style.scss  |  1 +
 2 files changed, 48 insertions(+)
 create mode 100644 sass/alerts.scss

diff --git a/sass/alerts.scss b/sass/alerts.scss
new file mode 100644
index 0000000..fb78f00
--- /dev/null
+++ b/sass/alerts.scss
@@ -0,0 +1,47 @@
+blockquote[class^=markdown-alert-] {
+  border: 1px solid var(--accent);
+  padding-top: initial;
+
+  &::before {
+    background-color: var(--accent);
+    position: relative;
+    display: block;
+    left: initial;
+    top: initial;
+    margin-left: -25px;
+    margin-right: -25px;
+    padding-left: 12px;
+
+    color: black;
+    font-family: "Hack";
+    font-size: inherit;
+  }
+
+  &>p::before {
+    content: "";
+  }
+
+  &>p {
+    padding-top: 25px;
+  }
+}
+
+blockquote.markdown-alert-note::before {
+  content: "  NOTE";
+}
+
+blockquote.markdown-alert-tip::before {
+  content: "  TIP";
+}
+
+blockquote.markdown-alert-important::before {
+  content: "  IMPORTANT";
+}
+
+blockquote.markdown-alert-warning::before {
+  content: "  WARNING";
+}
+
+blockquote.markdown-alert-caution::before {
+  content: "  CAUTION";
+}
diff --git a/sass/style.scss b/sass/style.scss
index 3a289d7..b6c32bd 100644
--- a/sass/style.scss
+++ b/sass/style.scss
@@ -6,3 +6,4 @@
 @import 'post';
 @import 'pagination';
 @import 'footer';
+@import 'alerts.scss';

From a4b9e62358edce56a254837f4dd0bd7648356fc9 Mon Sep 17 00:00:00 2001
From: Reza Mahdi <rmahdi.develop@gmail.com>
Date: Mon, 22 Dec 2025 15:20:45 +0330
Subject: [PATCH 2/2] fix: correct margin for mobile screen

---
 sass/alerts.scss | 6 ++++++
 1 file changed, 6 insertions(+)

diff --git a/sass/alerts.scss b/sass/alerts.scss
index fb78f00..8be42b4 100644
--- a/sass/alerts.scss
+++ b/sass/alerts.scss
@@ -1,3 +1,5 @@
+@import "variables";
+
 blockquote[class^=markdown-alert-] {
   border: 1px solid var(--accent);
   padding-top: initial;
@@ -12,6 +14,10 @@ blockquote[class^=markdown-alert-] {
     margin-right: -25px;
     padding-left: 12px;
 
+    @media (max-width: $phone-max-width) {
+      margin-right: 0;
+    }
+
     color: black;
     font-family: "Hack";
     font-size: inherit;