diff options
Diffstat (limited to 'themes/twentynineteen/sass/variables-site')
6 files changed, 160 insertions, 0 deletions
diff --git a/themes/twentynineteen/sass/variables-site/_colors.scss b/themes/twentynineteen/sass/variables-site/_colors.scss new file mode 100644 index 00000000..989daa0c --- /dev/null +++ b/themes/twentynineteen/sass/variables-site/_colors.scss @@ -0,0 +1,34 @@ + +// Backgrounds +$color__background-body: #fff; +$color__background-input: #fff; +$color__background-screen: #f1f1f1; +$color__background-hr: #ccc; +$color__background-button: #0073aa; +$color__background-button-hover: #111; +$color__background-pre: #eee; +$color__background-ins: #fff9c0; +$color__background_selection: mix( $color__background-body, $color__background-button, 75% ); // lighten( salmon, 22.5% ); // lighten( #0999d4, 48% ); + +// Text +$color__text-main: #111; +$color__text-light: #767676; +$color__text-hover: lighten( #111, 22.5% ); +$color__text-screen: #21759b; +$color__text-input: #666; +$color__text-input-focus: #111; + +// Links +$color__link: #0073aa; +$color__link-visited: #0073aa; +$color__link-hover: darken( $color__link, 10% ); + +// Borders +$color__border: #ccc; +$color__border-link: #0073aa; +$color__border-link-hover: darken( $color__link, 10% ); +$color__border-button: #ccc #ccc #bbb; +$color__border-button-hover: #ccc #bbb #aaa; +$color__border-button-focus: #aaa #bbb #bbb; +$color__border-input: $color__border; +$color__border-abbr: #666; diff --git a/themes/twentynineteen/sass/variables-site/_columns.scss b/themes/twentynineteen/sass/variables-site/_columns.scss new file mode 100644 index 00000000..6bd29bcc --- /dev/null +++ b/themes/twentynineteen/sass/variables-site/_columns.scss @@ -0,0 +1,16 @@ +$columns: ( + 1: calc(1 * (100vw / 12)), + 2: calc(2 * (100vw / 12)), + 3: calc(3 * (100vw / 12)), + 4: calc(4 * (100vw / 12)), + 5: calc(5 * (100vw / 12)), + 6: calc(6 * (100vw / 12)), + 7: calc(7 * (100vw / 12)), + 8: calc(8 * (100vw / 12)), + 9: calc(9 * (100vw / 12)), + 10: calc(10 * (100vw / 12)), + 11: calc(11 * (100vw / 12)), + 12: calc(12 * (100vw / 12)) +); + +$columns__margin: $size__spacing-unit; diff --git a/themes/twentynineteen/sass/variables-site/_fonts.scss b/themes/twentynineteen/sass/variables-site/_fonts.scss new file mode 100644 index 00000000..1003f4e3 --- /dev/null +++ b/themes/twentynineteen/sass/variables-site/_fonts.scss @@ -0,0 +1,83 @@ +/* + * Chrome renders extra-wide characters for the Hoefler Text font. + * This results in a jumping cursor when typing in both the Classic and block + * editors. The following font-face override fixes the issue by manually inserting + * a custom font that includes just a Hoefler Text space replacement for that + * character instead. + */ +@font-face { + font-family: 'NonBreakingSpaceOverride'; + src: url(data:application/font-woff2;charset=utf-8;base64,d09GMgABAAAAAAMoAA0AAAAACDQAAALTAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAP0ZGVE0cGh4GYACCahEICjx3CywAATYCJANUBCAFhiEHgWwbXQfILgpsY+rQRRARwyAs6uL7pxzYhxEE+32b3aeHmifR6tklkS9hiZA0ewkqGRJE+H7/+6378ASViK/PGeavqJyOzsceKi1s3BCiQsiOdn1r/RBgIJYEgCUhbm/8/8/h4saPssnTNkkiWUBrTRtjmQSajw3Ui3pZ3LYDPD+XG2C3JA/yKAS8/rU5eNfuGqRf4eNNgV4YAlIIgxglEkWe6FYpq10+wi3g+/nUgvgPFczNrz/RsTgVm/zfbPuHZlsuQECxuyqBcQwKFBjFgKO8AqP4bAN9tFJtnM9xPcbNjeXS/x1wY/xU52f5W/X1+9cnH4YwKIaoRRAkUkj/YlAAeF/624foiIDBgBmgQBeGAyhBljUPZUm/l2dTvmpqcBDUOHdbPZWd8JsBAsGr4w8/EDn82/bUPx4eh0YNrQTBuHO2FjQEAGBwK0DeI37DpQVqdERS4gZBhpeUhWCfLFz7J99aEBgsJCHvUGAdAPp4IADDCAPCEFMGpMZ9AQpTfQtQGhLbGVBZFV8BaqNyP68oTZgHNj3M8kBPfXTTC9t90UuzYhy9ciH0grVlOcqyCytisvbsERsEYztiznR0WCrmTksJwbSNK6fd1Rvr25I9oLvctUoEbNOmXJbqgYgPXEHJ82IUsrCnpkxh23F1rfZ2zcRnJYoXtauB3VTFkFXQg3uoZYD5qE0kdjDtoDoF1h2bulGmev5HbYhbrjtohQSRI4aNOkffIcT+d3v6atpaYh3JvPoQsztCcqvaBkppDSPcQ3bw3KaCBo1f5CJWTZEgW3LjLofYg51MaVezrx8xZitYbQ9KYeoRaqQdVLwSEfrKXLK1otCWOKNdR/YwYAfon5Yk8O2MJfSD10dPGA5PIJJQMkah0ugMJiv6x4Dm7LEa8xnrRGGGLAg4sAlbsA07sAt76DOsXKO3hIjtIlpnnFrt1qW4kh6NhS83P/6HB/fl1SMAAA==) format('woff2'), + url(data:application/font-woff;charset=utf-8;base64,d09GRgABAAAAAAUQAA0AAAAACDQAAQAAAAAAAAAAAAAAAAAAAAAAAAAAAABGRlRNAAAE9AAAABwAAAAchf5yU0dERUYAAATYAAAAHAAAAB4AJwAbT1MvMgAAAaAAAABJAAAAYJAcgU5jbWFwAAACIAAAAF4AAAFqUUxBZ2dhc3AAAATQAAAACAAAAAgAAAAQZ2x5ZgAAApAAAAAyAAAAPL0n8y9oZWFkAAABMAAAADAAAAA2Fi93Z2hoZWEAAAFgAAAAHQAAACQOSgWaaG10eAAAAewAAAAzAAAAVC7TAQBsb2NhAAACgAAAABAAAAAsAOQBAm1heHAAAAGAAAAAHQAAACAAWQALbmFtZQAAAsQAAAF6AAADIYvD/Adwb3N0AAAEQAAAAI4AAADsapk2o3jaY2BkYGAA4ov5mwzj+W2+MnCzXwCKMNzgCBSB0LfbQDQ7AxuI4mBgAlEAFKQIRHjaY2BkYGD3+NvCwMDBAALsDAyMDKhAFAA3+wH3AAAAeNpjYGRgYBBl4GBgYgABEMnIABJzAPMZAAVmAGUAAAB42mNgZlJhnMDAysDCKsKygYGBYRqEZtrDYMT4D8gHSmEHjgUFOQwODAqqf9g9/rYwMLB7MNUAhRlBcsxBrMlASoGBEQAj8QtyAAAAeNrjYGBkAAGmWQwMjO8gmBnIZ2NA0ExAzNjAAFYJVn0ASBsD6VAIDZb7AtELAgANIgb9AHjaY2BgYGaAYBkGRgYQSAHyGMF8FgYPIM3HwMHAxMDGoMCwQIFLQV8hXvXP//9AcRCfAcb///h/ygPW+w/vb7olBjUHCTCyMcAFGZmABBO6AogThgZgIUsXAEDcEzcAAHjaY2BgECMCyoEgACZaAed42mNgYmRgYGBnYGNgYAZSDJqMgorCgoqCjECRXwwNrCAKSP5mAAFGBiRgyAAAi/YFBQAAeNqtkc1OwkAUhU/5M25cEhcsZick0AwlBJq6MWwgJkAgYV/KAA2lJeUn+hY+gktXvpKv4dLTMqKycGHsTZNv7px7z50ZAFd4hYHjdw1Ls4EiHjVncIFnzVnc4F1zDkWjrzmPW+NNcwGlzIRKI3fJlUyrEjZQxb3mDH2fNGfRx4vmHKqG0JzHg6E0F9DOlFBGBxUI1GEzLNT4S0aLuTtsGAEUuYcQHkyg3KmIum1bNUvKlrjbbAIleqHHnS4iSudpQcySMYtdFiXlAxzSbAwfMxK6kZoHKhbjjespMTioOPZnzI+4ucCeTVyKMVKLfeAS6vSWaTinuZwzyy/Dc7vaed+6KaV0kukdPUk6yOcctZPvvxxqksq2lEW8RvHjMEO2FCl/zy6p3NEm0R9OFSafJdldc4QVeyaaObMBO0/5cCaa6d9Ggyubxire+lEojscdjoWUR1xGOy8KD8mG2ZLO2l2paDc3A39qmU2z2W5YNv5+u79e6QfGJY/hAAB42m3NywrCMBQE0DupWp/1AYI7/6DEaLQu66Mrd35BKUWKJSlFv1+rue4cGM7shgR981qSon+ZNwUJ8iDgoYU2OvDRRQ99DDDECAHGmGCKmf80hZSx/Kik/LliFbtmN6xmt+yOjdg9GztV4tROnRwX/Bsaaw51nt4Lc7tWaZYHp/MlzKx51LZs5htNri+2AAAAAQAB//8AD3jaY2BkYGDgAWIxIGZiYARCESBmAfMYAAR6AEMAAAABAAAAANXtRbgAAAAA2AhRFAAAAADYCNuG) format('woff'); + +} + +// Font and typographic variables + +$font__body: "NonBreakingSpaceOverride", "Hoefler Text", "Baskerville Old Face", Garamond, "Times New Roman", serif; +$font__heading: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif; +$font__fallbacks: ( + /* Arabic */ + ar: 'Tahoma, Arial, sans-serif', + ary: 'Tahoma, Arial, sans-serif', + azb: 'Tahoma, Arial, sans-serif', + ckb: 'Tahoma, Arial, sans-serif', + fa-IR: 'Tahoma, Arial, sans-serif', + haz: 'Tahoma, Arial, sans-serif', + ps: 'Tahoma, Arial, sans-serif', + /* Cyrillic */ + be: '"Helvetica Neue", Helvetica, "Segoe UI", Arial, sans-serif', + bg-BG: '"Helvetica Neue", Helvetica, "Segoe UI", Arial, sans-serif', + kk: '"Helvetica Neue", Helvetica, "Segoe UI", Arial, sans-serif', + mk-MK: '"Helvetica Neue", Helvetica, "Segoe UI", Arial, sans-serif', + mn: '"Helvetica Neue", Helvetica, "Segoe UI", Arial, sans-serif', + ru-RU: '"Helvetica Neue", Helvetica, "Segoe UI", Arial, sans-serif', + sah: '"Helvetica Neue", Helvetica, "Segoe UI", Arial, sans-serif', + sr-RS: '"Helvetica Neue", Helvetica, "Segoe UI", Arial, sans-serif', + tt-RU: '"Helvetica Neue", Helvetica, "Segoe UI", Arial, sans-serif', + uk: '"Helvetica Neue", Helvetica, "Segoe UI", Arial, sans-serif', + /* Chinese (Hong Kong) */ + zh-HK: '-apple-system, BlinkMacSystemFont, "PingFang HK", "Helvetica Neue", "Microsoft YaHei New", STHeiti Light, sans-serif', + /* Chinese (Taiwan) */ + zh-TW: '-apple-system, BlinkMacSystemFont, "PingFang TC", "Helvetica Neue", "Microsoft YaHei New", STHeiti Light, sans-serif', + /* Chinese (China) */ + zh-CN: '-apple-system, BlinkMacSystemFont, "PingFang SC", "Helvetica Neue", "Microsoft YaHei New", STHeiti Light, sans-serif', + /* Devanagari */ + bn-BD: 'Arial, sans-serif', + hi-IN: 'Arial, sans-serif', + mr: 'Arial, sans-serif', + ne-NP: 'Arial, sans-serif', + /* Greek */ + el: '"Helvetica Neue", Helvetica, Arial, sans-serif', + /* Gujarati */ + gu: 'Arial, sans-serif', + /* Hebrew */ + he-IL: '"Arial Hebrew", Arial, sans-serif', + /* Japanese */ + ja: '-apple-system, BlinkMacSystemFont, "Hiragino Sans", Meiryo, "Helvetica Neue", sans-serif', + /* Korean */ + ko-KR: '"Apple SD Gothic Neo", "Malgun Gothic", "Nanum Gothic", Dotum, sans-serif', + /* Thai */ + th: '"Sukhumvit Set", "Helvetica Neue", helvetica, arial, sans-serif', + /* Vietnamese */ + vi: '"Libre Franklin", sans-serif', +); +$font__code: Menlo, monaco, Consolas, Lucida Console, monospace; +$font__pre: "Courier 10 Pitch", Courier, monospace; + +$font__size_base: 22px; +$font__size-ratio: 1.125; + +$font__size-xxs: 1em / (1.5 * $font__size-ratio); +$font__size-xs: 1em / (1.25 * $font__size-ratio); +$font__size-sm: 1em / (1 * $font__size-ratio); +$font__size-md: 1em * (1 * $font__size-ratio); +$font__size-lg: 1em * (1.5 * $font__size-ratio); +$font__size-xl: 1em * (2 * $font__size-ratio); +$font__size-xxl: 1em * (2.5 * $font__size-ratio); +$font__size-xxxl: 1em * (3 * $font__size-ratio); + +$font__line-height-body: 1.8; +$font__line-height-pre: 1.6; +$font__line-height-heading: 1.2; +$font__line-height-double: 2 * $font__line-height-heading;
\ No newline at end of file diff --git a/themes/twentynineteen/sass/variables-site/_structure.scss b/themes/twentynineteen/sass/variables-site/_structure.scss new file mode 100644 index 00000000..dc62145b --- /dev/null +++ b/themes/twentynineteen/sass/variables-site/_structure.scss @@ -0,0 +1,16 @@ +// Responsive widths. + +$size__spacing-unit: 1rem; +$size__site-main: 100%; +$size__site-sidebar: 25%; +$size__site-margins: calc(10% + 60px); +$size__site-tablet-content: calc(8 * (100vw / 12) - 28px); +$size__site-desktop-content: calc(6 * (100vw / 12) - 28px); + +// Responsive widths. + +$mobile_width: 600px; +$tablet_width: 768px; +$desktop_width: 1168px; +$wide_width: 1379px; + diff --git a/themes/twentynineteen/sass/variables-site/_transitions.scss b/themes/twentynineteen/sass/variables-site/_transitions.scss new file mode 100644 index 00000000..f0eebbd2 --- /dev/null +++ b/themes/twentynineteen/sass/variables-site/_transitions.scss @@ -0,0 +1,6 @@ +// Transition timeouts. + +$link_transition: 110ms; +$icon_transition: 120ms; +$button_transition: 150ms; +$background_transition: 200ms;
\ No newline at end of file diff --git a/themes/twentynineteen/sass/variables-site/_variables-site.scss b/themes/twentynineteen/sass/variables-site/_variables-site.scss new file mode 100644 index 00000000..9d527f9f --- /dev/null +++ b/themes/twentynineteen/sass/variables-site/_variables-site.scss @@ -0,0 +1,5 @@ +@import "colors"; +@import "fonts"; +@import "structure"; +@import "columns"; +@import "transitions"; |