Skip to content

Commit

Permalink
Some fixes and templates
Browse files Browse the repository at this point in the history
  • Loading branch information
@AndreasKarz
AndreasKarz committed Aug 25, 2023
1 parent b31530f commit 6d85eba
Show file tree
Hide file tree
Showing 5 changed files with 122 additions and 77 deletions.
4 changes: 2 additions & 2 deletions src/components/Footer.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,8 +11,8 @@ export default function Footer() {
const { t, i18n } = useTranslation();

return (
<footer className='w-full pb-2 bg-gray-100'>
<div className='container flex justify-between w-full mt-4'>
<footer className='my-0 py-4 bg-white/80 backdrop-blur-md border-t border-gray-300 '>
<div className='page my-0 flex justify-between w-full'>
<div>
{i18n.language != 'de' && <LangLink lang='de' />}
{i18n.language != 'en' && <LangLink lang='en' />}
Expand Down
6 changes: 3 additions & 3 deletions src/components/NavBar.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -24,9 +24,9 @@ export default function NavBar() {
<div className='flex items-center justify-between py-1 md:py-3 md:block '>
<a href='/'>
<img
src='https://www.floatui.com/logo.svg'
width={120}
height={50}
src='https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRWa-gW4n2m_1rLpvlkE_1SzBSEHFj8LoP9Qw&usqp=CAU'
width={100}
height={40}
alt='Float UI logo'
/>
</a>
Expand Down
31 changes: 25 additions & 6 deletions src/index.css
View file
Original file line number Diff line number Diff line change
@@ -1,20 +1,39 @@
@tailwind base;
@tailwind components;
/* Composing Utilities with @apply https://www.youtube.com/watch?v=krSgBUmIgP0 */
.page {
@apply px-3 max-w-screen-xl mx-auto md:px-0 my-5 md:my-16;
@apply px-3 max-w-screen-xl mx-auto md:px-0 my-6 md:my-24;
}
a.active {
@apply text-tahiti-light duration-150;
}
@tailwind utilities;

/* https://dev.to/mnathani/two-lines-of-css-that-boosts-7x-rendering-performance-4mjd */
/* Optimize rendering performane https://dev.to/mnathani/two-lines-of-css-that-boosts-7x-rendering-performance-4mjd */
section {
content-visibility: auto;
contain-intrinsic-size: 1px 5000px;
}

/* Find a better solution with tailwind? */
nav a.active,
footer a.active {
color: #67e8f9;
/* Custom Scrollbar https://www.w3schools.com/howto/howto_css_custom_scrollbar.asp */
::-webkit-scrollbar {
width: 7px;
}

::-webkit-scrollbar-track {
box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.35);
}

::-webkit-scrollbar-thumb {
background: rgba(0, 0, 0, 0.2);
}

::-webkit-scrollbar-thumb:hover {
background: rgba(0, 0, 0, 0.3);
}

body {
overflow-y: scroll;
}

footer {
Expand Down
130 changes: 89 additions & 41 deletions src/pages/Home.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,9 +1,58 @@
import { Helmet } from 'react-helmet-async';
import { useTranslation } from 'react-i18next';
import { Icon } from '@iconify/react';

export default function Home() {
const { t } = useTranslation();

const features = [
{
icon: 'devicon:react',
title: 'React',
desc: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec congue, nisl eget molestie varius.',
},
{
icon: 'devicon:reactrouter',
title: 'React Router',
desc: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec congue, nisl eget molestie varius.',
},
{
icon: 'simple-icons:i18next',
title: 'React i18n',
desc: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec congue, nisl eget molestie varius.',
},
{
icon: 'icon-park:helmet',
title: 'Recat Helmet Async',
desc: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec congue, nisl eget molestie varius.',
},
{
icon: 'devicon:tailwindcss',
title: 'Tailwind',
desc: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec congue, nisl eget molestie varius.',
},
{
icon: 'bi:ui-radios',
title: 'FloatUI',
desc: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec congue, nisl eget molestie varius.',
},
{
icon: 'devicon:vitejs',
title: 'Vite',
desc: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec congue, nisl eget molestie varius.',
},
{
icon: 'devicon-plain:axios',
title: 'Axios',
desc: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec congue, nisl eget molestie varius.',
},
{
icon: 'simple-icons:iconify',
title: 'Iconify',
desc: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec congue, nisl eget molestie varius.',
},
];

return (
<>
<Helmet>
Expand Down Expand Up @@ -99,48 +148,47 @@ export default function Home() {
</div>
</section>

<dl className='mb-6'>
<dt className='text-xl font-bold mt-4'>React</dt>
<dd className='text-sm'></dd>
<dt className='text-xl font-bold mt-4'>React Router</dt>
<dd className='text-sm'>{t('router')}</dd>
<dt className='text-xl font-bold mt-4'>Tailwind CSS</dt>
<dd className='text-sm'>
A utility-first CSS framework packed with classes like flex, pt-4, text-center and
rotate-90 that can be composed to build any design, directly in your markup.
</dd>
<dt className='text-xl font-bold mt-4'>Flowbite</dt>
<dd className='text-sm'>
Get started with the most popular open-source library of interactive UI components built
with the utility classes from Tailwind CSS.
</dd>
<dt className='text-xl font-bold mt-4'>Flowbite React</dt>
<dd className='text-sm'>rings Flowbite to React with special React Components.</dd>
<dt className='text-xl font-bold mt-4'>Iconify</dt>
<dd className='text-sm'>Over 100,000 open source vector icons as a React Component.</dd>
</dl>
<div className='flex space-x-8 flex-row'>
<div className='basis-1/4 bg-gray-400 shadow-xl'>
01 fdsaf saf asf
<br /> asf asf af aff{' '}
</div>
<div className='basis-1/4 bg-h1_light-200 shadow-xl'>02</div>
<div className='basis-1/4 bg-yellow-100 shadow-xl'>03</div>
<div className='basis-1/4 bg-h1_light-300'>
<a
href='#'
className='block max-w-sm p-6 border border-gray-200 shadow-xl hover:bg-gray-200 dark:bg-gray-800 dark:border-gray-700 dark:hover:bg-gray-700'
>
<h5 className='mb-2 text-2xl font-bold tracking-tight text-gray-900 dark:text-white'>
Noteworthy technology acquisitions 2021
</h5>
<p className='font-normal text-gray-700 dark:text-gray-400'>
Here are the biggest enterprise technology acquisitions of 2021 so far, in reverse
chronological order.
</p>
</a>
<section className='py-14'>
<div className='max-w-screen-xl mx-auto px-4 text-gray-600 md:px-8'>
<div className='relative max-w-2xl mx-auto sm:text-center'>
<div className='relative z-10'>
<h3 className='text-gray-800 text-3xl font-light sm:text-4xl'>What's inside?</h3>
<p className='mt-3'>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec congue, nisl eget
molestie varius, enim ex faucibus purus.
</p>
</div>
<div
className='absolute inset-0 max-w-xs mx-auto h-44 blur-[118px]'
style={{
background:
'linear-gradient(152.92deg, rgba(192, 132, 252, 0.2) 4.54%, rgba(232, 121, 249, 0.26) 34.2%, rgba(192, 132, 252, 0.1) 77.55%)',
}}
></div>
</div>
<div className='relative mt-12'>
<ul className='grid gap-8 sm:grid-cols-2 lg:grid-cols-3'>
{features.map((item, idx) => (
<li
key={idx}
className='bg-white space-y-3 p-4 border rounded-lg'
>
<div className='text-center'>
<Icon
icon={item.icon}
height={32}
inline={true}
className='inline-block'
/>
</div>
<h4 className='text-lg text-gray-800 font-semibold'>{item.title}</h4>
<p>{item.desc}</p>
</li>
))}
</ul>
</div>
</div>
</div>
</section>
</div>
</>
);
Expand Down
28 changes: 3 additions & 25 deletions tailwind.config.cjs
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,7 @@
/** @type {import('tailwindcss').Config} */
const defaultTheme = require('tailwindcss/defaultTheme');
const colors = require('tailwindcss/colors');
const screens = defaultTheme.screens;

/**
* A guide to configuring and customizing your Tailwind installation
Expand All @@ -12,37 +14,13 @@ module.exports = {
theme: {
screens: {
xs: { max: '640px' },
sm: '640px',
// => @media (min-width: 640px) { ... }

md: '768px',
// => @media (min-width: 768px) { ... }

lg: '1024px',
// => @media (min-width: 1024px) { ... }

xl: '1280px',
// => @media (min-width: 1280px) { ... }

'2xl': '1536px',
// => @media (min-width: 1536px) { ... }

xso: { max: '640px' },

smo: { min: '640px', max: '767px' },
// => @media (min-width: 640px and max-width: 767px) { ... }

mdo: { min: '768px', max: '1023px' },
// => @media (min-width: 768px and max-width: 1023px) { ... }

lgo: { min: '1024px', max: '1279px' },
// => @media (min-width: 1024px and max-width: 1279px) { ... }

xlo: { min: '1280px', max: '1535px' },
// => @media (min-width: 1280px and max-width: 1535px) { ... }

'2xlo': { min: '1536px' },
// => @media (min-width: 1536px) { ... }
...screens,
},
fontWeight: {
hairline: 100,
Expand Down

0 comments on commit 6d85eba

Please sign in to comment.