chore: css styles, font size, readability

alexzedim · alexzedim · commit 81bc5d44ede6 · 2025-07-04T09:14:57.000+03:00
diff --git a/messages/foundation/problematics/personal-regiment.md b/messages/foundation/problematics/personal-regiment.md
@@ -24,11 +24,15 @@
 
 - У шаманов? Закрытые каналы, где доверенные лица ~~Кремля~~ единодушно-лицемерно... *обсуждают-ну-что-они-там-обсуждают*? Опять какие все в ведре и вокруг, пидорасы, а они — Д'Артаньяны, да? Уууф. Единодушно. Оренжа в очередной раз обиделась и ливнула, потому что её кошку не оценили? У Амани оказалось больше симпов на бусти, чем...? Ничего нового. Бож, как это людям не надоедает? Может, дело в инклюзивности?
 
-- Драконов можно скипать сразу. А стоп. И не потому что там *furry*. Алексей-Керровитар же перенёс их из друидов? Фурри — это УТП. Открыто. Смело. Прогрессивно... Но бля, даже здесь Вождь-Дракон-Шаман Амани смотрит на тебя сверху. [Как портреты советских вождей в туалетах.](https://youtu.be/IC0-h3cj8YY?t=91) Будь начеку, товарищ! Водоворот бдитъ! Ничего не скажешь, "М" - медийка.
+- Драконов можно скипать сразу. А стоп. И не потому что там *furry*. Алексей-Керровитар же перенёс их из друидов? Фурри — это УТП. Открыто. Смело. Прогрессивно... Но бля, даже здесь Вождь-Дракон-Шаман Амани смотрит на тебя сверху. [Как портреты советских вождей в туалетах.](https://youtu.be/IC0-h3cj8YY?t=91) Самого его нет, а портрет — есть. 
+
+> Будь начеку, товарищ! Водоворот бдитъ! 
+
+Я конечно не врач, но сука, это сходство. Медийная болезнь, она как ветрянка, а может даже хуже. Переносится по воздуху, короткий инкубационный период, агрессивно проявляется во внешнюю среду, по всему лицу, телу и не только.
 
 - А вот у разбойников весело. Прям логово. Это вам не уютное местечко, это агрессивная среда, суки. Атмосферненько. Подлинно-душевно. Кто бы что ни говорил, социальная анархия в чате — соблазнительная концепция. Главное, не вступать в горячий фан-клуб любителей ВА-шек Мейникса и админки.
 
-- А ещё есть маги, охотники... охотники на демонов... охотники на охотников... короче, The Boys, мать их.
+- А ещё есть маги, охотники... охотники на демонов... охотники на охотников... короче, Классовые-дискорды, мать их.
 
 ---
 
diff --git a/pages/_document.tsx b/pages/_document.tsx
@@ -6,6 +6,16 @@ export default function Document() {
       <Head>
         <link rel="preconnect" href="https://fonts.googleapis.com" />
         <link rel="preconnect" href="https://fonts.gstatic.com" crossOrigin="" />
+        {/* Inter - для заголовков */}
+        <link 
+          href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&display=swap&subset=cyrillic" 
+          rel="stylesheet" 
+        />
+        {/* Source Sans Pro - для чтения */}
+        <link 
+          href="https://fonts.googleapis.com/css2?family=Source+Sans+Pro:wght@300;400;600;700&display=swap&subset=cyrillic" 
+          rel="stylesheet" 
+        />
       </Head>
       <body>
         <Main />
diff --git a/pages/index.tsx b/pages/index.tsx
@@ -25,7 +25,7 @@ export default function Home(): JSX.Element {
                 className="rounded-sm"
               />
               <div>
-                <h1 className="text-2xl font-serif font-bold tracking-tight text-gold">
+                <h1 className="text-2xl font-heading font-bold tracking-tight text-gold">
                   TEMPLE FIVE DAWNS
                 </h1>
                 <div className="text-xs text-white-dark tracking-widest mt-1">ХРАМ ПЯТИ РАССВЕТОВ</div>
@@ -56,7 +56,7 @@ export default function Home(): JSX.Element {
                 />
                 <div className="absolute bottom-0 left-0 p-8 z-20">
                   <div className="inline-block bg-gold px-3 py-1 text-xs font-semibold text-dark uppercase tracking-wider mb-4">Архив сообщества</div>
-                  <h1 className="text-4xl md:text-5xl font-serif font-bold text-gold mb-4 max-w-2xl">
+                  <h1 className="text-4xl md:text-5xl font-heading font-bold text-gold mb-4 max-w-2xl">
                     Храм Пяти Рассветов: Взгляд Изнутри
                   </h1>
                   <p className="text-lg text-smoke mb-6 max-w-2xl">
@@ -74,7 +74,7 @@ export default function Home(): JSX.Element {
             {/* Featured articles - 4 columns on desktop */}
             <div className="lg:col-span-4 space-y-8">
               <div className="p-6 border-l-4 border-jade bg-smoke shadow-sm">
-                <h2 className="text-2xl font-serif font-bold mb-4 text-purple">Избранные материалы</h2>
+                <h2 className="text-2xl font-heading font-bold mb-4 text-purple">Избранные материалы</h2>
                 <div className="space-y-6">
                   <Link href="/messages/foundation/library/pacifism_article" className="block group">
                     <div className="text-sm text-dark-light uppercase tracking-wider mb-1">Библиотека</div>
@@ -108,7 +108,7 @@ export default function Home(): JSX.Element {
               <div className="border-t border-b border-jade py-12">
                 <div className="flex items-center mb-8">
                   <div className="w-12 h-1 bg-jade mr-4"></div>
-                  <h2 className="text-jade text-2xl font-serif font-bold">О проекте</h2>
+                  <h2 className="text-jade text-2xl font-heading font-bold">О проекте</h2>
                 </div>
 
                 <div className="text-gold grid grid-cols-1 lg:grid-cols-2 gap-12">
diff --git a/pages/messages/[...slug].tsx b/pages/messages/[...slug].tsx
@@ -11,7 +11,7 @@ export default function MarkdownPage({ file, htmlContent }: MarkdownPageProps):
       <div className="min-h-screen bg-dark flex items-center justify-center">
         <div className="text-center max-w-md mx-auto px-4">
           <div className="bg-purple-dark border border-purple rounded-2xl p-8 shadow-lg">
-            <h1 className="text-2xl font-bold text-gold mb-4">Документ не найден</h1>
+            <h1 className="text-2xl font-heading font-bold text-gold mb-4">Документ не найден</h1>
             <p className="text-smoke mb-6">Запрашиваемый документ не существует или был удалён.</p>
             <Link href="/messages" className="bg-jade hover:bg-jade-dark text-dark px-6 py-3 rounded-lg font-medium transition-colors">
               Вернуться к списку
@@ -112,7 +112,7 @@ export default function MarkdownPage({ file, htmlContent }: MarkdownPageProps):
             <aside className="lg:col-span-4 space-y-8">
               {/* Table of Contents */}
               <div className="bg-purple-dark border border-purple rounded-2xl p-6 shadow-lg">
-                <h3 className="text-lg font-bold text-gold mb-4">Содержание</h3>
+                <h3 className="text-lg font-heading font-bold text-gold mb-4">Содержание</h3>
                 <nav className="space-y-2">
                   <a href="#overview" className="block text-sm text-smoke hover:text-jade transition-colors">
                     Обзор документа
@@ -128,7 +128,7 @@ export default function MarkdownPage({ file, htmlContent }: MarkdownPageProps):
 
               {/* Related Documents */}
               <div className="bg-dark border border-purple rounded-2xl p-6 shadow-lg">
-                <h3 className="text-lg font-bold text-gold mb-4">Похожие документы</h3>
+                <h3 className="text-lg font-heading font-bold text-gold mb-4">Похожие документы</h3>
                 <div className="space-y-4">
                   <Link href="/messages/foundation" className="block group">
                     <div className="text-sm text-jade uppercase tracking-wider mb-1">Основы</div>
@@ -150,7 +150,7 @@ export default function MarkdownPage({ file, htmlContent }: MarkdownPageProps):
 
               {/* Share */}
               <div className="bg-gold-dark border border-gold rounded-2xl p-6 shadow-lg">
-                <h3 className="text-lg font-bold text-dark mb-4">Поделиться</h3>
+                <h3 className="text-lg font-heading font-bold text-dark mb-4">Поделиться</h3>
                 <div className="flex space-x-3">
                   <button className="bg-jade hover:bg-jade-dark text-dark p-3 rounded-lg transition-colors">
                     <svg className="w-5 h-5" fill="currentColor" viewBox="0 0 24 24">
diff --git a/pages/messages/index.tsx b/pages/messages/index.tsx
@@ -34,10 +34,10 @@ export default function MessagesPage({ files, categories, imageCount }: Messages
         <main className="max-w-screen-xl mx-auto px-4 sm:px-8 py-16">
           {/* Hero Section */}
           <section className="text-center mb-16">
-            <h1 className="text-5xl md:text-6xl font-extrabold text-monk-900 mb-6 tracking-tight">
+            <h1 className="text-5xl md:text-6xl font-heading font-extrabold text-monk-900 mb-6 tracking-tight">
               💬 Сообщения и документы
             </h1>
-            <p className="text-2xl text-monk-600 max-w-3xl mx-auto leading-relaxed">
+            <p className="text-2xl font-body text-monk-600 max-w-3xl mx-auto leading-relaxed">
               Архив документов, стратегических материалов и персональных обращений сообщества
             </p>
           </section>
@@ -71,7 +71,7 @@ export default function MessagesPage({ files, categories, imageCount }: Messages
                 <div key={category} className="space-y-8">
                   {/* Category Header */}
                   <div className="border-b border-monk-200 pb-6">
-                    <h2 className="text-3xl font-bold text-monk-900 mb-2">
+                    <h2 className="text-3xl font-heading font-bold text-monk-900 mb-2">
                       📁 {categoryName}
                     </h2>
                     <p className="text-monk-600 text-lg">
@@ -100,11 +100,11 @@ export default function MessagesPage({ files, categories, imageCount }: Messages
                               )}
                             </div>
 
-                            <h3 className="text-xl font-bold text-monk-900 mb-3 line-clamp-2 group-hover:text-primary-600 transition-colors">
+                            <h3 className="text-xl font-heading font-bold text-monk-900 mb-3 line-clamp-2 group-hover:text-primary-600 transition-colors">
                               {file.title}
                             </h3>
 
-                            <p className="text-monk-600 mb-4 line-clamp-3 leading-relaxed">
+                            <p className="text-monk-600 mb-4 line-clamp-3 leading-relaxed font-body">
                               {file.excerpt}
                             </p>
 
@@ -157,7 +157,7 @@ export default function MessagesPage({ files, categories, imageCount }: Messages
           {/* Call to Action */}
           <section className="mt-20 text-center">
             <div className="bg-gradient-to-r from-primary-50 to-gold-50 rounded-3xl p-12 shadow-lg">
-              <h2 className="text-3xl font-bold text-monk-900 mb-4">
+              <h2 className="text-3xl font-heading font-bold text-monk-900 mb-4">
                 Изучите архив сообщества
               </h2>
               <p className="text-xl text-monk-600 mb-8 max-w-2xl mx-auto">
diff --git a/public/globals.css b/public/globals.css
@@ -1,16 +1,22 @@
-@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');
+@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&display=swap&subset=cyrillic');
+@import url('https://fonts.googleapis.com/css2?family=Source+Sans+Pro:wght@300;400;600;700&display=swap&subset=cyrillic');
 
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
 
 @layer base {
   html {
-    font-family: 'Inter', system-ui, sans-serif;
+    font-family: 'Source Sans Pro', system-ui, sans-serif;
   }
 
   body {
-    @apply bg-jade-dark text-smoke;
+    @apply bg-jade text-smoke font-body;
+  }
+
+  /* Заголовки используют Inter */
+  h1, h2, h3, h4, h5, h6 {
+    font-family: 'Inter', system-ui, sans-serif;
   }
 
   footer {
@@ -65,27 +71,27 @@
 
 /* Custom prose styles for markdown content */
 .prose {
-  @apply text-smoke;
+  @apply text-smoke font-body;
 }
 
 .prose h1 {
-  @apply text-3xl font-bold text-gold mb-6;
+  @apply text-3xl font-bold text-gold mb-6 font-heading;
 }
 
 .prose h2 {
-  @apply text-2xl font-bold text-gold mb-4 mt-8;
+  @apply text-2xl font-bold text-gold mb-4 mt-8 font-heading;
 }
 
 .prose h3 {
-  @apply text-xl font-semibold text-gold mb-3 mt-6;
+  @apply text-xl font-semibold text-gold mb-3 mt-6 font-heading;
 }
 
 .prose h4 {
-  @apply text-lg font-semibold text-gold mb-2 mt-4;
+  @apply text-lg font-semibold text-gold mb-2 mt-4 font-heading;
 }
 
 .prose p {
-  @apply mb-4 leading-relaxed;
+  @apply mb-4 leading-relaxed font-body;
 }
 
 .prose hr {
@@ -101,15 +107,15 @@
 }
 
 .prose li {
-  @apply mb-1;
+  @apply mb-1 font-body;
 }
 
 .prose blockquote {
-  @apply border-l-4 border-gold bg-dark pl-4 py-2 mb-4 italic;
+  @apply border-l-4 border-gold bg-dark pl-4 py-2 mb-4 italic font-body;
 }
 
 .prose code {
-  @apply bg-dark text-gold px-1 py-0.5 rounded text-sm;
+  @apply bg-dark text-gold px-1 py-0.5 rounded text-sm font-mono;
 }
 
 .prose pre {
@@ -121,15 +127,15 @@
 }
 
 .prose a {
-  @apply text-jade hover:text-jade-dark underline;
+  @apply text-jade hover:text-jade-dark underline font-body;
 }
 
 .prose strong {
-  @apply font-semibold text-gold-light;
+  @apply font-semibold text-gold-light font-body;
 }
 
 .prose em {
-  @apply italic text-jade;
+  @apply italic text-jade font-body;
 }
 
 .prose img {
@@ -141,9 +147,9 @@
 }
 
 .prose th {
-  @apply bg-smoke border border-smoke-dark px-4 py-2 text-left font-semibold;
+  @apply bg-smoke border border-smoke-dark px-4 py-2 text-left font-semibold font-heading;
 }
 
 .prose td {
-  @apply border border-smoke-dark px-4 py-2;
+  @apply border border-smoke-dark px-4 py-2 font-body;
 }
diff --git a/tailwind.config.js b/tailwind.config.js
@@ -46,8 +46,14 @@ module.exports = {
         }
       },
       fontFamily: {
-        sans: ['Inter', 'system-ui', 'sans-serif'],
+        // Основные шрифты
+        sans: ['Source Sans Pro', 'system-ui', 'sans-serif'], // Для чтения
+        heading: ['Inter', 'system-ui', 'sans-serif'], // Для заголовков
         serif: ['Georgia', 'serif'],
+        
+        // Утилитарные классы
+        'display': ['Inter', 'system-ui', 'sans-serif'], // Для больших заголовков
+        'body': ['Source Sans Pro', 'system-ui', 'sans-serif'], // Для основного текста
       },
     },
   },

Original file line number	Diff line number	Diff line change
`@@ -1,16 +1,22 @@`
`1`		`-@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');`
	`1`	`+@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&display=swap&subset=cyrillic');`
	`2`	`+@import url('https://fonts.googleapis.com/css2?family=Source+Sans+Pro:wght@300;400;600;700&display=swap&subset=cyrillic');`
`2`	`3`
`3`	`4`	`@tailwind base;`
`4`	`5`	`@tailwind components;`
`5`	`6`	`@tailwind utilities;`
`6`	`7`
`7`	`8`	`@layer base {`
`8`	`9`	`html {`
`9`		`- font-family: 'Inter', system-ui, sans-serif;`
	`10`	`+ font-family: 'Source Sans Pro', system-ui, sans-serif;`
`10`	`11`	`}`
`11`	`12`
`12`	`13`	`body {`
`13`		`- @apply bg-jade-dark text-smoke;`
	`14`	`+ @apply bg-jade text-smoke font-body;`
	`15`	`+ }`
	`16`	`+`
	`17`	`+ /* Заголовки используют Inter */`
	`18`	`+ h1, h2, h3, h4, h5, h6 {`
	`19`	`+ font-family: 'Inter', system-ui, sans-serif;`
`14`	`20`	`}`
`15`	`21`
`16`	`22`	`footer {`
`@@ -65,27 +71,27 @@`
`65`	`71`
`66`	`72`	`/* Custom prose styles for markdown content */`
`67`	`73`	`.prose {`
`68`		`- @apply text-smoke;`
	`74`	`+ @apply text-smoke font-body;`
`69`	`75`	`}`
`70`	`76`
`71`	`77`	`.prose h1 {`
`72`		`- @apply text-3xl font-bold text-gold mb-6;`
	`78`	`+ @apply text-3xl font-bold text-gold mb-6 font-heading;`
`73`	`79`	`}`
`74`	`80`
`75`	`81`	`.prose h2 {`
`76`		`- @apply text-2xl font-bold text-gold mb-4 mt-8;`
	`82`	`+ @apply text-2xl font-bold text-gold mb-4 mt-8 font-heading;`
`77`	`83`	`}`
`78`	`84`
`79`	`85`	`.prose h3 {`
`80`		`- @apply text-xl font-semibold text-gold mb-3 mt-6;`
	`86`	`+ @apply text-xl font-semibold text-gold mb-3 mt-6 font-heading;`
`81`	`87`	`}`
`82`	`88`
`83`	`89`	`.prose h4 {`
`84`		`- @apply text-lg font-semibold text-gold mb-2 mt-4;`
	`90`	`+ @apply text-lg font-semibold text-gold mb-2 mt-4 font-heading;`
`85`	`91`	`}`
`86`	`92`
`87`	`93`	`.prose p {`
`88`		`- @apply mb-4 leading-relaxed;`
	`94`	`+ @apply mb-4 leading-relaxed font-body;`
`89`	`95`	`}`
`90`	`96`
`91`	`97`	`.prose hr {`
`@@ -101,15 +107,15 @@`
`101`	`107`	`}`
`102`	`108`
`103`	`109`	`.prose li {`
`104`		`- @apply mb-1;`
	`110`	`+ @apply mb-1 font-body;`
`105`	`111`	`}`
`106`	`112`
`107`	`113`	`.prose blockquote {`
`108`		`- @apply border-l-4 border-gold bg-dark pl-4 py-2 mb-4 italic;`
	`114`	`+ @apply border-l-4 border-gold bg-dark pl-4 py-2 mb-4 italic font-body;`
`109`	`115`	`}`
`110`	`116`
`111`	`117`	`.prose code {`
`112`		`- @apply bg-dark text-gold px-1 py-0.5 rounded text-sm;`
	`118`	`+ @apply bg-dark text-gold px-1 py-0.5 rounded text-sm font-mono;`
`113`	`119`	`}`
`114`	`120`
`115`	`121`	`.prose pre {`
`@@ -121,15 +127,15 @@`
`121`	`127`	`}`
`122`	`128`
`123`	`129`	`.prose a {`
`124`		`- @apply text-jade hover:text-jade-dark underline;`
	`130`	`+ @apply text-jade hover:text-jade-dark underline font-body;`
`125`	`131`	`}`
`126`	`132`
`127`	`133`	`.prose strong {`
`128`		`- @apply font-semibold text-gold-light;`
	`134`	`+ @apply font-semibold text-gold-light font-body;`
`129`	`135`	`}`
`130`	`136`
`131`	`137`	`.prose em {`
`132`		`- @apply italic text-jade;`
	`138`	`+ @apply italic text-jade font-body;`
`133`	`139`	`}`
`134`	`140`
`135`	`141`	`.prose img {`
`@@ -141,9 +147,9 @@`
`141`	`147`	`}`
`142`	`148`
`143`	`149`	`.prose th {`
`144`		`- @apply bg-smoke border border-smoke-dark px-4 py-2 text-left font-semibold;`
	`150`	`+ @apply bg-smoke border border-smoke-dark px-4 py-2 text-left font-semibold font-heading;`
`145`	`151`	`}`
`146`	`152`
`147`	`153`	`.prose td {`
`148`		`- @apply border border-smoke-dark px-4 py-2;`
	`154`	`+ @apply border border-smoke-dark px-4 py-2 font-body;`
`149`	`155`	`}`