diff --git a/src/components/common/SwSignature.tsx b/src/components/common/SwSignature.tsx new file mode 100644 index 0000000..1c40f2d --- /dev/null +++ b/src/components/common/SwSignature.tsx @@ -0,0 +1,30 @@ +/* + * Подпись студии StackWorks («штамп»): знак и две строки - «разработка и поддержка» / StackWorks. + * В остальных проектах она ставится скриптом https://stackworks.ru/sign/sw-sign.js, + * здесь - компонентом, чтобы React не спорил с чужими изменениями страницы. + * Оформление в src/index.css, классы swsig*. + */ +export default function SwSignature({ dark = false }: { dark?: boolean }) { + const bg = dark ? '#F3F1EB' : '#16171C'; + const fg = dark ? '#16171C' : '#F3F1EB'; + return ( + + + + разработка и поддержка + StackWorks + + + ); +} diff --git a/src/components/layout/Sidebar.tsx b/src/components/layout/Sidebar.tsx index 24dc957..1bedc2b 100644 --- a/src/components/layout/Sidebar.tsx +++ b/src/components/layout/Sidebar.tsx @@ -4,6 +4,7 @@ * SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-SEL */ +import SwSignature from '@/components/common/SwSignature'; import { useCallback, useEffect, useMemo, useRef, useState } from 'react'; import { useLocation, useNavigate } from 'react-router-dom'; import * as LucideIcons from 'lucide-react'; @@ -365,6 +366,10 @@ export function Sidebar() { +
+ +
+ {layouts.length > 1 && (
diff --git a/src/index.css b/src/index.css index 53c84a2..8503b92 100644 --- a/src/index.css +++ b/src/index.css @@ -165,3 +165,20 @@ aside.sw-aside .text-muted-foreground { color: #8d8f96 !important; } @media (max-width: 640px) { main h1 { font-size: 1.6rem; } } + +/* подпись студии (компонент SwSignature, повторяет https://stackworks.ru/sign/sw-sign.js) */ +.swsig { --ink: #16171c; --cap: #6a6c75; --acc: #ff4a1c; display: inline-flex; align-items: center; gap: 10px; + min-height: 44px; text-decoration: none; color: var(--ink); border-radius: 8px; } +.swsig-dark { --ink: #f3f1eb; --cap: #9a9ca3; } +.swsig svg { width: 30px; height: 30px; flex: 0 0 auto; display: block; } +.swsig-txt { display: flex; flex-direction: column; gap: 4px; } +.swsig-cap { font: 400 11.5px/1 'SW Inter', system-ui, sans-serif; color: var(--cap); white-space: nowrap; } +.swsig-word { font: 700 16px/1 'SW Rubik', sans-serif; letter-spacing: -.01em; color: var(--ink); white-space: nowrap; } +.swsig-word i { font-style: normal; color: var(--acc); } +@keyframes swsig-shuffle { 0%, 100% { transform: translateX(0); } 45% { transform: translateX(9px); } } +.swsig .b { transform-box: fill-box; } +.swsig:hover .b, .swsig:focus-visible .b { animation: swsig-shuffle .38s ease-in-out both; } +.swsig:hover .b2, .swsig:focus-visible .b2 { animation-delay: .07s; } +.swsig:hover .b3, .swsig:focus-visible .b3 { animation-delay: .14s; } +.swsig:focus-visible { outline: 2px solid var(--acc); outline-offset: 4px; } +@media (prefers-reduced-motion: reduce) { .swsig .b { animation: none !important; } } diff --git a/src/pages/LoginPage.tsx b/src/pages/LoginPage.tsx index 56c891e..3178945 100644 --- a/src/pages/LoginPage.tsx +++ b/src/pages/LoginPage.tsx @@ -10,6 +10,7 @@ import { useTranslation } from 'react-i18next'; import { ArrowRight, Loader2 } from 'lucide-react'; import Logo from '@/components/common/Logo'; +import SwSignature from '@/components/common/SwSignature'; import { useDocumentTitle } from '@/hooks/useDocumentTitle'; import { Button } from '@/components/ui/button'; import { Input } from '@/components/ui/input'; @@ -43,7 +44,7 @@ export default function LoginPage() { } return ( -
+
@@ -87,6 +88,7 @@ export default function LoginPage() { +
); }