mirror of
https://github.com/overleaf/overleaf.git
synced 2024-11-21 20:47:08 -05:00
Merge pull request #20382 from overleaf/jel-bs5-website-redesign
[web] Begin to migrate `website-redesign.less` to BS5 GitOrigin-RevId: e3cf2162e819f7c137bbc2715dcd9a9fe6d72f3f
This commit is contained in:
Jessica Lawshe
Copybot
parent
0d1c9ce79d
commit
3b839dc885
10 changed files with 128 additions and 0 deletions
|
|
@ -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);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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';
|
||||
|
|
|
|||
|
|
@ -0,0 +1,3 @@
|
|||
.img-rounded {
|
||||
border-radius: $border-radius-large;
|
||||
}
|
||||
|
|
@ -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);
|
||||
}
|
||||
}
|
||||
|
|
@ -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);
|
||||
|
|
|
|||
|
|
@ -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';
|
||||
}
|
||||
|
|
|
|||
|
|
@ -10,3 +10,4 @@
|
|||
@import 'editor/loading-screen';
|
||||
@import 'editor/outline';
|
||||
@import 'editor/file-tree';
|
||||
@import 'website-redesign';
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
Loading…
Reference in a new issue