web: Introduce sections

Signed-off-by: Michael Tremer <michael.tremer@ipfire.org>

diff --git a/config/cfgroot/header.pl b/config/cfgroot/header.pl
index a5cd5fbb1a0bf2798258a9b4263286e63ae2a8b6..fa11ca0fabb48e2ace884efba17176180dded8c2 100644 (file)
--- a/config/cfgroot/header.pl
+++ b/config/cfgroot/header.pl
@@ -333,6 +333,24 @@ sub openbigbox {
 sub closebigbox {
 }
 
+# Sections
+
+sub opensection($) {
+       my $title = shift;
+
+       # Open the section
+       print "<section class=\"section\">";
+
+       # Show the title if set
+       if ($title) {
+               print " <h2 class=\"title\">${title}</h2>\n";
+       }
+}
+
+sub closesection() {
+       print "</section>";
+}
+
 ###############################################################################
 #
 # print box opening html layout
@@ -346,7 +364,7 @@ sub openbox {
 
        my $title = shift;
 
-       print "<div class=\"box\">\n";
+       print "<section class=\"section is-box\">\n";
 
        # Show the title
        if ($title) {
@@ -358,7 +376,7 @@ sub openbox {
 #
 # print box closing html layout
 sub closebox {
-       print "</div>";
+       print "</section>";
 }
 
 sub green_used() {

diff --git a/html/html/themes/ipfire/include/css/style.css b/html/html/themes/ipfire/include/css/style.css
index 181a87c26268d7457c3eb88a1c68927af51fa3b0..fac3703fc733c4c830ea4dea1314eb046d166559 100644 (file)
--- a/html/html/themes/ipfire/include/css/style.css
+++ b/html/html/themes/ipfire/include/css/style.css
@@ -165,13 +165,16 @@ iframe {
        border-radius: 3px 3px 3px 3px;
 }
 
-.box {
-       border: 1px solid var(--color-grey);
-       padding: 0.75rem 1rem;
+section {
        margin-bottom: 2rem;
 }
 
-.box .title {
+section.is-box {
+       padding: 0.75rem 1rem;
+       border: 1px solid var(--color-grey);
+}
+
+section .title {
        margin-bottom: 1rem;
        border-bottom: 1px solid var(--color-grey);
 }