Improve left, right section distance. And generally improve spacing

khoj-ai · Nov 28, 2023 · 70ba6a5 · 70ba6a5
1 parent 6df1af1
commit 70ba6a5
Show file tree

Hide file tree

Showing 4 changed files with 35 additions and 19 deletions.
diff --git a/src/pages/About.tsx b/src/pages/About.tsx
@@ -94,9 +94,9 @@ export default function About() {
                                 </li>
                             </ul>
                         </div>
-                        <div id="team" className="product-description">
+                        <div id="team" className="product-description content">
                             <div className='production-description-subcomponent-light'>
-                                <h2 className='production-description-subcomponent'>Team</h2>
+                                <h2 id="team-heading" className='production-description-subcomponent'>Team</h2>
                                 <div className='founders-text'>
                                     <div className='founders-item'>
                                         <div className='founders-item-image-container'>

diff --git a/src/pages/Home.tsx b/src/pages/Home.tsx
@@ -110,7 +110,7 @@ export function Home() {
 			<section id="mission">
 				<div id="mission" className='camping-block'>
 					<div className="product-description first-description">
-						<div className='production-description-subcomponent camping-description-subcomponent'>
+						<div className='production-description-subcomponent camping-description-subcomponent left-section'>
 							<h2 className='production-description-subcomponent'>Connect your knowledge</h2>
 							<p className='product-description-subcomponent-light'>
 								Khoj can understand your PDFs, markdown, plaintext, GitHub, and Notion, with more in the works.
@@ -119,18 +119,18 @@ export function Home() {
 								Connect files directly from your computer using our <a href="/downloads" className='inline-link-light'>Desktop Application</a>. They'll automatically stay in sync.
 							</p>
 						</div>
-						<div className='camping-description-subcomponent'>
+						<div className='camping-description-subcomponent right-section'>
 							<IconDisplay />
 						</div>
 					</div>
 				</div>
 			</section>
 			<div>
 				<div className="product-description">
-					<div className='production-description-subcomponent-light'>
+					<div className='production-description-subcomponent-light left-section'>
 						<img id="demo-video" src="https://khoj-web-bucket.s3.amazonaws.com/doing_good_better_demo.png" alt="chat-demo" />
 					</div>
-					<div className='production-description-subcomponent-light'>
+					<div className='production-description-subcomponent-light right-section'>
 						<h2 className='production-description-subcomponent'>Simplify your reasoning</h2>
 						<p className='product-description-subcomponent-light'>
 							Khoj allows you to leverage AI to make better sense of your notes and documents.
@@ -142,7 +142,7 @@ export function Home() {
 				</div>
 			</div>
 			<div id="plugins" className='product-description'>
-				<div className='production-description-subcomponent'>
+				<div className='production-description-subcomponent left-section'>
 					<h2 className='production-description-subcomponent'>Engage anytime, anywhere</h2>
 					<p className='product-description-subcomponent'>
 						Use our native desktop app on any OS. Or use our first-party clients, <a className='inline-link-light' href="https://www.gnu.org/software/emacs/">Emacs</a> and <a className='inline-link-light' href="https://obsidian.md/">Obsidian</a>, to stay within your existing workflow.
@@ -160,18 +160,18 @@ export function Home() {
 						</div>
 					</div>
 				</div>
-				<div className='production-description-subcomponent'>
+				<div className='production-description-subcomponent right-section'>
 					<div className='supported-icons'>
 						<img className='clients-diagram' src='https://khoj-web-bucket.s3.amazonaws.com/clients_diagram.svg' alt='Data Sources Diagram' title="Khoj can be accessed from Obsidian, Emacs, the browser, or our native Desktop client. WhatsApp coming soon." />
 					</div>
 				</div>
 			</div>
 			<div>
 				<div className="product-description">
-					<div className='production-description-subcomponent-light'>
+					<div className='production-description-subcomponent-light left-section'>
 						<img id="demo-video" src="https://khoj-web-bucket.s3.amazonaws.com/mountain_sunrise.svg" alt="chat-demo" />
 					</div>
-					<div className='production-description-subcomponent-light'>
+					<div className='production-description-subcomponent-light right-section'>
 						<h2 className='production-description-subcomponent'>Stay in flow</h2>
 						<p className='product-description-subcomponent-light'>
 							No GTD or Zettlekasten required. Read and write with peace of mind. 
@@ -184,7 +184,7 @@ export function Home() {
 			</div>
 			<div>
 				<div className="product-description">
-					<div className='production-description-subcomponent'>
+					<div className='production-description-subcomponent left-section'>
 						<h2 className='production-description-subcomponent'>Run privately</h2>
 						<p className='product-description-subcomponent'>
 							We are completely open-source.
@@ -195,7 +195,7 @@ export function Home() {
 							You can switch between offline and online models when run locally. You can choose to use foundation models or keep your data on-premises.
 						</p>
 					</div>
-					<div className='production-description-subcomponent'>
+					<div className='production-description-subcomponent right-section'>
 						<p className='product-description-subcomponent'>
 							Get started with Khoj locally in a few minutes with the following commands:
 						</p>
@@ -217,7 +217,7 @@ export function Home() {
 				</div>
 			</div>
 			<div id="conclude" className='product-discussion'>
-				<div className='production-description-subcomponent-light'>
+				<div className='production-description-subcomponent-light center-section'>
 					<h2 className='production-description-subcomponent'>Get involved</h2>
 					<p className='product-description-subcomponent-light'>
 						Personal AI should be accessible, transparent, and secure, so you can reason and create more effectively.

diff --git a/src/styles/About.css b/src/styles/About.css
@@ -14,8 +14,14 @@ div.content-sections {
     grid-template-columns: 1fr;
 }
 
+#team-heading {
+    margin-bottom: 2rem;
+    font-family: var(--impact);
+    font-size: x-large;
+}
+
 div.article {
-    margin: 0 25%;
+    margin: 0 12%;
 }
 
 ul.content {

diff --git a/src/styles/Home.css b/src/styles/Home.css
@@ -208,9 +208,21 @@ span.founders-item-bio {
     display: block;
 }
 
+div.left-section {
+    padding-left: 25%;
+    padding-right: 0;
+}
+div.right-section {
+    padding-left: 0;
+    padding-right: 25%;
+}
+div.center-section {
+    padding-left: 25%;
+    padding-right: 25%;
+}
 div.production-description-subcomponent {
     background-color: var(--mild-sun);
-    padding: 4% 15%;
+    padding-top: 4%;
     padding-bottom: 2.5%;
     font-size: x-large;
     text-align: left;
@@ -221,7 +233,7 @@ div.camping-description-subcomponent {
 
 div.production-description-subcomponent-light {
     background-color: var(--light);
-    padding: 4% 15%;
+    padding-top: 4%;
     padding-bottom: 4.5%;
     font-size: x-large;
     text-align: left;
@@ -359,9 +371,7 @@ img#yc-logo {
     }
 
     div.product-description-bubbles {
-        margin-right: 10%;
-        margin-left: 10%;
-        width: 80%;
+        width: 100%;
     }
     #demo-video {
         width: 95%;