diff --git a/web/css/shared.css b/web/css/shared.css new file mode 100644 index 0000000..75ed51c --- /dev/null +++ b/web/css/shared.css @@ -0,0 +1,370 @@ +/** + * Shared CSS Styles for NewLukasBlog + * Common styles used across multiple pages + */ + +/* ============================================ + * CSS Reset / Normalize + * ============================================ */ +@import url("variables.css"); + +* { + margin: 0; + padding: 0; + box-sizing: border-box; +} + +html { + scroll-behavior: smooth; +} + +body { + font-family: var(--font-primary); + font-size: var(--font-size-base); + line-height: var(--line-height-normal); + color: var(--text-primary); + background-color: var(--bg-primary); + transition: background-color var(--transition-normal), color var(--transition-normal); +} + +a { + color: var(--link-color); + text-decoration: none; + transition: color var(--transition-fast); +} + +a:hover { + color: var(--link-hover); + text-decoration: underline; +} + +a:visited { + color: var(--link-visited); +} + +img { + max-width: 100%; + height: auto; + display: block; +} + +/* ============================================ + * Typography + * ============================================ */ + +h1, h2, h3, h4, h5, h6 { + font-family: var(--font-secondary); + font-weight: var(--font-weight-bold); + line-height: var(--line-height-tight); + margin-bottom: var(--spacing-md); + color: var(--text-primary); +} + +h1 { font-size: var(--font-size-3xl); } +h2 { font-size: var(--font-size-2xl); } +h3 { font-size: var(--font-size-xl); } +h4 { font-size: var(--font-size-lg); } +h5 { font-size: var(--font-size-base); } +h6 { font-size: var(--font-size-sm); } + +p { + margin-bottom: var(--spacing-md); + line-height: var(--line-height-relaxed); +} + +ul, ol { + margin-bottom: var(--spacing-md); + padding-left: var(--spacing-xl); +} + +li { + margin-bottom: var(--spacing-xs); +} + +/* ============================================ + * Layout + * ============================================ */ + +.page-header { + background-color: var(--header-bg); + color: var(--header-text); + padding: var(--spacing-xl) var(--spacing-md); + text-align: center; + border-bottom: 1px solid var(--border-light); +} + +.main-content { + max-width: 1200px; + margin: 0 auto; + padding: var(--spacing-xl) var(--spacing-md); +} + +footer { + background-color: var(--footer-bg); + color: var(--footer-text); + text-align: center; + padding: var(--spacing-lg) var(--spacing-md); + margin-top: var(--spacing-xl); + border-top: 1px solid var(--border-light); +} + +/* ============================================ + * Navigation + * ============================================ */ + +nav { + margin-bottom: var(--spacing-lg); + display: flex; + flex-wrap: wrap; + gap: var(--spacing-md); + justify-content: center; +} + +nav a { + display: inline-block; +} + +/* ============================================ + * Buttons + * ============================================ */ + +.btn { + display: inline-flex; + align-items: center; + gap: var(--spacing-sm); + padding: var(--spacing-sm) var(--spacing-md); + background-color: var(--btn-bg); + color: var(--btn-text); + border: 1px solid var(--btn-border); + border-radius: var(--radius-md); + font-family: var(--font-primary); + font-size: var(--font-size-base); + font-weight: var(--font-weight-medium); + cursor: pointer; + transition: background-color var(--transition-fast), color var(--transition-fast); +} + +.btn:hover { + background-color: var(--btn-hover-bg); + text-decoration: none; +} + +.btn i { + font-size: var(--font-size-sm); +} + +/* ============================================ + * Code Blocks + * ============================================ */ + +.code-box { + background-color: var(--code-bg); + color: var(--code-text); + border: 1px solid var(--code-border); + border-radius: var(--radius-sm); + padding: var(--spacing-md); + margin: var(--spacing-md) 0; + overflow-x: auto; + font-family: var(--font-mono); + font-size: var(--font-size-sm); + line-height: var(--line-height-tight); + white-space: pre; +} + +/* ============================================ + * Scroll to Top Button + * ============================================ */ + +#scrollToTopBtn { + display: none; + position: fixed; + bottom: var(--spacing-xl); + right: var(--spacing-xl); + width: 50px; + height: 50px; + border: none; + border-radius: var(--radius-full); + background-color: var(--btn-bg); + color: var(--btn-text); + font-size: var(--font-size-xl); + cursor: pointer; + box-shadow: 0 2px 10px var(--shadow-md); + transition: opacity var(--transition-fast), visibility var(--transition-fast); + z-index: var(--z-fixed); +} + +#scrollToTopBtn:hover { + background-color: var(--btn-hover-bg); +} + +#scrollToTopBtn i { + pointer-events: none; +} + +/* ============================================ + * Mobile Menu + * ============================================ */ + +.menu-icon { + display: none; + cursor: pointer; + padding: var(--spacing-sm); + background-color: var(--bg-secondary); + border-radius: var(--radius-sm); +} + +.menu-icon i { + font-size: var(--font-size-xl); + color: var(--text-primary); +} + +/* ============================================ + * Theme Toggle + * ============================================ */ + +#toggleButton { + cursor: pointer; + padding: var(--spacing-sm); + background: transparent; + border: none; + color: var(--text-primary); + font-size: var(--font-size-lg); +} + +#toggleButton:hover { + color: var(--accent-primary); +} + +/* ============================================ + * Responsive Design + * ============================================ */ + +@media (max-width: 768px) { + .page-header { + padding: var(--spacing-lg) var(--spacing-sm); + } + + .main-content { + padding: var(--spacing-lg) var(--spacing-sm); + } + + nav { + flex-direction: column; + align-items: center; + gap: var(--spacing-sm); + } + + .menu-icon { + display: block; + } + + nav { + display: none; + } + + nav.active { + display: flex; + } + + #scrollToTopBtn { + bottom: var(--spacing-lg); + right: var(--spacing-lg); + width: 40px; + height: 40px; + } +} + +@media (max-width: 480px) { + h1 { font-size: var(--font-size-2xl); } + h2 { font-size: var(--font-size-xl); } + h3 { font-size: var(--font-size-lg); } + + .page-header { + padding: var(--spacing-md) var(--spacing-sm); + } + + .main-content { + padding: var(--spacing-md) var(--spacing-sm); + } +} + +/* ============================================ + * Utility Classes + * ============================================ */ + +.text-center { text-align: center; } +.text-left { text-align: left; } +.text-right { text-align: right; } + +.mt-xs { margin-top: var(--spacing-xs); } +.mt-sm { margin-top: var(--spacing-sm); } +.mt-md { margin-top: var(--spacing-md); } +.mt-lg { margin-top: var(--spacing-lg); } +.mt-xl { margin-top: var(--spacing-xl); } + +.mb-xs { margin-bottom: var(--spacing-xs); } +.mb-sm { margin-bottom: var(--spacing-sm); } +.mb-md { margin-bottom: var(--spacing-md); } +.mb-lg { margin-bottom: var(--spacing-lg); } +.mb-xl { margin-bottom: var(--spacing-xl); } + +.p-xs { padding: var(--spacing-xs); } +.p-sm { padding: var(--spacing-sm); } +.p-md { padding: var(--spacing-md); } +.p-lg { padding: var(--spacing-lg); } +.p-xl { padding: var(--spacing-xl); } + +/* ============================================ + * Accessibility + * ============================================ */ + +:focus-visible { + outline: 2px solid var(--accent-primary); + outline-offset: 2px; +} + +[aria-hidden="true"] { + display: none; +} + +/* Skip link for keyboard users */ +.skip-link { + position: absolute; + top: -40px; + left: 0; + background: var(--btn-bg); + color: var(--btn-text); + padding: var(--spacing-sm) var(--spacing-md); + z-index: var(--z-tooltip); + transition: top var(--transition-fast); +} + +.skip-link:focus { + top: 0; +} + +/* ============================================ + * Print Styles + * ============================================ */ + +@media print { + body { + background-color: white; + color: black; + } + + a { + color: var(--link-color); + text-decoration: underline; + } + + .menu-icon, + #scrollToTopBtn, + #toggleButton { + display: none !important; + } + + nav { + display: block !important; + } +} diff --git a/web/css/variables.css b/web/css/variables.css new file mode 100644 index 0000000..8a14520 --- /dev/null +++ b/web/css/variables.css @@ -0,0 +1,206 @@ +/** + * CSS Variables for NewLukasBlog + * Centralized color scheme and design tokens + */ + +:root { + /* ============================================ + * Color Palette - Light Theme + * ============================================ */ + + /* Background colors */ + --bg-primary: #ffffff; + --bg-secondary: #f5f5f5; + --bg-tertiary: #e8e8e8; + + /* Text colors */ + --text-primary: #282a36; + --text-secondary: #555555; + --text-tertiary: #888888; + --text-inverse: #ffffff; + + /* Accent colors */ + --accent-primary: #4a90d9; + --accent-secondary: #6ab04c; + --accent-tertiary: #eb4d4b; + + /* Link colors */ + --link-color: #2980b9; + --link-hover: #1a5276; + --link-visited: #9b59b6; + + /* Border colors */ + --border-light: #dddddd; + --border-medium: #bbbbbb; + --border-dark: #999999; + + /* Header/Footer colors */ + --header-bg: #ffffff; + --header-text: #282a36; + --footer-bg: #2c3e50; + --footer-text: #ecf0f1; + + /* Button colors */ + --btn-bg: #3498db; + --btn-text: #ffffff; + --btn-hover-bg: #2980b9; + --btn-border: #2980b9; + + /* Code block colors */ + --code-bg: #f8f9fa; + --code-text: #212529; + --code-border: #dee2e6; + + /* Scrollbar colors */ + --scrollbar-thumb: #888888; + --scrollbar-track: #f1f1f1; + + /* Shadow colors */ + --shadow-sm: rgba(0, 0, 0, 0.1); + --shadow-md: rgba(0, 0, 0, 0.2); + --shadow-lg: rgba(0, 0, 0, 0.3); + + /* ============================================ + * Typography + * ============================================ */ + --font-primary: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; + --font-secondary: Georgia, 'Times New Roman', Times, serif; + --font-mono: 'Courier New', Courier, monospace; + + --font-size-xs: 0.75rem; + --font-size-sm: 0.875rem; + --font-size-base: 1rem; + --font-size-lg: 1.125rem; + --font-size-xl: 1.25rem; + --font-size-2xl: 1.5rem; + --font-size-3xl: 2rem; + + --font-weight-light: 300; + --font-weight-normal: 400; + --font-weight-medium: 500; + --font-weight-semibold: 600; + --font-weight-bold: 700; + + --line-height-tight: 1.25; + --line-height-normal: 1.5; + --line-height-relaxed: 1.75; + + /* ============================================ + * Spacing + * ============================================ */ + --spacing-xs: 0.25rem; + --spacing-sm: 0.5rem; + --spacing-md: 1rem; + --spacing-lg: 1.5rem; + --spacing-xl: 2rem; + --spacing-2xl: 3rem; + --spacing-3xl: 4rem; + + /* ============================================ + * Border Radius + * ============================================ */ + --radius-sm: 0.25rem; + --radius-md: 0.375rem; + --radius-lg: 0.5rem; + --radius-xl: 0.75rem; + --radius-full: 9999px; + + /* ============================================ + * Transitions + * ============================================ */ + --transition-fast: 150ms ease; + --transition-normal: 250ms ease; + --transition-slow: 350ms ease; + + /* ============================================ + * Z-Index Scale + * ============================================ */ + --z-dropdown: 100; + --z-sticky: 200; + --z-fixed: 300; + --z-modal-backdrop: 400; + --z-modal: 500; + --z-popover: 600; + --z-tooltip: 700; +} + +/* ============================================ + * Dark Theme Variables + * ============================================ */ +[data-theme="dark"], +.dark-theme { + --bg-primary: #1a1a1a; + --bg-secondary: #252525; + --bg-tertiary: #333333; + + --text-primary: #e0e0e0; + --text-secondary: #b0b0b0; + --text-tertiary: #808080; + --text-inverse: #1a1a1a; + + --accent-primary: #5daee2; + --accent-secondary: #78c46c; + --accent-tertiary: #e74c3c; + + --link-color: #3498db; + --link-hover: #5dade2; + --link-visited: #9b59b6; + + --border-light: #444444; + --border-medium: #555555; + --border-dark: #666666; + + --header-bg: #1a1a1a; + --header-text: #e0e0e0; + --footer-bg: #1a1a1a; + --footer-text: #b0b0b0; + + --btn-bg: #3498db; + --btn-text: #ffffff; + --btn-hover-bg: #2980b9; + --btn-border: #2980b9; + + --code-bg: #2d2d2d; + --code-text: #f8f8f2; + --code-border: #444444; + + --scrollbar-thumb: #555555; + --scrollbar-track: #252525; +} + +/* ============================================ + * Specific Theme Variables (for individual pages) + * ============================================ */ + +/* ApolloNvim Theme */ +:root.apollo-theme { + --bg-primary: #2a232b; + --bg-secondary: #1e1a1f; + --text-primary: #f8f8f2; + --text-secondary: #e0e0e0; + --accent-primary: #e54472; + --accent-secondary: #18f700; + --accent-tertiary: #f76b00; +} + +/* Kakoune Theme */ +:root.kakoune-theme { + --bg-primary: #2a232b; + --bg-secondary: #1e1a1f; + --text-primary: #f8f8f2; + --text-secondary: #e0e0e0; + --accent-primary: #e54472; + --accent-secondary: #9fea8a; + --accent-tertiary: #ea3838; +} + +/* Terminal Space Theme */ +:root.terminal-theme { + --bg-primary: #2a232b; + --bg-secondary: #1e1a1f; + --text-primary: #f8f8f2; + --text-secondary: #e0e0e0; + --accent-primary: #e7efa7; + --accent-secondary: #c627d8; + --accent-tertiary: #f76b00; +} diff --git a/web/cv/lukaskanka.html b/web/cv/lukaskanka.html index 95b56b9..765d4ff 100644 --- a/web/cv/lukaskanka.html +++ b/web/cv/lukaskanka.html @@ -3,8 +3,7 @@ - + diff --git a/web/index.html b/web/index.html index d666174..5759eec 100644 --- a/web/index.html +++ b/web/index.html @@ -5,14 +5,15 @@ - + + Kankys v Matrixu - diff --git a/web/index/about/index.html b/web/index/about/index.html index 246d810..fde21b7 100644 --- a/web/index/about/index.html +++ b/web/index/about/index.html @@ -5,14 +5,15 @@ - + + O mně - - + diff --git a/web/index/apollo-nvim/index.html b/web/index/apollo-nvim/index.html index 7e35f66..9dd68f4 100644 --- a/web/index/apollo-nvim/index.html +++ b/web/index/apollo-nvim/index.html @@ -10,13 +10,11 @@ - + - + - + ApolloNvim @@ -145,7 +143,7 @@ 👉 GitHub

- + 👉 Mastodon

@@ -189,4 +187,3 @@ -' diff --git a/web/index/apollo-nvim/install.html b/web/index/apollo-nvim/install.html index 566d022..b03687c 100644 --- a/web/index/apollo-nvim/install.html +++ b/web/index/apollo-nvim/install.html @@ -16,18 +16,16 @@ - + ApolloNvim Instalace diff --git a/web/index/apollo-nvim/manuals.html b/web/index/apollo-nvim/manuals.html index 2ca0ace..3469043 100644 --- a/web/index/apollo-nvim/manuals.html +++ b/web/index/apollo-nvim/manuals.html @@ -16,18 +16,16 @@ - + ApolloNvim Návody diff --git a/web/index/apollo-nvim/plugins.html b/web/index/apollo-nvim/plugins.html index a42abfd..332a018 100644 --- a/web/index/apollo-nvim/plugins.html +++ b/web/index/apollo-nvim/plugins.html @@ -10,13 +10,11 @@ - + - + - + ApolloNvim Pluginy diff --git a/web/index/privaci-policy/index.html b/web/index/privaci-policy/index.html index 7368552..82cf553 100644 --- a/web/index/privaci-policy/index.html +++ b/web/index/privaci-policy/index.html @@ -4,11 +4,12 @@ - - Zásady ochrany osobních údaju + + + Zásady ochrany osobních údajů diff --git a/web/index/project/index.html b/web/index/project/index.html index 15be0d7..4c71cca 100644 --- a/web/index/project/index.html +++ b/web/index/project/index.html @@ -5,15 +5,16 @@ - + + Projekty - - + diff --git a/web/index/repository/index.html b/web/index/repository/index.html index 2b02ee8..514f681 100644 --- a/web/index/repository/index.html +++ b/web/index/repository/index.html @@ -4,10 +4,12 @@ + + Repozitáře diff --git a/web/index/socials/index.html b/web/index/socials/index.html index 19e88ed..e8648f8 100644 --- a/web/index/socials/index.html +++ b/web/index/socials/index.html @@ -7,10 +7,12 @@ name="viewport" content="width=device-width, initial-scale=1.0" /> + + Socials diff --git a/web/index/terminal-space/kakoune/index.html b/web/index/terminal-space/kakoune/index.html index e340e40..1eef439 100644 --- a/web/index/terminal-space/kakoune/index.html +++ b/web/index/terminal-space/kakoune/index.html @@ -10,9 +10,9 @@ - + - +