Skip to content

Commit

Permalink
Changed the term "Documentation" to "User guide" in the upper left ar…
Browse files Browse the repository at this point in the history 
…ea of the docs site (IntersectMBO#6200)

* Styling updates to docusaurus site

* Changed the term Documentation to User guide in the upper left corner of the docs site next to the PLUTUS wordmark logo.

* Add .yarn to .gitignore

---------

Co-authored-by: ianhanssoniohk <ian.hansson@iohk.io>
  • Loading branch information
@joseph-fajen @ianhanssoniohk
joseph-fajen and ianhanssoniohk authored Jun 10, 2024
1 parent 8a0dacd commit c8450b5
Show file tree
Hide file tree
Showing 6 changed files with 170 additions and 25 deletions.
1 change: 1 addition & 0 deletions docusaurus/.gitignore
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,3 +18,4 @@
npm-debug.log*
yarn-debug.log*
yarn-error.log*
docusaurus/.yarn/
30 changes: 6 additions & 24 deletions docusaurus/docusaurus.config.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -82,38 +82,20 @@ const config: Config = {
type: "docSidebar",
sidebarId: "tutorialSidebar",
position: "left",
label: "Documentation",
label: "User guide",
},
{
href: "https://github.com/IntersectMBO/plutus",
label: "GitHub",
type: "html",
position: "right",
value:
'<a href="https://github.com/IntersectMBO/plutus" class="github-link" target="_blank"></a>',
},
],
},
footer: {
style: "dark",
links: [
{
title: "Docs",
items: [
{
label: "User Guide",
to: "/",
},
],
},
{
title: "More",
items: [
{
label: "GitHub",
href: "https://github.com/IntersectMBO/plutus",
},
],
},
],
copyright: `Copyright © ${new Date().getFullYear()} IOHK. Built with Docusaurus.`,
links: [],
copyright: `Copyright`,
},
prism: {
theme: prismThemes.github,
Expand Down
124 changes: 123 additions & 1 deletion docusaurus/src/css/custom.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -192,7 +192,7 @@
--ifm-link-hover-color: var(--color-plutus-blue-2);
--ifm-link-hover-decoration: var(--color-plutus-blue-2);
--ifm-menu-color-active: var(--color-plutus-grey-28);
--ifm-navbar-link-hover-color: var(--color-plutus-grey-28);
--ifm-navbar-link-hover-color: #61676f;
--ifm-breadcrumb-color-active: var(--color-plutus-grey-28);

--ifm-navbar-search-input-placeholder-color: var(--color-plutus-grey-24);
Expand All @@ -204,6 +204,8 @@
--ifm-color-secondary-darker: var(--color-plutus-grey-20);
--ifm-color-secondary-lightest: var(--color-plutus-grey-4);
--ifm-color-secondary-darkest: var(--color-plutus-grey-24);

--ifm-navbar-height: 70px;
}

:root:root {
Expand Down Expand Up @@ -248,10 +250,54 @@ html[data-theme="dark"] body {
max-width: 35vw;
}

@media (min-width: 997px) {
.navbar__brand {
margin-right: -0.25rem;
}
.navbar__logo {
border-right: 1px solid #61676f;
padding-right: 17px;
}
}

.navbar__title {
display: none;
}

/* Github link */

.github-link:before {
background: url("data:image/svg+xml;charset=utf-8,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12'/%3E%3C/svg%3E")
no-repeat;
content: "";
display: flex;
height: 24px;
width: 24px;
}

html[data-theme="dark"] .github-link:before {
background: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='white' d='M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12'/%3E%3C/svg%3E")
no-repeat;
}

.footer .github-link:before {
background: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='white' d='M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12'/%3E%3C/svg%3E")
no-repeat;
opacity: 0.75;
height: 30px;
width: 30px;
}

.header-github-link svg {
display: none;
}

/* Mobile menu */

.navbar-sidebar--show div.menu__list-item {
padding: 12px;
}

/* Cards */

.padding--lg {
Expand Down Expand Up @@ -307,3 +353,79 @@ html[data-theme="dark"] .csv-table-overflow-marker::after {
rgba(27, 27, 29, 255)
);
}

/* Footer */

.footer {
background: #193d47;
color: #758b91;
font-size: 0.875rem;
font-weight: 500;
padding: 32px 0;
text-align: center;
}

.footer a {
color: #bac5c8;
font-size: 1rem;
}

.footer-container {
max-width: 1200px;
padding: 0 16px;
margin: 0 auto;
}

.footer-logo {
width: 60px;
margin: 0 auto 12px;
}

.footer-right {
display: flex;
align-items: center;
justify-content: center;
margin-top: 12px;
}
.footer-right > * {
margin-right: 2.5rem;
&:last-child {
margin-right: 0;
}
}

.footer-left {
display: flex;
flex-direction: column;
}

@media (min-width: 997px) {
.footer-logo {
margin-bottom: 0;
}

.footer {
padding: 46px 0;
}

.footer-left {
flex-direction: row;
align-items: center;
}

.footer-left > * {
margin-right: 2.5rem;
&:last-child {
margin-right: 0;
}
}

.footer-right {
margin-top: 0;
}

.footer-container {
display: flex;
justify-content: space-between;
}
}
29 changes: 29 additions & 0 deletions docusaurus/src/theme/Footer/index.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,29 @@
import React from "react";
import useBaseUrl from "@docusaurus/useBaseUrl";

export default function Footer(props) {
return (
<footer className="footer">
<div className="footer-container">
<div className="footer-left">
<img
className="footer-logo"
src={useBaseUrl("/img/logo-footer.svg")}
alt="Plutus"
/>
<span>
Copyright ©{new Date().getFullYear()} IOHK. Built with Docusaurus.
</span>
</div>
<div className="footer-right">
<a href={useBaseUrl("/")}>User Guide</a>
<a
href="https://github.com/IntersectMBO/plutus"
class="github-link"
target="_blank"
></a>
</div>
</div>
</footer>
);
}
3 changes: 3 additions & 0 deletions docusaurus/static/img/github.svg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
8 changes: 8 additions & 0 deletions docusaurus/static/img/logo-footer.svg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.

0 comments on commit c8450b5

Please sign in to comment.