mirror of
https://codeberg.org/Kankys/NewLukasBlog.git
synced 2026-11-11 22:14:36 +01:00
kankys
ef2315bac1
- Opraveny chyby v HTML: špatné URL u CDN, chybějící viewport, úvodní apostrof - Přidány meta description a keywords na všechny stránky - Odstraněny nestandardní meta tagy (Kankys Matrix) - Opraveny všechny externí skripty (HTTPS, crossorigin, integrity) - Vytvořeny sdílené soubory: - web/js/shared.js - společné JS funkce (scrollToTop, setupMobileMenu, setupThemeToggle) - web/css/variables.css - CSS proměnné pro témata a design - web/css/shared.css - sdílené CSS styly - Založena struktura pro sdílený kód (js/, css/ adresáře) Generated by Mistral Vibe. Co-Authored-By: Mistral Vibe <vibe@mistral.ai>
371 lines
7.8 KiB
CSS
371 lines
7.8 KiB
CSS
/**
|
|
* 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;
|
|
}
|
|
}
|