feat: expired certs blog

sreez/style/main.scss

@@ -1,3 +1,7 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
 @font-face {
   font-family: "Fira Mono";
   src:
@@ -513,6 +517,92 @@ ol.huge-list-markers li{
   max-height: 900px;
 }
 
+.code-block {
+  background-color: #2d2d2d;  // Dark background color
+  color: #f8f8f2;  // Light text color
+  padding: 1rem;  // Padding around the code block
+  margin: 4rem 2.5rem;
+  border-radius: 0.5rem;  // Rounded corners
+  overflow-x: auto;  // Horizontal scroll for long lines
+  font-family: 'Courier New', Courier, monospace;  // Monospace font
+  font-size: 1rem;
+}
+
+.code-block .token.comment,
+.code-block .token.prolog,
+.code-block .token.doctype,
+.code-block .token.cdata {
+  color: #75715e;  // Color for comments
+}
+
+.code-block .token.punctuation {
+  color: #f8f8f2;  // Color for punctuation
+}
+
+.code-block .token.namespace {
+  opacity: .7;  // Reduced opacity for namespaces
+}
+
+.code-block .token.property,
+.code-block .token.tag,
+.code-block .token.constant,
+.code-block .token.symbol,
+.code-block .token.deleted {
+  color: #f92672;  // Color for properties, tags, etc.
+}
+
+.code-block .token.boolean,
+.code-block .token.number {
+  color: #ae81ff;  // Color for booleans and numbers
+}
+
+.code-block .token.selector,
+.code-block .token.attr-name,
+.code-block .token.string,
+.code-block .token.char,
+.code-block .token.builtin,
+.code-block .token.inserted {
+  color: #a6e22e;  // Color for selectors, attributes, etc.
+}
+
+.code-block .token.operator,
+.code-block .token.entity,
+.code-block .token.url,
+.code-block .language-css .token.string,
+.code-block .style .token.string,
+.code-block .token.variable {
+  color: #f8f8f2;  // Color for operators, entities, URLs, etc.
+}
+
+.code-block .token.atrule,
+.code-block .token.attr-value,
+.code-block .token.function,
+.code-block .token.class-name {
+  color: #e6db74;  // Color for at-rules, attribute values, etc.
+}
+
+.code-block .token.keyword {
+  color: #66d9ef;  // Color for keywords
+}
+
+.code-block .token.regex,
+.code-block .token.important {
+  color: #fd971f;  // Color for regex and important
+}
+
+.code-block .token.important,
+.code-block .token.bold {
+  font-weight: bold;  // Bold font weight for important and bold
+}
+
+.code-block .token.italic {
+  font-style: italic;  // Italic font style
+}
+
+.code-block .token.entity {
+  cursor: help;  // Cursor style for entities
+}
+
 @media screen and (max-width: 768px) {
   .sm-margin-top-2 {
     margin-top: 2rem;