Skip to content

Commit c6229b3

Browse files
lgkonlinelgkonline
committed
"Finished" docs page
1 parent efd6b4f commit c6229b3

File tree

6 files changed

+69
-18
lines changed

6 files changed

+69
-18
lines changed

‎docs/index.html‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -43,6 +43,7 @@
4343
<meta name="msapplication-TileImage" content="/ms-icon-144x144.png">
4444
<meta name="theme-color" content="#ffffff">
4545

46+
<link rel="stylesheet" href="https://lib.lgkonline.com/lgk-icons/style.min.css">
4647
<link rel="stylesheet" href="https://lib.lgkonline.com/pill-menu/style.min.css">
4748
<link id="css-embed" rel="stylesheet" href="public/main.css">
4849
</head>

‎docs/public/dark.css‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -7153,3 +7153,9 @@ a.text-dark:hover, a.text-dark:focus {
71537153
.docs-first-section {
71547154
background-image: linear-gradient(rgba(255, 255, 255, 0.03), rgba(255, 255, 255, 0.05)); }
71557155

7156+
#lgk-link {
7157+
color: #fba161;
7158+
transition: color .15s ease-in-out; }
7159+
#lgk-link:hover {
7160+
color: #fcb37f; }
7161+

‎docs/public/main.css‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -7152,3 +7152,9 @@ a.text-dark:hover, a.text-dark:focus {
71527152
.docs-first-section {
71537153
background-image: linear-gradient(rgba(33, 37, 41, 0.03), rgba(33, 37, 41, 0.05)); }
71547154

7155+
#lgk-link {
7156+
color: #fba161;
7157+
transition: color .15s ease-in-out; }
7158+
#lgk-link:hover {
7159+
color: #fcb37f; }
7160+

‎docs/public/main.js‎

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎docs/src/index.js‎

Lines changed: 46 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -35,28 +35,57 @@ function App() {
3535
<main>
3636
<header className="jumbotron jumbotron-fluid bg-success mb-0">
3737
<div className="container text-center">
38+
<h1 className="">
39+
<span className="icon-lgk-menu-thick" />
40+
</h1>
3841
<h1 className="d-none d-md-block display-3 font-weight-bold">React Bootstrap Ribbon</h1>
39-
<h1 className="d-md-none display-4 font-weight-bold">React Bootstrap Ribbon</h1>
42+
<h1 className="d-md-none font-weight-bold">React Bootstrap Ribbon</h1>
4043
<p className="lead font-weight-bolder">A ribbon menu inspired by Microsoft for React using Bootstrap</p>
4144
<h1><LgkLogo /></h1>
4245
</div>
4346
</header>
4447

45-
<section className="docs-first-section py-4">
46-
<div className="container py-3">
47-
<p>
48-
The ribbon will fit perfectly in your Bootstrap theme. Checkout how it will look with a dark theme:
49-
</p>
50-
<Form.Switch
51-
id="switch-dark"
52-
className="mb-3"
53-
label="Switch to a dark theme 😎"
54-
value={dark}
55-
onChange={switchDark}
56-
/>
57-
<p>
58-
Do you like the dark theme? You can find it and many other themes on Colorganize: <a href="https://colorganize.com/webTheme/2" target="_blank" rel="noopener noreferrer">https://colorganize.com/webTheme/2</a>
59-
</p>
48+
<nav class="navbar navbar-expand-lg navbar-light bg-light">
49+
<div className="container">
50+
<div class="navbar-nav mr-auto">
51+
<a href="https://github.com/lgkonline/react-bootstrap-ribbon" target="_blank" rel="noopener noreferrer" className="nav-item nav-link">
52+
This project on <span className="icon-github ml-1" /> GitHub
53+
</a>
54+
<a href="https://www.npmjs.com/package/react-bootstrap-ribbon" target="_blank" rel="noopener noreferrer" className="nav-item nav-link">
55+
<span className="icon-npm" /> NPM
56+
</a>
57+
<a href="https://www.behance.net/gallery/49987941/React-Bootstrap-Ribbon" target="_blank" rel="noopener noreferrer" className="nav-item nav-link">
58+
<span className="icon-behance2" /> Behance
59+
</a>
60+
</div>
61+
<div class="navbar-nav">
62+
<a href="https://lgk.io" target="_blank" rel="noopener noreferrer" className="nav-item nav-link">
63+
My other projects
64+
</a>
65+
<a href="https://twitter.com/lgkonline" target="_blank" rel="noopener noreferrer" className="nav-item nav-link">
66+
<span className="icon-twitter" /> Twitter
67+
</a>
68+
</div>
69+
</div>
70+
</nav>
71+
72+
<section className="docs-first-section pt-4 pb-5">
73+
<div className="container">
74+
<article>
75+
<p>
76+
The ribbon will fit perfectly in your Bootstrap theme. Checkout how it will look with a dark theme:
77+
</p>
78+
<Form.Switch
79+
id="switch-dark"
80+
className="mb-3"
81+
label="Switch to a dark theme 😎"
82+
value={dark}
83+
onChange={switchDark}
84+
/>
85+
<p>
86+
Do you like the dark theme? You can find it and many other themes on Colorganize: <a href="https://colorganize.com/webTheme/2" target="_blank" rel="noopener noreferrer">https://colorganize.com/webTheme/2</a>
87+
</p>
88+
</article>
6089

6190
<h2 className="mt-4 mb-3">Simple ribbon</h2>
6291
<p>
@@ -215,7 +244,7 @@ function App() {
215244

216245
<div className="col text-center">
217246
<h4>
218-
<a href="https://lgk.io" target="_blank" rel="noopener noreferrer"><LgkLogo /></a>
247+
<a href="https://lgk.io" id="lgk-link" target="_blank" rel="noopener noreferrer"><LgkLogo /></a>
219248
</h4>
220249
</div>
221250

‎docs/src/main.scss‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -14,4 +14,13 @@ $success: #26de81;
1414

1515
.gist-file {
1616
@extend .mb-0;
17+
}
18+
19+
#lgk-link {
20+
color: #fba161;
21+
transition: color .15s ease-in-out;
22+
23+
&:hover {
24+
color: lighten(#fba161, 6%);
25+
}
1726
}

0 commit comments

Comments
 (0)