From bd688657075f6a3e7a51aa2a1728ab8454f51d68 Mon Sep 17 00:00:00 2001 From: Michael Tremer Date: Thu, 2 Mar 2023 19:29:39 +0000 Subject: [PATCH] Replace Bootstrap 5 with Bulma This just swaps the CSS with some very basic styling. Signed-off-by: Michael Tremer --- .gitignore | 4 +- .gitmodules | 6 +- Makefile.am | 5 +- src/bootstrap | 1 - src/scss/_icons.scss | 4 +- src/scss/listing.scss | 32 +-- src/scss/main.scss | 35 +++ src/scss/style.scss | 412 ------------------------------- src/templates/base.html | 3 +- src/templates/messages/main.scss | 350 +------------------------- src/third-party/bulma | 1 + 11 files changed, 50 insertions(+), 803 deletions(-) delete mode 160000 src/bootstrap create mode 100644 src/scss/main.scss delete mode 100644 src/scss/style.scss create mode 160000 src/third-party/bulma diff --git a/.gitignore b/.gitignore index 777242a8..08623db7 100644 --- a/.gitignore +++ b/.gitignore @@ -4,9 +4,7 @@ /build-aux /configure /config.* -/src/scss/fonts.css -/src/scss/listing.css -/src/scss/main.css +/src/scss/*.css /src/scripts/ipfire.org /src/scripts/ipfire.org-webapp /src/static/favicon.ico diff --git a/.gitmodules b/.gitmodules index 2933dfd5..46cc3e06 100644 --- a/.gitmodules +++ b/.gitmodules @@ -1,6 +1,3 @@ -[submodule "src/bootstrap"] - path = src/bootstrap - url = https://github.com/twbs/bootstrap.git [submodule "src/fonts"] path = src/fonts url = https://github.com/google/fonts.git @@ -17,3 +14,6 @@ [submodule "src/flag-icons"] path = src/flag-icons url = https://github.com/lipis/flag-icon-css.git +[submodule "src/third-party/bulma"] + path = src/third-party/bulma + url = https://git.ipfire.org/pub/git/thirdparty/bulma.git diff --git a/Makefile.am b/Makefile.am index a2a3096c..8475b4f8 100644 --- a/Makefile.am +++ b/Makefile.am @@ -340,7 +340,7 @@ templates_wiki_modulesdir = $(templates_wikidir)/modules # ------------------------------------------------------------------------------ SCSS_FILES = \ - src/scss/style.scss \ + src/scss/main.scss \ src/scss/_code-highlighting.scss \ src/scss/_fonts.scss \ src/scss/_icons.scss \ @@ -986,9 +986,6 @@ static_images_DATA = \ static_imagesdir = $(staticdir)/images static_js_DATA = \ - src/bootstrap/dist/js/bootstrap.bundle.min.js \ - src/bootstrap/dist/js/bootstrap.bundle.min.js.map \ - \ src/static/js/Control.Geocoder.min.js \ src/static/js/editor.js \ src/static/js/jquery-3.6.0.min.js \ diff --git a/src/bootstrap b/src/bootstrap deleted file mode 160000 index 1a6fdfae..00000000 --- a/src/bootstrap +++ /dev/null @@ -1 +0,0 @@ -Subproject commit 1a6fdfae6be09b09eaced8f0e442ca6f7680a61e diff --git a/src/scss/_icons.scss b/src/scss/_icons.scss index 4fc42067..44eac628 100644 --- a/src/scss/_icons.scss +++ b/src/scss/_icons.scss @@ -1,7 +1,7 @@ // Font Awesome $fa-font-path: "fonts"; -$fa-font-base-size: $font-size-base; +$fa-font-base-size: 1rem; @import "../font-awesome/scss/fontawesome"; @import "../font-awesome/scss/solid"; @@ -12,7 +12,7 @@ $fa-font-base-size: $font-size-base; $pf-font-path: "fonts"; -$pf-font-size-base: $font-size-base; +$pf-font-size-base: 1rem; @import "../payment-font/sass/paymentfont"; diff --git a/src/scss/listing.scss b/src/scss/listing.scss index c40a5b57..5f76a90b 100644 --- a/src/scss/listing.scss +++ b/src/scss/listing.scss @@ -1,29 +1,3 @@ -@import "variables"; - -// Import bootstrap -@import "../bootstrap/scss/functions"; -@import "../bootstrap/scss/variables"; -@import "../bootstrap/scss/mixins"; -@import "../bootstrap/scss/reboot"; - -// Import components we need -@import "../bootstrap/scss/type"; -@import "../bootstrap/scss/tables"; - -// Include fonts -@import "_fonts.scss"; - -body { - padding: $spacer * 2; -} - -// Make all tables .table by default -table { - @extend .table; - - width: auto; -} - -hr { - display: none; -} +/* + To be re-done https://bugzilla.ipfire.org/show_bug.cgi?id=13051 +*/ diff --git a/src/scss/main.scss b/src/scss/main.scss new file mode 100644 index 00000000..50e9585d --- /dev/null +++ b/src/scss/main.scss @@ -0,0 +1,35 @@ +/* + Global Settings +*/ +$family-sans-serif: Prompt, sans-serif; + +// Colour Palette +$primary: #ff2e53; +$green: #3adb76; +$yellow: #e7e247; +$red: #cc4b47; + +// Use the primary colour for links +$link: $primary; + +/* + Import Bulma +*/ +@import "../third-party/bulma/sass/base/_all"; +@import "../third-party/bulma/sass/components/_all"; +@import "../third-party/bulma/sass/elements/_all"; +@import "../third-party/bulma/sass/form/_all"; +@import "../third-party/bulma/sass/grid/_all"; +@import "../third-party/bulma/sass/helpers/_all"; +@import "../third-party/bulma/sass/layout/_all"; +@import "../third-party/bulma/sass/utilities/_all"; + +// Import fonts +@import "_fonts"; + +// Import icons +@import "_icons"; + +/* + Custom CSS +*/ diff --git a/src/scss/style.scss b/src/scss/style.scss deleted file mode 100644 index 1ff2bf16..00000000 --- a/src/scss/style.scss +++ /dev/null @@ -1,412 +0,0 @@ -@import "variables"; - -// Use all Bootstrap modules that we want -@import "../bootstrap/scss/functions"; -@import "../bootstrap/scss/variables"; -@import "../bootstrap/scss/mixins"; -@import "../bootstrap/scss/utilities"; - -$theme-colors: map-merge($theme-colors, $custom-colors); - -@import "../bootstrap/scss/root"; -@import "../bootstrap/scss/reboot"; -@import "../bootstrap/scss/type"; -@import "../bootstrap/scss/images"; -@import "../bootstrap/scss/containers"; -@import "../bootstrap/scss/grid"; -@import "../bootstrap/scss/tables"; -@import "../bootstrap/scss/forms"; -@import "../bootstrap/scss/buttons"; -@import "../bootstrap/scss/transitions"; -@import "../bootstrap/scss/dropdown"; -@import "../bootstrap/scss/button-group"; -@import "../bootstrap/scss/nav"; -@import "../bootstrap/scss/navbar"; -@import "../bootstrap/scss/card"; -@import "../bootstrap/scss/accordion"; -@import "../bootstrap/scss/breadcrumb"; -@import "../bootstrap/scss/pagination"; -@import "../bootstrap/scss/badge"; -@import "../bootstrap/scss/alert"; -@import "../bootstrap/scss/progress"; -@import "../bootstrap/scss/list-group"; -@import "../bootstrap/scss/close"; -@import "../bootstrap/scss/modal"; -@import "../bootstrap/scss/tooltip"; -@import "../bootstrap/scss/popover"; -@import "../bootstrap/scss/carousel"; -@import "../bootstrap/scss/spinners"; -@import "../bootstrap/scss/offcanvas"; -@import "../bootstrap/scss/placeholders"; - -@import "../bootstrap/scss/helpers"; -@import "../bootstrap/scss/utilities/api"; - -// Include fonts -@import "_fonts.scss"; - -// Custom stuff -@import "icons"; -@import "code-highlighting"; - -// Makes everything white with dark text on it -.inverse { - background-color: $body-color; - color: $body-bg; -} - -body { - display: flex; - min-height: 100vh; - flex-flow: column; - - // Make the wiki slightly narrower - &.wiki-ipfire-org { - .container { - max-width: 900px; - } - } -} - -.header { - padding-top: 5rem; - margin-bottom: $spacer; - background-color: $light; -} - -// Buttons -.btn { - text-transform: uppercase; -} - -@each $color, $value in $theme-colors { - .glow-#{$color} { - color: white; - background-color: rgba($value, .15); - } -} - -code { - background-color: $dark; - border-radius: $border-radius; - padding: 0.1rem 0.2rem; -} - -pre { - background-color: $dark; - border-radius: $border-radius; - padding: 0.5rem; - - code { - background-color: inherit; - padding: 0; - } - - &.pre-light { - background-color: $white; - color: $body-bg; - } -} - -.navbar { - .navbar-brand { - font-weight: bold; - letter-spacing: 0.07em; - } -} - -.bg-brand { - min-height: 40rem; - - // Background Image - background-image: url("img/bg-img.jpg"); - background-repeat: no-repeat; - background-position: center; - background-size: cover; - - // Text is white - color: $white; - - // Center the content - display: flex; - flex-direction: column; - justify-content: center; -} - -.icon-large { - font-size: 8em; - - @include media-breakpoint-up(lg) { - font-size: 6em; - } - - @include media-breakpoint-up(xl) { - font-size: 8em; - } - - @include media-breakpoint-up(xxl) { - font-size: 10em; - } -} - -footer { - margin-top: auto; - - .footer { - margin: ($spacer * 2) 0; - padding-top: $spacer * 2; - - ul { - @include list-unstyled(); - - li { - padding: ($spacer / 2) 0; - } - } - } - - .footer-link { - color: inherit; - - &:hover { - color: inherit; - } - } -} - -.map { - min-height: 24rem; -} - -// Sections - -section { - padding: 3rem 1rem; - - @include media-breakpoint-up(lg) { - padding: 5rem 0; - } - - @include media-breakpoint-up(lg) { - // Reset large headlines to normal size on mobile devices - h1 { - font-size: $display1-size; - font-weight: $display-font-weight; - line-height: $display-line-height; - } - } -} - -blockquote { - @extend .blockquote; - - // Add a light border to the left - border-left: 0.5rem solid $light; - padding: $spacer; - - quotes: "“" "”" "“" "”"; - - // Quote - &:before{ - color: $light; - font-size: $display1-size; - line-height: 0; - margin-right: 0.25em; - vertical-align: -0.4em; - } - - &:before { - content: open-quote; - } - - p { - margin-bottom: 0; - } -} - -.blog-post { - .blog-header { - h4 { - margin-bottom: 0; - - a { - color: $dark; - } - } - } - - .blog-content { - h1, h2, h3, h4, h5, h6 { - font-size: 1.375rem; - font-weight: $headings-font-weight; - line-height: $headings-line-height; - margin-bottom: 0.25rem; - } - - img { - @include img-fluid; - - // Center all images - display: block; - margin-left: auto; - margin-right: auto; - - // Add some extra margin to the top & bottom - padding: ($spacer * 2) 0 ($spacer * 2) 0; - } - - table { - @extend .table; - @extend .table-sm; - @extend .table-striped; - - // Apply CSS classes for alignment - thead { - th[align="left"], td[align="left"] { - @extend .text-start; - } - - th[align="center"], td[align="center"] { - @extend .text-center; - } - - th[align="right"], td[align="right"] { - @extend .text-end; - } - } - } - } - - &.lightning-wire-labs { - .blog-header { - h5 { - a { - color: $lwl; - } - } - - a { - color: $lwl; - } - } - - .blog-content { - a { - color: $lwl; - } - } - } -} - -.wiki-content { - h1, h2, h3, h4, h5, h6 { - font-weight: $headings-font-weight; - line-height: $headings-line-height; - margin-bottom: 0.5rem; - } - - h1 { - font-size: $h4-font-size; - } - - h2 { - font-size: $h5-font-size; - } - - h3, h4, h5, h6 { - font-size: $h6-font-size; - } - - figure { - // Center images - display: table; - margin-right: auto; - margin-left: auto; - - // Add some extra margin to the top & bottom - padding: ($spacer * 2) 0 ($spacer * 2) 0; - } - - blockquote { - @extend .blockquote; - } - - table { - @extend .table; - @extend .table-sm; - @extend .table-striped; - - // Apply CSS classes for alignment - thead { - th[align="left"], td[align="left"] { - @extend .text-start; - } - - th[align="center"], td[align="center"] { - @extend .text-center; - } - - th[align="right"], td[align="right"] { - @extend .text-end; - } - } - } - - .footnote { - font-size: $small-font-size; - - ol { - margin-bottom: 0; - - li { - p { - margin-bottom: 0; - } - } - } - } -} - -#preview { - // Hide the spinner by default - #spinner { - display: none; - } - - #preview-content { - @include transition(opacity .5s linear); - } - - &.updating { - // Show the spinner during updates - #spinner { - display: block; - } - - // While updating, we face out the content - #preview-content { - opacity: 0.5; - } - } -} - -hr.divider { - border-color: rgba($dark, .15); - margin-top: 2rem; - margin-bottom: 3rem; -} - -.circle { - position: relative; - p.fireinfo_per { - color: $gray-800; - position: absolute; - top: calc(50% - 18px); - width: 100%; - } -} - -.pdf-viewer { - width: 100%; - min-height: 32rem; -} diff --git a/src/templates/base.html b/src/templates/base.html index fe272d21..db7879f6 100644 --- a/src/templates/base.html +++ b/src/templates/base.html @@ -297,8 +297,7 @@ {% end block %} - - + {% block javascript %}{% end block %} diff --git a/src/templates/messages/main.scss b/src/templates/messages/main.scss index 2e44dbfc..56a018e3 100644 --- a/src/templates/messages/main.scss +++ b/src/templates/messages/main.scss @@ -1,347 +1,3 @@ -@import "../../scss/variables"; - -@import "../../bootstrap/scss/functions"; -@import "../../bootstrap/scss/variables"; - -@import "../../scss/_fonts.scss"; - -// Use font sizes in px -$font-size-base: 18px; -$small-font-size: 12px; - -$h1-font-size: 48px; -$h2-font-size: 40px; -$h3-font-size: 36px; -$h4-font-size: 32px; -$headings-margin-bottom: 20px; - -$paragraph-margin-bottom: 14px; - -// Resets -img { - border: none; - -ms-interpolation-mode: bicubic; - max-width: 100%; -} - -body { - background-color: $body-bg; - font-family: $font-family-sans-serif; - -webkit-font-smoothing: antialiased; - font-size: $font-size-base; - line-height: $line-height-base; - margin: 0; - padding: 0; - -ms-text-size-adjust: 100%; - -webkit-text-size-adjust: 100%; -} - -table { - border-collapse: separate; - mso-table-lspace: 0pt; - mso-table-rspace: 0pt; - width: 100%; - - td { - font-family: $font-family-sans-serif; - font-size: $font-size-base; - vertical-align: top; - } -} - -// Basic Styling - -.body { - background-color: $body-bg; - width: 100%; -} - -/* Set a max-width, and make it display as block so it will automatically stretch to that width, but will also shrink down on a phone or something */ -.container { - display: block; - margin: 0 auto !important; - - // Center the container - max-width: 580px; - padding: 10px; - width: 580px; -} - -/* This should also be a block element, so that it will fill 100% of the .container */ -.content { - box-sizing: border-box; - display: block; - margin: 0 auto; - max-width: 580px; - padding: 10px; -} - -// Headers, Footers, Containers - -.main { - background: $white; - color: $dark; - border-radius: $card-border-radius; - width: 100%; - - .logo { - text-align: center; - - img { - height: 196px; - padding: 24px 0 12px 0; - } - } -} - -.wrapper { - box-sizing: border-box; - padding: 20px; -} - -.content-block { - padding-bottom: 10px; - padding-top: 10px; -} - -.footer { - clear: both; - margin-top: 10px; - text-align: center; - width: 100%; - - td, p, span, a { - color: $light; - font-size: $small-font-size; - text-align: center; - } -} - -// Typography - -h1, h2, h3, h4 { - color: $dark; - font-family: $font-family-sans-serif; - font-weight: $headings-font-weight; - line-height: $headings-line-height; - margin: 0; - margin-bottom: $headings-margin-bottom; -} - -h1 { - font-size: $h1-font-size; - text-align: center; - text-transform: capitalize; -} - -p, ul, ol { - font-family: $font-family-sans-serif; - font-size: $font-size-base; - font-weight: normal; - margin: 0; - margin-bottom: $paragraph-margin-bottom; -} - -a { - color: $link-color; - text-decoration: underline; -} - -blockquote { - font-style: italic; -} - -// Buttons - -.btn { - box-sizing: border-box; - width: 100%; - - > tbody > tr > td { - padding-bottom: 15px; - } - - table { - width: 100%; - - td { - background-color: #ffffff; - border-radius: $btn-border-radius; - text-align: center; - } - } - - a { - width: 100%; - background-color: #ffffff; - border: 1px solid $link-color; - border-radius: $btn-border-radius; - box-sizing: border-box; - color: $link-color; - cursor: pointer; - display: inline-block; - font-size: $font-size-base; - font-weight: $btn-font-weight; - margin: 0; - padding: $btn-padding-y $btn-padding-x; - text-decoration: none; - text-transform: uppercase; - } -} - -.btn-primary { - table td { - background-color: $link-color; - } - - a { - background-color: $link-color; - border-color: $link-color; - color: #ffffff; - } -} - -// Other - -.align-center { - text-align: center; -} - -.align-right { - text-align: right; -} - -.align-left { - text-align: left; -} - -.clear { - clear: both; -} - -.mt-0 { - margin-top: 0; -} - -.mb-0 { - margin-bottom: 0; -} - -.preheader { - color: transparent; - display: none; - height: 0; - max-height: 0; - max-width: 0; - opacity: 0; - overflow: hidden; - mso-hide: all; - visibility: hidden; - width: 0; -} - -.powered-by a { - text-decoration: none; -} - -hr { - border: 0; - border-bottom: $hr-border-width solid $hr-border-color; - margin: 20px 0; -} - -// Make this all mobile-friendly - -@media only screen and (max-width: 620px) { - table[class=body] { - h1 { - font-size: $h1-font-size !important; - margin-bottom: $headings-margin-bottom !important; - } - - p, ul, ol, td, span, a { - font-size: $font-size-base !important; - } - - .wrapper, .article { - padding: 10px !important; - } - - .content { - padding: 0 !important; - } - - .container { - padding: 0 !important; - width: 100% !important; - } - - .main { - background: $dark; - color: $white; - border-left-width: 0 !important; - border-radius: 0 !important; - border-right-width: 0 !important; - } - - .img-responsive { - height: auto !important; - max-width: 100% !important; - width: auto !important; - } - } -} - -// Hack for Dark Mode - -@media (prefers-dark-interface) { - .body { - background-color: none; - } - - .main { - background: $white !important; - color: $dark !important; - } -} - -// Hack for Outlook - -@media all { - .ExternalClass { - width: 100%; - - &, p, span, font, td, div { - line-height: 100%; - } - } - - .apple-link a { - color: inherit !important; - font-family: inherit !important; - font-size: inherit !important; - font-weight: inherit !important; - line-height: inherit !important; - text-decoration: none !important; - } - - #MessageViewBody a { - color: inherit; - text-decoration: none; - font-size: inherit; - font-family: inherit; - font-weight: inherit; - line-height: inherit; - } - - .btn-primary { - table td:hover { - background-color: $link-hover-color !important; - } - - a:hover { - background-color: $link-hover-color !important; - border-color: $link-hover-color !important; - } - } -} +/* + Needs to be re-done https://bugzilla.ipfire.org/show_bug.cgi?id=13050 +*/ diff --git a/src/third-party/bulma b/src/third-party/bulma new file mode 160000 index 00000000..538e83f0 --- /dev/null +++ b/src/third-party/bulma @@ -0,0 +1 @@ +Subproject commit 538e83f00190639814a78f904fb00bd170357e03 -- 2.47.3