chore: modularize css styles

package.json

@@ -36,6 +36,7 @@
     "@vitejs/plugin-react": "^1.3.0",
     "autoprefixer": "^10.4.7",
     "postcss": "^8.4.14",
+    "postcss-import": "^14.1.0",
     "tailwindcss": "^3.1.6",
     "typescript": "^4.6.3",
     "vite": "^2.9.9"

postcss.config.js

@@ -1,5 +1,6 @@
 module.exports = {
   plugins: {
+    'postcss-import': {},
     tailwindcss: {},
     autoprefixer: {},
   },

src/styles/base.css

@@ -0,0 +1,16 @@
+.ProseMirror li[dir="rtl"] {
+  text-align: right;
+}
+
+.ProseMirror li[dir="ltr"] {
+  text-align: left;
+}
+
+.ProseMirror p.is-editor-empty:first-child::before,
+h1.is-editor-empty:first-child::before {
+  @apply pointer-events-none text-gray-400 content-[attr(data-placeholder)] h-0 float-right;
+}
+
+.ProseMirror:focus {
+  outline: none;
+}

src/styles/code-block-themes.css

@@ -0,0 +1,139 @@
+/* Gruvbox Dark */
+pre code.hljs {
+  display: block;
+  overflow-x: auto;
+  padding: 1em;
+}
+
+code.hljs {
+  padding: 3px 5px;
+}
+
+.hljs {
+  color: #d5c4a1;
+  background: #1d2021;
+}
+
+.hljs::selection,
+.hljs ::selection {
+  background-color: #504945;
+  color: #d5c4a1;
+}
+
+/* purposely do not highlight these things */
+.hljs-formula,
+.hljs-params,
+.hljs-property {
+}
+
+/* base03 - #665c54 -  Comments, Invisibles, Line Highlighting */
+.hljs-comment {
+  color: #665c54;
+}
+
+/* base04 - #bdae93 -  Dark Foreground (Used for status bars) */
+.hljs-tag {
+  color: #bdae93;
+}
+
+/* base05 - #d5c4a1 -  Default Foreground, Caret, Delimiters, Operators */
+.hljs-subst,
+.hljs-punctuation,
+.hljs-operator {
+  color: #d5c4a1;
+}
+
+.hljs-operator {
+  opacity: 0.7;
+}
+
+/* base08 - Variables, XML Tags, Markup Link Text, Markup Lists, Diff Deleted */
+.hljs-bullet,
+.hljs-variable,
+.hljs-template-variable,
+.hljs-selector-tag,
+.hljs-name,
+.hljs-deletion {
+  color: #fb4934;
+}
+
+/* base09 - Integers, Boolean, Constants, XML Attributes, Markup Link Url */
+.hljs-symbol,
+.hljs-number,
+.hljs-link,
+.hljs-attr,
+.hljs-variable.constant_,
+.hljs-literal {
+  color: #fe8019;
+}
+
+/* base0A - Classes, Markup Bold, Search Text Background */
+.hljs-title,
+.hljs-class .hljs-title,
+.hljs-title.class_ {
+  color: #fabd2f;
+}
+
+.hljs-strong {
+  font-weight: bold;
+  color: #fabd2f;
+}
+
+/* base0B - Strings, Inherited Class, Markup Code, Diff Inserted */
+.hljs-code,
+.hljs-addition,
+.hljs-title.class_.inherited__,
+.hljs-string {
+  color: #b8bb26;
+}
+
+/* base0C - Support, Regular Expressions, Escape Characters, Markup Quotes */
+.hljs-built_in,
+.hljs-doctag, /* guessing */
+.hljs-quote,
+.hljs-keyword.hljs-atrule,
+.hljs-regexp {
+  color: #8ec07c;
+}
+
+/* base0D - Functions, Methods, Attribute IDs, Headings */
+.hljs-function .hljs-title,
+.hljs-attribute,
+.ruby .hljs-property,
+.hljs-title.function_,
+.hljs-section {
+  color: #83a598;
+}
+
+/* base0E - Keywords, Storage, Selector, Markup Italic, Diff Changed */
+.hljs-type,
+/* .hljs-selector-id, */
+/* .hljs-selector-class, */
+/* .hljs-selector-attr, */
+/* .hljs-selector-pseudo, */
+.hljs-template-tag,
+.diff .hljs-meta,
+.hljs-keyword {
+  color: #d3869b;
+}
+.hljs-emphasis {
+  color: #d3869b;
+  font-style: italic;
+}
+
+/* base0F - Deprecated, Opening/Closing Embedded Language Tags, e.g. <?php ?> */
+.hljs-meta,
+/*
+  prevent top level .keyword and .string scopes
+  from leaking into meta by accident
+*/
+.hljs-meta .hljs-keyword,
+.hljs-meta .hljs-string {
+  color: #d65d0e;
+}
+
+.hljs-meta .hljs-keyword,
+/* for v10 compatible themes */
+.hljs-meta-keyword {
+  font-weight: bold;
+}

src/styles/fonts.css

@@ -0,0 +1,62 @@
+@font-face {
+  font-family: "Vazirmatn";
+  src: url(/public/fonts/vazirmatn/Vazirmatn-Thin.woff2) format("woff2"),
+    url(/public/fonts/vazirmatn/Vazirmatn-Thin.ttf) format("truetype");
+  font-weight: 100;
+}
+
+@font-face {
+  font-family: "Vazirmatn";
+  src: url(/public/fonts/vazirmatn/Vazirmatn-ExtraLight.woff2) format("woff2"),
+    url(/public/fonts/vazirmatn/Vazirmatn-ExtraLight.ttf) format("truetype");
+  font-weight: 200;
+}
+
+@font-face {
+  font-family: "Vazirmatn";
+  src: url(/public/fonts/vazirmatn/Vazirmatn-Light.woff2) format("woff2"),
+    url(/public/fonts/vazirmatn/Vazirmatn-Light.ttf) format("truetype");
+  font-weight: 300;
+}
+
+@font-face {
+  font-family: "Vazirmatn";
+  src: url(/public/fonts/vazirmatn/Vazirmatn-Regular.woff2) format("woff2"),
+    url(/public/fonts/vazirmatn/Vazirmatn-Regular.ttf) format("truetype");
+  font-weight: normal; /* 400 */
+}
+
+@font-face {
+  font-family: "Vazirmatn";
+  src: url(/public/fonts/vazirmatn/Vazirmatn-Medium.woff2) format("woff2"),
+    url(/public/fonts/vazirmatn/Vazirmatn-Medium.ttf) format("truetype");
+  font-weight: 500;
+}
+
+@font-face {
+  font-family: "Vazirmatn";
+  src: url(/public/fonts/vazirmatn/Vazirmatn-SemiBold.woff2) format("woff2"),
+    url(/public/fonts/vazirmatn/Vazirmatn-SemiBold.ttf) format("truetype");
+  font-weight: 600;
+}
+
+@font-face {
+  font-family: "Vazirmatn";
+  src: url(/public/fonts/vazirmatn/Vazirmatn-Bold.woff2) format("woff2"),
+    url(/public/fonts/vazirmatn/Vazirmatn-Bold.ttf) format("truetype");
+  font-weight: bold; /* 700 */
+}
+
+@font-face {
+  font-family: "Vazirmatn";
+  src: url(/public/fonts/vazirmatn/Vazirmatn-ExtraBold.woff2) format("woff2"),
+    url(/public/fonts/vazirmatn/Vazirmatn-ExtraBold.ttf) format("truetype");
+  font-weight: 800;
+}
+
+@font-face {
+  font-family: "Vazirmatn";
+  src: url(/public/fonts/vazirmatn/Vazirmatn-Black.woff2) format("woff2"),
+    url(/public/fonts/vazirmatn/Vazirmatn-Black.ttf) format("truetype");
+  font-weight: 900;
+}