Skip to content
Snippets Groups Projects

[WEBPAGE] Update webpage appearance

Merged [WEBPAGE] Update webpage appearance
documentation/webpage_appearance into develop
4 unresolved threads
Merged Christopher Ruwisch requested to merge documentation/webpage_appearance into develop
4 unresolved threads
Compare
and
6 files
+ 587
− 130
Compare changes
  • Side-by-side
  • Inline
Files
6
docs/assets/css/unicado.css
+ 107
− 98
/* Define color variables in :root for easy reference */
:root {
--primary-color: #2C3E50; /* Primary color for headers, hero section, and cards */
--background-color: #34495E; /* Background color for main content areas */
--text-color: #D1D5DB; /* Main text color for readability on dark backgrounds */
--button-bg-color: #ffffff; /* Background color for buttons */
--accent-color: #E74C3C; /* Accent color for links and hover effects */
--secondary-accent: #1ABC9C; /* Secondary accent color for icons */
--link-color: #3498DB; /* Link color for clickable items */
--link-hover-color: #E74C3C; /* Hover color for links */
}
--primary-color: #00418b; /* Primary color for headers, hero section, and cards */
--background-color: #00418b; /* Background color for main content areas */
--text-color: #000; /* Primary color is also text color for white scheme */
--text-color-hero: #ecf1f8; /* Main text color for readability on hero section */
--text-color-tabs: #ecf1f8; /* Main text color for readability on tabs */
--button-bg-color: #ffffff; /* Background color for buttons */
--accent-color: #e20e1f; /* Accent color for links and hover effects */
--secondary-accent: #1ABC9C; /* Secondary accent color for icons */
--link-color: #3498DB; /* Link color for clickable items */
--link-hover-color: #E74C3C; /* Hover color for links */
--bg-gradient-start-color: #00418b; /* Landing page start color for gradient */
--bg-gradient-intermediate-color: #1C5598; /* Landing page intermediate color for gradient */
--bg-gradient-end-color: #ffffff; /* Landing page final color for gradient */
--math-color: var(--text-color);
}
/* h1 header -> markdown # text color */
.md-typeset h1 {
color: var(--primary-color);
}
/* Header background and text color */
.md-header {
color: var(--text-color-tabs);
background-color: var(--primary-color);
}
/* Apply primary color to tab backgrounds */
[data-md-color-scheme=slate] .md-tabs {
/* Tabs background color and text color */
.md-tabs {
color: var(--text-color-tabs);
background-color: var(--primary-color);
}
/* Hero Section Styling */
.hero-section {
background-color: var(--primary-color);
padding: 2em;
border-radius: 10px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
max-width: 1060px;
margin: auto;
border: 1px solid rgba(255, 255, 255, 0.1);
[dir="ltr"] .md-header__title {
margin-left: 0.1rem;
}
/* Text styling within the hero section */
.intro-text {
color: var(--text-color);
font-size: 1.1em;
.md-header__topic {
font-weight: lighter;
}
/* Make all LaTeX-style math equations white */
:root {
--math-color: #ffffff; /* Set the default color for equations */
Please register or sign in to reply
.md-header__topic:first-child {
font-weight: lighter;
}
/* Math environment colors */
/* MathJax equations */
.MathJax, mjx-container, math {
color: var(--math-color) !important;
}
/* KaTeX equations */
.katex, .katex-display {
.katex *, .katex-display {
color: var(--math-color) !important;
}
/* Download button styling */
.download-button-container {
text-align: center;
margin-top: 20px;
}
.download-button {
display: inline-block;
background-color: var(--button-bg-color); /* Uses button background color */
padding: 10px 20px;
font-size: 1.1em;
font-weight: bold;
border-radius: 5px;
text-decoration: none;
color: var(--primary-color); /* Button text color */
transition: background-color 0.3s ease;
}
/* Grid Container */
.grid-container {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
gap: 1.5em;
margin: 2em auto;
max-width: 1100px;
padding: 1em;
}
.grid-item {
background-color: var(--primary-color); /* Uses primary color for card background */
padding: 1.5em;
border-radius: 10px;
text-align: left;
color: var(--text-color); /* Text color for readability */
transition: transform 0.3s, box-shadow 0.3s;
}
.grid-item h3 {
font-size: 1.25em;
margin-bottom: 0.5em;
}
/* Card styling with hover effects */
.card {
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
border: 1px solid rgba(255, 255, 255, 0.1);
}
.card:hover {
transform: translateY(-5px);
box-shadow: 0 8px 16px rgba(0, 0, 0, 0.25);
}
/* Link styling within cards */
.card a {
color: var(--link-color);
font-weight: bold;
}
.card a:hover {
color: var(--link-hover-color); /* Changes to accent color on hover */
}
/* Accent color for icons or specific elements */
.accent {
color: var(--secondary-accent); /* Teal accent color for specific elements */
}
color: var(--accent-color); /* Teal accent color for specific elements */
}
/* Grid Container */
.grid-container {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
gap: 3.5em;
margin: 3em auto;
max-width: 1100px;
padding: 1em;
}
.grid-item {
/* background-color: var(--background-color); Uses primary color for card background */
background: transparent;
padding: 1.0em;
border-radius: 10px;
text-align: left;
color: var(--text-color-hero); /* Text color for readability */
transition: transform 0.3s, box-shadow 0.3s;
height: 100%;
}
.grid-item h3 {
font-size: 1.25em;
margin-bottom: 0.5em;
}
.grid-item > hr {
border: none;
background-color: var(--text-color-hero);
margin: auto 0;
height: 1px;
}
/* Card styling with hover effects */
.card {
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
border: 1px solid rgba(255, 255, 255, 0.1);
}
.card:hover {
transform: translateY(-5px);
box-shadow: 0 8px 16px rgba(0, 0, 0, 0.25);
}
/* Link styling within cards */
.card a {
color: var(--text-color-hero);
font-weight: bold;
margin-top: auto;
padding-top: 1em;
}
.card a:hover {
color: var(--accent-color); /* Changes to accent color on hover */
}
.card img {
display: block;
margin-left: auto;
margin-right: auto;
max-height: 80px;
width: auto;
}
.overview-item {
min-height: 240px;
@@ -133,8 +140,8 @@
display: flex;
align-items: center;
justify-content: space-between;
background-color: var(--primary-color); /* Background color for the footer */
color: var(--text-color);
background-color: var(--bg-gradient-end-color); /* Background color for the footer */
color: var(--background-color);
padding: 1em 2em; /* Adjust padding for spacing */
font-size: 1em; /* Increase text size for better readability */
border-top: 1px solid rgba(255, 255, 255, 0.2); /* Subtle top border */
@@ -154,7 +161,7 @@
/* Footer link styling */
.footer-link {
color: var(--text-color);
color: var(--primary-color);
text-decoration: none;
font-weight: bold;
font-size: 1.4em;
@@ -177,6 +184,8 @@
height: auto;
margin-left: 1em; /* Space between image and text */
border-radius: 8px; /* Optional: Rounded corners */
border-color: var(--background-color);
border: 1px solid
}