Skip to content

Commit

Permalink
Feature/Docs (#7)
Browse files Browse the repository at this point in the history
* added editor directories and files to .gitignore

* init scss styles struct

* added fonts, colors, mixins of typography

* added navbar design

* added sass-resources-loader

* removed mixins import in global.scss

* added font preload plugin

* add unused css variables

* added footer

* added home-page

* added styles for docs pages

* added styles for inner components

* replaced colors infima vars to dark theme selector

* replaced bem footer elems to in selector of block

---------

Co-authored-by: Yehor Podporinov <[email protected]>
  • Loading branch information
yehor-podporinov and Yehor Podporinov authored Nov 1, 2023
1 parent 38b83e3 commit 7a6bf6c
Show file tree
Hide file tree
Showing 17 changed files with 250 additions and 456 deletions.
7 changes: 0 additions & 7 deletions src/styles/_global.scss
Original file line number Diff line number Diff line change
@@ -1,6 +1,3 @@
@import 'navbar';
@import 'footer';

html {
font-family: var(--app-font-family-main);
overflow: auto !important;
Expand All @@ -10,10 +7,6 @@ html {
min-width: toRem(375);
}

body {
background: var(--background-primary-dark);
}

body,
span,
p,
Expand Down
21 changes: 16 additions & 5 deletions src/styles/_variables.scss
Original file line number Diff line number Diff line change
Expand Up @@ -17,11 +17,7 @@

/* Infima variables */
--ifm-code-font-size: 95%;
--ifm-navbar-background-color: var(--background-primary-main);
--ifm-navbar-height: var(--app-height-header);
--ifm-navbar-link-color: var(--text-primary-light);
--ifm-navbar-link-hover-color: var(--primary-main);
--docusaurus-highlighted-code-line-bg: rgba(0, 0, 0, 0.1);

/* status colors */
--success-light: #{$success-light};
Expand Down Expand Up @@ -103,14 +99,29 @@

/* For readability concerns, you should choose a lighter palette in dark mode. */
html[data-theme='dark'] {
--ifm-navbar-background-color: var(--background-primary-main);
--ifm-navbar-link-color: var(--text-primary-light);
--ifm-navbar-link-hover-color: var(--primary-light);
--ifm-color-primary: var(--primary-main);
--ifm-color-primary-dark: var(--primary-dark);
--ifm-color-primary-darker: var(--primary-dark);
--ifm-color-primary-darkest: var(--primary-dark);
--ifm-font-color-base: var(--text-primary-main);
--ifm-background-color: var(--background-primary-main);
--ifm-button-color: var(--text-primary-invert-main);
--ifm-button-border-radius: var(--border-radius-main);
--ifm-button-padding-vertical: #{toRem(12)};
--ifm-button-padding-horizontal: #{toRem(16)};
--ifm-link-hover-color: var(--primary-dark);
--ifm-link-hover-color: var(--primary-light);
--ifm-hover-overlay: var(--background-primary-light);
--ifm-menu-color: var(--text-primary-main);
--ifm-menu-link-sublist-icon: url('/static/icons/chevron-up.svg') 50% / 2rem 2rem;
--ifm-toc-link-color: var(--text-primary-main);
--ifm-toc-border-color: var(--border-primary-dark);
--ifm-breadcrumb-border-radius: var(--border-radius-main);
--ifm-breadcrumb-separator: url('/static/icons/chevron-right.svg');
--ifm-pagination-nav-border-radius: var(--border-radius-main);
--ifm-table-border-color: var(--border-primary-main);
--ifm-table-stripe-background: var(--background-primary-light);
--docusaurus-highlighted-code-line-bg: rgba(0, 0, 0, 0.1);
}
7 changes: 6 additions & 1 deletion src/styles/app.scss
Original file line number Diff line number Diff line change
@@ -1,7 +1,12 @@
@import '/static/fonts/index.css';

@import 'breadcrumbs';
@import 'button';
@import 'footer';
@import 'menu';
@import 'navbar';
@import 'pagination-nav';
@import 'table-of-contents';

@import 'variables';

@import 'global';
25 changes: 25 additions & 0 deletions src/styles/breadcrumbs.scss
Original file line number Diff line number Diff line change
@@ -0,0 +1,25 @@
.breadcrumbs {
.breadcrumbs__link {
padding: toRem(6) toRem(8);

&:not(span) {
&:not([disabled]):hover {
color: var(--text-primary-main);
}

&:not([disabled]):focus,
&:not([disabled]):active {
color: var(--ifm-breadcrumb-color-active);
background: var(--ifm-breadcrumb-item-background-active);
}
}

span {
color: inherit;
transition: inherit;
font: inherit;
}

@include p-12-light;
}
}
32 changes: 31 additions & 1 deletion src/styles/button.scss
Original file line number Diff line number Diff line change
Expand Up @@ -2,14 +2,44 @@
&--primary {
&:focus,
&:active {
background: var(--primary-dark);
color: var(--primary-light);
}
}

&--link {
&:focus,
&:active {
color: var(--primary-light);
text-decoration: underline;
color: var(--primary-dark);
}
}

@include p-14-semi-bold;
}

button[class*=backToTopButton] {
background-color: var(--background-primary-light);

&:hover {
background-color: var(--background-primary-light);

&:after {
background-color: var(--primary-light);
}
}

&:focus,
&:active {
&:after {
background-color: var(--primary-main);
}
}

&:after {
transition: inherit;
background-color: var(--text-primary-main);
-webkit-mask: var(--ifm-menu-link-sublist-icon);
mask: var(--ifm-menu-link-sublist-icon);
}
}
66 changes: 33 additions & 33 deletions src/styles/footer.scss
Original file line number Diff line number Diff line change
Expand Up @@ -2,44 +2,44 @@
background: var(--background-primary-main);
box-shadow: 0 toRem(-1) var(--background-primary-light);
padding: 0;
}

.footer__links {
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 0;
height: toRem(70);
}

span.footer__link-item {
padding: 0;
}

.footer__link-item {
text-decoration: none;
outline: none;
color: var(--text-primary-main);
padding: toRem(12) toRem(16);

&:hover,
&:focus,
&:active {
text-decoration: none;
.footer__links {
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 0;
height: toRem(70);
}

&:not([disabled]):hover {
color: var(--primary-main);
span.footer__link-item {
padding: 0;
}

&:not([disabled]):focus,
&:not([disabled]):active {
color: var(--primary-light);
.footer__link-item {
text-decoration: none;
outline: none;
color: var(--text-primary-main);
padding: toRem(12) toRem(16);

&:hover,
&:focus,
&:active {
text-decoration: none;
}

&:not([disabled]):hover {
color: var(--primary-light);
}

&:not([disabled]):focus,
&:not([disabled]):active {
color: var(--primary-main);
}

@include p-14-semi-bold;
}

@include p-14-semi-bold;
}

.footer__link-separator {
display: none;
.footer__link-separator {
display: none;
}
}
34 changes: 34 additions & 0 deletions src/styles/menu.scss
Original file line number Diff line number Diff line change
@@ -0,0 +1,34 @@
.menu {
.menu__link {
padding: toRem(12) toRem(16);
border-radius: var(--border-radius-main);

&:not([disabled]):focus,
&:not([disabled]):active {
color: var(--ifm-menu-color-active);
}

&:after {
-webkit-mask: var(--ifm-menu-link-sublist-icon);
mask: var(--ifm-menu-link-sublist-icon);
background: currentColor;
filter: none;
}

@include p-14-semi-bold;
}

.menu__list {
margin-top: toRem(8);
}

.menu__list-item-collapsible {
border-radius: var(--border-radius-main);
}

.menu__list-item {
&:not(:first-child) {
margin-top: toRem(8);
}
}
}
65 changes: 37 additions & 28 deletions src/styles/navbar.scss
Original file line number Diff line number Diff line change
@@ -1,44 +1,53 @@
.navbar {
padding: 0 var(--app-padding-left) 0 var(--app-padding-right);
box-shadow: 0 toRem(1) var(--background-primary-light);
}

.navbar__toggle {
@include respond-to(medium) {
display: inherit;
.navbar__toggle {
@include respond-to(medium) {
display: inherit;
}
}
}

.navbar__brand {
margin-left: toRem(-8);
}
.navbar__brand {
margin-left: toRem(-8);

.navbar__logo {
margin-right: 0;
}
transition: var(--ifm-transition-fast) var(--ifm-transition-timing-default);

.navbar__title {
@include h3;
&:not([disabled]):focus,
&:not([disabled]):active {
color: var(--primary-main);
}
}

font-size: toRem(20);
}
.navbar__logo {
margin-right: 0;
}

.navbar__items {
&--right {
margin-right: toRem(-12);
.navbar__title {
@include h3;

font-size: toRem(20);
}

.navbar__items {
&--right {
margin-right: toRem(-12);
}
}
}

.navbar__link {
font-family: var(--app-font-family-secondary);
font-weight: 400;
padding: toRem(12) toRem(16);
.navbar__link {
font-family: var(--app-font-family-secondary);
font-weight: 400;
padding: toRem(12) toRem(16);

&:not([disabled]):active {
color: var(--primary-light);
&--active,
&:not([disabled]):focus,
&:not([disabled]):active {
color: var(--primary-main);
}
}
}

[class^="searchBox"] {
display: none;
[class^="searchBox"] {
display: none;
}
}
34 changes: 34 additions & 0 deletions src/styles/pagination-nav.scss
Original file line number Diff line number Diff line change
@@ -0,0 +1,34 @@
.pagination-nav {
.pagination-nav__sublabel,
.pagination-nav__label {
color: var(--text-primary-main);

@include p-14-semi-bold;
}

.pagination-nav__link {
border: toRem(1) solid var(--border-primary-dark);
transition-property: background-color, border-color;

&:hover {
background: var(--background-primary-dark);
border-color: var(--primary-light);

.pagination-nav__sublabel,
.pagination-nav__label {
color: var(--primary-light);
}
}

&:not([disabled]):focus,
&:not([disabled]):active {
background: var(--background-primary-dark);
border-color: var(--primary-main);

.pagination-nav__sublabel,
.pagination-nav__label {
color: var(--primary-main);
}
}
}
}
14 changes: 14 additions & 0 deletions src/styles/table-of-contents.scss
Original file line number Diff line number Diff line change
@@ -0,0 +1,14 @@
.table-of-contents {
.table-of-contents__link {
&:not(.table-of-contents__link--active):hover {
color: var(--primary-light);
}

&:not([disabled]):focus,
&:not([disabled]):active {
color: var(--primary-main);
}

@include p-14-semi-bold;
}
}
Loading

0 comments on commit 7a6bf6c

Please sign in to comment.