mirror of
https://github.com/rehlds/rehlds.github.io.git
synced 2025-02-07 02:32:17 +03:00
Landing: add core repositories
This commit is contained in:
Sergey Shorokhov
parent
425ac39d19
commit
7bff73e932
@ -6,24 +6,40 @@
|
||||
|
||||
/* You can override the default Infima variables here. */
|
||||
:root {
|
||||
--ifm-color-primary: #FF6405; /* Яркий оранжевый */
|
||||
--ifm-color-primary-dark: #FA8C01; /* Оранжево-жёлтый */
|
||||
--ifm-color-primary-darker: #577700; /* Тёмно-зелёный */
|
||||
--ifm-color-primary-darkest: #082400; /* Очень тёмный зелёный */
|
||||
--ifm-color-primary-light: #A0A600; /* Яркий зелёный */
|
||||
--ifm-color-primary-lighter: #B5BD00; /* Светло-зелёный */
|
||||
--ifm-color-primary-lightest: #CDD500; /* Очень светлый зелёный */
|
||||
--ifm-color-primary: #FF6405;
|
||||
--ifm-color-primary-dark: #FA8C01;
|
||||
--ifm-color-primary-darker: #577700;
|
||||
--ifm-color-primary-darkest: #082400;
|
||||
--ifm-color-primary-light: #A0A600;
|
||||
--ifm-color-primary-lighter: #B5BD00;
|
||||
--ifm-color-primary-lightest: #CDD500;
|
||||
|
||||
--ifm-color-background: #F9F9F9;
|
||||
--ifm-color-text: #333333;
|
||||
--ifm-color-text-light: #666666;
|
||||
|
||||
--ifm-color-border: #DDDDDD;
|
||||
--ifm-color-badge-background: rgba(255, 100, 5, 0.1);
|
||||
|
||||
--ifm-code-font-size: 95%;
|
||||
--docusaurus-highlighted-code-line-bg: rgba(255, 100, 5, 0.1); /* Подсветка кода */
|
||||
--docusaurus-highlighted-code-line-bg: rgba(255, 100, 5, 0.1);
|
||||
}
|
||||
|
||||
[data-theme='dark'] {
|
||||
--ifm-color-primary: #FF6405; /* Яркий оранжевый */
|
||||
--ifm-color-primary-dark: #FA8C01; /* Оранжево-жёлтый */
|
||||
--ifm-color-primary-darker: #577700; /* Тёмно-зелёный */
|
||||
--ifm-color-primary-darkest: #082400; /* Очень тёмный зелёный */
|
||||
--ifm-color-primary-light: #A0A600; /* Яркий зелёный */
|
||||
--ifm-color-primary-lighter: #B5BD00; /* Светло-зелёный */
|
||||
--ifm-color-primary-lightest: #CDD500; /* Очень светлый зелёный */
|
||||
--docusaurus-highlighted-code-line-bg: rgba(255, 100, 5, 0.3); /* Подсветка кода в темной теме */
|
||||
--ifm-color-primary: #FF6405;
|
||||
--ifm-color-primary-dark: #FA8C01;
|
||||
--ifm-color-primary-darker: #577700;
|
||||
--ifm-color-primary-darkest: #082400;
|
||||
--ifm-color-primary-light: #A0A600;
|
||||
--ifm-color-primary-lighter: #B5BD00;
|
||||
--ifm-color-primary-lightest: #CDD500;
|
||||
|
||||
--ifm-color-background: #2B2B2B;
|
||||
--ifm-color-text: #FFFFFF;
|
||||
--ifm-color-text-light: #B0B0B0;
|
||||
|
||||
--ifm-color-border: #444444;
|
||||
--ifm-color-badge-background: rgba(255, 100, 5, 0.3);
|
||||
|
||||
--docusaurus-highlighted-code-line-bg: rgba(255, 100, 5, 0.3);
|
||||
}
|
||||
|
||||
@ -1,23 +1,112 @@
|
||||
/**
|
||||
* CSS files with the .module.css suffix will be treated as CSS modules
|
||||
* and scoped locally.
|
||||
*/
|
||||
|
||||
.heroBanner {
|
||||
padding: 4rem 0;
|
||||
padding: 8vh 0;
|
||||
text-align: center;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 996px) {
|
||||
.repoList {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: center;
|
||||
padding: 2vw;
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
.shortDesc {
|
||||
font-size: 1rem;
|
||||
color: var(--ifm-color-text-light);
|
||||
}
|
||||
|
||||
.repoCard {
|
||||
background: var(--ifm-color-background);
|
||||
border: 1px solid var(--ifm-color-border);
|
||||
border-radius: 8px;
|
||||
padding: 1.5rem;
|
||||
margin: 1rem;
|
||||
width: calc(25vw - 2rem);
|
||||
max-width: 500px;
|
||||
min-width: 280px;
|
||||
box-shadow: var(--ifm-box-shadow);
|
||||
position: relative;
|
||||
transition: transform 0.3s ease;
|
||||
}
|
||||
|
||||
.repoCard:hover {
|
||||
transform: scale(1.02);
|
||||
}
|
||||
|
||||
.repoCard h2 {
|
||||
margin-bottom: 0.8rem;
|
||||
font-size: 1.2rem;
|
||||
color: var(--ifm-color-text);
|
||||
}
|
||||
|
||||
.repoCard p {
|
||||
margin: 0.2rem 0;
|
||||
}
|
||||
|
||||
.repoCard::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
height: 4px;
|
||||
background: var(--ifm-color-primary);
|
||||
border-top-left-radius: 8px;
|
||||
border-top-right-radius: 8px;
|
||||
}
|
||||
|
||||
.badges {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
.badges img {
|
||||
max-width: none;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.heroBanner {
|
||||
padding: 2rem;
|
||||
padding: 6vh 0;
|
||||
}
|
||||
|
||||
.repoCard {
|
||||
width: 100vw;
|
||||
margin: 1rem 0;
|
||||
padding: 1rem;
|
||||
}
|
||||
|
||||
.repoCard h2 {
|
||||
font-size: 1.1rem;
|
||||
}
|
||||
|
||||
.shortDesc {
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
|
||||
.repoList {
|
||||
padding: 1vw;
|
||||
}
|
||||
}
|
||||
|
||||
.buttons {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
@media (max-width: 480px) {
|
||||
.heroBanner {
|
||||
padding: 5vh 0;
|
||||
}
|
||||
|
||||
.repoCard {
|
||||
width: 90vw;
|
||||
margin: 1rem 0.5rem;
|
||||
padding: 0.8rem;
|
||||
}
|
||||
|
||||
.repoCard h2 {
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
.shortDesc {
|
||||
font-size: 0.85rem;
|
||||
}
|
||||
}
|
||||
|
||||
@ -2,13 +2,59 @@ import clsx from 'clsx';
|
||||
import Link from '@docusaurus/Link';
|
||||
import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
|
||||
import Layout from '@theme/Layout';
|
||||
import HomepageFeatures from '@site/src/components/HomepageFeatures';
|
||||
import Heading from '@theme/Heading';
|
||||
|
||||
import styles from './index.module.css';
|
||||
import repositoriesData from '@site/static/repositories.json';
|
||||
|
||||
interface Repository {
|
||||
username: string;
|
||||
repo: string;
|
||||
name: string;
|
||||
description: string;
|
||||
downloads: number;
|
||||
stars: number;
|
||||
latestRelease: {
|
||||
version: string;
|
||||
date: string;
|
||||
};
|
||||
}
|
||||
|
||||
function RepositoryCard({ repo }: { repo: Repository }) {
|
||||
return (
|
||||
<div className={clsx(styles.repoCard, 'card')}>
|
||||
<a href={`https://github.com/${repo.username}/${repo.repo}`} target="_blank" rel="noopener noreferrer">
|
||||
<h2 className="card__title">{repo.repo}</h2>
|
||||
</a>
|
||||
<p className={styles.shortDesc}>{repo.description}</p>
|
||||
<div className={styles.badges}>
|
||||
<a href={`https://github.com/${repo.username}/${repo.repo}/releases`} target="_blank" rel="noopener noreferrer">
|
||||
<img
|
||||
src={`https://img.shields.io/github/v/release/${repo.username}/${repo.repo}?include_prereleases&style=for-the-badge`}
|
||||
alt="Latest Release"
|
||||
/>
|
||||
</a>
|
||||
<a href={`https://github.com/${repo.username}/${repo.repo}/releases`} target="_blank" rel="noopener noreferrer">
|
||||
<img
|
||||
src={`https://img.shields.io/github/downloads/${repo.username}/${repo.repo}/total?style=for-the-badge`}
|
||||
alt="Downloads"
|
||||
/>
|
||||
</a>
|
||||
{/* <a href={`https://github.com/${repo.username}/${repo.repo}/stargazers`} target="_blank" rel="noopener noreferrer">
|
||||
<img
|
||||
src={`https://img.shields.io/badge/Stars-${repo.stars.toLocaleString()}-yellow?style=for-the-badge`}
|
||||
alt="Stars"
|
||||
/>
|
||||
</a> */}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
function HomepageHeader() {
|
||||
const {siteConfig} = useDocusaurusContext();
|
||||
const { siteConfig } = useDocusaurusContext();
|
||||
return (
|
||||
<header className={clsx('hero hero--primary', styles.heroBanner)}>
|
||||
<div className="container">
|
||||
@ -29,15 +75,19 @@ function HomepageHeader() {
|
||||
}
|
||||
|
||||
export default function Home(): JSX.Element {
|
||||
const { siteConfig } = useDocusaurusContext();
|
||||
const repositories: Repository[] = repositoriesData;
|
||||
|
||||
return (
|
||||
<Layout
|
||||
// title={`${siteConfig.title}`}
|
||||
description="Enhanced HLDS with bug fixes and new features to expand functionality.">
|
||||
<HomepageHeader />
|
||||
{/* <main>
|
||||
<HomepageFeatures />
|
||||
</main> */}
|
||||
<main>
|
||||
<div className={styles.repoList}>
|
||||
{repositories.map((repo, index) => (
|
||||
<RepositoryCard key={index} repo={repo} />
|
||||
))}
|
||||
</div>
|
||||
</main>
|
||||
</Layout>
|
||||
);
|
||||
}
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user