Fix blog table of contents styles

blog/2025-10-07-proxmox-ve-on-hetzner-dedicated-server/index.mdx

@@ -182,4 +182,6 @@ After installing it and configuring it to use [Backblaze S3 storage](https://pbs
 ## Conclusion
 Have no idea why everyone wants to write a conclusion for each post nowadays. It looks like a forced conclusion to a school physics problem in most cases: "Solving this problem of moving trains, we found out that trains can move".
 
-Have a nice tinkering.
+Have a nice tinkering.
+
+import BrowserWindow from '@site/src/components/BlogDiscussions';

src/components/BlogDiscussions/index.js

@@ -0,0 +1,112 @@
+import styles from './styles.module.css';
+
+const FeatureList = [
+  {
+    title: 'Blog',
+    link: 'blog',
+    Svg: require('@site/static/icons/blog.svg').default,
+    description: (
+      <>
+        Some notes, interesting things and projects.
+      </>
+    ),
+  },
+  {
+    title: 'Git',
+    link: 'https://git.nicelycomposed.codes/yehor',
+    Svg: require('@site/static/icons/gitea.svg').default,
+    description: (
+      <>
+        My code
+      </>
+    ),
+  },
+  {
+    title: 'Mastodon',
+    link: 'https://techhub.social/@estevez',
+    Svg: require('@site/static/icons/mastodon.svg').default,
+    description: (
+      <>
+        My micro blog at techhub.social
+      </>
+    ),
+  },
+  {
+    title: 'Matrix',
+    link: 'https://matrix.to/#/@yehor:vi.place',
+    Svg: require('@site/static/icons/matrix.svg').default,
+    description: (
+      <>
+        If you want to chat (with end-to-end encryption)
+      </>
+    ),
+  },
+  {
+    title: 'Pixelfed',
+    link: 'https://pixelfed.social/estevez',
+    Svg: require('@site/static/icons/pixelfed.svg').default,
+    description: (
+      <>
+        For some photography
+      </>
+    ),
+  },
+  {
+    title: 'GitHub',
+    link: 'https://github.com/estevez-dev',
+    Svg: require('@site/static/icons/github.svg').default,
+    description: (
+      <>
+        Some forks and contributions
+      </>
+    ),
+  },
+  {
+    title: 'Untappd',
+    link: 'https://untappd.com/user/estevezz',
+    Svg: require('@site/static/icons/untappd.svg').default,
+    description: (
+      <>
+        Budmo!
+      </>
+    ),
+  },
+  {
+    title: 'Linkedin',
+    link: 'https://www.linkedin.com/in/yehor-vialov-2a362158/',
+    Svg: require('@site/static/icons/linkedin.svg').default,
+    description: (
+      <>
+        They say I need this to find any work
+      </>
+    ),
+  },
+];
+
+function Feature({ Svg, title, link, description }) {
+  return (
+
+    <div className={clsx('col col--3', styles.featureBlock)}>
+      <div className="text--center">
+        <a href={link} target='_blank' className={styles.featureLink}>
+          <Svg fill="currentColor" className={styles.featureSvg} role="img" />
+        </a>
+      </div>
+      <a href={link} className={styles.featureLink}>
+        <div className="text--center padding-horiz--md">
+          <Heading as="h3">{title}</Heading>
+          <p>{description}</p>
+        </div>
+      </a>
+    </div>
+
+  );
+}
+
+export default function BlogDiscussions() {
+  return (
+    <section className={styles.blogDiscussions}>
+      <a href="https://matrix.to/#/%23yevi-org-pub:vi.place" target='_blank'>Join discussion at Matrix</a>
+    </section>
+  );
+}

src/components/BlogDiscussions/styles.module.css

@@ -0,0 +1,6 @@
+.blogDiscussions {
+  display: flex;
+  align-items: center;
+  padding: 2rem 0;
+  width: 100%;
+}

src/components/HomepageFeatures/styles.module.css

@@ -9,6 +9,18 @@
   padding-bottom: 1rem;
 }
 
+@media (max-width: 996px) {
+  .featureBlock {
+    --ifm-col-width: 50%;
+  }
+}
+
+@media (max-width: 500px) {
+  .featureBlock {
+    --ifm-col-width: 100%;
+  }
+}
+
 .featureSvg {
   height: 100px;
   width: 100px;

src/css/custom.css

@@ -30,16 +30,4 @@
   --ifm-color-primary-lightest: #d1b2d1;
   --docusaurus-highlighted-code-line-bg: rgba(0, 0, 0, 0.3);
   --ifm-link-color: var(--ifm-color-primary-darker);
-}
-
-@media (max-width: 996px) {
-  .col {
-    --ifm-col-width: 50%;
-  }
-}
-
-@media (max-width: 500px) {
-  .col {
-    --ifm-col-width: 100%;
-  }
 }