From 819909fd49cd143431ab6bab5f84299b2824dcec Mon Sep 17 00:00:00 2001 From: Michael Tremer Date: Sun, 24 Mar 2024 10:17:17 +0000 Subject: [PATCH] CSS: Convert all SASS to SCSS This should not introduce any functional changes, as this just changes the filenames and syntax of the SASS files to SCSS. Signed-off-by: Michael Tremer --- .gitignore | 2 +- Makefile.am | 34 +- src/sass/_variables.sass | 73 ---- src/sass/main.sass | 65 ---- .../_code-highlighting.scss} | 0 src/{sass/_fonts.sass => scss/_fonts.scss} | 80 +++-- src/{sass/_icons.sass => scss/_icons.scss} | 0 src/scss/_variables.scss | 73 ++++ src/{sass/listing.sass => scss/listing.scss} | 30 +- src/scss/main.scss | 70 ++++ src/templates/messages/fonts.sass | 7 - src/templates/messages/fonts.scss | 8 + src/templates/messages/main.sass | 267 --------------- src/templates/messages/main.scss | 316 ++++++++++++++++++ 14 files changed, 546 insertions(+), 479 deletions(-) delete mode 100644 src/sass/_variables.sass delete mode 100644 src/sass/main.sass rename src/{sass/_code-highlighting.sass => scss/_code-highlighting.scss} (100%) rename src/{sass/_fonts.sass => scss/_fonts.scss} (56%) rename src/{sass/_icons.sass => scss/_icons.scss} (100%) create mode 100644 src/scss/_variables.scss rename src/{sass/listing.sass => scss/listing.scss} (58%) create mode 100644 src/scss/main.scss delete mode 100644 src/templates/messages/fonts.sass create mode 100644 src/templates/messages/fonts.scss delete mode 100644 src/templates/messages/main.sass create mode 100644 src/templates/messages/main.scss diff --git a/.gitignore b/.gitignore index 6868503f..611d4b0b 100644 --- a/.gitignore +++ b/.gitignore @@ -4,7 +4,7 @@ /build-aux /configure /config.* -/src/sass/*.css +/src/scss/*.css /src/scripts/ipfire.org /src/scripts/ipfire.org-webapp /src/static/favicon.ico diff --git a/Makefile.am b/Makefile.am index 6b4eed95..180baec4 100644 --- a/Makefile.am +++ b/Makefile.am @@ -372,17 +372,17 @@ templates_wiki_messagesdir = $(templates_wikidir)/messages # ------------------------------------------------------------------------------ -SASS_FILES = \ - src/sass/main.sass \ - src/sass/_code-highlighting.sass \ - src/sass/_fonts.sass \ - src/sass/_icons.sass \ - src/sass/_variables.sass +SCSS_FILES = \ + src/scss/main.scss \ + src/scss/_code-highlighting.scss \ + src/scss/_fonts.scss \ + src/scss/_icons.scss \ + src/scss/_variables.scss EXTRA_DIST += \ - src/sass/listing.sass \ - src/templates/messages/fonts.sass \ - src/templates/messages/main.sass + src/scss/listing.scss \ + src/templates/messages/fonts.scss \ + src/templates/messages/main.scss CLEANFILES += \ src/templates/messages/fonts.css \ @@ -391,15 +391,15 @@ CLEANFILES += \ static_DATA = \ src/static/favicon.ico \ src/static/robots.txt \ - src/sass/listing.css \ - src/sass/main.css + src/scss/listing.css \ + src/scss/main.css CLEANFILES += \ - src/sass/listing.css \ - src/sass/main.css + src/scss/listing.css \ + src/scss/main.css EXTRA_DIST += \ - $(SASS_FILES) + $(SCSS_FILES) staticdir = $(datadir)/static @@ -1105,7 +1105,7 @@ EXTRA_DIST += \ src/error-pages/Gemfile.lock \ src/error-pages/_config.yml \ src/error-pages/_layouts/error.html \ - src/error-pages/assets/main.sass \ + src/error-pages/assets/main.scss \ src/error-pages/500.markdown \ src/error-pages/502.markdown \ src/error-pages/503.markdown \ @@ -1166,11 +1166,11 @@ SED_PROCESS = \ %: %.in Makefile $(SED_PROCESS) -%.css: %.sass Makefile +%.css: %.scss Makefile $(AM_V_GEN)$(MKDIR_P) $(dir $@) && \ $(SASS) --style compressed $< > $@ -src/sass/main.css: $(SASS_FILES) Makefile +src/scss/main.css: $(SCSS_FILES) Makefile $(AM_V_GEN)$(MKDIR_P) $(dir $@) && \ $(SASS) --style compressed $< > $@ diff --git a/src/sass/_variables.sass b/src/sass/_variables.sass deleted file mode 100644 index 533cbf9c..00000000 --- a/src/sass/_variables.sass +++ /dev/null @@ -1,73 +0,0 @@ -// Import some basic variables from Bulma -@import "../third-party/bulma/sass/utilities/initial-variables.sass" - -// Global Settings -$family-sans-serif: Prompt, sans-serif - -$size-1: 3rem -$size-2: 2.5rem -$size-3: 2rem -$size-4: 1.5rem -$size-5: 1.25rem -$size-6: 1rem -$size-7: 0.75rem - -// Make titles slightly larger -$title-size: $size-2 - -// Colour Palette -$primary: #ff2e52 -$primary-invert: #ffffff -$secondary: #46ffc0 -$secondary-invert: #000000 -$success: #1ae210 -$success-invert: #ffffff -$danger: #ac001a -$warning: #f3ff50 - -// Pride Colours -$pride-red: #e40303 -$pride-orange: #ff8c00 -$pride-yellow: #ffed00 -$pride-green: #008026 -$pride-blue: #24408e -$pride-purple: #732982 - -// Custom Colours -$lwl: #6534C8 - -$custom-colors: ("secondary" : ($secondary, $secondary-invert), "lwl" : ($lwl, $white), "pride-red" : ($pride-red, $white), "pride-orange" : ($pride-orange, $black), "pride-yellow" : ($pride-yellow, $black), "pride-green" : ($pride-green, $white), "pride-blue" : ($pride-blue, $white), "pride-purple" : ($pride-purple, $white)) - -// Use the primary colour for links -$link: $primary - -// Use black for titles -$title-color: $grey-darker - -// Use dark grey for text -$text: $grey-darker - -// Use the primary color for code -$code: $primary - -@import "../third-party/bulma/sass/utilities/derived-variables.sass" - -// Notifications -$notification-padding: 1.25rem 1.5rem -$notification-padding-ltr: $notification-padding -$notification-padding-rtl: $notification-padding - -// Breadcrumbs -$breadcrumb-item-color: $primary -$breadcrumb-item-hover-color: $primary-dark -$breadcrumb-item-active-color: $primary - -// section -$section-padding: 3rem 1.5rem -$section-padding-desktop: 3rem 0.5rem - -// Footer -$footer-padding: 3rem 1.5rem 3rem - -// Images -$dimensions: 16 24 32 48 64 96 128 192 256 512 diff --git a/src/sass/main.sass b/src/sass/main.sass deleted file mode 100644 index ffcef4c5..00000000 --- a/src/sass/main.sass +++ /dev/null @@ -1,65 +0,0 @@ -@charset "utf-8" - -// Import variables -@import "_variables.sass" - -// Import Bulma -@import "../third-party/bulma/sass/utilities/_all.sass" -@import "../third-party/bulma/sass/base/_all.sass" -@import "../third-party/bulma/sass/components/_all.sass" -@import "../third-party/bulma/sass/elements/_all.sass" -@import "../third-party/bulma/sass/form/_all.sass" -@import "../third-party/bulma/sass/grid/_all.sass" -@import "../third-party/bulma/sass/helpers/_all.sass" -@import "../third-party/bulma/sass/layout/_all.sass" - -// Import fonts -@import "_fonts" - -// Import icons -@import "_icons" - -// Import Code Highlighting -@import "_code-highlighting" - -// Custom CSS - -html, body - min-height: 100vh; - -#hero-index - position: relative - video - width: 100%; - height: 100%; - position: absolute; - object-fit: cover; - z-index: 0; - -.footer - a - color: $grey - &:hover - color: $black - -.modal - &.is-large - .modal-content - +from($modal-breakpoint) - width: $widescreen - max-height: 100% - -// The PDF Viewer -.pdf-viewer - width: 100% - min-height: 40rem - -// Used to wrap text on buttons -.wrap-text - height: max-content; - white-space: inherit; - -.map - width: 100%; - height: 100%; - min-height: 24rem; diff --git a/src/sass/_code-highlighting.sass b/src/scss/_code-highlighting.scss similarity index 100% rename from src/sass/_code-highlighting.sass rename to src/scss/_code-highlighting.scss diff --git a/src/sass/_fonts.sass b/src/scss/_fonts.scss similarity index 56% rename from src/sass/_fonts.sass rename to src/scss/_fonts.scss index a7dc361d..e5e9e639 100644 --- a/src/sass/_fonts.sass +++ b/src/scss/_fonts.scss @@ -1,49 +1,55 @@ -$fonts-baseurl: "/static/fonts" !default +$fonts-baseurl: "/static/fonts" !default; /* latin-ext */ -@font-face - font-family: "Prompt" - font-style: normal - font-weight: 400 - src: local("Prompt Regular"), local("Prompt-Regular"), url(#{$fonts-baseurl}/Prompt-Regular.woff2) format("woff2"), url(#{$fonts-baseurl}/Prompt-Regular.ttf) format("truetype") - unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF +@font-face { + font-family: "Prompt"; + font-style: normal; + font-weight: 400; + src: local("Prompt Regular"), local("Prompt-Regular"), url(#{$fonts-baseurl}/Prompt-Regular.woff2) format("woff2"), url(#{$fonts-baseurl}/Prompt-Regular.ttf) format("truetype"); + unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF; +} /* latin */ -@font-face - font-family: "Prompt" - font-style: normal - font-weight: 400 - src: local("Prompt Regular"), local("Prompt-Regular"), url(#{$fonts-baseurl}/Prompt-Regular.woff2) format("woff2"), url(#{$fonts-baseurl}/Prompt-Regular.ttf) format("truetype") - unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD +@font-face { + font-family: "Prompt"; + font-style: normal; + font-weight: 400; + src: local("Prompt Regular"), local("Prompt-Regular"), url(#{$fonts-baseurl}/Prompt-Regular.woff2) format("woff2"), url(#{$fonts-baseurl}/Prompt-Regular.ttf) format("truetype"); + unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; +} /* latin-ext */ -@font-face - font-family: 'Prompt' - font-style: normal - font-weight: 500 - src: local('Prompt Medium'), local('Prompt-Medium'), url(#{$fonts-baseurl}/Prompt-Medium.woff2) format("woff2"), url(#{$fonts-baseurl}/Prompt-Medium.ttf) format("truetype") - unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF +@font-face { + font-family: 'Prompt'; + font-style: normal; + font-weight: 500; + src: local('Prompt Medium'), local('Prompt-Medium'), url(#{$fonts-baseurl}/Prompt-Medium.woff2) format("woff2"), url(#{$fonts-baseurl}/Prompt-Medium.ttf) format("truetype"); + unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF; +} /* latin */ -@font-face - font-family: 'Prompt' - font-style: normal - font-weight: 500 - src: local('Prompt Medium'), local('Prompt-Medium'), url(#{$fonts-baseurl}/Prompt-Medium.woff2) format("woff2"), url(#{$fonts-baseurl}/Prompt-Medium.ttf) format("truetype") - unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD +@font-face { + font-family: 'Prompt'; + font-style: normal; + font-weight: 500; + src: local('Prompt Medium'), local('Prompt-Medium'), url(#{$fonts-baseurl}/Prompt-Medium.woff2) format("woff2"), url(#{$fonts-baseurl}/Prompt-Medium.ttf) format("truetype"); + unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; +} /* latin-ext */ -@font-face - font-family: "Prompt" - font-style: normal - font-weight: 700 - src: local("Prompt Bold"), local("Prompt-Bold"), url(#{$fonts-baseurl}/Prompt-Bold.woff2) format("woff2"), url(#{$fonts-baseurl}/Prompt-Bold.ttf) format("truetype") - unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF +@font-face { + font-family: "Prompt"; + font-style: normal; + font-weight: 700; + src: local("Prompt Bold"), local("Prompt-Bold"), url(#{$fonts-baseurl}/Prompt-Bold.woff2) format("woff2"), url(#{$fonts-baseurl}/Prompt-Bold.ttf) format("truetype"); + unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF; +} /* latin */ -@font-face - font-family: "Prompt" - font-style: normal - font-weight: 700 - src: local("Prompt Bold"), local("Prompt-Bold"), url(#{$fonts-baseurl}/Prompt-Bold.woff2) format("woff2"), url(#{$fonts-baseurl}/Prompt-Bold.ttf) format("truetype") - unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD +@font-face { + font-family: "Prompt"; + font-style: normal; + font-weight: 700; + src: local("Prompt Bold"), local("Prompt-Bold"), url(#{$fonts-baseurl}/Prompt-Bold.woff2) format("woff2"), url(#{$fonts-baseurl}/Prompt-Bold.ttf) format("truetype"); + unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; +} diff --git a/src/sass/_icons.sass b/src/scss/_icons.scss similarity index 100% rename from src/sass/_icons.sass rename to src/scss/_icons.scss diff --git a/src/scss/_variables.scss b/src/scss/_variables.scss new file mode 100644 index 00000000..b7019ebe --- /dev/null +++ b/src/scss/_variables.scss @@ -0,0 +1,73 @@ +// Import some basic variables from Bulma +@use "../third-party/bulma/sass/utilities/initial-variables"; + +// Global Settings +$family-sans-serif: "Prompt, sans-serif"; + +$size-1: 3rem; +$size-2: 2.5rem; +$size-3: 2rem; +$size-4: 1.5rem; +$size-5: 1.25rem; +$size-6: 1rem; +$size-7: 0.75rem; + +// Make titles slightly larger +$title-size: $size-2; + +// Colour Palette +$primary: #ff2e52; +$primary-invert: #ffffff; +$secondary: #46ffc0; +$secondary-invert: #000000; +$success: #1ae210; +$success-invert: #ffffff; +$danger: #ac001a; +$warning: #f3ff50; + +// Pride Colours +$pride-red: #e40303; +$pride-orange: #ff8c00; +$pride-yellow: #ffed00; +$pride-green: #008026; +$pride-blue: #24408e; +$pride-purple: #732982; + +// Custom Colours +$lwl: #6534C8; + +$custom-colors: ("secondary" : ($secondary, $secondary-invert), "lwl" : ($lwl, $white), "pride-red" : ($pride-red, $white), "pride-orange" : ($pride-orange, $black), "pride-yellow" : ($pride-yellow, $black), "pride-green" : ($pride-green, $white), "pride-blue" : ($pride-blue, $white), "pride-purple" : ($pride-purple, $white)); + +// Use the primary colour for links +$link: $primary; + +// Use black for titles +$title-color: $grey-darker; + +// Use dark grey for text +$text: $grey-darker; + +// Use the primary color for code +$code: $primary; + +@use "../third-party/bulma/sass/utilities/derived-variables"; + +// Notifications +$notification-padding: 1.25rem 1.5rem; +$notification-padding-ltr: $notification-padding; +$notification-padding-rtl: $notification-padding; + +// Breadcrumbs +$breadcrumb-item-color: $primary; +$breadcrumb-item-hover-color: $primary-dark; +$breadcrumb-item-active-color: $primary; + +// section +$section-padding: 3rem 1.5rem; +$section-padding-desktop: 3rem 0.5rem; + +// Footer +$footer-padding: 3rem 1.5rem 3rem; + +// Images +$dimensions: 16 24 32 48 64 96 128 192 256 512; diff --git a/src/sass/listing.sass b/src/scss/listing.scss similarity index 58% rename from src/sass/listing.sass rename to src/scss/listing.scss index 67ec60ba..6e9d6904 100644 --- a/src/sass/listing.sass +++ b/src/scss/listing.scss @@ -1,23 +1,29 @@ -@import "main.sass" +@use "main.sass"; // Make the body stretch over the entire screen -body - @extend .container +body { + @extend .container; // Add some space around the content padding: 3rem 1rem; +} -h1 - @extend .title, .is-3 +h1 { + @extend .title, .is-3; +} // Make all tables .table by default -table +table { @extend .table, .is-fullwidth, .is-bordered, .is-striped, .is-hoverable +} // Fix to show the bottom line of the table -table - tr - &:last-child - td, - th - border-bottom-width: 1px !important +table { + tr { + &:last-child { + td, th { + border-bottom-width: 1px !important; + } + } + } +} diff --git a/src/scss/main.scss b/src/scss/main.scss new file mode 100644 index 00000000..3cb28584 --- /dev/null +++ b/src/scss/main.scss @@ -0,0 +1,70 @@ +// Import variables +@use "_variables"; + +// Import Bulma +@use "../third-party/bulma/sass"; + +// Import fonts +@use "_fonts"; + +// Import icons +@use "_icons"; + +// Import Code Highlighting +@use "_code-highlighting"; + +// Custom CSS + +html, body { + min-height: 100vh; +} + +#hero-index { + position: relative; + video { + width: 100%; + height: 100%; + position: absolute; + object-fit: cover; + z-index: 0; + } +} + +.footer { + a { + color: $grey; + + &:hover { + color: $black; + } + } +} + +.modal { + &.is-large { + .modal-content { + +from($modal-breakpoint) { + width: $widescreen; + max-height: 100%; + } + } + } +} + +// The PDF Viewer +.pdf-viewer { + width: 100%; + min-height: 40rem; +} + +// Used to wrap text on buttons +.wrap-text { + height: max-content; + white-space: inherit; +} + +.map { + width: 100%; + height: 100%; + min-height: 24rem; +} diff --git a/src/templates/messages/fonts.sass b/src/templates/messages/fonts.sass deleted file mode 100644 index 368d054f..00000000 --- a/src/templates/messages/fonts.sass +++ /dev/null @@ -1,7 +0,0 @@ -$baseurl: "https://michael.dev.ipfire.org" - -// Use our main font by default -* - font-family: Prompt, sans-serif - -@import "../../sass/_fonts.sass" diff --git a/src/templates/messages/fonts.scss b/src/templates/messages/fonts.scss new file mode 100644 index 00000000..f0ea74e0 --- /dev/null +++ b/src/templates/messages/fonts.scss @@ -0,0 +1,8 @@ +$baseurl: "https://michael.dev.ipfire.org"; + +// Use our main font by default +* { + font-family: "Prompt, sans-serif"; +} + +@use "../../sass/_fonts.sass"; diff --git a/src/templates/messages/main.sass b/src/templates/messages/main.sass deleted file mode 100644 index bc0830ed..00000000 --- a/src/templates/messages/main.sass +++ /dev/null @@ -1,267 +0,0 @@ - -// Fonts -$font-family: Prompt, sans-serif - -$font-weight-normal: 500 -$font-weight-bold: 700 - -// Container -$container-width: 600px - -// A unit to use for padding -$pad: 20px - -// Borders -$border-radius: 4px - -// Colours -$black: hsl(0, 0%, 4%) -$white: hsl(0, 0%, 100%) -$grey: hsl(0, 0%, 97%) -$light: hsl(0, 0%, 80%) - -$primary: #ff2e52 -$primary-inverted: $white - -// Background Colours -$bg-light: $white -$bg-dark: $grey - -// Text Colour -$text: $black -$link: $primary - -// Font sizes -$font-size-small: 12px -$font-size-normal: 16px -$font-size-large: 20px - -$line-height-small: 16px -$line-height-normal: 22px -$line-height-large: 28px - -// Headings -$title-1: 30px -$line-height-title-1: 40px - -// Remove spaces around the email design added by some email clients -html, body - margin: 0 auto !important - padding: 0 !important - height: 100% !important - width: 100% !important - -// Stop email clients resizing small text -* - -ms-text-size-adjust: 100% - -webkit-text-size-adjust: 100% - -// Centers email on Android 4.4 -div[style*="margin: 16px 0"] - margin: 0 !important - -// forces Samsung Android mail clients to use the entire viewport -#MessageViewBody, #MessageWebViewDiv - width: 100% !important - -// Stop Outlook from adding extra spacing to tables -table, td - mso-table-lspace: 0pt !important - mso-table-rspace: 0pt !important - -// Fix a webkit padding issue -table - border-spacing: 0 !important - border-collapse: collapse !important - table-layout: fixed !important - margin: 0 auto !important - -// Use a better rendering method when resizing images in IE -img - -ms-interpolation-mode: bicubic - -// Prevent Windows 10 Mail from underlining links despite inline CSS -a - text-decoration: none - -// A work-around for email clients meddling in triggered links -a[x-apple-data-detectors], .unstyle-auto-detected-links a, .aBn - border-bottom: 0 !important - cursor: default !important - color: inherit !important - text-decoration: none !important - font-size: inherit !important - font-family: inherit !important - font-weight: inherit !important - line-height: inherit !important - -// Prevent Gmail from displaying a download button on large, non-linked images -.a6S - display: none !important - opacity: 0.01 !important - -// Prevent Gmail from changing the text color in conversation threads. -.im - color: inherit !important - -// If the above doesn't work, add a .g-img class to any image in question. -img.g-img + div - display: none !important - -// Set font -* - font-family: $font-family - font-weight: $font-weight-normal - -body - mso-line-height-rule: exactly - -// Links -a - color: $link - - &:hover - text-decoration: underline - -// Center all content -center - width: 100% - -// Visually Hidden Pre-header Text -.pre-header - max-height: 0 - overflow: hidden - mso-hide: all - -// Some whitespace -.whitespace - display: none - font-size: 1px - line-height: 1px - max-height: 0px - max-width: 0px - opacity: 0 - overflow: hidden - mso-hide: all - -// The main container -.container - max-width: $container-width - margin: 0 auto - - // Improve readability on small screens - @media screen and (max-width: 600px) - p - font-size: 17px !important; - -// Make tables fill the entire viewport horizontally -table - width: 100% - margin: auto - - // The header box - tr.header - td - padding: $pad 0 - text-align: center - - h1 - margin: 0 0 10px 0 - font-size: 50px - line-height: 60px - font-weight: $font-weight-bold - - span - color: $primary - font-weight: i$font-weight-bold - - // The hero unit - tr.hero - td - img - display: block - border: 0 - width: 100% - max-width: $container-width - height: auto - background: $grey - margin: auto - - // Content (i.e. the big box) - tr.content - td - background-color: $bg-dark - color: $text - - @media (prefers-color-scheme: dark) - background-color: $bg-light - - table - // One block in the box - tr.section - td - padding: $pad - font-size: $font-size-normal - line-height: $line-height-normal - - // Headings - h1 - margin: 0 0 10px 0 - font-size: $title-1 - line-height: $line-height-title-1 - - // Text - p - padding: 8px 0 - margin: 0 - - &:last-child - padding: 0 - - // Links - a - color: $link - - &:hover - text-decoration: underline - - // Buttons - tr.button - td - a - display: block - border: 1px solid $primary - border-radius: $border-radius - text-align: center - font-size: $font-size-large - font-weight: $font-weight-bold - line-height: $line-height-large - text-decoration: none - padding: 16px 20px - color: $white - - &.primary - background-color: $primary - color: $primary-inverted - - &:hover - background-color: $primary-inverted - color: $primary - - // Change the padding on the last element - //tr:last-child - // td - // padding: 0 $pad - - // Footer - tr.footer - td - padding: $pad - font-size: $font-size-small - line-height: $line-height-small - color: $light - text-align: center - - // Make links grey, too - a - color: inherit diff --git a/src/templates/messages/main.scss b/src/templates/messages/main.scss new file mode 100644 index 00000000..717b945e --- /dev/null +++ b/src/templates/messages/main.scss @@ -0,0 +1,316 @@ + +// Fonts +$font-family: Prompt, sans-serif; + +$font-weight-normal: 500; +$font-weight-bold: 700; + +// Container +$container-width: 600px; + +// A unit to use for padding +$pad: 20px; + +// Borders +$border-radius: 4px; + +// Colours +$black: hsl(0, 0%, 4%); +$white: hsl(0, 0%, 100%); +$grey: hsl(0, 0%, 97%); +$light: hsl(0, 0%, 80%); + +$primary: #ff2e52; +$primary-inverted: $white; + +// Background Colours +$bg-light: $white; +$bg-dark: $grey; + +// Text Colour +$text: $black; +$link: $primary; + +// Font sizes +$font-size-small: 12px; +$font-size-normal: 16px; +$font-size-large: 20px; + +$line-height-small: 16px; +$line-height-normal: 22px; +$line-height-large: 28px; + +// Headings +$title-1: 30px; +$line-height-title-1: 40px; + +// Remove spaces around the email design added by some email clients +html, body { + margin: 0 auto !important; + padding: 0 !important; + height: 100% !important; + width: 100% !important; +} + +// Stop email clients resizing small text +* { + -ms-text-size-adjust: 100%; + -webkit-text-size-adjust: 100%; +} + +// Centers email on Android 4.4 +div[style*="margin: 16px 0"] { + margin: 0 !important; +} + +// forces Samsung Android mail clients to use the entire viewport +#MessageViewBody, #MessageWebViewDiv { + width: 100% !important; +} + +// Stop Outlook from adding extra spacing to tables +table, td { + mso-table-lspace: 0pt !important; + mso-table-rspace: 0pt !important; +} + +// Fix a webkit padding issue +table { + border-spacing: 0 !important; + border-collapse: collapse !important; + table-layout: fixed !important; + margin: 0 auto !important; +} + +// Use a better rendering method when resizing images in IE +img { + -ms-interpolation-mode: bicubic; +} + +// Prevent Windows 10 Mail from underlining links despite inline CSS +a { + text-decoration: none; +} + +// A work-around for email clients meddling in triggered links +a[x-apple-data-detectors], .unstyle-auto-detected-links a, .aBn { + border-bottom: 0 !important; + cursor: default !important; + color: inherit !important; + text-decoration: none !important; + font-size: inherit !important; + font-family: inherit !important; + font-weight: inherit !important; + line-height: inherit !important; +} + +// Prevent Gmail from displaying a download button on large, non-linked images +.a6S { + display: none !important; + opacity: 0.01 !important; +} + +// Prevent Gmail from changing the text color in conversation threads. +.im { + color: inherit !important; +} + +// If the above doesn't work, add a .g-img class to any image in question. +img.g-img + div { + display: none !important; +} + +// Set font +* { + font-family: $font-family; + font-weight: $font-weight-normal; +} + +body { + mso-line-height-rule: exactly; +} + +// Links +a { + color: $link; + + &:hover { + text-decoration: underline; + } +} + +// Center all content +center { + width: 100%; +} + +// Visually Hidden Pre-header Text +.pre-header { + max-height: 0; + overflow: hidden; + mso-hide: all; +} + +// Some whitespace +.whitespace { + display: none; + font-size: 1px; + line-height: 1px; + max-height: 0px; + max-width: 0px; + opacity: 0; + overflow: hidden; + mso-hide: all; +} + +// The main container +.container { + max-width: $container-width; + margin: 0 auto; + + // Improve readability on small screens + @media screen and (max-width: 600px) { + p { + font-size: 17px !important; + } + } +} + +// Make tables fill the entire viewport horizontally +table { + width: 100%; + margin: auto; + + // The header box + tr.header { + td { + padding: $pad 0; + text-align: center; + + h1 { + margin: 0 0 10px 0; + font-size: 50px; + line-height: 60px; + font-weight: $font-weight-bold; + + span { + color: $primary; + font-weight: i$font-weight-bold; + } + } + } + } + + // The hero unit + tr.hero { + td { + img { + display: block; + border: 0; + width: 100%; + max-width: $container-width; + height: auto; + background: $grey; + margin: auto; + } + } + } + + // Content (i.e. the big box) + tr.content { + td { + background-color: $bg-dark; + color: $text; + + @media (prefers-color-scheme: dark) { + background-color: $bg-light + } + + table { + // One block in the box + tr.section { + td { + padding: $pad; + font-size: $font-size-normal; + line-height: $line-height-normal; + + // Headings + h1 { + margin: 0 0 10px 0; + font-size: $title-1; + line-height: $line-height-title-1; + } + + // Text + p { + padding: 8px 0; + margin: 0; + + &:last-child { + padding: 0; + } + } + + // Links + a { + color: $link; + + &:hover { + text-decoration: underline; + } + } + } + } + + // Buttons + tr.button { + td { + a { + display: block; + border: 1px solid $primary; + border-radius: $border-radius; + text-align: center; + font-size: $font-size-large; + font-weight: $font-weight-bold; + line-height: $line-height-large; + text-decoration: none; + padding: 16px 20px; + color: $white; + + &.primary { + background-color: $primary; + color: $primary-inverted; + + &:hover { + background-color: $primary-inverted; + color: $primary; + } + } + } + } + } + + // Change the padding on the last element + //tr:last-child + // td + // padding: 0 $pad + } + } + } + + // Footer + tr.footer { + td { + padding: $pad; + font-size: $font-size-small; + line-height: $line-height-small; + color: $light; + text-align: center; + + // Make links grey, too + a { + color: inherit; + } + } + } +} -- 2.47.3