Merge pull request #20382 from overleaf/jel-bs5-website-redesign

[web] Begin to migrate `website-redesign.less` to BS5

GitOrigin-RevId: e3cf2162e819f7c137bbc2715dcd9a9fe6d72f3f

services/web/frontend/stylesheets/bootstrap-5/abstracts/mixins.scss

@@ -96,3 +96,7 @@
     @error 'Theme "#{$name}" is not supported. Supported themes are: #{$themes}.';
   }
 }
+
+@mixin focus-style() {
+  box-shadow: 0 0 0 2px var(--blue-30);
+}

services/web/frontend/stylesheets/bootstrap-5/base/links.scss

@@ -18,3 +18,14 @@ a {
     color: var(--link-visited-color);
   }
 }
+
+.link-monospace {
+  @extend .dm-mono;
+
+  font-weight: 500;
+  color: var(--green-50);
+
+  &:hover {
+    color: var(--green-60);
+  }
+}

services/web/frontend/stylesheets/bootstrap-5/components/all.scss

@@ -1,6 +1,7 @@
 @import 'button';
 @import 'button-group';
 @import 'dropdown-menu';
+@import 'image';
 @import 'split-button';
 @import 'notifications';
 @import 'system-messages';
@@ -13,4 +14,5 @@
 @import 'footer';
 @import 'nav';
 @import 'navbar';
+@import 'styled-text';
 @import 'table';

services/web/frontend/stylesheets/bootstrap-5/components/image.scss

@@ -0,0 +1,3 @@
+.img-rounded {
+  border-radius: $border-radius-large;
+}

services/web/frontend/stylesheets/bootstrap-5/components/styled-text.scss

@@ -0,0 +1,48 @@
+.text-with-bg {
+  @extend .dm-mono;
+
+  padding: 0 10px;
+  border-radius: 10px;
+  margin-top: 5px;
+
+  // will make all spans content inline while avoiding overflowing the viewport in mobile
+  // https://developer.mozilla.org/en-US/docs/Web/CSS/display#flow-root
+  // https://css-tricks.com/display-flow-root/
+  display: inline flow-root;
+
+  &.tangerine-bg {
+    background-color: var(--vivid-tangerine);
+  }
+
+  &.purple-bg {
+    background-color: var(--ceil);
+  }
+
+  &.yellow-bg {
+    background-color: var(--caramel);
+  }
+
+  &.green-bg {
+    background-color: var(--green-30);
+  }
+}
+
+.mono-text {
+  @extend .dm-mono;
+  @include body-lg;
+
+  color: var(--green-60);
+  font-weight: 500;
+  margin: 0;
+}
+
+h1,
+h2,
+h3,
+h4,
+h5 {
+  > span.mono-text {
+    display: block;
+    margin-bottom: var(--spacing-04);
+  }
+}

services/web/frontend/stylesheets/bootstrap-5/foundations/colors.scss

@@ -55,6 +55,11 @@ $yellow-50: #8f5514;
 $yellow-60: #7a4304;
 $yellow-70: #633a0b;
 
+/* Website redesign */
+$vivid-tangerine: #f1a695;
+$ceil: #9597c9;
+$caramel: #f9d38f;
+
 /* ====== Semantic Sass color variables ====== */
 $bg-light-primary: $white;
 $bg-light-secondary: $neutral-10;
@@ -165,6 +170,11 @@ $link-ui-visited-dark: $blue-40;
   --yellow-60: #{$yellow-60};
   --yellow-70: #{$yellow-70};
 
+  /* Website redesign */
+  --vivid-tangerine: #{$vivid-tangerine};
+  --ceil: #{$ceil};
+  --caramel: #{$caramel};
+
   /* ====== Semantic CSS color variables ====== */
   --bg-light-primary: var(--white);
   --bg-light-secondary: var(--neutral-10);

services/web/frontend/stylesheets/bootstrap-5/foundations/typography.scss

@@ -99,3 +99,14 @@
   font-size: var(--font-size-01);
   line-height: var(--line-height-01);
 }
+
+.dm-mono {
+  font-family: 'DM Mono', monospace;
+
+  // We're using the "ss05" (stylistic set 5) version of the DM Mono, by setting the `font-feature-settings` rule
+  // https://developer.mozilla.org/en-US/docs/Web/CSS/font-feature-settings
+  // We use the ss05 specifically to remove the "squiggle" below the f letter.
+  // You can try removing the `font-feature-settings` rule and check what happens to the letter "f",
+  // as it's quite hard to describe it with sentences alone
+  font-feature-settings: 'ss05';
+}

services/web/frontend/stylesheets/bootstrap-5/pages/all.scss

@@ -10,3 +10,4 @@
 @import 'editor/loading-screen';
 @import 'editor/outline';
 @import 'editor/file-tree';
+@import 'website-redesign';

services/web/frontend/stylesheets/bootstrap-5/pages/content.scss

@@ -41,6 +41,8 @@
       section
     */
   section {
+    // TODO: static pages look to use --spacing-16 (96px) for total vertical padding
+    // should that be the default going forward?
     padding: var(--spacing-08) var(--spacing-05);
 
     // TODO: confirm if we will still support this and if so what colors to use

services/web/frontend/stylesheets/bootstrap-5/pages/website-redesign.scss

@@ -0,0 +1,36 @@
+// TODO: .website-redesign to be removed once fully rolled out
+
+.website-redesign {
+  // hero section of features, enterprises, and universities will have an image that will overflow the page
+  overflow-x: hidden;
+
+  a {
+    text-decoration: none;
+
+    &:focus,
+    &:focus-visible {
+      outline: 0;
+    }
+
+    &:focus-visible {
+      @include focus-style;
+    }
+
+    // TODO: remove visited?
+
+    i {
+      vertical-align: middle;
+      margin-left: var(--spacing-02);
+    }
+
+    &.link-lg {
+      font-size: var(--font-size-04);
+      line-height: var(--line-height-03);
+
+      i {
+        font-size: 24px;
+        line-height: inherit;
+      }
+    }
+  }
+}