msb-public
/
hippo4j
mirror of https://github.com/longtai-cn/hippo4j
1
0
Code Issues Projects Releases Wiki Activity

Complete GitHub button style modification. (#1505)

Browse Source
pull/1507/head
youbo 1 year ago committed by GitHub
parent fec58a5eca
commit 725a252734
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
5 changed files with 169 additions and 81 deletions
Show Stats Download Patch File Download Diff File

101
docs/src/components/LandingPage/GithubInfo.jsx
Unescape View File

@ -1,51 +1,70 @@
import React from "react";
import useGithubInfo from "./useGithubInfo";
import React from 'react';
import useGithubInfo from './useGithubInfo';
const GithubInfo = ({ owner, repo }) => {
const { favorites, language, forks, license } = useGithubInfo(owner, repo);
return (
<div className="github-info-container w-full md:justify-normal mb-4 justify-center gap-2 flex flex-wrap items-center">
<div className="flex items-center">
<div className="dark:bg-gray-600 bg-gray-100 px-6 py-1">
<span className="text-sm">star</span>
</div>
<div className="dark:bg-blue-600 bg-gray-200 font-medium px-6 py-1">
<span id="repo-stars-count">{favorites || 4621}</span>
</div>
<p className="">
<div className="widget">
<a
className="btn hover:no-underline hover:text-[#24292f] outline-none"
href="https://github.com/opengoofy/hippo4j"
rel="noopener"
target="_blank"
aria-label="Star buttons/github-buttons on GitHub"
>
<svg
viewBox="0 0 16 16"
width="14"
height="14"
className="octicon octicon-mark-github"
aria-hidden="true"
>
<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>
</svg>
&nbsp;<span>Star</span>
</a>
<a
className="social-count hover:no-underline outline-none w-10"
href="https://github.com/opengoofy/hippo4j"
rel="noopener"
target="_blank"
aria-label="1029 stargazers on GitHub"
>
{favorites || 0}
</a>
</div>
{/* <div className="flex items-center">
<div className="px-2 bg-gray-100 dark:bg-gray-600">
<span className="text-sm">language</span>
</div>
<div className="px-2 dark:bg-blue-600 bg-gray-200 font-medium">
<span id="repo-languages-count font-medium">
{language || "java"}
</span>
</div>
</div> */}
<div className="flex items-center">
<div className="dark:bg-gray-600 bg-gray-100 px-6 py-1">
<span className="text-sm">forks</span>
</div>
<div className="dark:bg-blue-600 bg-gray-200 px-6 py-1 font-medium">
<span id="repo-forks-count">{forks || 1020}</span>
</div>
<div class="widget ml-4">
<a
class="btn hover:no-underline hover:text-[#24292f] outline-none"
href="https://github.com/opengoofy/hippo4j"
rel="noopener"
target="_blank"
aria-label="Fork opengoofy/hippo4j on GitHub"
>
<svg
viewBox="0 0 16 16"
width="14"
height="14"
class="octicon octicon-repo-forked"
aria-hidden="true"
>
<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>
</svg>
&nbsp;<span>Fork</span>
</a>
<a
className="social-count hover:no-underline outline-none w-10"
href="https://github.com/opengoofy/hippo4j"
rel="noopener"
target="_blank"
aria-label="1029 stargazers on GitHub"
>
{forks || 0}
</a>
</div>
{/* <div className="flex items-center">
<div className="px-2 bg-gray-100 dark:bg-gray-600">
<span className="text-sm">license</span>
</div>
<div className="px-2 dark:bg-blue-600 bg-gray-200">
<span className="text-sm font-medium" id="repo-license-name">
Apache 2
</span>
</div>
</div> */}
</div>
</p>
);
};

42
docs/src/components/LandingPage/Hero.jsx
Unescape View File

@ -1,13 +1,11 @@
import React from 'react';
import { useEffect } from 'react';
import { Icon } from '@iconify/react';
import useBaseUrl from '@docusaurus/useBaseUrl';
import GithubInfo from './GithubInfo';
import Translate, { translate } from '@docusaurus/Translate';
import Link from '@docusaurus/Link';
const Hero = () => {
const bgUrl = useBaseUrl('/img/bg.jpg');
return (
<header className="hero hero--primary heroBanner_UJJx dark:bg-[#1B1B1D]">
<div className="my-container dark:text-white">
@ -25,47 +23,31 @@ const Hero = () => {
Systems Online.
</Translate>
</p>
<div class="social_VnSH">
<a
class="github-button"
href="https://github.com/opengoofy/hippo4j"
data-show-count="true"
aria-label="Star opengoofy/hippo4j on GitHub"
>
Star
</a>
<a
class="github-button ml-4"
href="https://github.com/opengoofy/hippo4j/fork"
data-icon="octicon-repo-forked"
data-show-count="true"
aria-label="Fork opengoofy/hippo4j on GitHub"
>
Fork
</a>
<div className="social_VnSH">
<GithubInfo owner="opengoofy" repo="hippo4j" />
</div>
<div className="buttons_pzbO">
{/* button group */}
<div className="flex mt-6 w-full justify-center">
<div className="flex w-full justify-center">
<Link
to="/docs/user_docs/intro"
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"
>
<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>
<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>
<span class="relative w-full text-center transition-colors duration-200 ease-in-out group-hover:text-white">
<span className="relative w-full text-center transition-colors duration-200 ease-in-out group-hover:text-white">
Start Learning
</span>
</Link>
<a
href="https://github.com/opengoofy/hippo4j"
class="relative w-32 hover:no-underline lg:w-48 inline-block text-lg group"
className="relative w-32 hover:no-underline lg:w-48 inline-block text-lg group"
>
<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">
<span class="absolute inset-0 w-full h-full px-5 py-4 rounded-lg bg-gray-100"></span>
<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>
<span class="relative flex items-center justify-center">
<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">
<span className="absolute inset-0 w-full h-full px-5 py-4 rounded-lg bg-gray-100"></span>
<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>
<span className="relative flex items-center justify-center">
{' '}
<Icon
className="w-6 h-6 mr-2 rounded-full flex-shrink-0 bg-white text-white"
@ -75,7 +57,7 @@ const Hero = () => {
</span>
</span>
<span
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"
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"
data-rounded="rounded-lg"
></span>
</a>

7
docs/src/components/LandingPage/index.js
Unescape View File

@ -1,7 +1,6 @@
import React from "react";
import { useEffect } from "react";
import Hero from "./Hero";
import Introduction from "./Introduction";
import React from 'react';
import Hero from './Hero';
import Introduction from './Introduction';
function LandingLayout(props) {
return (
<div className="leading-normal tracking-normal text-white">

97
docs/src/css/custom.css
Unescape View File

@ -450,9 +450,6 @@ h3 {
.social_VnSH {
margin-top: 30px;
}
.social_VnSH span:nth-child(2) {
margin-left: 8px;
}
.buttons_pzbO {
align-items: center;
@ -506,6 +503,100 @@ h3 {
flex-direction: row-reverse;
float: right;
}
/* github button */
.widget {
display: inline-block;
overflow: hidden;
font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial,
sans-serif;
font-size: 0;
line-height: 0;
white-space: nowrap;
}
.btn,
.social-count {
position: relative;
display: inline-block;
display: inline-flex;
justify-content: center;
/* height: 14px; */
padding: 2px 5px;
font-size: 11px;
font-weight: 600;
line-height: 14px;
vertical-align: bottom;
cursor: pointer;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
background-repeat: repeat-x;
background-position: -1px -1px;
background-size: 110% 110%;
border: 1px solid;
}
.btn {
border-radius: 0.25em;
}
.btn:not(:last-child) {
border-radius: 0.25em 0 0 0.25em;
}
.social-count {
border-left: 0;
border-radius: 0 0.25em 0.25em 0;
}
.octicon {
display: inline-block;
vertical-align: text-top;
fill: currentColor;
overflow: visible;
}
.btn:focus-visible,
.social-count:focus-visible {
outline: 2px solid #0969da;
outline-offset: -2px;
}
.btn {
color: #24292f;
background-color: #ebf0f4;
border-color: #ccd1d5;
border-color: rgba(31, 35, 40, 0.15);
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");
background-image: -moz-linear-gradient(top, #f6f8fa, #ebf0f4 90%);
background-image: linear-gradient(180deg, #f6f8fa, #ebf0f4 90%);
filter: progid:DXImageTransform.Microsoft.Gradient(startColorstr='#FFF6F8FA', endColorstr='#FFEAEFF3');
}
.btn:hover,
.btn:focus {
background-color: #e9ebef;
background-position: 0 -0.5em;
border-color: #cbcdd1;
border-color: rgba(31, 35, 40, 0.15);
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");
background-image: -moz-linear-gradient(top, #f3f4f6, #e9ebef 90%);
background-image: linear-gradient(180deg, #f3f4f6, #e9ebef 90%);
filter: progid:DXImageTransform.Microsoft.Gradient(startColorstr='#FFF3F4F6', endColorstr='#FFE8EAEE');
}
.btn:active {
background-color: #e5e9ed;
border-color: #c7cbcf;
border-color: rgba(31, 35, 40, 0.15);
background-image: none;
filter: none;
}
.social-count {
color: #24292f;
background-color: #fff;
border-color: #dddedf;
border-color: rgba(31, 35, 40, 0.15);
}
.social-count:hover,
.social-count:focus {
color: #0969da;
}
@media screen and (max-width: 966px) {
.heroBanner_UJJx {

3
docs/src/pages/index.js
Unescape View File

@ -50,9 +50,6 @@ export default function Home() {
title={`${siteConfig.title}`}
description="Description will go into a meta tag in <head />"
>
<Head>
<script async defer src="https://buttons.github.io/buttons.js"></script>
</Head>
{/* <HomepageHeader /> */}
<main>
{/* <HomepageFeatures /> */}

Write Preview
Loading…
Cancel
Save