Skip to content
Snippets Groups Projects
Commit 1b33d21a authored by Christopher Ruwisch's avatar Christopher Ruwisch
Browse files

reworked landing page

parent cedc8615
Branches
Tags
1 merge request!55[WEBPAGE] Update style of current unicado page
Pipeline #1621512 waiting for manual action
Stage: build
Stage: deploy
Show whitespace changes
Inline Side-by-side
docs/assets/css/unicado.css
+ 8
− 120
View file @ 1b33d21a
......@@ -2,7 +2,9 @@
:root {
--primary-color: #00418b; /* Primary color for headers, hero section, and cards */
--background-color: #00418b; /* Background color for main content areas */
--text-color: #ecf1f8; /* Main text color for readability on dark backgrounds */
--text-color: var(--primary-color);
--text-color-hero: #ecf1f8;
--text-color-tabs: #ecf1f8; /* Main text color for readability on dark backgrounds */
--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 */
......@@ -18,14 +20,15 @@
}
.md-header {
color: var(--text-color);
color: var(--text-color-tabs);
background: linear-gradient(to bottom, var(--bg-gradient-start-color), var(--bg-gradient-intermediate-color)); /* var(--md-primary-bg-color); */
}
.md-tabs {
color: var(--text-color);
background: linear-gradient(to bottom, var(--bg-gradient-intermediate-color), 75%, var(--bg-gradient-end-color));
color: var(--text-color-tabs);
/* background: linear-gradient(to bottom, var(--bg-gradient-intermediate-color), 75%, var(--bg-gradient-end-color)); */
background-color: var(--bg-gradient-intermediate-color);
}
......@@ -35,128 +38,13 @@
}
.md-header__topic {
font-weight: bold;
font-weight: lighter;
}
.md-header__topic:first-child {
font-weight: lighter;
}
/* [data-md-color-scheme=default] .md-header { */
/* background-color: var(--primary-color); */
/* } */
/* Apply primary color to tab backgrounds */
/* [data-md-color-scheme=default] .md-tabs { */
/* background-color: var(--primary-color); */
/* } */
body[data-md-page=Home] .md-main {
background: #00418b;
}
/* Hero Section Styling */
.hero-section {
background: transparent;
color: var(--text-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);
}
.hero-logo {
width: 60%;
max-width: 100%;
height: auto;
display: block;
}
/* Text styling within the hero section */
.intro-text {
color: var(--text-color);
font-size: 1.1em;
}
/* Download button styling */
.download-button-container {
text-align: center;
margin-top: 20px;
}
.download-button {
background-color: var(--text-color);
display: inline-block;
padding: 10px 20px;
font-size: 1.1em;
font-weight: bold;
border-radius: 5px;
text-decoration: none;
color: var(--primary-color);
transition: background-color 0.3s ease;
}
.download-button:hover {
background-color: var(--primary-color);
}
.download-button a {
color: var(--primary-color);
}
.download-button:hover a {
color: var(--text-color);
}
/* 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(--background-color); Uses primary color for card background */
background: transparent;
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(--accent-color); /* Changes to accent color on hover */
}
/* Accent color for icons or specific elements */
.accent {
color: var(--accent-color); /* Teal accent color for specific elements */
......
docs/index.md
+ 9
− 4
View file @ 1b33d21a
......@@ -5,26 +5,31 @@ authors:
- Sebastian Oberschwendtner
- Kristina Mazur
date: 2024-11-05
glightbox: true
glightbox: false
hide:
- navigation
- toc
template: home.html
---
<div class="hero-section" markdown="1">
<div class="hero-section-main" markdown="1">
<!-- <img src="assets/images/logos/UNICADO_Logo_white.svg" class="hero-logo"> -->
![banner](assets/images/logos/UNICADO_Logo_white.svg){ .hero-logo}
# Think. Design. Change.
<div class="intro-text" markdown="1">
**UNICADO** [*ˌjuː.nɪˈkɑː.doʊ*]
_University Conceptual Aircraft Design and Optimization_
A _robust framework_ for designing, analyzing and optimizing aircraft based on a minimum set of requirements. Developed in collaboration with _leading German aerospace universities_, it enables designers to define and size an aircraft's geometry, analyse performance and feasibility while balancing aerodynamic, operational and user-specific requirements. Its _modular architecture_ allows for easy customization and adaptability, enabling users to integrate new tools or methods.
</div>
<div class="download-button-container">
<a href="download/getting-started" class="download-button">Download UNICADO</a>
<a href="download/getting-started">
Download
</a>
<img src="assets/images/logos/unicado-icon.png" alt="Unicado Icon">
</div>
</div>
......
overrides/home.html
+ 147
− 0
View file @ 1b33d21a
......@@ -4,6 +4,7 @@
<style>
body {
background-color: var(--background-color);
overflow: hidden;
}
.md-tabs {
background: transparent;
......@@ -17,6 +18,152 @@
background-attachment: fixed;
}
/* Hero Section Styling */
.hero-section-main {
background: transparent;
color: var(--text-color-hero);
padding: 2em;
border-radius: 10px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
max-width: 1060px;
margin: auto;
margin-bottom: 2em;
border: 1px solid rgba(255, 255, 255, 0.1);
}
.hero-section-main ::after {
gap: 3em;
}
.hero-logo {
width: 60%;
max-width: 100%;
height: auto;
display: block;
}
#think-design-change {
color: var(--text-color-hero)
}
/* Text styling within the hero section */
.intro-text {
color: var(--text-color-hero);
font-size: 1.1em;
}
/* Download button styling */
.download-button-container {
width: fit-content;
align-items: center;
display: flex;
margin-top: 20px;
background-color: var(--accent-color);
border-radius: 5px;
font-size: 1.1em;
padding: 10px 20px;
transition: background-color 0.3s ease;
}
.download-button-container > a {
color: var(--text-color-hero);
background: transparent;
}
.download-button-container:hover {
color: var(--accent-color);
background-color: var(--text-color-hero);
}
.download-button-container:hover > a {
color: var(--accent-color);
background: transparent;
}
.download-button {
display: inline-block;
align-items: center;
padding: 10px 20px;
font-size: 1.1em;
font-weight: bold;
border-radius: 5px;
text-decoration: none;
transition: background-color 0.3s ease;
gap: 8px;
}
.download-button:hover {
color: var(--accent-color);
background-color: var(--text-color-hero);
}
.download-button-container img {
max-width: 24px;
display: inline-block;
height: auto;
pointer-events: none;
margin-left: 5px;
}
/* Grid Container */
.grid-container {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
gap: 3.5em;
margin: 2em 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;
display: flex;
flex-direction: column;
justify-content: space-between;
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;
}
/* 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 {
display: flex;
color: var(--text-color-hero);
font-weight: bold;
align-items: center;
justify-content: flex-start;
margin-top: auto;
padding-top: 1em;
}
.card a:hover {
color: var(--accent-color); /* Changes to accent color on hover */
}
</style>
......
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment