/build-aux
/configure
/config.*
-/src/sass/*.css
+/src/scss/*.css
/src/scripts/ipfire.org
/src/scripts/ipfire.org-webapp
/src/static/favicon.ico
# ------------------------------------------------------------------------------
-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 \
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
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 \
%: %.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 $< > $@
+++ /dev/null
-// 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
+++ /dev/null
-@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;
-$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;
+}
--- /dev/null
+// 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;
-@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;
+ }
+ }
+ }
+}
--- /dev/null
+// 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;
+}
+++ /dev/null
-$baseurl: "https://michael.dev.ipfire.org"
-
-// Use our main font by default
-*
- font-family: Prompt, sans-serif
-
-@import "../../sass/_fonts.sass"
--- /dev/null
+$baseurl: "https://michael.dev.ipfire.org";
+
+// Use our main font by default
+* {
+ font-family: "Prompt, sans-serif";
+}
+
+@use "../../sass/_fonts.sass";
+++ /dev/null
-
-// 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
--- /dev/null
+
+// 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;
+ }
+ }
+ }
+}
projects / ipfire.org.git / commitdiff
