Skip to content

Commit 725a252

Browse files
spongebodyspongebody
authored
Complete GitHub button style modification. (#1505)
1 parent fec58a5 commit 725a252

File tree

5 files changed

+169
-81
lines changed

5 files changed

+169
-81
lines changed

‎docs/src/components/LandingPage/GithubInfo.jsx‎

Lines changed: 60 additions & 41 deletions
Original file line numberDiff line numberDiff line change
@@ -1,51 +1,70 @@
1-
import React from "react";
2-
import useGithubInfo from "./useGithubInfo";
1+
import React from 'react';
2+
import useGithubInfo from './useGithubInfo';
33

44
const GithubInfo = ({ owner, repo }) => {
55
const { favorites, language, forks, license } = useGithubInfo(owner, repo);
66

77
return (
8-
<div className="github-info-container w-full md:justify-normal mb-4 justify-center gap-2 flex flex-wrap items-center">
9-
<div className="flex items-center">
10-
<div className="dark:bg-gray-600 bg-gray-100 px-6 py-1">
11-
<span className="text-sm">star</span>
12-
</div>
13-
<div className="dark:bg-blue-600 bg-gray-200 font-medium px-6 py-1">
14-
<span id="repo-stars-count">{favorites || 4621}</span>
15-
</div>
8+
<p className="">
9+
<div className="widget">
10+
<a
11+
className="btn hover:no-underline hover:text-[#24292f] outline-none"
12+
href="https://github.com/opengoofy/hippo4j"
13+
rel="noopener"
14+
target="_blank"
15+
aria-label="Star buttons/github-buttons on GitHub"
16+
>
17+
<svg
18+
viewBox="0 0 16 16"
19+
width="14"
20+
height="14"
21+
className="octicon octicon-mark-github"
22+
aria-hidden="true"
23+
>
24+
<path d="M8 0c4.42 0 8 3.58 8 8a8.013 8.013 0 0 1-5.45 7.59c-.4.08-.55-.17-.55-.38 0-.27.01-1.13.01-2.2 0-.75-.25-1.23-.54-1.48 1.78-.2 3.65-.88 3.65-3.95 0-.88-.31-1.59-.82-2.15.08-.2.36-1.02-.08-2.12 0 0-.67-.22-2.2.82-.64-.18-1.32-.27-2-.27-.68 0-1.36.09-2 .27-1.53-1.03-2.2-.82-2.2-.82-.44 1.1-.16 1.92-.08 2.12-.51.56-.82 1.28-.82 2.15 0 3.06 1.86 3.75 3.64 3.95-.23.2-.44.55-.51 1.07-.46.21-1.61.55-2.33-.66-.15-.24-.6-.83-1.23-.82-.67.01-.27.38.01.53.34.19.73.9.82 1.13.16.45.68 1.31 2.69.94 0 .67.01 1.3.01 1.49 0 .21-.15.45-.55.38A7.995 7.995 0 0 1 0 8c0-4.42 3.58-8 8-8Z"></path>
25+
</svg>
26+
&nbsp;<span>Star</span>
27+
</a>
28+
<a
29+
className="social-count hover:no-underline outline-none w-10"
30+
href="https://github.com/opengoofy/hippo4j"
31+
rel="noopener"
32+
target="_blank"
33+
aria-label="1029 stargazers on GitHub"
34+
>
35+
{favorites || 0}
36+
</a>
1637
</div>
17-
18-
{/* <div className="flex items-center">
19-
<div className="px-2 bg-gray-100 dark:bg-gray-600">
20-
<span className="text-sm">language</span>
21-
</div>
22-
<div className="px-2 dark:bg-blue-600 bg-gray-200 font-medium">
23-
<span id="repo-languages-count font-medium">
24-
{language || "java"}
25-
</span>
26-
</div>
27-
</div> */}
28-
29-
<div className="flex items-center">
30-
<div className="dark:bg-gray-600 bg-gray-100 px-6 py-1">
31-
<span className="text-sm">forks</span>
32-
</div>
33-
<div className="dark:bg-blue-600 bg-gray-200 px-6 py-1 font-medium">
34-
<span id="repo-forks-count">{forks || 1020}</span>
35-
</div>
38+
<div class="widget ml-4">
39+
<a
40+
class="btn hover:no-underline hover:text-[#24292f] outline-none"
41+
href="https://github.com/opengoofy/hippo4j"
42+
rel="noopener"
43+
target="_blank"
44+
aria-label="Fork opengoofy/hippo4j on GitHub"
45+
>
46+
<svg
47+
viewBox="0 0 16 16"
48+
width="14"
49+
height="14"
50+
class="octicon octicon-repo-forked"
51+
aria-hidden="true"
52+
>
53+
<path d="M5 5.372v.878c0 .414.336.75.75.75h4.5a.75.75 0 0 0 .75-.75v-.878a2.25 2.25 0 1 1 1.5 0v.878a2.25 2.25 0 0 1-2.25 2.25h-1.5v2.128a2.251 2.251 0 1 1-1.5 0V8.5h-1.5A2.25 2.25 0 0 1 3.5 6.25v-.878a2.25 2.25 0 1 1 1.5 0ZM5 3.25a.75.75 0 1 0-1.5 0 .75.75 0 0 0 1.5 0Zm6.75.75a.75.75 0 1 0 0-1.5.75.75 0 0 0 0 1.5Zm-3 8.75a.75.75 0 1 0-1.5 0 .75.75 0 0 0 1.5 0Z"></path>
54+
</svg>
55+
&nbsp;<span>Fork</span>
56+
</a>
57+
<a
58+
className="social-count hover:no-underline outline-none w-10"
59+
href="https://github.com/opengoofy/hippo4j"
60+
rel="noopener"
61+
target="_blank"
62+
aria-label="1029 stargazers on GitHub"
63+
>
64+
{forks || 0}
65+
</a>
3666
</div>
37-
38-
{/* <div className="flex items-center">
39-
<div className="px-2 bg-gray-100 dark:bg-gray-600">
40-
<span className="text-sm">license</span>
41-
</div>
42-
<div className="px-2 dark:bg-blue-600 bg-gray-200">
43-
<span className="text-sm font-medium" id="repo-license-name">
44-
Apache 2
45-
</span>
46-
</div>
47-
</div> */}
48-
</div>
67+
</p>
4968
);
5069
};
5170

‎docs/src/components/LandingPage/Hero.jsx‎

Lines changed: 12 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,11 @@
11
import React from 'react';
2+
import { useEffect } from 'react';
23
import { Icon } from '@iconify/react';
34
import useBaseUrl from '@docusaurus/useBaseUrl';
45
import GithubInfo from './GithubInfo';
56
import Translate, { translate } from '@docusaurus/Translate';
67
import Link from '@docusaurus/Link';
7-
88
const Hero = () => {
9-
const bgUrl = useBaseUrl('/img/bg.jpg');
10-
119
return (
1210
<header className="hero hero--primary heroBanner_UJJx dark:bg-[#1B1B1D]">
1311
<div className="my-container dark:text-white">
@@ -25,47 +23,31 @@ const Hero = () => {
2523
Systems Online.
2624
</Translate>
2725
</p>
28-
<div class="social_VnSH">
29-
<a
30-
class="github-button"
31-
href="https://github.com/opengoofy/hippo4j"
32-
data-show-count="true"
33-
aria-label="Star opengoofy/hippo4j on GitHub"
34-
>
35-
Star
36-
</a>
37-
<a
38-
class="github-button ml-4"
39-
href="https://github.com/opengoofy/hippo4j/fork"
40-
data-icon="octicon-repo-forked"
41-
data-show-count="true"
42-
aria-label="Fork opengoofy/hippo4j on GitHub"
43-
>
44-
Fork
45-
</a>
26+
<div className="social_VnSH">
27+
<GithubInfo owner="opengoofy" repo="hippo4j" />
4628
</div>
4729
<div className="buttons_pzbO">
4830
{/* button group */}
49-
<div className="flex mt-6 w-full justify-center">
31+
<div className="flex w-full justify-center">
5032
<Link
5133
to="/docs/user_docs/intro"
5234
className="relative mr-4 w-32 text-center lg:w-48 hover:no-underline inline-flex items-center justify-start py-4 overflow-hidden font-semibold text-white transition-all duration-150 ease-in-out rounded bg-blue-500 group"
5335
>
54-
<span class="absolute bottom-0 left-0 w-full h-1 transition-all duration-150 ease-in-out bg-blue-600 group-hover:h-full"></span>
36+
<span className="absolute bottom-0 left-0 w-full h-1 transition-all duration-150 ease-in-out bg-blue-600 group-hover:h-full"></span>
5537

56-
<span class="relative w-full text-center transition-colors duration-200 ease-in-out group-hover:text-white">
38+
<span className="relative w-full text-center transition-colors duration-200 ease-in-out group-hover:text-white">
5739
Start Learning
5840
</span>
5941
</Link>
6042

6143
<a
6244
href="https://github.com/opengoofy/hippo4j"
63-
class="relative w-32 hover:no-underline lg:w-48 inline-block text-lg group"
45+
className="relative w-32 hover:no-underline lg:w-48 inline-block text-lg group"
6446
>
65-
<span class="relative z-10 block px-5 py-4 overflow-hidden font-medium leading-tight text-gray-800 transition-colors duration-300 ease-out border-2 border-gray-900 rounded-lg group-hover:text-white">
66-
<span class="absolute inset-0 w-full h-full px-5 py-4 rounded-lg bg-gray-100"></span>
67-
<span class="absolute left-0 w-52 h-48 -ml-2 transition-all duration-300 origin-top-right -rotate-90 -translate-x-full translate-y-12 bg-gray-900 group-hover:-rotate-180 ease"></span>
68-
<span class="relative flex items-center justify-center">
47+
<span className="relative z-10 block px-5 py-4 overflow-hidden font-medium leading-tight text-gray-800 transition-colors duration-300 ease-out border-2 border-gray-900 rounded-lg group-hover:text-white">
48+
<span className="absolute inset-0 w-full h-full px-5 py-4 rounded-lg bg-gray-100"></span>
49+
<span className="absolute left-0 w-52 h-48 -ml-2 transition-all duration-300 origin-top-right -rotate-90 -translate-x-full translate-y-12 bg-gray-900 group-hover:-rotate-180 ease"></span>
50+
<span className="relative flex items-center justify-center">
6951
{' '}
7052
<Icon
7153
className="w-6 h-6 mr-2 rounded-full flex-shrink-0 bg-white text-white"
@@ -75,7 +57,7 @@ const Hero = () => {
7557
</span>
7658
</span>
7759
<span
78-
class="absolute bottom-0 right-0 w-full h-12 -mb-1 -mr-1 transition-all duration-200 ease-linear bg-gray-900 rounded-lg group-hover:mb-0 group-hover:mr-0"
60+
className="absolute bottom-0 right-0 w-full h-12 -mb-1 -mr-1 transition-all duration-200 ease-linear bg-gray-900 rounded-lg group-hover:mb-0 group-hover:mr-0"
7961
data-rounded="rounded-lg"
8062
></span>
8163
</a>

‎docs/src/components/LandingPage/index.js‎

Lines changed: 3 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,6 @@
1-
import React from "react";
2-
import { useEffect } from "react";
3-
import Hero from "./Hero";
4-
import Introduction from "./Introduction";
1+
import React from 'react';
2+
import Hero from './Hero';
3+
import Introduction from './Introduction';
54
function LandingLayout(props) {
65
return (
76
<div className="leading-normal tracking-normal text-white">

‎docs/src/css/custom.css‎

Lines changed: 94 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -450,9 +450,6 @@ h3 {
450450
.social_VnSH {
451451
margin-top: 30px;
452452
}
453-
.social_VnSH span:nth-child(2) {
454-
margin-left: 8px;
455-
}
456453

457454
.buttons_pzbO {
458455
align-items: center;
@@ -506,6 +503,100 @@ h3 {
506503
flex-direction: row-reverse;
507504
float: right;
508505
}
506+
/* github button */
507+
.widget {
508+
display: inline-block;
509+
overflow: hidden;
510+
font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial,
511+
sans-serif;
512+
font-size: 0;
513+
line-height: 0;
514+
white-space: nowrap;
515+
}
516+
.btn,
517+
.social-count {
518+
position: relative;
519+
display: inline-block;
520+
display: inline-flex;
521+
justify-content: center;
522+
/* height: 14px; */
523+
padding: 2px 5px;
524+
font-size: 11px;
525+
font-weight: 600;
526+
line-height: 14px;
527+
vertical-align: bottom;
528+
cursor: pointer;
529+
-webkit-user-select: none;
530+
-moz-user-select: none;
531+
-ms-user-select: none;
532+
user-select: none;
533+
background-repeat: repeat-x;
534+
background-position: -1px -1px;
535+
background-size: 110% 110%;
536+
border: 1px solid;
537+
}
538+
.btn {
539+
border-radius: 0.25em;
540+
}
541+
.btn:not(:last-child) {
542+
border-radius: 0.25em 0 0 0.25em;
543+
}
544+
.social-count {
545+
border-left: 0;
546+
border-radius: 0 0.25em 0.25em 0;
547+
}
548+
549+
.octicon {
550+
display: inline-block;
551+
vertical-align: text-top;
552+
fill: currentColor;
553+
overflow: visible;
554+
}
555+
.btn:focus-visible,
556+
.social-count:focus-visible {
557+
outline: 2px solid #0969da;
558+
outline-offset: -2px;
559+
}
560+
.btn {
561+
color: #24292f;
562+
background-color: #ebf0f4;
563+
border-color: #ccd1d5;
564+
border-color: rgba(31, 35, 40, 0.15);
565+
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg'%3e%3clinearGradient id='o' x2='0' y2='1'%3e%3cstop stop-color='%23f6f8fa'/%3e%3cstop offset='90%25' stop-color='%23ebf0f4'/%3e%3c/linearGradient%3e%3crect width='100%25' height='100%25' fill='url(%23o)'/%3e%3c/svg%3e");
566+
background-image: -moz-linear-gradient(top, #f6f8fa, #ebf0f4 90%);
567+
background-image: linear-gradient(180deg, #f6f8fa, #ebf0f4 90%);
568+
filter: progid:DXImageTransform.Microsoft.Gradient(startColorstr='#FFF6F8FA', endColorstr='#FFEAEFF3');
569+
}
570+
571+
.btn:hover,
572+
.btn:focus {
573+
background-color: #e9ebef;
574+
background-position: 0 -0.5em;
575+
border-color: #cbcdd1;
576+
border-color: rgba(31, 35, 40, 0.15);
577+
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg'%3e%3clinearGradient id='o' x2='0' y2='1'%3e%3cstop stop-color='%23f3f4f6'/%3e%3cstop offset='90%25' stop-color='%23e9ebef'/%3e%3c/linearGradient%3e%3crect width='100%25' height='100%25' fill='url(%23o)'/%3e%3c/svg%3e");
578+
background-image: -moz-linear-gradient(top, #f3f4f6, #e9ebef 90%);
579+
background-image: linear-gradient(180deg, #f3f4f6, #e9ebef 90%);
580+
filter: progid:DXImageTransform.Microsoft.Gradient(startColorstr='#FFF3F4F6', endColorstr='#FFE8EAEE');
581+
}
582+
583+
.btn:active {
584+
background-color: #e5e9ed;
585+
border-color: #c7cbcf;
586+
border-color: rgba(31, 35, 40, 0.15);
587+
background-image: none;
588+
filter: none;
589+
}
590+
.social-count {
591+
color: #24292f;
592+
background-color: #fff;
593+
border-color: #dddedf;
594+
border-color: rgba(31, 35, 40, 0.15);
595+
}
596+
.social-count:hover,
597+
.social-count:focus {
598+
color: #0969da;
599+
}
509600

510601
@media screen and (max-width: 966px) {
511602
.heroBanner_UJJx {

‎docs/src/pages/index.js‎

Lines changed: 0 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -50,9 +50,6 @@ export default function Home() {
5050
title={`${siteConfig.title}`}
5151
description="Description will go into a meta tag in <head />"
5252
>
53-
<Head>
54-
<script async defer src="https://buttons.github.io/buttons.js"></script>
55-
</Head>
5653
{/* <HomepageHeader /> */}
5754
<main>
5855
{/* <HomepageFeatures /> */}

0 commit comments

Comments
 (0)