site: fixed styles on security page

Signed-off-by: Alexey Igrychev <[email protected]>
werf · Feb 22, 2022 · ec58e48 · ec58e48
1 parent a8c16d0
commit ec58e48
Show file tree

Hide file tree

Showing 17 changed files with 138 additions and 99 deletions.
diff --git a/docs/_includes/documentation/security_en/components.html b/docs/_includes/documentation/security_en/components.html
@@ -1,5 +1,5 @@
 <section class="security benefits__section">
-  <div class="container container--relative">
+  <div class="container--relative">
     <div class="benefits__wrap">
       <div class="benefits__title block__title">trdl components and their roles</div>
       <div class="benefits__grid">
@@ -11,7 +11,7 @@
             <div class="card__title block__subtitle">Vault</div>
             <ul class="card__list">
               <li class="card__item">Secure encryption key management.</li>
-              <li class="card__item">A platform for running the trdl server securely. Ensures <span class="card__item--accent">confidentiality, data integrity&nbsp;and&nbsp;availability, accountability; provides authentication&nbsp;and&nbsp;authorization methods.</span></li>
+              <li class="card__item">A platform for running the trdl server securely. Ensures <span class="card__item--accent">confidentiality, data integrity&nbsp;and availability, accountability; provides authentication and&nbsp;authorization methods.</span></li>
             </ul>
             <a href="https://www.vaultproject.io/docs/internals/security">
               <button class="button button--white button--hover-accent">
@@ -90,13 +90,13 @@
         </ul>
       </div>
     </div>
-    <div class="security-bg__lines--components">
+    <!-- <div class="security-bg__lines--components">
       <svg width="129" height="1221" viewBox="0 0 129 1221" fill="none" xmlns="http://www.w3.org/2000/svg">
         <path d="M12 408V0" stroke="#A41FE2" stroke-width="4"/>
         <path d="M65 64V1047" stroke="#333037" stroke-width="4"/>
         <path d="M127 1221L127 798" stroke="#A41FE2" stroke-width="4"/>
         <path d="M2 1221V526" stroke="#A41FE2" stroke-width="4"/>
       </svg>
-    </div>
+    </div> -->
   </div>
 </section>
diff --git a/docs/_includes/documentation/security_en/intro.html b/docs/_includes/documentation/security_en/intro.html
@@ -1,19 +1,19 @@
 <section class="security solve-that__section">
-  <div class="container container--wide solve-that__container">
+  <div class="container--wide solve-that__container">
     <div class="solve-that__wrap">
       <div class="solve-that__title block__title block__subtitle--invert">
         Security
       </div>
       <p class="block__description block__subtitle--invert">trdl is designed to minimize the damage from potential attacks&nbsp;on&nbsp;the&nbsp;release system. The Vault secret manager, the TUF-based repository (The Update Framework), and Git are&nbsp;the&nbsp;three&nbsp;main components that make this possible.
       </p>
     </div>
-    <div class="security-bg__lines">
+    <!-- <div class="security-bg__lines">
       <svg width="879" height="543" viewBox="0 0 879 543" fill="none" xmlns="http://www.w3.org/2000/svg">
         <path d="M749.197 145V396C749.197 415.882 733.079 432 713.197 432H274" stroke="#A41FE2" stroke-width="4"/>
         <path d="M876.196 6L876.197 455" stroke="#A41FE2" stroke-width="4"/>
         <path d="M60 486H776.08C795.962 486 812.08 469.882 812.08 450V0" stroke="#333037" stroke-width="4"/>
         <path d="M676 541H0" stroke="#A41FE2" stroke-width="4"/>
       </svg>
-    </div>
+    </div> -->
   </div>
 </section>
diff --git a/docs/_includes/documentation/security_en/not-protecting.html b/docs/_includes/documentation/security_en/not-protecting.html
@@ -1,35 +1,33 @@
-<section class="security how-work__section">
-  <div class="container">
-    <div class="how-work__wrap">
-      <div class="how-work__title block__title">What trdl does <span>not protect</span> against</div>
-      <div class="architecture__cols">
-        <div class="architecture__cols--item col__client">
-          <ul class="col__list">
-            <li class="col__item">
-              <svg class="server__icon warning">
-                <use xlink:href="/images/icons/sprite.svg#warning"></use>
-              </svg>
-              <p>
-                trdl cannot protect you&nbsp;against threats related&nbsp;to&nbsp;physical access to&nbsp;the&nbsp;host where the&nbsp;trdl-client is installed.
-              </p>
-            </li>
-          </ul>
-        </div>
-
-        <div class="architecture__cols--item col__client">
-          <ul class="col__list">
-            <li class="col__item">
-              <svg class="server__icon warning">
-                <use xlink:href="/images/icons/sprite.svg#warning"></use>
-              </svg>
-              <p>
-                trdl cannot protect you against human errors, e.g.,&nbsp;incorrect GPG signature quorum&nbsp;configuration, improper build&nbsp;instructions, and faulty Vault&nbsp;config.
-              </p>
-            </li>
-          </ul>
-        </div>
+<section class="security how-work__section ignore-sidebar">
+  <div class="how-work__wrap">
+    <div class="how-work__title block__title">What trdl does <span>not protect</span> against</div>
+    <div class="architecture__cols">
+      <div class="architecture__cols--item col__client">
+        <ul class="col__list">
+          <li class="col__item">
+            <svg class="server__icon warning">
+              <use xlink:href="/images/icons/sprite.svg#warning"></use>
+            </svg>
+            <p>
+              trdl cannot protect you&nbsp;against threats related&nbsp;to&nbsp;physical access to&nbsp;the&nbsp;host where the&nbsp;trdl-client is installed.
+            </p>
+          </li>
+        </ul>
+      </div>
+
+      <div class="architecture__cols--item col__client">
+        <ul class="col__list">
+          <li class="col__item">
+            <svg class="server__icon warning">
+              <use xlink:href="/images/icons/sprite.svg#warning"></use>
+            </svg>
+            <p>
+              trdl cannot protect you against human errors, e.g.,&nbsp;incorrect GPG signature quorum&nbsp;configuration, improper build&nbsp;instructions, and faulty Vault&nbsp;config.
+            </p>
+          </li>
+        </ul>
       </div>
-
     </div>
+
   </div>
 </section>
diff --git a/docs/_includes/documentation/security_en/provide.html b/docs/_includes/documentation/security_en/provide.html
@@ -1,5 +1,5 @@
-<section class="security architecture__section">
-  <div class="container container--wide">
+<section class="security architecture__section ignore-sidebar">
+  <div class="container--wide">
     <div class="architecture__wrap">
       <div class="architecture__title block__title block__subtitle--invert">
         Summary
@@ -53,12 +53,12 @@
 
       </div>
     </div>
-    <div class="security-bg__lines--provide">
+    <!-- <div class="security-bg__lines--provide">
       <svg width="128" height="1372" viewBox="0 0 128 1372" fill="none" xmlns="http://www.w3.org/2000/svg">
         <path d="M64 304L64 673.067M64.0004 1520L64 779.733" stroke="#333037" stroke-width="4"/>
         <path d="M126 0V260.988M126 1590V370.03M2 0V925.97" stroke="#A41FE2" stroke-width="4"/>
         <path d="M2 1039L2 1582" stroke="#A41FE2" stroke-width="4"/>
       </svg>
-    </div>
+    </div> -->
   </div>
 </section>
diff --git a/docs/_includes/documentation/security_en/recommendations.html b/docs/_includes/documentation/security_en/recommendations.html
@@ -1,25 +1,23 @@
-<section class="security how-work__section">
-  <div class="container">
-    <div class="how-work__wrap">
-      <div class="how-work__title block__title">Our recommendations</div>
-      <div class="recommendations">
-        <ul class="card__list recommendations__list">
-          <div class="recommendations__col">
-            <li class="card__item recommendations__item">Use an external authentication provider instead&nbsp;of&nbsp;the&nbsp;Vault root token.</li>
-            <!-- item -->
-            <li class="card__item recommendations__item">Set up an NGINX proxy to secure access to Vault by switching&nbsp;to&nbsp;HTTPS and enabling access only to certain Vault endpoints.</li>
-            <!-- item -->
-            <li class="card__item recommendations__item">Run Docker on&nbsp;the&nbsp;same&nbsp;host&nbsp;as&nbsp;Vault and block outside access to Docker.</li>
-            <!-- item -->
-          </div>
-          <div class="recommendations__col">
-            <li class="card__item recommendations__item">Do not install any other software&nbsp;on&nbsp;the&nbsp;virtual machine where Vault&nbsp;and&nbsp;the&nbsp;trdl&nbsp;plugin are running.</li>
-            <!-- item -->
-            <li class="card__item recommendations__item">Use the common and proven methods of protecting&nbsp;the&nbsp;OS/host.</li>
-            <!-- item -->
-          </div>
-        </ul>
-      </div>
+<section class="security how-work__section ignore-sidebar">
+  <div class="how-work__wrap">
+    <div class="how-work__title block__title">Our recommendations</div>
+    <div class="recommendations">
+      <ul class="card__list recommendations__list">
+        <div class="recommendations__col">
+          <li class="card__item recommendations__item">Use an external authentication provider instead&nbsp;of&nbsp;the&nbsp;Vault root token.</li>
+          <!-- item -->
+          <li class="card__item recommendations__item">Set up an NGINX proxy to secure access to Vault by switching&nbsp;to&nbsp;HTTPS and enabling access only to certain Vault endpoints.</li>
+          <!-- item -->
+          <li class="card__item recommendations__item">Run Docker on&nbsp;the&nbsp;same&nbsp;host&nbsp;as&nbsp;Vault and block outside access to Docker.</li>
+          <!-- item -->
+        </div>
+        <div class="recommendations__col">
+          <li class="card__item recommendations__item">Do not install any other software&nbsp;on&nbsp;the&nbsp;virtual machine where Vault&nbsp;and&nbsp;the&nbsp;trdl&nbsp;plugin are running.</li>
+          <!-- item -->
+          <li class="card__item recommendations__item">Use the common and proven methods of protecting&nbsp;the&nbsp;OS/host.</li>
+          <!-- item -->
+        </div>
+      </ul>
     </div>
   </div>
 </section>
diff --git a/docs/_includes/documentation/security_ru/components.html b/docs/_includes/documentation/security_ru/components.html
@@ -1,5 +1,5 @@
 <section class="security benefits__section">
-  <div class="container container--relative">
+  <div class=" container--relative">
     <div class="benefits__wrap">
       <div class="benefits__title block__title">Компоненты trdl и их функции</div>
       <div class="benefits__grid">
@@ -90,13 +90,13 @@
         </ul>
       </div>
     </div>
-    <div class="security-bg__lines--components">
+    <!-- <div class="security-bg__lines--components">
       <svg width="129" height="1221" viewBox="0 0 129 1221" fill="none" xmlns="http://www.w3.org/2000/svg">
         <path d="M12 408V0" stroke="#A41FE2" stroke-width="4"/>
         <path d="M65 64V1047" stroke="#333037" stroke-width="4"/>
         <path d="M127 1221L127 798" stroke="#A41FE2" stroke-width="4"/>
         <path d="M2 1221V526" stroke="#A41FE2" stroke-width="4"/>
       </svg>
-    </div>
+    </div> -->
   </div>
 </section>
diff --git a/docs/_includes/documentation/security_ru/intro.html b/docs/_includes/documentation/security_ru/intro.html
@@ -1,18 +1,18 @@
 <section class="security solve-that__section">
-  <div class="container container--wide solve-that__container">
+  <div class="container--wide solve-that__container">
     <div class="solve-that__wrap">
       <div class="solve-that__title block__title block__subtitle--invert">
         Безопасность
       </div>
       <p class="block__description block__subtitle--invert">trdl спроектирован так, чтобы минимизировать ущерб от&nbsp;потенциальных атак на&nbsp;систему обновления. Три основных компонента, которые за&nbsp;это отвечают, — менеджер секретов Vault, репозиторий на&nbsp;основе The Update Framework и&nbsp;Git.</p>
     </div>
-    <div class="security-bg__lines">
+    <!-- <div class="security-bg__lines">
       <svg width="879" height="543" viewBox="0 0 879 543" fill="none" xmlns="http://www.w3.org/2000/svg">
         <path d="M749.197 145V396C749.197 415.882 733.079 432 713.197 432H274" stroke="#A41FE2" stroke-width="4"/>
         <path d="M876.196 6L876.197 455" stroke="#A41FE2" stroke-width="4"/>
         <path d="M60 486H776.08C795.962 486 812.08 469.882 812.08 450V0" stroke="#333037" stroke-width="4"/>
         <path d="M676 541H0" stroke="#A41FE2" stroke-width="4"/>
       </svg>
-    </div>
+    </div> -->
   </div>
 </section>
diff --git a/docs/_includes/documentation/security_ru/not-protecting.html b/docs/_includes/documentation/security_ru/not-protecting.html
@@ -1,4 +1,4 @@
-<section class="security how-work__section">
+<section class="security how-work__section ignore-sidebar">
   <div class="container">
     <div class="how-work__wrap">
       <div class="how-work__title block__title">От чего trdl <span>не защищает</span></div>

diff --git a/docs/_includes/documentation/security_ru/provide.html b/docs/_includes/documentation/security_ru/provide.html
@@ -1,4 +1,4 @@
-<section class="security architecture__section">
+<section class="security architecture__section ignore-sidebar">
   <div class="container container--wide">
     <div class="architecture__wrap">
       <div class="architecture__title block__title block__subtitle--invert">
@@ -53,12 +53,12 @@
 
       </div>
     </div>
-    <div class="security-bg__lines--provide">
+    <!-- <div class="security-bg__lines--provide">
       <svg width="128" height="1372" viewBox="0 0 128 1372" fill="none" xmlns="http://www.w3.org/2000/svg">
         <path d="M64 304L64 673.067M64.0004 1520L64 779.733" stroke="#333037" stroke-width="4"/>
         <path d="M126 0V260.988M126 1590V370.03M2 0V925.97" stroke="#A41FE2" stroke-width="4"/>
         <path d="M2 1039L2 1582" stroke="#A41FE2" stroke-width="4"/>
       </svg>
-    </div>
+    </div> -->
   </div>
 </section>
diff --git a/docs/_includes/documentation/security_ru/recommendations.html b/docs/_includes/documentation/security_ru/recommendations.html
@@ -1,4 +1,4 @@
-<section class="security how-work__section">
+<section class="security how-work__section ignore-sidebar">
   <div class="container">
     <div class="how-work__wrap">
       <div class="how-work__title block__title">Наши рекомендации</div>

diff --git a/docs/css/components/security/_components.scss b/docs/css/components/security/_components.scss
@@ -11,18 +11,27 @@
     }
 
     &__grid--list {
+      grid-template-columns: rem(600px);
+      // max-width: rem(600px);
       grid-template-areas: 
-        "gear ."
-        "gear people"
-        "gear people"
-        "shield people"
-        "shield comp"
-        "shield comp"
-        ". comp";
+        "gear"
+        "people"
+        "shield"
+        "comp";
 
       & .card {
         display: flex;
         flex-direction: column;
+        padding: rem(40px) rem(60px);
+
+        &:nth-child(even) {
+          margin-right: rem(-180px);
+          margin-left: rem(180px);
+        }
+
+        &__item {
+          padding-left: 0;
+        }
 
         &--gear {
           & .card__list {

diff --git a/docs/css/components/security/_intro.scss b/docs/css/components/security/_intro.scss
@@ -2,14 +2,17 @@
   &.solve-that {
     &__section {
       position: relative;
-      margin-top: rem(190px);
       margin-bottom: rem(140px);
       z-index: 0;
 
       @media screen and (max-width: 1375px) {
         background: $color-accent;
         margin-top: rem(70px);
       }
+
+      & .solve-that__container {
+        padding: 0;
+      }
     }
   }
 

diff --git a/docs/css/components/security/_not-protecting.scss b/docs/css/components/security/_not-protecting.scss
@@ -1,15 +1,23 @@
 .security {
-  & .architecture__cols {
-    &--item {
-      & .col__item .warning {
-        stroke: $color-accent;
+  &.how-work__section {
+    & .architecture__cols {
+      &--item {
+        & .col__item {
+          & .warning {
+            stroke: $color-accent;
+          }
+
+          & p {
+            color: #000;
+          }
+        }
+
+        // &:last-child {
+        //   & .col__item {
+        //     max-width: 95%;
+        //   }
+        // }
       }
-
-      // &:last-child {
-      //   & .col__item {
-      //     max-width: 95%;
-      //   }
-      // }
     }
   }
 }