From 77d010f356292e86b9da4495512608cb28a2579a Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Kaan=20Uzdo=C4=9Fan?= Date: Wed, 13 Aug 2025 09:15:50 +0200 Subject: [PATCH 1/3] Add X link and icon to header --- docusaurus.config.js | 14 +++++++++++- src/css/custom.css | 53 ++++++++++++++++++++++++++++++++++++++++++++ 2 files changed, 66 insertions(+), 1 deletion(-) diff --git a/docusaurus.config.js b/docusaurus.config.js index be4fc47..51ba0f9 100644 --- a/docusaurus.config.js +++ b/docusaurus.config.js @@ -87,7 +87,19 @@ const config = { {to: '/blog', label: 'Blog', position: 'left'}, { href: 'https://github.com/devtoolsguild/devtoolsguild.github.io', - label: 'GitHub', + className: 'header-github-link', + 'aria-label': 'GitHub repository', + position: 'right', + }, + { + href: 'https://x.com/devtoolsguild', + className: 'header-twitter-link', + 'aria-label': 'X (Twitter) profile', + position: 'right', + }, + { + to: '/', + className: 'custom-margin-right', position: 'right', }, ], diff --git a/src/css/custom.css b/src/css/custom.css index 2bc6a4c..560e06a 100644 --- a/src/css/custom.css +++ b/src/css/custom.css @@ -28,3 +28,56 @@ --ifm-color-primary-lightest: #4fddbf; --docusaurus-highlighted-code-line-bg: rgba(0, 0, 0, 0.3); } + +.custom-margin-right { + border-right: 1px solid #000; + margin-right: 8px; + margin-left: -18px; + width: 1px; + height: 28px; +} + +[data-theme='dark'] .custom-margin-right { + border-right: 1px solid #fff; +} + +/* Header icon styles */ +.header-github-link, +.header-twitter-link { + padding: 0; + display: flex; + align-items: center; + justify-content: center; + transition: opacity 0.2s ease; +} + +.header-github-link:before, +.header-twitter-link:before { + content: ''; + width: 20px; + height: 20px; + display: block; + transition: all 0.2s ease; + margin: 8px; +} + +.header-github-link:before { + background: url('data:image/svg+xml,%3Csvg viewBox='002424' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='%23000' d='M120.297c-6.630-125.373-121205.3033.4389.88.20511.385.6.113.82-0.258.82-.5770-0.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.42218.073.63317.73.63317.7c-1.087-0.744.084-.729.084-.7291.205.0841.8381.2361.8381.2361.071.8352.8091.3053.495.998.108-0.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.930-1.31.465-2.381.235-3.22-0.135-.303-.54-1.523.105-3.176001.005-0.3223.31.23.96-0.2671.98-0.3993-0.4051.02.0062.04.13830.4052.28-1.5523.285-1.233.285-1.23.6451.653.242.873.123.176.765.841.231.911.233.2204.61-2.8055.625-5.4755.92.42.36.811.096.812.2201.606-0.0152.896-0.0153.28600.315.21.69.825.57C20.56522.0922417.5922412.297c0-6.627-5.373-12-12-12'/%3E%3C/svg%3E') + no-repeat; +} + +.header-twitter-link:before { + background: url('data:image/svg+xml,%3Csvg viewBox='002424' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='%23000' d='M18.9011.153h3.68l-8.049.19L2422.846h-7.406l-5.8-7.584-6.6387.584H.474l8.6-9.83L01.154h7.594l5.2436.932ZM17.6120.644h2.039L6.4863.24H4.298Z'/%3E%3C/svg%3E') + no-repeat; +} + +/* Dark theme icons */ +[data-theme='dark'] .header-github-link:before { + background: url('data:image/svg+xml,%3Csvg viewBox='002424' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='%23fff' d='M120.297c-6.630-125.373-121205.3033.4389.88.20511.385.6.113.82-0.258.82-.5770-0.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.42218.073.63317.73.63317.7c-1.087-0.744.084-.729.084-.7291.205.0841.8381.2361.8381.2361.071.8352.8091.3053.495.998.108-0.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.930-1.31.465-2.381.235-3.22-0.135-.303-.54-1.523.105-3.176001.005-0.3223.31.23.96-0.2671.98-0.3993-0.4051.02.0062.04.13830.4052.28-1.5523.285-1.233.285-1.23.6451.653.242.873.123.176.765.841.231.911.233.2204.61-2.8055.625-5.4755.92.42.36.811.096.812.2201.606-0.0152.896-0.0153.28600.315.21.69.825.57C20.56522.0922417.5922412.297c0-6.627-5.373-12-12-12'/%3E%3C/svg%3E') + no-repeat; +} + +[data-theme='dark'] .header-twitter-link:before { + background: url('data:image/svg+xml,%3Csvg viewBox='002424' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='%23fff' d='M18.9011.153h3.68l-8.049.19L2422.846h-7.406l-5.8-7.584-6.6387.584H.474l8.6-9.83L01.154h7.594l5.2436.932ZM17.6120.644h2.039L6.4863.24H4.298Z'/%3E%3C/svg%3E') + no-repeat; +} From 9b90a67ed179a4e9038d131170c974a55e7bd3b3 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Kaan=20Uzdo=C4=9Fan?= Date: Wed, 10 Sep 2025 13:48:46 +0300 Subject: [PATCH 2/3] Fix icons not showing --- src/css/custom.css | 18 +++++++++--------- 1 file changed, 9 insertions(+), 9 deletions(-) diff --git a/src/css/custom.css b/src/css/custom.css index 560e06a..616d255 100644 --- a/src/css/custom.css +++ b/src/css/custom.css @@ -18,7 +18,7 @@ } /* For readability concerns, you should choose a lighter palette in dark mode. */ -[data-theme='dark'] { +[data-theme="dark"] { --ifm-color-primary: #25c2a0; --ifm-color-primary-dark: #21af90; --ifm-color-primary-darker: #1fa588; @@ -37,7 +37,7 @@ height: 28px; } -[data-theme='dark'] .custom-margin-right { +[data-theme="dark"] .custom-margin-right { border-right: 1px solid #fff; } @@ -53,7 +53,7 @@ .header-github-link:before, .header-twitter-link:before { - content: ''; + content: ""; width: 20px; height: 20px; display: block; @@ -62,22 +62,22 @@ } .header-github-link:before { - background: url('data:image/svg+xml,%3Csvg viewBox='002424' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='%23000' d='M120.297c-6.630-125.373-121205.3033.4389.88.20511.385.6.113.82-0.258.82-.5770-0.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.42218.073.63317.73.63317.7c-1.087-0.744.084-.729.084-.7291.205.0841.8381.2361.8381.2361.071.8352.8091.3053.495.998.108-0.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.930-1.31.465-2.381.235-3.22-0.135-.303-.54-1.523.105-3.176001.005-0.3223.31.23.96-0.2671.98-0.3993-0.4051.02.0062.04.13830.4052.28-1.5523.285-1.233.285-1.23.6451.653.242.873.123.176.765.841.231.911.233.2204.61-2.8055.625-5.4755.92.42.36.811.096.812.2201.606-0.0152.896-0.0153.28600.315.21.69.825.57C20.56522.0922417.5922412.297c0-6.627-5.373-12-12-12'/%3E%3C/svg%3E') + background: url('data:image/svg+xml,%3Csvg viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg"%3E%3Cpath fill="%23000" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"/%3E%3C/svg%3E') no-repeat; } .header-twitter-link:before { - background: url('data:image/svg+xml,%3Csvg viewBox='002424' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='%23000' d='M18.9011.153h3.68l-8.049.19L2422.846h-7.406l-5.8-7.584-6.6387.584H.474l8.6-9.83L01.154h7.594l5.2436.932ZM17.6120.644h2.039L6.4863.24H4.298Z'/%3E%3C/svg%3E') + background: url('data:image/svg+xml,%3Csvg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"%3E%3Cpath fill="%23000" d="M18.901 1.153h3.68l-8.04 9.19L24 22.846h-7.406l-5.8-7.584-6.638 7.584H.474l8.6-9.83L0 1.154h7.594l5.243 6.932ZM17.61 20.644h2.039L6.486 3.24H4.298Z"/%3E%3C/svg%3E') no-repeat; } /* Dark theme icons */ -[data-theme='dark'] .header-github-link:before { - background: url('data:image/svg+xml,%3Csvg viewBox='002424' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='%23fff' d='M120.297c-6.630-125.373-121205.3033.4389.88.20511.385.6.113.82-0.258.82-.5770-0.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.42218.073.63317.73.63317.7c-1.087-0.744.084-.729.084-.7291.205.0841.8381.2361.8381.2361.071.8352.8091.3053.495.998.108-0.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.930-1.31.465-2.381.235-3.22-0.135-.303-.54-1.523.105-3.176001.005-0.3223.31.23.96-0.2671.98-0.3993-0.4051.02.0062.04.13830.4052.28-1.5523.285-1.233.285-1.23.6451.653.242.873.123.176.765.841.231.911.233.2204.61-2.8055.625-5.4755.92.42.36.811.096.812.2201.606-0.0152.896-0.0153.28600.315.21.69.825.57C20.56522.0922417.5922412.297c0-6.627-5.373-12-12-12'/%3E%3C/svg%3E') +[data-theme="dark"] .header-github-link:before { + background: url('data:image/svg+xml,%3Csvg viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg"%3E%3Cpath fill="%23fff" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"/%3E%3C/svg%3E') no-repeat; } -[data-theme='dark'] .header-twitter-link:before { - background: url('data:image/svg+xml,%3Csvg viewBox='002424' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='%23fff' d='M18.9011.153h3.68l-8.049.19L2422.846h-7.406l-5.8-7.584-6.6387.584H.474l8.6-9.83L01.154h7.594l5.2436.932ZM17.6120.644h2.039L6.4863.24H4.298Z'/%3E%3C/svg%3E') +[data-theme="dark"] .header-twitter-link:before { + background: url('data:image/svg+xml,%3Csvg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"%3E%3Cpath fill="%23fff" d="M18.901 1.153h3.68l-8.04 9.19L24 22.846h-7.406l-5.8-7.584-6.638 7.584H.474l8.6-9.83L0 1.154h7.594l5.243 6.932ZM17.61 20.644h2.039L6.486 3.24H4.298Z"/%3E%3C/svg%3E') no-repeat; } From 12df800cfd8576120e04b75bc6cea33e6e1c3f76 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Kaan=20Uzdo=C4=9Fan?= Date: Thu, 11 Sep 2025 09:05:36 +0300 Subject: [PATCH 3/3] Hide icons in mobile menu --- src/css/custom.css | 7 +++++++ 1 file changed, 7 insertions(+) diff --git a/src/css/custom.css b/src/css/custom.css index 616d255..f92a292 100644 --- a/src/css/custom.css +++ b/src/css/custom.css @@ -81,3 +81,10 @@ background: url('data:image/svg+xml,%3Csvg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"%3E%3Cpath fill="%23fff" d="M18.901 1.153h3.68l-8.04 9.19L24 22.846h-7.406l-5.8-7.584-6.638 7.584H.474l8.6-9.83L0 1.154h7.594l5.243 6.932ZM17.61 20.644h2.039L6.486 3.24H4.298Z"/%3E%3C/svg%3E') no-repeat; } + +/* Hide header icons in mobile menu */ +.menu__list .header-github-link, +.menu__list .header-twitter-link, +.menu__list .custom-margin-right { + display: none; +}