diff --git a/services/web/app/src/infrastructure/ExpressLocals.js b/services/web/app/src/infrastructure/ExpressLocals.js index 27db546836..84cda0d349 100644 --- a/services/web/app/src/infrastructure/ExpressLocals.js +++ b/services/web/app/src/infrastructure/ExpressLocals.js @@ -197,6 +197,11 @@ module.exports = function (webRouter, privateApiRouter, publicApiRouter) { } res.locals.buildCssPath = function (themeModifier = '') { + if ( + res.locals.splitTestVariants?.['design-system-updates'] === 'enabled' + ) { + themeModifier = `main-${themeModifier}` + } return res.locals.buildStylesheetPath(`${themeModifier}style.css`) } diff --git a/services/web/app/src/router.js b/services/web/app/src/router.js index ce683b5a17..13918e9cce 100644 --- a/services/web/app/src/router.js +++ b/services/web/app/src/router.js @@ -79,7 +79,10 @@ function initialize(webRouter, privateApiRouter, publicApiRouter) { webRouter.get( '*', expressify( - SplitTestMiddleware.loadAssignmentsInLocals(['unified-navigation']) + SplitTestMiddleware.loadAssignmentsInLocals([ + 'unified-navigation', + 'design-system-updates', + ]) ) ) diff --git a/services/web/frontend/stylesheets/main-ieee-style.less b/services/web/frontend/stylesheets/main-ieee-style.less new file mode 100644 index 0000000000..a191e8a560 --- /dev/null +++ b/services/web/frontend/stylesheets/main-ieee-style.less @@ -0,0 +1,43 @@ +@import 'style.less'; +@import 'core/ol-ieee-variables.less'; + +@is-overleaf-light: false; +@show-rich-text: true; + +@ieee-wedge: 30px; + +body > .portal-ieee { + padding-top: @header-height; +} + +.portal-ieee { + .ieee-header { + background-color: @ieee-blue; + margin-bottom: @margin-xl; + padding-bottom: @padding-sm; + padding-top: @padding-sm; + h1 { + margin: 0; + } + .ieee-logo { + width: @navbar-brand-width; + } + } + .ieee-subheader { + background-color: @ieee-blue; + color: #ffffff; + line-height: 1; + padding: @padding-md @ieee-wedge; + position: relative; + &:after { + content: ''; + display: block; + position: absolute; + border-style: solid; + left: -1px; + top: -1px; + border-color: @content-alt-bg-color transparent; + border-width: @ieee-wedge @ieee-wedge 0 0; + } + } +} diff --git a/services/web/frontend/stylesheets/main-light-style.less b/services/web/frontend/stylesheets/main-light-style.less new file mode 100644 index 0000000000..afb2e4cd24 --- /dev/null +++ b/services/web/frontend/stylesheets/main-light-style.less @@ -0,0 +1,5 @@ +@import 'style.less'; +@import 'core/ol-light-variables.less'; + +@is-overleaf-light: true; +@show-rich-text: true; diff --git a/services/web/frontend/stylesheets/main-style.less b/services/web/frontend/stylesheets/main-style.less new file mode 100644 index 0000000000..344fc67c7f --- /dev/null +++ b/services/web/frontend/stylesheets/main-style.less @@ -0,0 +1,28 @@ +@import (less) '../fonts/lato.css'; +@import (less) '../fonts/merriweather.css'; +@import (less) '../fonts/source-code-pro.css'; +@import (less) '../fonts/stix-two-math.css'; + +@is-overleaf-light: false; +@show-rich-text: true; + +// Core variables and mixins +@import 'core/variables.less'; +@import 'core/css-variables.less'; +@import 'app/ol-style-guide.less'; +@import '_style_includes.less'; +@import '_ol_style_includes.less'; +@import 'components/embed-responsive.less'; +@import 'components/icons.less'; +@import 'components/images.less'; +@import 'components/navs-ol.less'; +@import 'components/pagination.less'; +@import 'components/tabs.less'; + +// Pages +@import 'app/about.less'; +@import 'app/blog-posts.less'; +@import 'app/cms-page.less'; +@import 'app/content_page.less'; +@import 'app/plans-ol.less'; +@import 'app/portals.less'; diff --git a/services/web/webpack.config.js b/services/web/webpack.config.js index a4d3f87592..2fcd9c4de0 100644 --- a/services/web/webpack.config.js +++ b/services/web/webpack.config.js @@ -19,6 +19,9 @@ const entryPoints = { style: './frontend/stylesheets/style.less', 'ieee-style': './frontend/stylesheets/ieee-style.less', 'light-style': './frontend/stylesheets/light-style.less', + 'main-style': './frontend/stylesheets/main-style.less', + 'main-ieee-style': './frontend/stylesheets/main-ieee-style.less', + 'main-light-style': './frontend/stylesheets/main-light-style.less', } // Add entrypoints for each "page"