[bug#72314] [PATCH 2/2] website: Move screenshots style to the screenshots style sheet.

[sirgazil]

From: Luis Felipe <sirgazil@zoho.com>

* website/themes/initial/css/index.css: Move screenshot rules to
screenshots.css.
* website/themes/initial/css/screenshots.css: Add screenshot rules from
index.css.
* website/apps/media/templates/screenshot.scm (screenshot-t): Don't use
the index.css.
* website/apps/media/templates/screenshots-overview.scm:
(screenshots-overview-t): Likewise, and use screenshots.css instead.
---
 website/apps/media/templates/screenshot.scm   |  3 +-
 .../media/templates/screenshots-overview.scm  |  2 +-
 website/themes/initial/css/index.css          | 61 ------------------
 website/themes/initial/css/screenshots.css    | 64 ++++++++++++++++++-
 4 files changed, 65 insertions(+), 65 deletions(-)

diff --git a/website/apps/media/templates/screenshot.scm 
b/website/apps/media/templates/screenshot.scm
index a942ef6..377485a 100644
--- a/website/apps/media/templates/screenshot.scm
+++ b/website/apps/media/templates/screenshot.scm
@@ -26,8 +26,7 @@ system|GNU Hurd|GNU Guix package manager|GNU Guile|Guile \
 Scheme|Transactional upgrades|Functional package \
 management|Reproducibility") #\|)
      #:active-menu-item (C_ "website menu" "Media")
-     #:css (list (theme-url "css/index.css")
-                 (theme-url "css/screenshots.css"))
+     #:css (list (theme-url "css/screenshots.css"))
      #:content
      `(main
        (section
diff --git a/website/apps/media/templates/screenshots-overview.scm 
b/website/apps/media/templates/screenshots-overview.scm
index 7663ad9..97e5af6 100644
--- a/website/apps/media/templates/screenshots-overview.scm
+++ b/website/apps/media/templates/screenshots-overview.scm
@@ -23,7 +23,7 @@ system|GNU Hurd|GNU Guix package manager|GNU Guile|Guile \
 Scheme|Transactional upgrades|Functional package \
 management|Reproducibility") #\|)
    #:active-menu-item (C_ "website menu" "Media")
-   #:css (list (theme-url "css/index.css"))
+   #:css (list (theme-url "css/screenshots.css"))
    #:content
    `(main
      (section
diff --git a/website/themes/initial/css/index.css 
b/website/themes/initial/css/index.css
index a04f3b6..da9caf4 100644
--- a/website/themes/initial/css/index.css
+++ b/website/themes/initial/css/index.css
@@ -228,73 +228,12 @@ h2 {
     color: #E6E6E6;
 }
 
-.screenshots-box {
-    padding: 40px 0px 0px 0px;
-}
-
-.screenshot-preview {
-    font-size: 0.7em;
-    margin: 40px auto;
-    max-width: 250px;
-    text-align: center;
-}
-
-.screenshot-preview a,
-.screenshot-preview img {
-    border-radius: 5px;
-    display: block;
-}
-
-.screenshot-preview a:link,
-.screenshot-preview a:visited {
-    border-color: transparent;
-    border-style: solid;
-    border-width: thin;
-    box-shadow: 0 0 4px gray;
-    color: white;
-    position: relative;
-}
-
-.screenshot-preview a:active,
-.screenshot-preview a:focus,
-.screenshot-preview a:hover {
-    border-color: black;
-    box-shadow: 0 0 4px black;
-}
-
-
-
-@media screen and (min-width: 300px) {
-    .screenshot-inset-shadow {
-       border-radius: 5px;
-       box-shadow: inset 0 0 4px black;
-       display: block;
-       height: 140px;
-       position: absolute;
-       top: 0px;
-       width: 250px;
-    }
-
-    .screenshot-preview a:active .screenshot-inset-shadow,
-    .screenshot-preview a:focus .screenshot-inset-shadow,
-    .screenshot-preview a:hover .screenshot-inset-shadow {
-       box-shadow: none;
-    }
-}
-
-
 
 @media screen and (min-width: 480px) {
     .button-big:link,
     .button-big:visited {
        display: inline-block;
     }
-
-    .screenshot-preview {
-       display: inline-block;
-       margin: 15px;
-       vertical-align: top;
-    }
 }
 
 
diff --git a/website/themes/initial/css/screenshots.css 
b/website/themes/initial/css/screenshots.css
index 64f5f6a..296a99b 100644
--- a/website/themes/initial/css/screenshots.css
+++ b/website/themes/initial/css/screenshots.css
@@ -1,3 +1,65 @@
+.screenshots-box {
+    padding: 40px 0px 0px 0px;
+}
+
+.screenshot-preview {
+    font-size: 0.7em;
+    margin: 40px auto;
+    max-width: 250px;
+    text-align: center;
+}
+
+.screenshot-preview a,
+.screenshot-preview img {
+    border-radius: 5px;
+    display: block;
+}
+
+.screenshot-preview a:link,
+.screenshot-preview a:visited {
+    border-color: transparent;
+    border-style: solid;
+    border-width: thin;
+    box-shadow: 0 0 4px gray;
+    color: white;
+    position: relative;
+}
+
+.screenshot-preview a:active,
+.screenshot-preview a:focus,
+.screenshot-preview a:hover {
+    border-color: black;
+    box-shadow: 0 0 4px black;
+}
+
 .screenshot-viewer {
     background-color: black;
-}
\ No newline at end of file
+}
+
+
+
+@media screen and (min-width: 300px) {
+    .screenshot-inset-shadow {
+       border-radius: 5px;
+       box-shadow: inset 0 0 4px black;
+       display: block;
+       height: 140px;
+       position: absolute;
+       top: 0px;
+       width: 250px;
+    }
+
+    .screenshot-preview a:active .screenshot-inset-shadow,
+    .screenshot-preview a:focus .screenshot-inset-shadow,
+    .screenshot-preview a:hover .screenshot-inset-shadow {
+       box-shadow: none;
+    }
+}
+
+@media screen and (min-width: 480px) {
+    .screenshot-preview {
+       display: inline-block;
+       margin: 15px;
+       vertical-align: top;
+    }
+}
-- 
2.45.1