update responsive.css

SUSP8129 · Oct 12, 2024 · e12fec8 · e12fec8
1 parent 522bc44
commit e12fec8
Show file tree

Hide file tree

Showing 2 changed files with 41 additions and 16 deletions.
diff --git a/index.html b/index.html
@@ -16,8 +16,8 @@ <h2 class="zero">0. Table of Contents</h2>
     <ul class="contents">
         <li><a href="#section1">1. What Is "Caret"?</a></li>
         <li><a href="#section2">2. What Is the Good Point?</a></li>
-        <li><a href="#section3">3. But, "Caret" is not perfect</a></li>
-        <li><a href="#section4">4. </a></li>
+        <li><a href="#section3">3. But, "Caret" is not Perfect</a></li>
+        <li><a href="#section4">4. So, Have the Saved Files Really Disappeared?</a></li>
         <li><a href="#section5">5. </a></li>
         <li><a href="#section6">6. </a></li>
         </ul>
@@ -66,24 +66,21 @@ <h2 class="second" id="section2">2. What Is the Good Point?</h2>
             <p class="two">It can be autofilled to some degree depending on the (programming) language used.</p>
             <p class="two">It is certain that this function is at least more complete than "Text".</p>
 
-        <h2 class="third" id="section3">3. But, "Caret" is not perfect</h2>
+        <h2 class="third" id="section3">3. But, "Caret" is not Perfect</h2>
             <p class="three">
-                As mentioned earlier, "Caret" is multifunctional, but, 
-                It does not have 100% of the functionality you need.
+                As mentioned earlier, "Caret" is multifunctional, but, it does not have 100% of the functionality you need.
             </p>
             <p class="three">
-                For example, compared to Visual Studio Code for Windows 
-                and its Web version, Visual Studio Code for the Web, 
-                it clearly lacks functionality. 
+                For example, compared to Visual Studio Code for Windows and its Web version, 
+                Visual Studio Code for the Web, it clearly lacks functionality. 
             </p>
             <p class="three">
                 I believe this is unavoidable, as Caret is only one of the Chrome extensions.
             </p>
             <p class="three">However, Caret has one more serious problem.</p>
             <p class="three">
-                The problem is that in some models, 
-                some or all of the files stored in the PC's internal storage disappear 
-                when the PC is rebooted. 
+                The problem is that in some models, some or all of the files 
+                stored in the PC's internal storage disappear when the PC is rebooted. 
                 In fact, the problem occurred frequently on the Chromebook 
                 used by the author of this article.
             </p>
@@ -98,12 +95,21 @@ <h2 class="third" id="section3">3. But, "Caret" is not perfect</h2>
             <div class="(fullscreen-image)" data-image="(Sample_disappeared.png)" data-title="(Disappeared!?)" data-caption="(There is a missing file.)">
                 <img class="sample_after" src="Sample_disappeared.png" alt="Saved location on the files app - after rebooted">
             </div>
-            <p class="three"></p>
-            <p class="three"></p>
-            <p class="three"></p>
-            <p class="three"></p>
+            <p class="three">
+                The image above shows that the file "PDCA_Cycle.txt" 
+                that was just saved has disappeared.
+            </p>
 
-        <h2 class="fourth" id="section4">4. </h2>
+        <h2 class="fourth" id="section4">4. So, Have the Saved Files Really Disappeared?</h2>
+            <p class="four">
+                Let's look deeper into the internal storage to see 
+                if the files have really disappeared.
+            </p>
+            <p class="four"></p>
+            <div class="(fullscreen-image)" data-image="()" data-title="()" data-caption="()">
+                <img class="Show-hidden-files" src="Show-hidden-files_Activated.png" alt="">
+            </div>
+            <p class="four"></p>
             <p class="four"></p>
             <p class="four"></p>
             <p class="four"></p>

diff --git a/responsive.css b/responsive.css
@@ -112,3 +112,22 @@
         width: 100%;
     }
 }
+
+@media (min-width: 1000px) {
+    .show-hidden-files {
+        width: 60%;
+    }
+}
+
+@media (max-width: 1000px) {
+    .show-hidden-files {
+        width: 80%;
+        margin-bottom: 50px;
+    }
+}
+
+@media (max-width: 670px) {
+    .show-hidden-files {
+        width: 100%;
+    }
+}