Update website with new logo and new look
MODIFY
website/src/css/custom.css
website/src/css/custom.css
/* You can override the default Infima variables here. */
:root {
- --ifm-color-primary: #f7ae2d;
- --ifm-color-primary-dark: #f6a311;
- --ifm-color-primary-darker: #ef9c09;
- --ifm-color-primary-darkest: #c58008;
- --ifm-color-primary-light: #f8b949;
- --ifm-color-primary-lighter: #f9be57;
- --ifm-color-primary-lightest: #facf81;
- --ifm-button-color: #000000;
+
+ --ifm-color-primary: #FFC905;
+ --ifm-color-primary-dark: #F7B604;
+ --ifm-color-primary-darker: #ED9F03;
+ --ifm-color-primary-darkest: #E18403;
+ --ifm-color-primary-light: #FFDC1C;
+ --ifm-color-primary-lighter: #FFF065;
+ --ifm-color-primary-lightest: #FFFCB4;
+
+ --ifm-color-primary-2: #27272A;
+ --ifm-color-primary-2-dark: #222424;
+ --ifm-color-primary-2-darker: #1F2020;
+ --ifm-color-primary-2-darkest: #1C1D1C;
+ --ifm-color-primary-2-light: #2E3031;
+ --ifm-color-primary-2-lighter: #373A39;
+ --ifm-color-primary-2-lightest: #424543;
+
+ --ifm-button-color: var(--ifm-color-primary-2);
+ --ifm-footer-background-color: var(--ifm-color-primary-2);
--ifm-code-font-size: 95%;
}
+html[data-theme='dark'] {
+ --ifm-navbar-background-color: var(--ifm-color-primary-2);
+ --ifm-background-color: var(--ifm-color-primary-2-darkest);
+ --ifm-footer-background-color: var(--ifm-color-primary-2);
+}
+
+/*
+ links inside paragraphs are a little bit darker for better readbility
+ The primary yellow looks better on bold fonts
+ */
+p a {
+ color: var(--ifm-color-primary-dark);
+}
+
+p a:hover {
+ color: var(--ifm-color-primary-darker);
+}
+
+h1, h2, h3, h4, h5, h6 {
+ font-family: 'Libre Baskerville', serif;
+}
+
+html[data-theme='dark'] .navbar {
+ background: var(--ifm-color-primary-2);
+ border-bottom: 1px solid var(--ifm-color-primary-2-darker) !important;
+ box-shadow: none;
+}
+
+.navbar .navbar__brand {
+ align-items: normal;
+ display: inline;
+ font-family: 'Libre Baskerville', serif;
+ font-size: 1.9em;
+}
+
+/* Using !important because docusaurus doesn't have vars to edit the dark/light toggle colors*/
+.react-toggle:active:not(.react-toggle--disabled) .react-toggle-thumb{
+ box-shadow: 0px 0px 0px 3px var(--ifm-color-primary) !important;
+}
+
+.react-toggle--focus .react-toggle-thumb {
+ box-shadow: 0px 0px 0px 2px var(--ifm-color-primary) !important;
+}
+
+[data-theme="dark"] .react-toggle .react-toggle-thumb, .react-toggle--checked .react-toggle-thumb{
+ border-color: var(--ifm-color-primary-2) !important;
+}
+
+.react-toggle-track {
+ background-color: var(--ifm-color-primary-2-lightest) !important;
+ border: 1px solid var(--ifm-color-primary-2-darkest);
+}
+
+.contents .contents__link.contents__link--active{
+ font-weight: bold;
+}
+
+.footer.footer--dark{
+ --ifm-footer-background-color: var(--ifm-color-primary-2);
+ background-color: var(--ifm-color-primary-2);
+ border-top: 1px solid rgba(24,24,24,0.6);
+ background-image: url('/img/pattern-black.png'), linear-gradient(0deg, var(--ifm-color-primary-2), var(--ifm-color-primary-2-darker) 100%);
+ background-size: 15%, 100%;
+}
+
.docusaurus-highlight-code-line {
background-color: rgb(72, 77, 91);
display: block;

MODIFY
website/src/pages/styles.module.css
website/src/pages/styles.module.css
}
.heroBannerBackground {
- background-blend-mode: color;
- background-color: rgba(255, 255, 255, 0.9);
- background-image: url('/img/rome-logo.png');
- background-size: 45%;
- background-repeat: no-repeat;
+ background: rgb(255,255,255);
+ background-image: url('/img/pattern-white.png'), radial-gradient(circle, rgba(255,255,255,1) 0%, rgba(241, 241, 239, 0.7) 100%);
+ background-repeat: repeat;
background-position: center;
+ background-size: 15%, 100%;
}
:global(html[data-theme='dark']) .heroBannerBackground {
- background-color: rgba(0, 0, 0, 0.8);
+ background-color: var(--ifm-color-primary-2);
+ background-image: url('/img/pattern-black.png'), radial-gradient(circle, rgba(39,39,42,1) 0%, rgba(24,24,24,0.5) 100%);
+ background-size: 15%, 100%;
}
.heroBannerTitle {
font-size: 3.5rem;
+ font-family: 'Libre Baskerville', serif;
}
.heroBannerSubtitle {
font-size: 1.5rem;
+ font-family: var(--ifm-font-family-base);
font-weight: var(--ifm-font-weight-semibold);
margin-bottom: var(--ifm-paragraph-margin-bottom);
line-height: var(--ifm-line-height-base);
/* Callout */
.calloutPrimary {
- background-color: #c12127;
+ background-color: var(--ifm-color-primary-darker);
}
.calloutTagline {
.featureTitle {
font-size: 2.5rem;
+ font-family: 'Libre Baskerville', serif;
}
.featureDescription {

MODIFY
website/static/img/favicon.ico
website/static/img/favicon.ico
Binary files a/website/static/img/favicon.ico and b/website/static/img/favicon.ico differ

ADD
website/static/img/pattern-black.png
website/static/img/pattern-black.png
Binary files /dev/null and b/website/static/img/pattern-black.png differ

ADD
website/static/img/pattern-white.png
website/static/img/pattern-white.png
Binary files /dev/null and b/website/static/img/pattern-white.png differ

ADD
website/static/img/rome-logo-black.svg
+<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 360 360"><defs><style>.cls-1{fill:#27272a;}.cls-2{fill:#ffc905;}</style></defs><title>rome-logo-black</title><path class="cls-1" d="M141.35,63.15a9.43,9.43,0,0,1-4.44,12.57c-.3.14-.6.27-.91.38C88.13,93.1,54,137,54,188.57V198H0v-9.43c0-73,47.88-135.3,115.35-160a9.43,9.43,0,0,1,11.76,4.79Z"/><rect class="cls-1" y="216" width="54" height="144"/><path class="cls-1" d="M360,188.57V198H306v-9.43C306,137,271.9,93.11,224,76.1a9.44,9.44,0,0,1-5.76-12c.11-.31.24-.62.38-.92l14.24-29.82a9.43,9.43,0,0,1,11.76-4.79C312.12,53.27,360,115.6,360,188.57Z"/><rect class="cls-1" x="306" y="216" width="54" height="144"/><path class="cls-2" d="M214.26,2.32a9.45,9.45,0,0,1,7.26,13.42l-2.59,5.42-20.06,42a9.48,9.48,0,0,1-9.11,5.35c-3.23-.18-6.49-.27-9.76-.27s-6.53.09-9.76.27a9.48,9.48,0,0,1-9.11-5.35l-20.06-42-2.59-5.42a9.46,9.46,0,0,1,7.26-13.42,254.39,254.39,0,0,1,68.52,0Z"/><path class="cls-2" d="M288,188.57V360H234V188.57c0-28.41-24.18-51.43-54-51.43s-54,23-54,51.43V360H72V188.57c0-56.81,48.36-102.86,108-102.86S288,131.76,288,188.57Z"/></svg>
\ No newline at end of file

ADD
website/static/img/rome-logo-white.svg
+<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 360 360"><defs><style>.cls-1{fill:#fff;}.cls-2{fill:#ffc905;}</style></defs><title>rome-logo-white</title><path class="cls-1" d="M141.35,63.15a9.43,9.43,0,0,1-4.44,12.57c-.3.14-.6.27-.91.38C88.13,93.1,54,137,54,188.57V198H0v-9.43c0-73,47.88-135.3,115.35-160a9.43,9.43,0,0,1,11.76,4.79Z"/><rect class="cls-1" y="216" width="54" height="144"/><path class="cls-1" d="M360,188.57V198H306v-9.43C306,137,271.9,93.11,224,76.1a9.44,9.44,0,0,1-5.76-12c.11-.31.24-.62.38-.92l14.24-29.82a9.43,9.43,0,0,1,11.76-4.79C312.12,53.27,360,115.6,360,188.57Z"/><rect class="cls-1" x="306" y="216" width="54" height="144"/><path class="cls-2" d="M214.26,2.32a9.45,9.45,0,0,1,7.26,13.42l-2.59,5.42-20.06,42a9.48,9.48,0,0,1-9.11,5.35c-3.23-.18-6.49-.27-9.76-.27s-6.53.09-9.76.27a9.48,9.48,0,0,1-9.11-5.35l-20.06-42-2.59-5.42a9.46,9.46,0,0,1,7.26-13.42,254.39,254.39,0,0,1,68.52,0Z"/><path class="cls-2" d="M288,188.57V360H234V188.57c0-28.41-24.18-51.43-54-51.43s-54,23-54,51.43V360H72V188.57c0-56.81,48.36-102.86,108-102.86S288,131.76,288,188.57Z"/></svg>
\ No newline at end of file

DELETE
website/static/img/rome-logo.png
website/static/img/rome-logo.png
Binary files a/website/static/img/rome-logo.png and /dev/null differ

Update website with new logo and new look