feat(theme): implement Telekom design system with magenta color scheme
- Add TeleNeo font family with all weights (300-700) - Implement Telekom brand colors (magenta #E20074 as primary) - Add dark mode support with inverted color palette - Style navigation with soft hover states and active indicators - Override Bootstrap/Docsy variables for consistent theming - Fix deprecated Hugo template syntax for Disqus integration - Apply Telekom-inspired styling to all UI components
This commit is contained in:
parent
43cbd69c9c
commit
a1be93920d
7 changed files with 432 additions and 3 deletions
BIN
assets/fonts/TeleNeoOffice-Bold.a7bb592b.ttf
Normal file
BIN
assets/fonts/TeleNeoOffice-Bold.a7bb592b.ttf
Normal file
Binary file not shown.
BIN
assets/fonts/TeleNeoOffice-ExtraBold.fbe9fe42.ttf
Normal file
BIN
assets/fonts/TeleNeoOffice-ExtraBold.fbe9fe42.ttf
Normal file
Binary file not shown.
BIN
assets/fonts/TeleNeoOffice-Medium.79fb426d.ttf
Normal file
BIN
assets/fonts/TeleNeoOffice-Medium.79fb426d.ttf
Normal file
Binary file not shown.
BIN
assets/fonts/TeleNeoOffice-Regular.b0a2cff1.ttf
Normal file
BIN
assets/fonts/TeleNeoOffice-Regular.b0a2cff1.ttf
Normal file
Binary file not shown.
BIN
assets/fonts/TeleNeoOffice-Thin.53627df9.ttf
Normal file
BIN
assets/fonts/TeleNeoOffice-Thin.53627df9.ttf
Normal file
Binary file not shown.
|
|
@ -1,6 +1,435 @@
|
|||
/*
|
||||
|
||||
Add styles or override variables from the theme here.
|
||||
|
||||
* Telekom-inspired Theme Variables
|
||||
* Based on https://edp.buildth.ing Telekom Design System
|
||||
*/
|
||||
|
||||
// Bootstrap/Docsy Variable Overrides (must be before imports)
|
||||
$primary: #E20074 !default;
|
||||
$secondary: #B6B6B6 !default;
|
||||
$success: #00b367 !default;
|
||||
$info: #0070ad !default;
|
||||
$warning: #ffcc00 !default;
|
||||
$danger: #d52b1e !default;
|
||||
$dark: #000000 !default;
|
||||
$light: #f9fafb !default;
|
||||
|
||||
// Link colors
|
||||
$link-color: #E20074 !default;
|
||||
$link-hover-color: #C2005E !default;
|
||||
|
||||
// Body
|
||||
$body-bg: #ffffff !default;
|
||||
$body-color: #000000 !default;
|
||||
|
||||
// Navbar
|
||||
$navbar-light-color: #000000 !default;
|
||||
$navbar-light-hover-color: #E20074 !default;
|
||||
$navbar-light-active-color: #E20074 !default;
|
||||
|
||||
// Fonts
|
||||
$font-family-sans-serif: 'TeleNeo', -apple-system, "Segoe UI", system-ui, Roboto, "Helvetica Neue", Arial, sans-serif !default;
|
||||
$font-family-base: $font-family-sans-serif !default;
|
||||
|
||||
// Telekom TeleNeo Fonts
|
||||
@font-face {
|
||||
font-family: 'TeleNeo';
|
||||
src: url('../fonts/TeleNeoOffice-Thin.53627df9.ttf') format('truetype');
|
||||
font-weight: 300;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'TeleNeo';
|
||||
src: url('../fonts/TeleNeoOffice-Regular.b0a2cff1.ttf') format('truetype');
|
||||
font-weight: 400;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'TeleNeo';
|
||||
src: url('../fonts/TeleNeoOffice-Medium.79fb426d.ttf') format('truetype');
|
||||
font-weight: 500;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'TeleNeo';
|
||||
src: url('../fonts/TeleNeoOffice-Bold.a7bb592b.ttf') format('truetype');
|
||||
font-weight: 600;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'TeleNeo';
|
||||
src: url('../fonts/TeleNeoOffice-ExtraBold.fbe9fe42.ttf') format('truetype');
|
||||
font-weight: 700;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
// Primary Colors - Telekom Magenta
|
||||
:root {
|
||||
// Telekom Primary Color (Magenta)
|
||||
--color-primary: #E20074;
|
||||
--color-primary-contrast: #ffffff;
|
||||
--color-primary-dark-1: #C2005E;
|
||||
--color-primary-dark-2: #A5004D;
|
||||
--color-primary-dark-3: #87003D;
|
||||
--color-primary-light-1: #E7338A;
|
||||
--color-primary-light-2: #EC66A1;
|
||||
--color-primary-light-3: #F299B8;
|
||||
--color-primary-light-4: #F7CCCF;
|
||||
--color-primary-light-5: #FCEFF6;
|
||||
--color-primary-light-6: #FFF5FA;
|
||||
|
||||
// Secondary Colors
|
||||
--color-secondary: #B6B6B6;
|
||||
--color-secondary-dark: #6a7178;
|
||||
--color-secondary-light: #f9fafb;
|
||||
|
||||
// Semantic Colors
|
||||
--color-success: #00b367;
|
||||
--color-warning: #ffcc00;
|
||||
--color-error: #d52b1e;
|
||||
--color-info: #0070ad;
|
||||
|
||||
// Text Colors
|
||||
--color-text: #000000;
|
||||
--color-text-light: #666666;
|
||||
--color-text-dark: #000000;
|
||||
|
||||
// Background Colors
|
||||
--color-body: #ffffff;
|
||||
--color-card: #F1F1F1;
|
||||
--color-hover: #F1F1F1;
|
||||
--color-active: #F1F1F1;
|
||||
|
||||
// Navigation
|
||||
--color-nav-bg: #ffffff;
|
||||
--color-nav-text: #000000;
|
||||
--nav-border-color: #B6B6B6;
|
||||
|
||||
// UI Elements
|
||||
--color-input-background: #ffffff;
|
||||
--color-input-border: #cccccc;
|
||||
--color-input-text: #000000;
|
||||
--color-box-body: #f2f2f2;
|
||||
--color-box-header: #e6e6e6;
|
||||
|
||||
// Shadows & Overlays
|
||||
--color-shadow: rgba(0, 0, 0, 0.15);
|
||||
--color-overlay-backdrop: rgba(0, 0, 0, 0.5);
|
||||
|
||||
// Font Settings
|
||||
--font-family-base: 'TeleNeo', -apple-system, "Segoe UI", system-ui, Roboto, "Helvetica Neue", Arial, sans-serif;
|
||||
--nav-text-font-weight: 600;
|
||||
}
|
||||
|
||||
// Apply TeleNeo font globally
|
||||
body {
|
||||
font-family: var(--font-family-base);
|
||||
}
|
||||
|
||||
// Dark Mode Support
|
||||
@media (prefers-color-scheme: dark) {
|
||||
:root {
|
||||
// Primary Colors remain same
|
||||
--color-primary: #E20074;
|
||||
--color-primary-contrast: #000000;
|
||||
|
||||
// Dark Mode Adjustments
|
||||
--color-primary-dark-1: #E7338A;
|
||||
--color-primary-dark-2: #EC66A1;
|
||||
--color-primary-light-1: #C2005E;
|
||||
--color-primary-light-2: #A5004D;
|
||||
|
||||
// Secondary Colors for Dark Mode
|
||||
--color-secondary: #1c1c1e;
|
||||
--color-secondary-dark: #4D4D4D;
|
||||
--color-secondary-light: #0D0D0D;
|
||||
|
||||
// Text Colors
|
||||
--color-text: #FFFFFF;
|
||||
--color-text-light: #CCCCCC;
|
||||
--color-text-dark: #FFFFFF;
|
||||
|
||||
// Background Colors
|
||||
--color-body: #000000;
|
||||
--color-card: #1c1c1e;
|
||||
--color-hover: #1c1c1e;
|
||||
--color-active: #0D0D0D;
|
||||
|
||||
// Navigation
|
||||
--color-nav-bg: #000000;
|
||||
--color-nav-text: #FFFFFF;
|
||||
|
||||
// UI Elements
|
||||
--color-input-background: #1c1c1e;
|
||||
--color-input-border: #4D4D4D;
|
||||
--color-input-text: #FFFFFF;
|
||||
--color-box-body: #000000;
|
||||
--color-box-header: #1A1A1A;
|
||||
|
||||
// Semantic Colors for Dark Mode
|
||||
--color-success: #00A94F;
|
||||
--color-warning: #FFCC00;
|
||||
--color-error: #D52B1E;
|
||||
--color-info: #0070AD;
|
||||
|
||||
// Shadows
|
||||
--color-shadow: rgba(0, 0, 0, 0.35);
|
||||
}
|
||||
}
|
||||
|
||||
// Telekom-inspired Component Styling
|
||||
.td-navbar {
|
||||
background-color: var(--color-nav-bg) !important;
|
||||
border-bottom: 1px solid var(--nav-border-color);
|
||||
|
||||
.navbar-brand,
|
||||
.nav-link {
|
||||
color: var(--color-nav-text) !important;
|
||||
font-weight: var(--nav-text-font-weight);
|
||||
}
|
||||
|
||||
.nav-link:hover,
|
||||
.nav-link.active {
|
||||
color: var(--color-primary) !important;
|
||||
background: transparent !important;
|
||||
}
|
||||
}
|
||||
|
||||
// Primary Buttons - Telekom Magenta
|
||||
.btn-primary {
|
||||
background-color: var(--color-primary) !important;
|
||||
border-color: var(--color-primary) !important;
|
||||
color: var(--color-primary-contrast) !important;
|
||||
|
||||
&:hover {
|
||||
background-color: var(--color-primary-dark-1) !important;
|
||||
border-color: var(--color-primary-dark-1) !important;
|
||||
}
|
||||
|
||||
&:active,
|
||||
&:focus {
|
||||
background-color: var(--color-primary-dark-2) !important;
|
||||
border-color: var(--color-primary-dark-2) !important;
|
||||
}
|
||||
}
|
||||
|
||||
// Links
|
||||
a {
|
||||
color: var(--color-primary);
|
||||
|
||||
&:hover {
|
||||
color: var(--color-primary-dark-1);
|
||||
}
|
||||
}
|
||||
|
||||
// Cards with Telekom Style
|
||||
.card {
|
||||
background-color: var(--color-card);
|
||||
border: 1px solid var(--nav-border-color);
|
||||
|
||||
&:hover {
|
||||
background-color: var(--color-hover);
|
||||
}
|
||||
}
|
||||
|
||||
// Active/Selected States - REMOVED harsh black backgrounds
|
||||
// Now using soft Telekom colors instead
|
||||
|
||||
// Sidebar Navigation
|
||||
.td-sidebar-nav {
|
||||
.td-sidebar-link {
|
||||
&:hover {
|
||||
background-color: var(--color-primary-light-5) !important;
|
||||
color: var(--color-primary) !important;
|
||||
}
|
||||
|
||||
&.active {
|
||||
background-color: var(--color-primary-light-6);
|
||||
color: var(--color-primary);
|
||||
font-weight: 500;
|
||||
border-left: 3px solid var(--color-primary);
|
||||
}
|
||||
}
|
||||
|
||||
// All list items in sidebar
|
||||
li a {
|
||||
&:hover {
|
||||
background-color: var(--color-primary-light-5) !important;
|
||||
color: var(--color-primary) !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Main navigation tabs
|
||||
.td-sidebar {
|
||||
.td-sidebar-nav__section {
|
||||
.ul-1 > li > a {
|
||||
&.active,
|
||||
&.td-sidebar-link--active {
|
||||
background-color: var(--color-primary-light-6) !important;
|
||||
color: var(--color-primary) !important;
|
||||
font-weight: 500;
|
||||
border-left: 3px solid var(--color-primary);
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background-color: var(--color-primary-light-5) !important;
|
||||
color: var(--color-primary) !important;
|
||||
}
|
||||
}
|
||||
|
||||
// All nested levels
|
||||
li a:hover {
|
||||
background-color: var(--color-primary-light-5) !important;
|
||||
color: var(--color-primary) !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Top navigation breadcrumb area
|
||||
.td-sidebar__inner {
|
||||
.td-sidebar-nav__section-title {
|
||||
&.active {
|
||||
background-color: var(--color-primary-light-5) !important;
|
||||
color: var(--color-primary) !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Breadcrumb navigation in header
|
||||
.breadcrumb {
|
||||
.active {
|
||||
color: var(--color-primary) !important;
|
||||
}
|
||||
|
||||
a:hover {
|
||||
color: var(--color-primary-dark-1) !important;
|
||||
}
|
||||
}
|
||||
|
||||
// Remove harsh black backgrounds globally
|
||||
.active,
|
||||
.selected {
|
||||
background-color: var(--color-primary-light-6) !important;
|
||||
color: var(--color-primary) !important;
|
||||
}
|
||||
|
||||
// Softer hover states
|
||||
*:hover {
|
||||
transition: all 0.2s ease-in-out;
|
||||
}
|
||||
|
||||
// Override any dark/black hover backgrounds in navigation
|
||||
nav, .td-sidebar, .td-sidebar-nav {
|
||||
a:hover,
|
||||
li:hover > a,
|
||||
.nav-link:hover {
|
||||
background-color: var(--color-primary-light-5) !important;
|
||||
color: var(--color-primary) !important;
|
||||
}
|
||||
}
|
||||
|
||||
// Code Blocks
|
||||
pre,
|
||||
code {
|
||||
background-color: var(--color-box-body);
|
||||
border: 1px solid var(--color-input-border);
|
||||
}
|
||||
|
||||
// Tables
|
||||
table {
|
||||
thead {
|
||||
background-color: var(--color-box-header);
|
||||
}
|
||||
|
||||
tbody tr:hover {
|
||||
background-color: var(--color-hover);
|
||||
}
|
||||
}
|
||||
|
||||
// Alerts/Notifications
|
||||
.alert-success {
|
||||
background-color: var(--color-success);
|
||||
border-color: var(--color-success);
|
||||
}
|
||||
|
||||
.alert-warning {
|
||||
background-color: var(--color-warning);
|
||||
border-color: var(--color-warning);
|
||||
color: #000000;
|
||||
}
|
||||
|
||||
.alert-danger {
|
||||
background-color: var(--color-error);
|
||||
border-color: var(--color-error);
|
||||
}
|
||||
|
||||
.alert-info {
|
||||
background-color: var(--color-info);
|
||||
border-color: var(--color-info);
|
||||
}
|
||||
|
||||
// Docsy Homepage Components
|
||||
.td-cover-block {
|
||||
background-color: var(--color-primary) !important;
|
||||
|
||||
h1, h2, h3, h4, h5, h6, p {
|
||||
color: var(--color-primary-contrast) !important;
|
||||
}
|
||||
}
|
||||
|
||||
.td-box {
|
||||
background-color: var(--color-card);
|
||||
border: 1px solid var(--nav-border-color);
|
||||
|
||||
&:hover {
|
||||
background-color: var(--color-hover);
|
||||
border-color: var(--color-primary);
|
||||
}
|
||||
|
||||
&--primary {
|
||||
background-color: var(--color-primary);
|
||||
border-color: var(--color-primary);
|
||||
color: var(--color-primary-contrast);
|
||||
}
|
||||
|
||||
&--secondary {
|
||||
background-color: var(--color-secondary);
|
||||
border-color: var(--color-secondary);
|
||||
}
|
||||
}
|
||||
|
||||
// Hero/Cover sections
|
||||
.td-cover {
|
||||
background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark-2) 100%);
|
||||
|
||||
.display-1, .display-2, .display-3, .display-4 {
|
||||
color: var(--color-primary-contrast) !important;
|
||||
}
|
||||
}
|
||||
|
||||
// Section backgrounds
|
||||
.td-section {
|
||||
&--primary {
|
||||
background-color: var(--color-primary-light-6);
|
||||
}
|
||||
|
||||
&--secondary {
|
||||
background-color: var(--color-secondary-light);
|
||||
}
|
||||
}
|
||||
|
||||
// Feature boxes
|
||||
.td-feature {
|
||||
border: 1px solid var(--nav-border-color);
|
||||
background-color: var(--color-card);
|
||||
|
||||
&:hover {
|
||||
border-color: var(--color-primary);
|
||||
box-shadow: 0 4px 12px var(--color-shadow);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -8,7 +8,7 @@
|
|||
{{ partial "feedback.html" .Site.Params.ui.feedback }}
|
||||
<br />
|
||||
{{ end }}
|
||||
{{ if (.Site.DisqusShortname) }}
|
||||
{{ if (.Site.Config.Services.Disqus.Shortname) }}
|
||||
<br />
|
||||
{{ partial "disqus-comment.html" . }}
|
||||
{{ end }}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue