mirror of
https://github.com/Aider-AI/aider.git
synced 2025-05-28 16:25:00 +00:00
style: Improve typography with better font stack, spacing, and hierarchy
This commit is contained in:
Paul Gauthier (aider)
parent
f1e070cc1e
commit
099fc7b31e
2 changed files with 67 additions and 25 deletions
|
|
@ -12,6 +12,12 @@
|
|||
--gray: #ADB5BD;
|
||||
--code-bg: #282a36;
|
||||
--terminal-green: #14b014;
|
||||
|
||||
/* Typography variables */
|
||||
--heading-line-height: 1.2;
|
||||
--body-line-height: 1.7;
|
||||
--paragraph-spacing: 1.6rem;
|
||||
--heading-spacing: 1.8rem;
|
||||
}
|
||||
|
||||
* {
|
||||
|
|
@ -21,10 +27,14 @@
|
|||
}
|
||||
|
||||
body {
|
||||
font-family: 'Inter', sans-serif;
|
||||
line-height: 1.6;
|
||||
font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
|
||||
font-size: 16px;
|
||||
line-height: var(--body-line-height);
|
||||
color: var(--dark);
|
||||
background-color: var(--light);
|
||||
text-rendering: optimizeLegibility;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
}
|
||||
|
||||
.container {
|
||||
|
|
@ -133,19 +143,21 @@ nav {
|
|||
}
|
||||
|
||||
.hero h1 {
|
||||
font-size: 2.5rem;
|
||||
margin-bottom: 24px;
|
||||
font-size: 3rem;
|
||||
margin-bottom: var(--heading-spacing);
|
||||
color: var(--dark);
|
||||
text-align: left;
|
||||
line-height: 1.2;
|
||||
line-height: var(--heading-line-height);
|
||||
font-weight: 800;
|
||||
letter-spacing: -0.75px;
|
||||
}
|
||||
|
||||
.hero p {
|
||||
font-size: 1.2rem;
|
||||
font-size: 1.25rem;
|
||||
max-width: 90%;
|
||||
margin: 0 0 32px;
|
||||
margin: 0 0 var(--paragraph-spacing);
|
||||
color: #495057;
|
||||
line-height: 1.6;
|
||||
line-height: var(--body-line-height);
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
|
|
@ -221,9 +233,12 @@ nav {
|
|||
|
||||
.section-title {
|
||||
text-align: center;
|
||||
margin-bottom: 60px;
|
||||
margin-bottom: var(--heading-spacing);
|
||||
font-size: 2.5rem;
|
||||
color: var(--dark);
|
||||
font-weight: 700;
|
||||
line-height: var(--heading-line-height);
|
||||
letter-spacing: -0.5px;
|
||||
}
|
||||
|
||||
.feature-grid {
|
||||
|
|
@ -269,11 +284,14 @@ nav {
|
|||
}
|
||||
|
||||
.feature-title {
|
||||
font-size: 1.3rem;
|
||||
font-size: 1.35rem;
|
||||
color: var(--dark);
|
||||
margin: 0;
|
||||
position: relative;
|
||||
padding-bottom: 12px;
|
||||
font-weight: 600;
|
||||
letter-spacing: -0.25px;
|
||||
line-height: var(--heading-line-height);
|
||||
}
|
||||
|
||||
.feature-title::after {
|
||||
|
|
@ -294,13 +312,14 @@ nav {
|
|||
.code-block {
|
||||
background-color: var(--code-bg);
|
||||
border-radius: 8px;
|
||||
padding: 20px;
|
||||
padding: 1.5rem;
|
||||
color: white;
|
||||
font-family: monospace;
|
||||
font-size: 1.2rem;
|
||||
line-height: 1.5;
|
||||
margin: 20px 0;
|
||||
font-family: 'SF Mono', 'Cascadia Code', 'Fira Code', Consolas, 'Liberation Mono', Menlo, monospace;
|
||||
font-size: 1.1rem;
|
||||
line-height: 1.6;
|
||||
margin: 1.5rem 0;
|
||||
overflow-x: auto;
|
||||
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.testimonials {
|
||||
|
|
@ -326,12 +345,14 @@ nav {
|
|||
}
|
||||
|
||||
.testimonial-text {
|
||||
margin-bottom: 20px;
|
||||
margin-bottom: 1.5rem;
|
||||
font-style: italic;
|
||||
color: #495057;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
padding: 0 10px;
|
||||
font-size: 1.1rem;
|
||||
line-height: var(--body-line-height);
|
||||
}
|
||||
|
||||
.testimonial-text::before,
|
||||
|
|
@ -364,6 +385,7 @@ nav {
|
|||
.testimonial-author {
|
||||
font-weight: 600;
|
||||
color: var(--dark);
|
||||
font-size: 0.95rem;
|
||||
}
|
||||
|
||||
.testimonial-author a {
|
||||
|
|
@ -405,10 +427,13 @@ nav {
|
|||
|
||||
.info-column-title {
|
||||
font-size: 1.5rem;
|
||||
margin-bottom: 15px;
|
||||
margin-bottom: 1.2rem;
|
||||
color: var(--dark);
|
||||
position: relative;
|
||||
padding-bottom: 12px;
|
||||
font-weight: 600;
|
||||
letter-spacing: -0.25px;
|
||||
line-height: var(--heading-line-height);
|
||||
}
|
||||
|
||||
.info-column-title::after {
|
||||
|
|
@ -423,8 +448,9 @@ nav {
|
|||
|
||||
.info-column-desc {
|
||||
color: #495057;
|
||||
margin-bottom: 20px;
|
||||
font-size: 1rem;
|
||||
margin-bottom: 1.4rem;
|
||||
font-size: 1.05rem;
|
||||
line-height: var(--body-line-height);
|
||||
}
|
||||
|
||||
.info-list {
|
||||
|
|
@ -573,8 +599,15 @@ footer {
|
|||
}
|
||||
|
||||
@media (max-width: 992px) {
|
||||
:root {
|
||||
--heading-line-height: 1.25;
|
||||
--body-line-height: 1.65;
|
||||
--paragraph-spacing: 1.4rem;
|
||||
--heading-spacing: 1.6rem;
|
||||
}
|
||||
|
||||
body {
|
||||
font-size: 0.95rem;
|
||||
font-size: 15px;
|
||||
}
|
||||
|
||||
nav {
|
||||
|
|
@ -608,18 +641,19 @@ footer {
|
|||
}
|
||||
|
||||
.hero h1 {
|
||||
font-size: 2.2rem;
|
||||
font-size: 2.4rem;
|
||||
text-align: center;
|
||||
margin-bottom: 20px;
|
||||
margin-bottom: var(--heading-spacing);
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.hero p {
|
||||
font-size: 1rem;
|
||||
font-size: 1.15rem;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
max-width: 100%;
|
||||
text-align: center;
|
||||
margin-bottom: var(--paragraph-spacing);
|
||||
}
|
||||
|
||||
.buttons {
|
||||
|
|
@ -707,8 +741,15 @@ footer {
|
|||
}
|
||||
|
||||
@media (max-width: 576px) {
|
||||
:root {
|
||||
--heading-line-height: 1.3;
|
||||
--body-line-height: 1.6;
|
||||
--paragraph-spacing: 1.2rem;
|
||||
--heading-spacing: 1.4rem;
|
||||
}
|
||||
|
||||
body {
|
||||
font-size: 0.9rem;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.hero {
|
||||
|
|
|
|||
|
|
@ -7,7 +7,8 @@ layout: none
|
|||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Aider - AI Pair Programming in Your Terminal</title>
|
||||
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap">
|
||||
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap">
|
||||
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Fira+Code:wght@400;500&display=swap">
|
||||
<link rel="stylesheet" href="/assets/home.css">
|
||||
<!-- Add Prism.js CSS -->
|
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/themes/prism-tomorrow.min.css">
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue