Skip to content

Commit

Permalink
change ui
Browse files Browse the repository at this point in the history
  • Loading branch information
@Janescience
Janescience committed Jan 17, 2024
1 parent c15ef82 commit 01a0efe
Show file tree
Hide file tree
Showing 23 changed files with 115 additions and 38 deletions.
2 changes: 1 addition & 1 deletion components/Card.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -42,7 +42,7 @@ const Card = ({ title, description, imgSrc, href }) => (
{href && (
<Link
href={href}
className="text-base font-medium leading-6 text-primary-500 hover:text-primary-600 dark:hover:text-primary-400"
className="text-base font-medium leading-6 text-lime-500 hover:text-lime-600 dark:hover:text-lime-400"
aria-label={`Link to ${title}`}
>
Learn more &rarr;
Expand Down
13 changes: 9 additions & 4 deletions components/LayoutWrapper.js
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,10 @@
import siteMetadata from '@/data/siteMetadata'
import headerNavLinks from '@/data/headerNavLinks'
import Logo from '@/data/logo.svg'
import Logo from '@/data/jane.png'
import Image from 'next/image'

import Link from './Link'
import TypingEffect from './TypingEffect'
import SectionContainer from './SectionContainer'
import Footer from './Footer'
import MobileNav from './MobileNav'
Expand All @@ -10,18 +13,20 @@ import WebringSwitch from './WebringSwitch'

const LayoutWrapper = ({ children }) => {
return (

<SectionContainer>

<div className="flex h-screen flex-col justify-between">
<header className="flex items-center justify-between py-10">
<div>
<Link href="/" aria-label={siteMetadata.headerTitle}>
<div className="flex items-center justify-between">
<div className="mr-3">
<Logo />
<Image src={Logo} alt="Picture of the author" width={150} height={150}/>
</div>
{typeof siteMetadata.headerTitle === 'string' ? (
<div className="hidden h-8 text-3xl font-semibold sm:block">
{siteMetadata.headerTitle}
<div className="hidden h-8 ml-3 text-4xl font-bold sm:block ">
<TypingEffect/>
</div>
) : (
siteMetadata.headerTitle
Expand Down
8 changes: 4 additions & 4 deletions components/NewsletterForm.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -44,7 +44,7 @@ const NewsletterForm = ({ title = 'Subscribe to the newsletter' }) => {
</label>
<input
autoComplete="email"
className="w-72 rounded-md px-4 focus:border-transparent focus:outline-none focus:ring-2 focus:ring-primary-600 dark:bg-black"
className="w-72 rounded-md px-4 focus:border-transparent focus:outline-none focus:ring-2 focus:ring-lime-600 dark:bg-black"
id="email-input"
name="email"
placeholder={subscribed ? "You're subscribed ! 🎉" : 'Enter your email'}
Expand All @@ -56,9 +56,9 @@ const NewsletterForm = ({ title = 'Subscribe to the newsletter' }) => {
</div>
<div className="mt-2 flex w-full rounded-md shadow-sm sm:mt-0 sm:ml-3">
<button
className={`w-full rounded-md bg-primary-500 py-2 px-4 font-medium text-white sm:py-0 ${
subscribed ? 'cursor-default' : 'hover:bg-primary-700 dark:hover:bg-primary-400'
} focus:outline-none focus:ring-2 focus:ring-primary-600 focus:ring-offset-2 dark:ring-offset-black`}
className={`w-full rounded-md bg-lime-500 py-2 px-4 font-medium text-white sm:py-0 ${
subscribed ? 'cursor-default' : 'hover:bg-lime-700 dark:hover:bg-lime-400'
} focus:outline-none focus:ring-2 focus:ring-lime-600 focus:ring-offset-2 dark:ring-offset-black`}
type="submit"
disabled={subscribed}
>
Expand Down
2 changes: 1 addition & 1 deletion components/Tag.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@ import kebabCase from '@/lib/utils/kebabCase'
const Tag = ({ text }) => {
return (
<Link href={`/tags/${kebabCase(text)}`}>
<a className="dark:text-secondary-400 dark:hover:text-secondary-500 font-semibold mr-2 py-1 text-xs uppercase text-primary-500 no-underline hover:text-primary-600 ">
<a className="dark:hover:text-lime-600 font-semibold mr-2 py-1 text-sm dark:text-lime-400 text-red-400 no-underline hover:text-lime-600 ">
{text.split(' ').join('-')}
</a>
</Link>
Expand Down
15 changes: 15 additions & 0 deletions components/TypingEffect.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,15 @@
import Typewriter from 'typewriter-effect';

export default function TypingEffect() {
return (
<div>
<Typewriter
options={{
strings: ['Janesce', 'Janescience'],
autoStart: true,
loop: true,
}}
/>
</div>
);
}
2 changes: 1 addition & 1 deletion css/prism.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -32,7 +32,7 @@
}

.highlight-line {
@apply -mx-4 border-l-4 border-primary-500 bg-gray-700 bg-opacity-50;
@apply -mx-4 border-l-4 border-lime-500 bg-gray-700 bg-opacity-50;
}

.line-number::before {
Expand Down
2 changes: 0 additions & 2 deletions css/tailwind.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -24,5 +24,3 @@ input:-webkit-autofill:focus {
transition: background-color 600000s 0s, color 600000s 0s;
}

@import url('https://fonts.googleapis.com/css2?family=Mitr:wght@200;300;400&display=swap');

Binary file added data/jane.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
2 changes: 1 addition & 1 deletion layouts/ListBlogLayout.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -33,7 +33,7 @@ export default function ListLayout({ posts, title,subTitle, initialDisplayPosts
type="text"
onChange={(e) => setSearchValue(e.target.value)}
placeholder="Search articles"
className="block w-full rounded-md border border-gray-300 bg-white px-4 py-2 text-gray-900 focus:border-primary-500 focus:ring-primary-500 dark:border-gray-900 dark:bg-gray-800 dark:text-gray-100"
className="block w-full rounded-md border border-gray-300 bg-white px-4 py-2 text-gray-900 focus:border-lime-500 focus:ring-lime-500 dark:border-gray-900 dark:bg-gray-800 dark:text-gray-100"
/>
<svg
className="absolute right-3 top-3 h-5 w-5 text-gray-400 dark:text-gray-300"
Expand Down
2 changes: 1 addition & 1 deletion layouts/ListNoteLayout.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -33,7 +33,7 @@ export default function ListLayout({ posts, title,subTitle, initialDisplayPosts
type="text"
onChange={(e) => setSearchValue(e.target.value)}
placeholder="Search articles"
className="block w-full rounded-md border border-gray-300 bg-white px-4 py-2 text-gray-900 focus:border-primary-500 focus:ring-primary-500 dark:border-gray-900 dark:bg-gray-800 dark:text-gray-100"
className="block w-full rounded-md border border-gray-300 bg-white px-4 py-2 text-gray-900 focus:border-lime-500 focus:ring-lime-500 dark:border-gray-900 dark:bg-gray-800 dark:text-gray-100"
/>
<svg
className="absolute right-3 top-3 h-5 w-5 text-gray-400 dark:text-gray-300"
Expand Down
8 changes: 4 additions & 4 deletions layouts/PostLayout.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -73,7 +73,7 @@ export default function PostLayout({ frontMatter, authorDetails, next, prev, chi
{author.twitter && (
<Link
href={author.twitter}
className="text-primary-500 hover:text-primary-600 dark:hover:text-primary-400"
className="text-lime-500 hover:text-lime-600 dark:hover:text-lime-400"
>
{author.twitter.replace('https://twitter.com/', '@')}
</Link>
Expand Down Expand Up @@ -117,7 +117,7 @@ export default function PostLayout({ frontMatter, authorDetails, next, prev, chi
<h2 className="text-xs uppercase tracking-wide text-gray-500 dark:text-gray-400">
Previous Article
</h2>
<div className="text-primary-500 hover:text-primary-600 dark:hover:text-primary-400">
<div className="text-lime-500 hover:text-lime-600 dark:hover:text-lime-400">
<Link href={`/blog/${prev.slug}`}>{prev.title}</Link>
</div>
</div>
Expand All @@ -127,7 +127,7 @@ export default function PostLayout({ frontMatter, authorDetails, next, prev, chi
<h2 className="text-xs uppercase tracking-wide text-gray-500 dark:text-gray-400">
Next Article
</h2>
<div className="text-primary-500 hover:text-primary-600 dark:hover:text-primary-400">
<div className="text-lime-500 hover:text-lime-600 dark:hover:text-lime-400">
<Link href={`/blog/${next.slug}`}>{next.title}</Link>
</div>
</div>
Expand All @@ -138,7 +138,7 @@ export default function PostLayout({ frontMatter, authorDetails, next, prev, chi
<div className="pt-4 xl:pt-8">
<Link
href="/blog"
className="text-primary-500 hover:text-primary-600 dark:hover:text-primary-400"
className="text-lime-500 hover:text-lime-600 dark:hover:text-lime-400"
>
&larr; Back to the blog
</Link>
Expand Down
4 changes: 2 additions & 2 deletions layouts/PostSimple.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -45,7 +45,7 @@ export default function PostLayout({ frontMatter, authorDetails, next, prev, chi
<div className="pt-4 xl:pt-8">
<Link
href={`/blog/${prev.slug}`}
className="text-primary-500 hover:text-primary-600 dark:hover:text-primary-400"
className="text-lime-500 hover:text-lime-600 dark:hover:text-lime-400"
>
&larr; {prev.title}
</Link>
Expand All @@ -55,7 +55,7 @@ export default function PostLayout({ frontMatter, authorDetails, next, prev, chi
<div className="pt-4 xl:pt-8">
<Link
href={`/blog/${next.slug}`}
className="text-primary-500 hover:text-primary-600 dark:hover:text-primary-400"
className="text-lime-500 hover:text-lime-600 dark:hover:text-lime-400"
>
{next.title} &rarr;
</Link>
Expand Down
37 changes: 34 additions & 3 deletions package-lock.json
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

2 changes: 2 additions & 0 deletions package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,6 +13,7 @@
},
"dependencies": {
"@fontsource/inter": "4.5.2",
"@fontsource/mitr": "^5.0.8",
"@mailchimp/mailchimp_marketing": "^3.0.58",
"@tailwindcss/forms": "^0.4.0",
"@tailwindcss/typography": "^0.5.0",
Expand Down Expand Up @@ -41,6 +42,7 @@
"sharp": "^0.28.3",
"smoothscroll-polyfill": "^0.4.4",
"tailwindcss": "^3.0.23",
"typewriter-effect": "^2.21.0",
"unist-util-visit": "^4.0.0"
},
"devDependencies": {
Expand Down
4 changes: 2 additions & 2 deletions pages/_app.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@ import '@/css/tailwind.css'
import '@/css/prism.css'
import 'katex/dist/katex.css'

import '@fontsource/inter/variable-full.css'
import '@fontsource/mitr'

import { ThemeProvider } from 'next-themes'
import Head from 'next/head'
Expand All @@ -21,7 +21,7 @@ export default function App({ Component, pageProps }) {
<meta content="width=device-width, initial-scale=1" name="viewport" />
</Head>
{isDevelopment && isSocket && <ClientReload />}
<LayoutWrapper>
<LayoutWrapper >
<Component {...pageProps} />
</LayoutWrapper>
</ThemeProvider>
Expand Down
15 changes: 9 additions & 6 deletions pages/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -55,12 +55,15 @@ export default function Home({ posts }) {
{title}
</Link>
</h2>
<div className="flex items-center ">
{tags.map((tag) => (
<Tag key={tag} text={tag} />
))}
<div className="flex items-center justify-between">
<div>
{tags.map((tag) => (
<Tag key={tag} text={tag} />
))}
</div>

<dd className="text-xs ml-1 text-gray-500 p-1 dark:text-gray-300 ">

<dd className="text-xs ml-1 font-thin text-gray-400 p-1 dark:text-gray-500 ">
<time dateTime={date}>{formatDate(date)}</time>
</dd>
</div>
Expand All @@ -75,7 +78,7 @@ export default function Home({ posts }) {
<div className="flex justify-end text-base font-medium leading-6">
<Link
href="/blog"
className="text-primary-500 hover:text-primary-600 dark:hover:text-primary-400"
className="text-lime-500 hover:text-lime-600 dark:hover:text-lime-400"
aria-label="all posts"
>
All Posts &rarr;
Expand Down
Binary file modified public/static/favicons/android-chrome-192x192.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified public/static/favicons/android-chrome-512x512.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified public/static/favicons/apple-touch-icon.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified public/static/favicons/favicon-16x16.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified public/static/favicons/favicon-32x32.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified public/static/favicons/favicon.ico
View file
Binary file not shown.
35 changes: 29 additions & 6 deletions tailwind.config.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -27,20 +27,43 @@ module.exports = {
fontFamily: {
sans: 'Mitr, sans-serif',
},
fontSize:{
'xs': '.75rem',
'sm': '.875rem',
'base': '1.1rem',
'lg': '1.125rem',
'xl': '1.25rem',
'2xl': '1.5rem',
'3xl': '1.875rem',
'4xl': '2.25rem',
'5xl': '3rem',
'6xl': '4rem',
'7xl': '5rem',
},
colors: {
primary: colors.teal,
gray: colors.neutral,
},
typography: (theme) => ({
DEFAULT: {
css: {
ul:{
fontSize : '20px'
},
ol:{
fontSize : '20px'
},
p:{
fontSize : '20px',
fontWeight: '100',
},
color: theme('colors.gray.700'),
a: {
color: theme('colors.primary.500'),
color: theme('colors.lime.500'),
'&:hover': {
color: `${theme('colors.primary.600')} !important`,
color: `${theme('colors.lime.600')} !important`,
},
code: { color: theme('colors.primary.400') },
code: { color: theme('colors.lime.400') },
},
h1: {
fontWeight: '700',
Expand Down Expand Up @@ -104,11 +127,11 @@ module.exports = {
css: {
color: theme('colors.gray.300'),
a: {
color: theme('colors.primary.500'),
color: theme('colors.lime.500'),
'&:hover': {
color: `${theme('colors.primary.400')} !important`,
color: `${theme('colors.lime.400')} !important`,
},
code: { color: theme('colors.primary.400') },
code: { color: theme('colors.lime.400') },
},
h1: {
fontWeight: '700',
Expand Down

0 comments on commit 01a0efe

Please sign in to comment.