Remove dead styles
DELETE
website/docs/src/styles/_homepage.scss
-@import "_variables";
-@import "_mixins";
-
-@keyframes homepage-hero-fade-out {
- 0% {
- opacity: 1;
- line-height: 86px;
- }
-
- 100% {
- opacity: 0;
- line-height: 100px;
- }
-}
-
-@keyframes homepage-hero-fade-in {
- 0% {
- opacity: 0;
- line-height: 100px;
- }
-
- 100% {
- opacity: 1;
- line-height: 86px;
- }
-}
-
-.homepage {
- text-align: center;
- width: 100%;
-
- .h1, h1, h2 {
- font-weight: 700;
- margin-bottom: 40px;
- padding: 0 20px;
- }
-
- .h1, h1 {
- font-size: 96px;
- line-height: 100%;
- margin-top: 60px;
-
- @include small-screen-only {
- font-size: 72px;
- }
-
- @include mobile-only {
- font-size: 64px;
- }
-
- @include dark-mode {
- color: #fff;
- }
-
- li {
- line-height: 86px;
- opacity: 1;
- }
-
- ul {
- height: 86px;
- }
-
- .fadeout {
- animation: homepage-hero-fade-out 0.3s ease-out;
- }
-
- .fadein {
- animation: homepage-hero-fade-in 0.3s ease-in;
- }
-
- .formatter {
- color: #f4c649;
- }
-
- .linter {
- color: #51DBE4;
- }
- }
-
- h2 {
- font-size: 48px;
- line-height: 140%;
-
- @include mobile-only {
- font-size: 42px;
- }
- }
-
- .founder-clout {
- line-height: 30px;
- margin-top: 20px;
- margin-bottom: 40px;
-
- svg {
- vertical-align: middle;
- }
-
- .yarn svg {
- height: 26px;
- margin: 0 4px;
- }
-
- .babel svg {
- height: 30px;
- }
-
- .meet-our-team {
- opacity: 0.6;
- }
- }
-
- hr {
- opacity: 0.1;
- border: none;
- border-top: 1px solid #0C0C0D;
- max-width: 800px;
- margin: 40px auto;
-
- @include dark-mode {
- border-color: #fff;
- opacity: 0.2;
- }
-
- &.half {
- margin-top: 20px;
- }
-
- &.full {
- max-width: 100%;
- }
- }
-
- a.button {
- margin-bottom: 40px;
- }
-
- p {
- line-height: 150%;
- font-size: 16px;
- }
-
- section > p {
- padding: 0 20px;
- }
-
- ul.supported-languages {
- margin-top: 50px;
- font-size: 12px;
- display: flex;
- flex-direction: row;
- justify-content: center;
- flex-wrap: wrap;
-
- li {
- display: inline-block;
- margin: 0 26px;
- margin-bottom: 20px;
-
- &.soon {
- color: #ADB5BD;
- }
- }
-
- .icon {
- display: flex;
- align-items: center;
- justify-content: center;
- height: 30px;
- margin-bottom: 30px;
- }
-
- .soon-indicator {
- margin: 0 auto;
- margin-top: 6px;
- }
- }
-
- .soon-indicator {
- display: inline-block;
- color: #0C0C0D;
- background: #F1F3F5;
- border-radius: 20px;
- padding: 1px 6px;
- font-size: 12px;
- line-height: 14px;
-
- @include dark-mode {
- background: $gray-4;
- color: #F1F3F5;
- }
- }
-
- .component-list {
- display: flex;
- flex-direction: row;
- justify-content: center;
- margin-bottom: 20px;
-
- li {
- margin: 0 20px;
- padding: 10px 0;
- line-height: 140%;
-
- &.active {
- border-bottom: 1px solid var(--font-color);
- }
-
- &:not(.soon) {
- cursor: pointer;
- }
- }
-
- .text {
- display: inline-block;
- margin-right: 4px;
- }
-
- .soon {
- color: #ADB5BD;
-
- @include mobile-only {
- display: none;
- }
- }
- }
-
- .features {
- display: flex;
- flex-wrap: wrap;
- margin-top: 20px;
-
- li {
- text-align: left;
- width: 50%;
- margin-bottom: 80px;
- font-size: 16px;
- line-height: 140%;
- padding-left: 56px;
- position: relative;
- padding-right: 48px;
- }
-
- svg {
- position: absolute;
- left: 0;
- top: 0;
- width: 24px;
- height: 24px;
- }
-
- h3 {
- font-weight: 500;
- font-size: 20px;
- margin-bottom: 12px;
- }
-
- @include mobile-only {
- margin-left: 30px;
-
- li {
- width: 100%;
- }
- }
- }
-
- .supercharge .heading-tagline {
- margin: 0 auto;
- margin-bottom: 30px;
- max-width: 600px;
- }
-
- .try-rome {
- background: #F8F9FA;
- border-radius: 16px;
- font-size: 16px;
- line-height: 140%;
- text-align: left;
- padding: 70px 90px;
- position: relative;
- overflow: hidden;
-
- @include dark-mode {
- background-color: var(--container-color);
- }
-
- h2 {
- font-weight: 700;
- font-size: 48px;
- margin-bottom: 20px;
- padding: 0;
- }
-
- p {
- margin-bottom: 40px;
- max-width: 400px;
- padding: 0;
- }
-
- .button {
- width: auto;
- }
-
- a {
- text-decoration: none;
- }
-
- .vscode-button.button {
- margin-bottom: 20px;
- }
-
- .install-button {
- margin-bottom: 30px;
- }
-
- .window {
- position: absolute;
- background-color: #FFFFFF;
- box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.04), 0px 10px 50px rgba(17, 17, 17, 0.1);
- border-radius: 12px;
- width: 485px;
- height: 410px;
- border: 1px solid #D4D4D4;
-
- @include dark-mode {
- background-color: #282c34;
- border-color: #222;
- }
- }
-
- .console-window {
- right: 135px;
- bottom: -69px;
- padding: 30px;
- font-family: $code-font;
- font-size: 14px;
-
- .shell-symbol {
- color: #ADB5BD;
- }
-
- .rome {
- color: #E67700;
- }
-
- .command {
- margin-bottom: 20px;
- }
- }
-
- .vscode-window {
- right: -145px;
- bottom: -19px;
- background-image: url("/img/homepage-vscode-screenshot-light.png");
- background-size: 215%;
- background-repeat: no-repeat;
-
- @include dark-mode {
- background-image: url("/img/homepage-vscode-screenshot-dark.png");
- }
- }
-
- @media only screen and (max-width: 1120px) {
- padding: 40px;
- padding-bottom: 200px;
- border-radius: 0;
- margin: 0 -20px;
- }
-
- @media only screen and (max-width: 960px) {
- padding-bottom: 400px;
-
- .console-window {
- border-radius: 0;
- left: 0;
- right: auto;
- }
-
- .vscode-window {
- left: 300px;
- right: auto;
- }
- }
- }
-
- .component-window {
- display: flex;
- flex-direction: row;
- text-align: left;
- line-height: 150%;
-
- overflow: hidden;
- background: #FFFFFF;
- width: 100%;
- height: 480px;
- margin-bottom: 65px;
- box-shadow: 0px 0px 0px 0.5px rgba(0, 0, 0, 0.1), 0px 4px 20px rgba(0, 0, 0, 0.04), 0px 10px 50px rgba(17, 17, 17, 0.1);
-
- border-radius: 16px;
- border: 1px solid #D4D4D4;
-
- @include mobile-only {
- border-radius: 0;
- flex-direction: column;
- border-left: none;
- border-right: none;
- height: auto;
- margin-bottom: 30px;
- margin-left: -20px;
- margin-right: -20px;
-
- pre.language-js {
- height: 200px;
- }
-
- .code, .output {
- border-right: none;
- border-bottom: 1px solid #E9ECEF;
- }
- }
-
- @include dark-mode {
- background: darken(#282c34, 5%);
- border-color: #222;
- }
-
- pre {
- padding: 0;
- background: none;
- font-size: 12px;
- overflow: auto;
- height: 100%;
- }
-
- .code, .output, .performance {
- width: 100%;
- min-width: 100px;
- padding: 22px 24px;
- flex-basis: 0px;
- flex-grow: 1;
- display: flex;
- flex-direction: column;
- }
-
- .code, .output {
- border-right: 1px solid #E9ECEF;
-
- @include dark-mode {
- border-color: var(--soft-border-color);
- }
- }
-
- code {
- color: #666;
-
- @include dark-mode {
- color: rgb(171, 178, 191);
- }
- }
-
- h4 {
- text-transform: uppercase;
- margin-bottom: 16px;
- font-family: $code-font;
- font-weight: 500;
- font-size: 12px;
- }
-
- .code h4 {
- color: #F03E3E;
- }
-
- .output h4 {
- color: #4263EB;
- }
-
- .performance {
- background: #F8F9FA;
- font-family: $code-font;
-
- @include dark-mode {
- background-color: var(--container-color);
- }
-
- @include mobile-only {
- padding-bottom: 40px;
- }
-
- h4 {
- color: #868E96;
- margin-bottom: 40px;
- }
-
- .progress {
- margin-bottom: 50px;
- height: 18px;
- width: 100%;
- background-color: #E9ECEF;
- flex-shrink: 0;
-
- @include dark-mode {
- background-color: rgba(255, 255, 255, 0.2);
- }
-
- .progress-bar {
- height: 100%;
- }
- }
-
- .spreader {
- height: 100%;
- }
-
- .multiplier {
- font-size: 36px;
- margin-bottom: 10px;
-
- @include mobile-only {
- margin-top: 0;
- }
- }
-
- .progress-header {
- color: #868E96;
- margin-bottom: 12px;
- }
-
- .tool-name {
- color: #0C0C0D;
-
- @include dark-mode {
- color: #fff;
- }
- }
-
- .progress-bar-good {
- background-color: #40C057;
- }
-
- .progress-bar-bad {
- background-color: #F03E3E;
-
- &.transition {
- transition: homepage-prettier-progress 9.8s linear;
- transition-property: width;
- }
- }
-
- .timer-running {
- opacity: 0.6;
- }
-
- .time-bad-timer::after {
- color: inherit;
- content: " / ";
- color: #868e96;
- }
-
- .time-good {
- color: #40C057;
- }
-
- .time-bad {
- color: #F03E3E;
- }
-
- @include dark-mode {
- .progress-bar-good {
- background-color: saturate(#40C057, 10%);
- }
-
- .progress-bar-bad {
- background-color: saturate(#F03E3E, 10%);
- }
-
- .time-good {
- color: saturate(#40C057, 10%);
- }
-
- .time-bad {
- color: saturate(#F03E3E, 10%);
- }
- }
- }
- }
-
- .component-window-linter {
- .code {
- min-width: 350px;
- flex-grow: 0;
- }
-
- .output {
- flex-grow: 1;
- border-right: none;
- }
- }
-}

MODIFY
website/docs/src/styles/index.scss
website/docs/src/styles/index.scss
@import "_prism";
@import "_grid";
@import "_content";
-@import "_homepage";
@import "_footer";
@import "_credits";
@import "_buttons";

Remove dead styles