Scrollbar styles, use text-balance

deadrime · Feb 20, 2024 · 5f8f5b3 · 5f8f5b3
1 parent d01cb12
commit 5f8f5b3
Show file tree

Hide file tree

Showing 7 changed files with 79 additions and 32 deletions.
diff --git a/app/blog/page.tsx b/app/blog/page.tsx
@@ -16,13 +16,18 @@ export default async function Home() {
   const articles = await getAllArticles();
 
   return (
-    <div className='flex flex-col gap-3'>
-      {articles.map((article, index) =>
-        <BlogArticle
-          key={index}
-          article={article}
-        />
-      )}
-    </div>
+    <>
+      <h1 className="text-2xl font-primary block mb-8">
+        Блог
+      </h1>
+      <div className='flex flex-col gap-3'>
+        {articles.map((article, index) =>
+          <BlogArticle
+            key={index}
+            article={article}
+          />
+        )}
+      </div>
+    </>
   );
 }
diff --git a/app/globals.css b/app/globals.css
@@ -97,7 +97,7 @@
       @apply text-opacity-100;
     }
 
-    &:has(>code) {
+    &:has(> code) {
       border-block-end: 2px solid;
     }
   }
@@ -112,10 +112,10 @@
     font-family: var(--font-fira);
     font-weight: normal;
     white-space: nowrap;
-    transition: border .3s ease;
+    transition: border 0.3s ease;
   }
 
-  a>code {
+  a > code {
     border-bottom-left-radius: 0;
     border-bottom-right-radius: 0;
   }
@@ -126,6 +126,31 @@ html {
   scroll-behavior: smooth;
   width: 100vw;
   overflow-x: hidden;
+
+  --sb-size: 14px;
+  --sb-track-color: transparent;
+  --sb-thumb-color: #a6accd6f;
+  --sb-thumb-padding: 4px;
+
+  &::-webkit-scrollbar {
+    width: var(--sb-size);
+    height: var(--sb-size);
+  }
+
+  &::-webkit-scrollbar-track {
+    background: var(--sb-track-color);
+    border-radius: 8px;
+    display: none;
+  }
+
+  &::-webkit-scrollbar-thumb {
+    transition: all 0.2s;
+    background: var(--sb-thumb-color);
+    border-radius: 10px;
+    background-color: var(--sb-thumb-color);
+    border: var(--sb-thumb-padding) solid transparent;
+    background-clip: content-box;
+  }
 }
 
 *,
@@ -134,7 +159,6 @@ html {
   box-sizing: inherit;
 }
 
-
 body {
   color: rgb(var(--color-text));
   background-color: rgb(var(--color-background));

diff --git a/app/layout.tsx b/app/layout.tsx
@@ -71,19 +71,21 @@ export default function RootLayout({
         />
         <Providers>
           <header style={{
-            maxWidth: 1180,
-          }} className="w-full mx-auto px-3 flex items-center h-20">
+            maxWidth: 'calc(1180px + 1rem)',
+          }} className="w-full mx-auto px-4 flex items-center h-20">
             <Logo />
             <ThemeSwitcher className="ml-auto" />
           </header>
           <main style={{
-            maxWidth: 1180,
-          }} className="w-full mx-auto px-3 py-4 sm:box-content">
+            maxWidth: 'calc(1180px + 1rem)',
+          }} className="w-full mx-auto p-4">
             {children}
           </main>
           <footer
-            style={{ maxWidth: 1180 }}
-            className="w-full mx-auto px-3 py-4 sm:box-content mt-auto"
+            style={{
+              maxWidth: 'calc(1180px + 1rem)'
+            }}
+            className="w-full mx-auto p-4 mt-auto"
           >
             <FooterLogo />
           </footer>

diff --git a/articles/why-sloth/page.mdx b/articles/why-sloth/page.mdx
@@ -2,7 +2,7 @@ import previewImg from './preview.webp';
 
 export const data = {
   title: "Почему ленивец?",
-  description: 'Разработчик должен быть ленивым. В хорошем смысле этого слова, потому что лень - это далеко не всегда плохо.',
+  description: 'Почему я думаю, что лень - это далеко не всегда плохо.',
   slug: 'why-sloth',
   publishedTime: '2024-01-01',
   topics: [
@@ -23,35 +23,49 @@ export const data = {
 какие мне нужно прописать метатеги для поддержки `32х32`. Сейчас есть замечательные сайты,
 куда можно одним кликом загрузить картинку любого размера/формата и они тебе сгенерируют
 и `.ico` и `.png` всех нужных размеров и код для `<head>` дадут вместе с `minifest.json`.
-А, например `next.js` даже сам сгенерирует тебе все метатеги, достаточно лишь кинуть картинки в папку /app.
-Все ради того, чтобы тебе не пришлось лишний раз нажимать `ctrl + c`, `ctrl + v`. Это ли не кульминация лени?
+А, например `next.js` даже сам сгенерирует тебе все мета теги, достаточно лишь кинуть картинки в папку /app.
+Все ради того, чтобы тебе не пришлось лишний раз нажимать **ctrl + c**, **ctrl + v**. Это ли не кульминация лени?
 Но ведь круто! Но ведь удобно!
 
 Или скажем бандлеры. Настроить `gulp` или `grunt` для сборки сайта было делом хоть и не хитростным,
-но требующим определенного опыта и знаний. Сейчас же фреймворки имеют встроенный конфиг бандлера под копотом,
+но требующим определенного опыта и знаний. Сейчас же фреймворки имеют встроенный конфиг бандлера под капотом,
 чтобы просто начать что-то делать тебе вообще не нужно ничего настраивать,
 а если и придется - вся настройка в 99% случаев сведется к тому, чтобы сделать `npm i` с нужным плагином/лоадером.
 Для какого-нибудь `CRA` `eject` конфига вообще считается плохим тоном,
 и ощущается как "ай ай ай, плохой разработчик, зачем ты лезешь в настройки вебпака, все уже и так за тебя настроили".
 
-А сколько есть библиотек вроде lodash, underscore или react-hooks, на все случаи жизни,
+А сколько есть библиотек вроде **lodash**, **underscore** или **react-hooks**, на все случаи жизни,
 бери себе да импортируй готовые методы. 
 
 ## Почему лень - это хорошо?
+Я убежден, что все эти удобства были созданы в том числе из лени. Не только из-за желания сделать мир лучше, но в том числа 
+из-за стремления облегчить самому себе жизнь.
 
-А потому что ленивый разработчик, по настоящему ленивый, в самом хорошем смысле этого слова -
-он обязательно напишет свой велосипед, который будет пусть на 5%, но удобнее существующего решения.
-Создаст свой кастомный конфиг для бандлера, где все будет настроенно именно так, как ему удобно.
+Ленивый разработчик, в самом хорошем смысле этого слова, обязательно напишет свой велосипед,
+который будет пусть на 5%, но удобнее существующего решения.
+Создаст свой кастомный конфиг для бандлера, где все будет настроено именно так, как ему удобно.
 Сделает свой темплейт для быстрого старта проекта на react + typescript.
 Напишет какой-нибудь [cssrem](https://marketplace.visualstudio.com/items?itemName=cipchk.cssrem) или
-[rename](https://marketplace.visualstudio.com/items?itemName=YounesHenni.rename-extensions). 
+[rename](https://marketplace.visualstudio.com/items?itemName=YounesHenni.rename-extensions).
+
+Истинная сила лени раскрывается в автоматизации, оптимизации и сокращении времени работы.
+Если ты инвестировал в это свое время и силы и теперь можешь выполнять ту же работу за куда меньшее время
+- почему бы не побыть ленивым и не отдохнуть? Поработать, чтобы потом работать меньше.
 
 ## А почему плохо?
 
-Мне кажется, мы слишком культивируем лень. Привыкаем к тому, что все уже написано за нас. Понижаем порог входа до неприлично низкого уровня. Я не говорю о том, что простота - это плохо, скорее призываю разбираться в том, как эта простота устроена и создавать ее самому. Зона комфорта - это прекрасно, но когда она создана руками других людей, то выйти за ее пределы бывает крайне болезненно.
+Конечно, у всех этих удобств есть и негативная сторона. Мне кажется, мы слишком культивируем лень.
+Привыкаем к тому, что все уже написано за нас. Понижаем порог входа до неприлично низкого уровня.
+Я не говорю о том, что простота - это плохо, скорее призываю разбираться в том, как эта простота устроена
+и создавать ее самому. Зона комфорта - это прекрасно, но когда она создана руками других людей,
+то выйти за ее пределы бывает крайне болезненно. И даже страшно подумать, куда будет двигаться разработка
+с развитием нейросетей, в частности помощников вроде github copilot.
 
 ## Так почему же ленивец?
 
-Я считаю, что этому миру нужны ленивые разработчики, которым не лень создавать вещи, которые сильно облегчают нам жизнь. Я сам стремлюсь стать именно таким разработкиком. А еще ленивцы милые. 
+Я считаю, что этому миру нужны ленивые разработчики, которым не лень создавать вещи,
+которые сильно облегчают им(и нам) жизнь.
+Разработчики, которые инвестируют свои силы в то, чтобы работать было эффективнее и быстрее.
+Я сам стремлюсь стать именно таким разработчиком. А еще ленивцы милые. 
 
 <Image alt="А еще Блиц - скорость без границ" src="https://media2.giphy.com/media/v1.Y2lkPTc5MGI3NjExNTdlOWIxemZ3OXNpbWpudHI1a3R3MjdrZ3N2aG8wd296YjM2N3VodSZlcD12MV9pbnRlcm5hbF9naWZfYnlfaWQmY3Q9Zw/xUA7b5OQjivd4cl3j2/giphy.gif"/>
diff --git a/components/Article.tsx b/components/Article.tsx
@@ -10,7 +10,7 @@ type BlogArticleProps = {
 export const BlogArticle: React.FC<BlogArticleProps> = ({
   article
 }) => (
-  <article className='max-w-xl'>
+  <article className='max-w-xl text-balance'>
     <Link href={`/blog/${article.slug}`} className='text-text'>
       {article.image && (
         <img

diff --git a/components/Technologies/Technologies.tsx b/components/Technologies/Technologies.tsx
@@ -57,13 +57,13 @@ const Technologies = () => {
       <h2 className="font-primary text-xl font-normal mt-8 md:mt-36">
         С чем работал
       </h2>
-      <div className="grid gap-5 mt-11" style={{ gridTemplateColumns: 'repeat(auto-fit, minmax(300px, 1fr))' }}>
+      <div className="grid gap-5 gap-x-6 mt-11" style={{ gridTemplateColumns: 'repeat(auto-fit, minmax(300px, 1fr))' }}>
         {data.map(item => (
           <div key={item.category} className="flex flex-col gap-2">
             <span className="text-md">
               {item.category}
             </span>
-            <span className="text-body2 text-gray-500 dark:text-text/75">
+            <span className="text-body2 text-gray-500 dark:text-text/75 text-balance">
               {item.items.join(', ')}
             </span>
           </div>

diff --git a/mdx-components.tsx b/mdx-components.tsx
@@ -6,6 +6,7 @@ import React from 'react';
 import ImageComponent from './components/mdxComponents/ImageComponent/ImageComponent';
 import CodePlayground from './components/mdxComponents/CodePlayground/CodePlayground';
 import { calculateLinesToHighlight } from './helpers/codeHightlight';
+import Blockquote from './components/mdxComponents/Blockquote/Blockquote';
 
 type CodeElementProps = HTMLProps<HTMLElement> & {
   filename?: string;
@@ -34,5 +35,6 @@ export function useMDXComponents(components: MDXComponents): MDXComponents {
     code: CodeElement,
     CodeDemo: CodeDemo,
     CodePlayground: CodePlayground,
+    blockquote: Blockquote,
   }
 }