Browse Source

Website - make the text easier to read on device with small viewport.

Yao Wei Tjong 姚伟忠 4 years ago
parent
commit
12c61765ef

+ 24 - 8
website/docs/getting-started/getting-started.module.scss

@@ -1,14 +1,30 @@
 // A quick and dirty hack to keep the tab panel with less content to have the same height as others
-div > div > div > div > div > div {
-  .buildUrho3D + & {
-    min-height: 164px;
-  }
+div > div {
+  > div > div > div > div, .textBlock {
+    .buildUrho3D + & {
+      min-height: 164px;
+    }
+
+    .buildUrhoApp + & {
+      min-height: 142px;
+    }
 
-  .buildUrhoApp + & {
-    min-height: 142px;
+    .requirements + & {
+      min-height: 340px;
+    }
   }
+}
+
+.textBlock {
+  overflow: auto;
+  border-radius: var(--ifm-global-radius);
+  color: rgb(191, 199, 213);
+  background-color: rgb(41, 45, 62);
+  margin-bottom: var(--ifm-leading);
+  padding: var(--ifm-pre-padding);
+  min-width: 100%;
 
-  .requirements + & {
-    min-height: 340px;
+  p {
+    margin: 0;
   }
 }

+ 23 - 26
website/docs/getting-started/installation.mdx

@@ -51,22 +51,19 @@ This may change in the future when the project uses better package manager and M
   ]
   }>
   <TabItem value={'android'}>
-
-```
-Android Studio (and IntelliJ IDEA) should already provide everything required
-Remember to complete the Android SDK installation as per instructed by IDE
-Tested tool version: 29.0.2
-Tested NDK version: 21.3.6528147
-```
-
+    <div className={Styles.textBlock}>
+      <p>Install <strong>Android Studio</strong> or <strong>IntelliJ IDEA</strong> and it should already provide everything required.</p>
+      <p>Remember to complete the Android SDK installation as per instructed by IDE.</p>
+      <br/>
+      <p>Tested tool version: <strong>29.0.2</strong></p>
+      <p>Tested NDK version: <strong>21.3.6528147</strong></p>
+    </div>
   </TabItem>
   <TabItem value={'apple'}>
-
-```
-# Xcode should already provide everything required
-# You may use "homebrew" to install other missing development packages, like "openssl"
-```
-
+    <div className={Styles.textBlock}>
+      <p>Install <strong>Xcode</strong> and it should provide almost everything required.</p>
+      <p>You may use <strong>homebrew</strong> to install other missing development packages, like <strong>openssl</strong>.</p>
+    </div>
   </TabItem>
   <TabItem value={'arm'}>
 
@@ -128,19 +125,19 @@ apt install \
 
   </TabItem>
   <TabItem value={'web'}>
-
-```
-# Emscripten SDK should already provide everything required
-# Tested SDK version: 2.0.8
-```
-
+    <div className={Styles.textBlock}>
+      <p>Install <strong>Emscripten SDK</strong> and it should already provide everything required.</p>
+      <br/>
+      <p>Tested SDK version: <strong>2.0.8</strong></p>
+    </div>
   </TabItem>
   <TabItem value={'win'}>
-
-```
-# Visual Studio should already provide everything required
-# Similarly for MinGW-w64
-```
-
+    <div className={Styles.textBlock}>
+      <p>
+        Install <strong>Visual Studio</strong> together with <strong>Windows SDK</strong>.
+        Alternatively, install <strong>MinGW-w64</strong>.
+      </p>
+      <p>Both should already provide everything required.</p>
+    </div>
   </TabItem>
 </Tabs>

+ 9 - 13
website/docs/getting-started/quick-start.mdx

@@ -14,7 +14,7 @@ There are more than one way to start using the Urho3D library. This section show
 
 :::tip
 
-Skip to the [Requirements](installation#Requirements) section, if you cannot use docker engine on your host system.
+Skip to the [Installation](installation) section, if you cannot use docker engine on your host system.
 
 :::
 
@@ -61,12 +61,10 @@ script/dockerized.sh android rake install
 
   </TabItem>
   <TabItem value={'apple'}>
-
-```
-Currently DBE does not support Apple platforms
-However, Urho3D supports Apple platforms using native build environment
-```
-
+    <div className={Styles.textBlock}>
+      <p>Currently DBE does not support Apple platforms.</p>
+      <p>However, Urho3D supports Apple platforms using native build environment.</p>
+    </div>
   </TabItem>
   <TabItem value={'arm'}>
 
@@ -162,12 +160,10 @@ script/dockerized.sh android
 
   </TabItem>
   <TabItem value={'apple'}>
-
-```
-Currently DBE does not support Apple platforms
-However, Urho3D supports Apple platforms using native build environment
-```
-
+    <div className={Styles.textBlock}>
+      <p>Currently DBE does not support Apple platforms.</p>
+      <p>However, Urho3D supports Apple platforms using native build environment.</p>
+    </div>
   </TabItem>
   <TabItem value={'arm'}>