doc: consolidate the layout settings using CSS

instead of inlining the layout related settings, move them to a single
place. and do the layout using the flex box instead using tables.

Signed-off-by: Kefu Chai <kchai@redhat.com>

diff --git a/doc/_themes/ceph/static/nature.css_t b/doc/_themes/ceph/static/nature.css_t
index f02a23298a3b3a8fa38d7aa8093e8f4fb514c97d..019f8dc1240dbfe2b572d860b1ac6d455aa8c739 100644 (file)
--- a/doc/_themes/ceph/static/nature.css_t
+++ b/doc/_themes/ceph/static/nature.css_t
@@ -314,3 +314,22 @@ p.breathe-sectiondef-title {
     font-weight: bold;
     border-bottom: thin solid #5E6A71;
 }
+
+.columns-2,
+.columns-3 {
+    display: flex;
+}
+
+.columns-2 > div,
+.columns-3 > div {
+    flex: 1;
+    padding: 0 10px 10px 0;
+}
+
+.columns-2 > div {
+    width: 50%;
+}
+
+.columns-3 > div {
+    width: 33.33%;
+}

diff --git a/doc/index.rst b/doc/index.rst
index 954ee9da3059fea9f8f8cd991b60f6019846b95a..1c7710edfe78a56fbefc38314848a5393aa0a993 100644 (file)
--- a/doc/index.rst
+++ b/doc/index.rst
@@ -5,74 +5,72 @@
 Ceph uniquely delivers **object, block, and file storage in one unified
 system**.
 
-.. raw:: html
+.. container:: columns-3
 
-       <style type="text/css">div.body h3{margin:5px 0px 0px 0px;}</style>
-       <table cellpadding="10"><colgroup><col width="33%"><col width="33%"><col width="33%"></colgroup><tbody valign="top"><tr><td><h3>Ceph Object Store</h3>
+   .. container:: column
 
-- RESTful Interface
-- S3- and Swift-compliant APIs
-- S3-style subdomains
-- Unified S3/Swift namespace
-- User management
-- Usage tracking
-- Striped objects
-- Cloud solution integration
-- Multi-site deployment
-- Multi-site replication
+      .. raw:: html
 
-.. raw:: html
+          <h3>Ceph Object Store</h3>
 
-       </td><td><h3>Ceph Block Device</h3>
+      - RESTful Interface
+      - S3- and Swift-compliant APIs
+      - S3-style subdomains
+      - Unified S3/Swift namespace
+      - User management
+      - Usage tracking
+      - Striped objects
+      - Cloud solution integration
+      - Multi-site deployment
+      - Multi-site replication
 
+   .. container:: column
 
-- Thin-provisioned
-- Images up to 16 exabytes
-- Configurable striping
-- In-memory caching
-- Snapshots
-- Copy-on-write cloning
-- Kernel driver support
-- KVM/libvirt support
-- Back-end for cloud solutions
-- Incremental backup
-- Disaster recovery (multisite asynchronous replication)
+      .. raw:: html
 
-.. raw:: html
+          <h3>Ceph Block Device</h3>
 
-       </td><td><h3>Ceph File System</h3>
+      - Thin-provisioned
+      - Images up to 16 exabytes
+      - Configurable striping
+      - In-memory caching
+      - Snapshots
+      - Copy-on-write cloning
+      - Kernel driver support
+      - KVM/libvirt support
+      - Back-end for cloud solutions
+      - Incremental backup
+      - Disaster recovery (multisite asynchronous replication)
 
-- POSIX-compliant semantics
-- Separates metadata from data
-- Dynamic rebalancing
-- Subdirectory snapshots
-- Configurable striping
-- Kernel driver support
-- FUSE support
-- NFS/CIFS deployable
-- Use with Hadoop (replace HDFS)
+   .. container:: column
 
-.. raw:: html
+      .. raw:: html
 
-       </td></tr><tr><td>
+          <h3>Ceph File System</h3>
 
-See `Ceph Object Store`_ for additional details.
+      - POSIX-compliant semantics
+      - Separates metadata from data
+      - Dynamic rebalancing
+      - Subdirectory snapshots
+      - Configurable striping
+      - Kernel driver support
+      - FUSE support
+      - NFS/CIFS deployable
+      - Use with Hadoop (replace HDFS)
 
-.. raw:: html
+.. container:: columns-3
 
-       </td><td>
+   .. container:: column
 
-See `Ceph Block Device`_ for additional details.
+      See `Ceph Object Store`_ for additional details.
 
-.. raw:: html
+   .. container:: column
 
-       </td><td>
+      See `Ceph Block Device`_ for additional details.
 
-See `Ceph File System`_ for additional details.
+   .. container:: column
 
-.. raw::       html
-
-       </td></tr></tbody></table>
+      See `Ceph File System`_ for additional details.
 
 Ceph is highly reliable, easy to manage, and free. The power of Ceph
 can transform your company's IT infrastructure and your ability to manage vast

diff --git a/doc/rados/index.rst b/doc/rados/index.rst
index 27d1daad14e4d6b2fe7f0f9cd14541ea3406bf63..0b38371715e6286b37a86d1a17bb5067992aea5d 100644 (file)
--- a/doc/rados/index.rst
+++ b/doc/rados/index.rst
@@ -13,62 +13,63 @@ Ceph Monitor and two Ceph OSD Daemons for data replication.
 The Ceph File System, Ceph Object Storage and Ceph Block Devices read data from
 and write data to the Ceph Storage Cluster.
 
-.. raw:: html
+.. container:: columns-3
 
-       <style type="text/css">div.body h3{margin:5px 0px 0px 0px;}</style>
-       <table cellpadding="10"><colgroup><col width="33%"><col width="33%"><col width="33%"></colgroup><tbody valign="top"><tr><td><h3>Config and Deploy</h3>
+   .. container:: column
 
-Ceph Storage Clusters have a few required settings, but most configuration
-settings have default values. A typical deployment uses a deployment tool 
-to define a cluster and bootstrap a monitor. See `Deployment`_ for details 
-on ``cephadm.``
+      .. raw:: html
 
-.. toctree::
-       :maxdepth: 2
+          <h3>Config and Deploy</h3>
 
-       Configuration <configuration/index>
-       Deployment <../cephadm/index>
+      Ceph Storage Clusters have a few required settings, but most configuration
+      settings have default values. A typical deployment uses a deployment tool
+      to define a cluster and bootstrap a monitor. See `Deployment`_ for details
+      on ``cephadm.``
 
-.. raw:: html 
+      .. toctree::
+         :maxdepth: 2
 
-       </td><td><h3>Operations</h3>
+         Configuration <configuration/index>
+         Deployment <../cephadm/index>
 
-Once you have deployed a Ceph Storage Cluster, you may begin operating 
-your cluster.
+   .. container:: column
 
-.. toctree::
-       :maxdepth: 2
-       
-       
-       Operations <operations/index>
+      .. raw:: html
 
-.. toctree::
-       :maxdepth: 1
+          <h3>Operations</h3>
 
-       Man Pages <man/index>
+      Once you have deployed a Ceph Storage Cluster, you may begin operating
+      your cluster.
 
+      .. toctree::
+         :maxdepth: 2
 
-.. toctree:: 
-       :hidden:
-       
-       troubleshooting/index
+         Operations <operations/index>
 
-.. raw:: html 
+      .. toctree::
+         :maxdepth: 1
 
-       </td><td><h3>APIs</h3>
+         Man Pages <man/index>
 
-Most Ceph deployments use `Ceph Block Devices`_, `Ceph Object Storage`_ and/or the
-`Ceph File System`_. You  may also develop applications that talk directly to
-the Ceph Storage Cluster.
+      .. toctree::
+         :hidden:
 
-.. toctree::
-       :maxdepth: 2
+         troubleshooting/index
 
-       APIs <api/index>
-       
-.. raw:: html
+   .. container:: column
 
-       </td></tr></tbody></table>
+      .. raw:: html
+
+          <h3>APIs</h3>
+
+      Most Ceph deployments use `Ceph Block Devices`_, `Ceph Object Storage`_ and/or the
+      `Ceph File System`_. You  may also develop applications that talk directly to
+      the Ceph Storage Cluster.
+
+      .. toctree::
+         :maxdepth: 2
+
+         APIs <api/index>
 
 .. _Ceph Block Devices: ../rbd/
 .. _Ceph File System: ../cephfs/

diff --git a/doc/start/intro.rst b/doc/start/intro.rst
index 8d7c79887f7f646b052b00ec65030170f3d64ec7..a0549ea983746ceb52b73740cfe0edbe3f038a2e 100644 (file)
--- a/doc/start/intro.rst
+++ b/doc/start/intro.rst
@@ -56,34 +56,34 @@ Ceph Storage Cluster to scale, rebalance, and recover dynamically.
 
 .. _REST API: ../../mgr/restful
 
-.. raw:: html
+.. container:: columns-2
 
-       <style type="text/css">div.body h3{margin:5px 0px 0px 0px;}</style>
-       <table cellpadding="10"><colgroup><col width="50%"><col width="50%"></colgroup><tbody valign="top"><tr><td><h3>Recommendations</h3>
-       
-To begin using Ceph in production, you should review our hardware
-recommendations and operating system recommendations. 
+   .. container:: column
 
-.. toctree::
-   :maxdepth: 2
+      .. raw:: html
 
-   Hardware Recommendations <hardware-recommendations>
-   OS Recommendations <os-recommendations>
+          <h3>Recommendations</h3>
 
+      To begin using Ceph in production, you should review our hardware
+      recommendations and operating system recommendations.
 
-.. raw:: html 
+      .. toctree::
+         :maxdepth: 2
 
-       </td><td><h3>Get Involved</h3>
+         Hardware Recommendations <hardware-recommendations>
+         OS Recommendations <os-recommendations>
 
-   You can avail yourself of help or contribute documentation, source 
-   code or bugs by getting involved in the Ceph community.
+   .. container:: column
 
-.. toctree::
-   :maxdepth: 2
+      .. raw:: html
 
-   get-involved
-   documenting-ceph
+          <h3>Get Involved</h3>
 
-.. raw:: html
+      You can avail yourself of help or contribute documentation, source
+      code or bugs by getting involved in the Ceph community.
 
-       </td></tr></tbody></table>
+      .. toctree::
+         :maxdepth: 2
+
+         get-involved
+         documenting-ceph