This just swaps the CSS with some very basic styling.
Signed-off-by: Michael Tremer <michael.tremer@ipfire.org>
/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
-[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
[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
# ------------------------------------------------------------------------------
SCSS_FILES = \
- src/scss/style.scss \
+ src/scss/main.scss \
src/scss/_code-highlighting.scss \
src/scss/_fonts.scss \
src/scss/_icons.scss \
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 \
+++ /dev/null
-Subproject commit 1a6fdfae6be09b09eaced8f0e442ca6f7680a61e
// 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";
$pf-font-path: "fonts";
-$pf-font-size-base: $font-size-base;
+$pf-font-size-base: 1rem;
@import "../payment-font/sass/paymentfont";
-@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
+*/
--- /dev/null
+/*
+ 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
+*/
+++ /dev/null
-@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;
-}
</footer>
{% end block %}
- <script src="{{ static_url("js/jquery-3.3.1.min.js") }}"></script>
- <script src="{{ static_url("js/bootstrap.bundle.min.js") }}"></script>
+ <script src="{{ static_url("js/jquery-3.6.0.min.js") }}"></script>
{% block javascript %}{% end block %}
</body>
</html>
-@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
+*/
--- /dev/null
+Subproject commit 538e83f00190639814a78f904fb00bd170357e03
projects / ipfire.org.git / commitdiff
