Revision as of 02:12, 11 December 2024

Our Documentation Library

Folio Wiki

Version: 1.0

Last Updated: December 2024

Description: Brief description of what this book contains...

@@ Line 1: / Line 1: @@
-<h1 style="color:#3e5389; margin-bottom: 2rem;">Documentation Library </h1>
+<h1 style="color:#ff6a54; margin-bottom: 2rem; text-align: center; font-size: 2.5rem; text-shadow: 2px 2px 4px rgba(0,0,0,0.1);">Our Documentation Library </h1>
-<div style="display: flex; flex-wrap: wrap; gap: 2em; padding: 2em;">
+<div class="portal-row cols-2" style="text-align: center; display: flex; flex-wrap: wrap; margin-left: -1em; margin-right: -1em; width: calc(100% + 2em);">
-   <!-- Book Card -->
+   <!-- Example Book Card -->
-   <div style="
+   <div class="portal-box" style="
-     width: 280px;
+    margin: 1em;
-     height: 400px;
+    background: linear-gradient(145deg, #ffffff, #f1f3f9);
+    border: 1px solid #e9e9ee;
+     width: calc(50% - 2em);
+    border-radius: 12px;
+    box-shadow: 5px 5px 15px rgba(0,0,0,0.1),
+                -5px -5px 15px rgba(255,255,255,0.8);
+     transition: transform 0.2s, box-shadow 0.2s;
      position: relative;
-     perspective: 1000px;
+     overflow: hidden;">
-     cursor: pointer;
-  ">
+     <!-- Book Spine Effect -->
      <div style="
-       position: relative;
+       position: absolute;
+      left: 0;
+      top: 0;
+      bottom: 0;
+      width: 20px;
+      background: linear-gradient(90deg, #ff6a54, #ff7b66);
+      border-radius: 12px 0 0 12px;">    </div>
+    <div class="heading" style="
+      display: block;
        width: 100%;
-       height: 100%;
+       padding: 1.5em 0.5em 0.5em 2.5em;
-       transform-style: preserve-3d;
+       font-size: 1.5rem;
-       transition: transform 0.5s;
+       font-weight: 900;
-       transform: rotateY(-10deg);
+       background: linear-gradient(90deg, rgba(241,243,249,0.9), rgba(241,243,249,1));">
-    ">
+== <span style="text-align: center; display: block;">Folio Wiki</span> ==
-      <!-- Book Cover -->
+</div>
-      <div style="
-        position: absolute;
+    <div class="body" style="
-        width: 100%;
+      padding: 1.5em 1.5em 1.5em 3em;
-        height: 100%;
+      text-align: left;
-        background: linear-gradient(45deg, #2c3e50, #3498db);
+      background: linear-gradient(90deg, rgba(255,255,255,0.9), rgba(255,255,255,1));">
-        border-radius: 2px 20px 20px 2px;
-        box-shadow:
+      <div style="min-height: 3em;">
-px 5px 20px rgba(0,0,0,0.2),
+         <p style="
-px 0px 0px rgba(255,255,255,0.1) inset;
+           margin: 0.5em 0;
-        padding: 20px;
+           color: #444;
-        box-sizing: border-box;
+           font-size: 1.1em;
-        color: white;
+           border-left: 3px solid #ff6a54;
-      ">
+           padding-left: 1em;">
-         <h2 style="
+          <strong style="color: #ff6a54;">Version:</strong> 1.0
-           font-size: 1.8em;
+         </p>
-           margin-top: 40px;
+         <p style="
-           text-align: center;
+           margin: 0.5em 0;
-           font-weight: bold;
+           color: #444;
-           text-shadow: 2px 2px 4px rgba(0,0,0,0.3);
+           font-size: 1.1em;
-        ">Book Title</h2>
+           border-left: 3px solid #ff6a54;
+           padding-left: 1em;">
-         <div style="
+           <strong style="color: #ff6a54;">Last Updated:</strong> December 2024
-           position: absolute;
+        </p>
-           bottom: 20px;
+        <p style="
-           left: 20px;
+          margin: 0.5em 0;
-           right: 20px;
+          color: #444;
-        ">
+          font-size: 1.1em;
-           <p style="margin: 5px 0;"><strong>Version:</strong> 1.0</p>
+          line-height: 1.5;
-           <p style="margin: 5px 0;"><strong>Updated:</strong> Dec 2024</p>
+           border-left: 3px solid #ff6a54;
-          <p style="margin: 15px 0; font-size: 0.9em;">Brief description of the book contents...</p>
+          padding-left: 1em;">
-           <div style="text-align: center; margin-top: 20px;">
+           <strong style="color: #ff6a54;">Description:</strong> Brief description of what this book contains...
-            [[Book Title|Read Documentation →]]
+         </p>
-           </div>
-         </div>
        </div>
-      <!-- Book Spine -->
        <div style="
-         position: absolute;
+         text-align: center;
-        width: 40px;
+         margin-top: 1.5em;
-        height: 100%;
+         padding: 1em;">[[File:folio-bee-orange.png|center|frameless|250x250px]]
-        left: -40px;
-        background: linear-gradient(90deg, #1a2634, #2c3e50);
-         transform: rotateY(-90deg);
-        transform-origin: right;
-        border-radius: 3px 0 0 3px;
-         box-shadow:
-          inset -2px 0px 5px rgba(0,0,0,0.2);
-      ">
-        <div style="
-          position: absolute;
-          width: 100%;
-          top: 50%;
-          transform: translateY(-50%) rotate(-90deg);
-          text-align: center;
-          color: white;
-          font-weight: bold;
-          white-space: nowrap;
-          font-size: 1.2em;
-        ">Book Title</div>
        </div>
      </div>
    </div>
-   <!-- You can copy this entire book card div for each book -->
+   <!-- Copy the entire portal-box div above for each additional book -->
 </div>
 __HIDE_TITLE__

Main Page: Difference between revisions

Revision as of 02:12, 11 December 2024

Our Documentation Library

Folio Wiki