Merge branch 'master' of github.com:ctu-mrs/ctu-mrs.github.io

src/css/custom.css

@@ -34,20 +34,31 @@ html[data-theme='dark'] button {
   color: #ffffff;
 }
 
-/* Main page theme */
-.text_image_side_by_side
-{
-  display:flex;
-  align-items:justify;
+.sideBySide {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  justify-content: space-between;
+  gap: 16px; /* Add some spacing between items */
+  margin: 0 auto;
+  /* max-width: 1200px; */
+  padding: 0px;
+  text-align: justify;
 }
-.text_image_side_by_side img
-{
-  width:60%;
-  float:right;
+
+.text {
+  flex: 2; /* Take up available space */
+  min-width: 350px; /* Prevent shrinking too much */
+}
+
+.image {
+  flex: 1; /* Take up available space */
+  min-width: 200px; /* Prevent shrinking too much */
+  text-align: center; /* Center the image horizontally */
 }
-.text_image_side_by_side p
-{
-  width:135%;
-  text-align:justify;
-  float: left;
+
+.image img {
+  max-width: 100%; /* Make the image responsive */
+  height: auto;
+  border-radius: 8px; /* Optional: Add rounded corners */
 }

src/pages/index.md

@@ -5,20 +5,24 @@ lightModeImage="./img/mrs_f4f_large_light.png"
 darkModeImage="./img/mrs_f4f_large_dark.png"
 />
 
-# MRS UAV System Documentation
+<h1>MRS UAV System Documentation</h1>
 
-<div class="text_image_side_by_side">
+<div class="sideBySide">
 
+<div class="text">
 <p>
-The MRS UAV System is an **open-source software framework** developed by the Multi-Robot Systems Group at Czech Technical University, designed to assist researchers in **advanced R&D in autonomous UAV systems**, from speed racing and decentralized swarming to GNSS-denied coordination of multi-UAV formations.
+The MRS UAV System is an **open-source software framework** developed by the Multi-Robot Systems Group at Czech Technical University in Prague, designed to assist researchers in **advanced R&D in autonomous UAV systems**, from speed racing and decentralized swarming to GNSS-denied coordination of multi-UAV formations.
 </p>
+</div>
 
-![UAV image](img/x500_real.jpg)
+<div class="image">
+  ![UAV image](img/x500_real.jpg)
+</div>
 
 </div>
 
 <Button label="📖 Documentation" link="/docs/introduction" /> will give you **context** and show you the **features** of our system.
 
-And don't forget to check out our <Button label="✏️ blog" link="/blog" /> to read about our latest updates.
+Don't forget to check out our <Button label="✏️ blog" link="/blog" /> to read about our latest updates.
 
 **Note on versioning:** Older versions of the documentation are preserved, but not maintained anymore.