Fix problem s3 chapter (#335)

* replace spoiler * Automated changes * Automated changes * test * Automated changes * Automated changes * typo * improve style * tous en details * Automated changes * Automated changes * replace box * Automated changes * Automated changes Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>
linogaliana · Dec 25, 2022 · 2227f8e · 2227f8e
1 parent b0abd02
commit 2227f8e
Show file tree

Hide file tree

Showing 4 changed files with 581 additions and 198 deletions.
diff --git a/assets/scss/custom.scss b/assets/scss/custom.scss
@@ -1,3 +1,16 @@
+/* ---------------
+DETAILS
+----------------*/
+
+details[open] > * {
+	margin-left: .5rem !important; 
+	padding-left: .5rem;
+  border-left: 1px solid rgba(0,0,0,.8);
+}
+
+.dark details[open] > * {
+	border-left: 1px solid rgba(255, 255, 255, 0.8);
+}
 
 /* Size of space between badges */
 
@@ -598,6 +611,126 @@ div.chart {
 }
 
 
+/*-------------
+TABS SYSTEM
+---------*/
+
+/* prefixed by https://autoprefixer.github.io (PostCSS: v7.0.23, autoprefixer: v9.7.3) */
+
+.post-body {
+  .panelset {
+    /*
+    @extend .mw-100, .relative, .pv3;
+    --panel-tabs-border-bottom: currentColor;
+    --panel-tab-foreground: currentColor;
+    --panel-tab-background: unset;
+    --panel-tab-active-foreground: currentColor;
+    --panel-tab-active-background: unset;
+    --panel-tab-hover-foreground: currentColor;
+    --panel-tab-hover-background: unset;
+    --panel-tab-active-border-color: currentColor;
+    --panel-tab-hover-border-color: currentColor;
+    --panel-tab-inactive-opacity: 0.5;
+    --panel-tab-font-family: inherit;
+    */
+  }
+
+  .panelset * {
+    box-sizing: border-box;
+  }
+
+  .panelset .panel-tabs {
+    display: -webkit-box;
+    display: flex;
+    flex-wrap: wrap;
+    -webkit-box-orient: horizontal;
+    -webkit-box-direction: normal;
+            flex-direction: row;
+    -webkit-box-pack: start;
+            justify-content: start;
+    -webkit-box-align: center;
+            align-items: center;
+    overflow-y: visible;
+    overflow-x: auto;
+    -webkit-overflow-scrolling: touch;
+    padding: 0 0 2px 0;
+    box-shadow: inset 0 -1px 0px var(--panel-tabs-border-bottom);
+  }
+
+  .panelset .panel-tabs * {
+    -webkit-transition: opacity 0.5s ease;
+    transition: opacity 0.5s ease;
+  }
+
+  .panelset .panel-tabs .panel-tab {
+    min-height: 50px;
+    display: -webkit-box;
+    display: flex;
+    -webkit-box-pack: center;
+            justify-content: center;
+    -webkit-box-align: center;
+            align-items: center;
+    padding: 0.5em 1em;
+    font-family: var(--panel-tab-font-family);
+    opacity: var(--panel-tab-inactive-opacity);
+    border-top: 1px solid transparent;
+    border-bottom: 1px solid transparent;
+    margin-bottom: -2px;
+    color: var(--panel-tab-foreground);
+    background-color: var(--panel-tab-background);
+    list-style: none;
+    z-index: 5;
+  }
+
+  .panelset .panel-tabs .panel-tab > a {
+    color: currentColor;
+    text-decoration: none;
+    border: none;
+  }
+
+  .panelset .panel-tabs .panel-tab > a:focus {
+    outline: none;
+    text-decoration: none;
+    border: none;
+  }
+
+  .panelset .panel-tabs .panel-tab > a:hover {
+    text-decoration: none;
+    border: none;
+  }
+
+  .panelset .panel-tabs .panel-tab:hover {
+    border-bottom-color: var(--panel-tab-hover-border-color);
+    color: var(--panel-tab-hover-foreground);
+    background-color: var(--panel-tab-hover-background);
+    opacity: 1;
+    cursor: pointer;
+    z-index: 10;
+  }
+
+  .panelset .panel-tabs .panel-tab:focus {
+    outline: none;
+    color: var(--panel-tab-hover-foreground);
+    border-bottom-color: var(--panel-tab-hover-border-color);
+    background-color: var(--panel-tab-hover-background);
+  }
+
+  .panelset .panel-tabs .panel-tab.panel-tab-active {
+    border-top-color: var(--panel-tab-active-border-color);
+    color: var(--panel-tab-active-foreground);
+    background-color: var(--panel-tab-active-background);
+    opacity: 1;
+  }
+
+  .panelset .panel {
+    display: none;
+  }
+
+  .panelset .panel-active {
+    display: block;
+  }
+}
+
 /*----
 .post-body {
     .panelset {

diff --git a/assets/scss/panelset.scss b/assets/scss/panelset.scss
@@ -1,113 +1,113 @@
 /* prefixed by https://autoprefixer.github.io (PostCSS: v7.0.23, autoprefixer: v9.7.3) */
 
 .post-body {
-    .panelset {
-      @extend .mw-100, .relative, .pv3;
-      --panel-tabs-border-bottom: currentColor;
-      --panel-tab-foreground: currentColor;
-      --panel-tab-background: unset;
-      --panel-tab-active-foreground: currentColor;
-      --panel-tab-active-background: unset;
-      --panel-tab-hover-foreground: currentColor;
-      --panel-tab-hover-background: unset;
-      --panel-tab-active-border-color: currentColor;
-      --panel-tab-hover-border-color: currentColor;
-      --panel-tab-inactive-opacity: 0.5;
-      --panel-tab-font-family: inherit;
-    }
-    
-    .panelset * {
-      box-sizing: border-box;
-    }
-    
-    .panelset .panel-tabs {
-      display: -webkit-box;
-      display: flex;
-      flex-wrap: wrap;
-      -webkit-box-orient: horizontal;
-      -webkit-box-direction: normal;
-              flex-direction: row;
-      -webkit-box-pack: start;
-              justify-content: start;
-      -webkit-box-align: center;
-              align-items: center;
-      overflow-y: visible;
-      overflow-x: auto;
-      -webkit-overflow-scrolling: touch;
-      padding: 0 0 2px 0;
-      box-shadow: inset 0 -1px 0px var(--panel-tabs-border-bottom);
-    }
-    
-    .panelset .panel-tabs * {
-      -webkit-transition: opacity 0.5s ease;
-      transition: opacity 0.5s ease;
-    }
-    
-    .panelset .panel-tabs .panel-tab {
-      min-height: 50px;
-      display: -webkit-box;
-      display: flex;
-      -webkit-box-pack: center;
-              justify-content: center;
-      -webkit-box-align: center;
-              align-items: center;
-      padding: 0.5em 1em;
-      font-family: var(--panel-tab-font-family);
-      opacity: var(--panel-tab-inactive-opacity);
-      border-top: 1px solid transparent;
-      border-bottom: 1px solid transparent;
-      margin-bottom: -2px;
-      color: var(--panel-tab-foreground);
-      background-color: var(--panel-tab-background);
-      list-style: none;
-      z-index: 5;
-    }
-    
-    .panelset .panel-tabs .panel-tab > a {
-      color: currentColor;
-      text-decoration: none;
-      border: none;
-    }
-    
-    .panelset .panel-tabs .panel-tab > a:focus {
-      outline: none;
-      text-decoration: none;
-      border: none;
-    }
-    
-    .panelset .panel-tabs .panel-tab > a:hover {
-      text-decoration: none;
-      border: none;
-    }
-    
-    .panelset .panel-tabs .panel-tab:hover {
-      border-bottom-color: var(--panel-tab-hover-border-color);
-      color: var(--panel-tab-hover-foreground);
-      background-color: var(--panel-tab-hover-background);
-      opacity: 1;
-      cursor: pointer;
-      z-index: 10;
-    }
-    
-    .panelset .panel-tabs .panel-tab:focus {
-      outline: none;
-      color: var(--panel-tab-hover-foreground);
-      border-bottom-color: var(--panel-tab-hover-border-color);
-      background-color: var(--panel-tab-hover-background);
-    }
-    
-    .panelset .panel-tabs .panel-tab.panel-tab-active {
-      border-top-color: var(--panel-tab-active-border-color);
-      color: var(--panel-tab-active-foreground);
-      background-color: var(--panel-tab-active-background);
-      opacity: 1;
-    }
-    
-    .panelset .panel {
-      display: none;
-    }
-    
-    .panelset .panel-active {
-      display: block;
-    }
+  .panelset {
+    @extend .mw-100, .relative, .pv3;
+    --panel-tabs-border-bottom: currentColor;
+    --panel-tab-foreground: currentColor;
+    --panel-tab-background: unset;
+    --panel-tab-active-foreground: currentColor;
+    --panel-tab-active-background: unset;
+    --panel-tab-hover-foreground: currentColor;
+    --panel-tab-hover-background: unset;
+    --panel-tab-active-border-color: currentColor;
+    --panel-tab-hover-border-color: currentColor;
+    --panel-tab-inactive-opacity: 0.5;
+    --panel-tab-font-family: inherit;
+  }
+
+  .panelset * {
+    box-sizing: border-box;
+  }
+
+  .panelset .panel-tabs {
+    display: -webkit-box;
+    display: flex;
+    flex-wrap: wrap;
+    -webkit-box-orient: horizontal;
+    -webkit-box-direction: normal;
+            flex-direction: row;
+    -webkit-box-pack: start;
+            justify-content: start;
+    -webkit-box-align: center;
+            align-items: center;
+    overflow-y: visible;
+    overflow-x: auto;
+    -webkit-overflow-scrolling: touch;
+    padding: 0 0 2px 0;
+    box-shadow: inset 0 -1px 0px var(--panel-tabs-border-bottom);
+  }
+
+  .panelset .panel-tabs * {
+    -webkit-transition: opacity 0.5s ease;
+    transition: opacity 0.5s ease;
+  }
+
+  .panelset .panel-tabs .panel-tab {
+    min-height: 50px;
+    display: -webkit-box;
+    display: flex;
+    -webkit-box-pack: center;
+            justify-content: center;
+    -webkit-box-align: center;
+            align-items: center;
+    padding: 0.5em 1em;
+    font-family: var(--panel-tab-font-family);
+    opacity: var(--panel-tab-inactive-opacity);
+    border-top: 1px solid transparent;
+    border-bottom: 1px solid transparent;
+    margin-bottom: -2px;
+    color: var(--panel-tab-foreground);
+    background-color: var(--panel-tab-background);
+    list-style: none;
+    z-index: 5;
+  }
+
+  .panelset .panel-tabs .panel-tab > a {
+    color: currentColor;
+    text-decoration: none;
+    border: none;
+  }
+
+  .panelset .panel-tabs .panel-tab > a:focus {
+    outline: none;
+    text-decoration: none;
+    border: none;
+  }
+
+  .panelset .panel-tabs .panel-tab > a:hover {
+    text-decoration: none;
+    border: none;
+  }
+
+  .panelset .panel-tabs .panel-tab:hover {
+    border-bottom-color: var(--panel-tab-hover-border-color);
+    color: var(--panel-tab-hover-foreground);
+    background-color: var(--panel-tab-hover-background);
+    opacity: 1;
+    cursor: pointer;
+    z-index: 10;
+  }
+
+  .panelset .panel-tabs .panel-tab:focus {
+    outline: none;
+    color: var(--panel-tab-hover-foreground);
+    border-bottom-color: var(--panel-tab-hover-border-color);
+    background-color: var(--panel-tab-hover-background);
+  }
+
+  .panelset .panel-tabs .panel-tab.panel-tab-active {
+    border-top-color: var(--panel-tab-active-border-color);
+    color: var(--panel-tab-active-foreground);
+    background-color: var(--panel-tab-active-background);
+    opacity: 1;
+  }
+
+  .panelset .panel {
+    display: none;
+  }
+
+  .panelset .panel-active {
+    display: block;
+  }
 }