diff --git a/public/index.html b/public/index.html index b412def..cbca4d4 100644 --- a/public/index.html +++ b/public/index.html @@ -1,65 +1,60 @@ + + + + + + + + + + + - - - - - - - - - - - - - - - - - - - - - - - - - - - - - Neumorphism/Soft UI CSS shadow generator - - - -
-

Neumorphism.io

-

Generate Soft-UI CSS code

-
- -
- - -
-
- - Star on GitHub -
-
- - - \ No newline at end of file + +
+ + diff --git a/src/App.js b/src/App.js index 6233c11..02f5888 100644 --- a/src/App.js +++ b/src/App.js @@ -1,23 +1,105 @@ -import React, { useState, useRef } from 'react' +import React, { useState, useRef, useEffect } from 'react' import Preview from './Preview' import Configuration from './Configuration' import UiverseElements from './components/UiverseElements' - +import Footer from './components/Footer' const App = () => { const [activeLightSource, setActiveLightSource] = useState(1) const previewBox = useRef() + const [githubStars, setGithubStars] = useState(0) + console.log(githubStars) + useEffect(() => { + const fetchGithubStars = async () => { + try { + const response = await fetch( + 'https://api.github.com/search/repositories?q=repo:adamgiebl/neumorphism', + { + headers: { + Accept: 'application/vnd.github.preview' + } + } + ) + const data = await response.json() + setGithubStars(data.items[0].stargazers_count) + } catch (error) { + console.error('Error fetching GitHub stars:', error) + } + } + + fetchGithubStars() + }, []) + return ( -
-
- - -
-
- + <> + + +
+
+
+ + +
+
+
+ +
+
+
+

What is Neumorphism?

+

+ Neumorphism, also known as soft UI, is a visual design trend that combines elements of + skeuomorphism and flat design. It creates a soft, extruded plastic look by using + subtle contrasting shadows to create the illusion of depth. This style mimics physical + objects while maintaining a minimal and modern aesthetic, often featuring + monochromatic color schemes with low contrast shadows and highlights. +

+
+
+
-
+ + ) +} + +const GitHubStarButton = ({ githubStars }) => { + return ( + ) } diff --git a/src/App.style.js b/src/App.style.js index 11eaa34..add8008 100644 --- a/src/App.style.js +++ b/src/App.style.js @@ -1,26 +1,27 @@ -import styled from "styled-components"; +import styled from 'styled-components' export const LightSource = styled.div` position: absolute; - left: ${(props) => props.left}; - top: ${(props) => props.top}; - right: ${(props) => props.right}; - bottom: ${(props) => props.bottom}; + left: ${props => props.left}; + top: ${props => props.top}; + right: ${props => props.right}; + bottom: ${props => props.bottom}; background: transparent; height: 30px; width: 30px; cursor: pointer; border: 2px solid var(--textColor); - border-bottom-right-radius: ${(props) => - props.right === "unset" && props.bottom === "unset" ? "30px" : "unset"}; - border-bottom-left-radius: ${(props) => - props.left === "unset" && props.bottom === "unset" ? "30px" : "unset"}; - border-top-right-radius: ${(props) => - props.right === "unset" && props.top === "unset" ? "30px" : "unset"}; - border-top-left-radius: ${(props) => - props.left === "unset" && props.top === "unset" ? "30px" : "unset"}; + opacity: 0.8; + border-bottom-right-radius: ${props => + props.right === 'unset' && props.bottom === 'unset' ? '30px' : 'unset'}; + border-bottom-left-radius: ${props => + props.left === 'unset' && props.bottom === 'unset' ? '30px' : 'unset'}; + border-top-right-radius: ${props => + props.right === 'unset' && props.top === 'unset' ? '30px' : 'unset'}; + border-top-left-radius: ${props => + props.left === 'unset' && props.top === 'unset' ? '30px' : 'unset'}; &.active { background: #ffff00; } -`; +` diff --git a/src/Configuration.js b/src/Configuration.js index 00775bf..ac5663a 100644 --- a/src/Configuration.js +++ b/src/Configuration.js @@ -10,7 +10,8 @@ SyntaxHighlighter.registerLanguage('css', css) const Configuration = ({ previewBox, activeLightSource = 1 }) => { const [blur, setBlur] = useState(60) - const [color, setColor] = useState(getColorFromRoute() || '#e0e0e0') + const defaultColor = '#e0e0e0' + const [color, setColor] = useState(getColorFromRoute() || defaultColor) const [size, setSize] = useState(300) const [radius, setRadius] = useState(50) const [shape, setShape] = useState(0) @@ -177,7 +178,9 @@ box-shadow: ${firstBoxShadow}, return (
- + -
- @@ -259,7 +291,7 @@ box-shadow: ${firstBoxShadow}, rel="noopener" onclick="getOutboundLink('https://uxdesign.cc/neumorphism-in-user-interfaces-b47cef3bf3a6'); return true;" > - Read more about Neumorphism + Read more about Neumorphism
) diff --git a/src/ConfigurationRow.js b/src/ConfigurationRow.js index 767ed74..5ac9b4f 100644 --- a/src/ConfigurationRow.js +++ b/src/ConfigurationRow.js @@ -4,7 +4,9 @@ import { camelize } from './utils' const ConfigurationRow = ({ label, type, value, min, max, step = '1', onChange }) => { return (
- + { return ( <>
- +
- ); -}; + ) +} -export default ShapeSwitcher; +export default ShapeSwitcher diff --git a/src/components/ElementCard.js b/src/components/ElementCard.js index c874fd8..f252568 100644 --- a/src/components/ElementCard.js +++ b/src/components/ElementCard.js @@ -43,12 +43,12 @@ export const ElementCard = props => { return (
-
+
{
-

{user?.username}

+

{user?.username}

{viewCount > 0 && ( - + {formatter.format(viewCount)} views )} diff --git a/src/components/Footer.js b/src/components/Footer.js new file mode 100644 index 0000000..8d356e7 --- /dev/null +++ b/src/components/Footer.js @@ -0,0 +1,132 @@ +const navigation = { + resources: [ + { name: 'Uiverse.io', href: 'https://uiverse.io' }, + { name: 'Neumorphism.io', href: 'https://neumorphism.io' }, + { name: 'Cssbuttons.io', href: 'https://cssbuttons.io' } + ], + elements: [ + { name: 'Checkboxes', href: 'https://uiverse.io/checkboxes' }, + { name: 'Radio Buttons', href: 'https://uiverse.io/radio-buttons' }, + { name: 'Switches', href: 'https://uiverse.io/switches' }, + { name: 'Loaders', href: 'https://uiverse.io/loaders' }, + { name: 'Inputs', href: 'https://uiverse.io/inputs' }, + { name: 'Patterns', href: 'https://uiverse.io/patterns' } + ], + social: [ + { + name: 'Instagram', + href: 'https://www.instagram.com/adamgiebl.io/', + icon: props => ( + + + + ) + }, + { + name: 'X', + href: 'https://x.com/adam_giebl', + icon: props => ( + + + + ) + }, + { + name: 'GitHub', + href: 'https://github.com/adamgiebl', + icon: props => ( + + + + ) + } + ] +} + +export default function Footer() { + return ( +
+ +
+
+
+ icon +

+ Neumorphism.io - Generate neumorphic designs +

+
+ {navigation.social.map(item => ( + + {item.name} + + ))} +
+
+
+
+
+
+
+
+

Resources

+ +
+
+

Other Elements

+ +
+
+
+
+
+

+ © {new Date().getFullYear()} Adam Giebl, All rights reserved. +

+
+
+
+ ) +} diff --git a/src/components/UiverseElements.js b/src/components/UiverseElements.js index 29e7c58..a06458d 100644 --- a/src/components/UiverseElements.js +++ b/src/components/UiverseElements.js @@ -8,7 +8,8 @@ const UiverseElements = () => { try { const response = await fetch('http://localhost:3000/resource/neumorphism-elements') if (!response.ok) { - throw new Error(`HTTP error! status: ${response.status}`) + setElements([]) + return } const data = await response.json() @@ -27,11 +28,27 @@ const UiverseElements = () => { return ( <> -
-

Examples

-

Examples of Neumorphism elements

+
+
+

Examples

+

Examples of Neumorphism elements

+
+ + Browse all{' '} + + + +
-
+
{elements.map(element => ( ))} @@ -41,9 +58,15 @@ const UiverseElements = () => { href="https://uiverse.io/elements?tags=neumorphism" target="_blank" rel="noopener noreferrer" - className="px-4 py-2 border rounded-md border-primary text-primary hover:bg-primary hover:text-white" + className="px-4 py-2 border font-semibold rounded-md flex items-center gap-2 border-[color:var(--textColor)] text-[color:var(--textColor)] hover:bg-[color:var(--textColor)] hover:text-[color:var(--baseColor)]" > - Browse more + Browse all{' '} + + +
diff --git a/src/index.scss b/src/index.scss index 5bdbda9..e6abcac 100644 --- a/src/index.scss +++ b/src/index.scss @@ -39,10 +39,9 @@ body { background: var(--baseColor); color: var(--textColor); - font-family: 'Muli', sans-serif; - display: flex; - flex-direction: column; - align-items: center; + font-family: 'Noto Sans JP', sans-serif; + font-optical-sizing: auto; + font-style: normal; margin: 0; padding-top: 40px; @@ -80,8 +79,8 @@ body { margin-top: 20px; z-index: 1; - @media only screen and (min-width: 1500px) { - margin-bottom: 40px; + @media only screen and (min-width: 1200px) { + margin-bottom: 60px; margin-top: 0; h1 { font-size: 35px; @@ -91,21 +90,11 @@ body { } } - @media only screen and (min-width: 1700px) and (min-height: 870px) { - margin-bottom: 70px; - h1 { - font-size: 38px; - } - h2 { - font-size: 28px; - } - } - @media only screen and (max-width: 680px) and (max-height: 800px) { margin-bottom: 10px; margin-top: 10px; h1 { - font-size: 18px; + font-size: 22px; } h2 { font-size: 15px; @@ -144,18 +133,13 @@ body { text-align: center; margin-bottom: 20px; - .browse-more { - a { - border: 1px solid var(--textColor); - } - } - @media only screen and (min-height: 800px) { margin-bottom: 70px; } .flex-custom { - display: flex; + display: inline-flex; + margin-inline: auto; align-items: flex-start; @media only screen and (max-width: 680px) { @@ -267,6 +251,7 @@ body { pre { margin: 0 !important; padding: 15px !important; + background: var(--textColor) !important; min-width: 354px; code { @@ -356,7 +341,7 @@ body { button { flex-grow: 1; - padding: 0px 10px; + padding: 4px 10px; background: var(--textColor); color: var(--textColorOpposite); cursor: pointer; @@ -382,71 +367,6 @@ body { } } -#carbonads * { - margin: initial; - padding: initial; -} -#carbonads { - font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans, Ubuntu, Cantarell, - 'Helvetica Neue', Helvetica, Arial, sans-serif; -} -#carbonads { - display: flex; - max-width: 330px; - background-color: hsl(0, 0%, 98%); - box-shadow: 0 1px 4px 1px hsla(0, 0%, 0%, 0.1); - z-index: 100; - - @media only screen and (max-width: 745px) { - display: none; - } -} -#carbonads a { - color: #001f3f; - text-decoration: none; -} -#carbonads a:hover { - color: inherit; -} -#carbonads span { - position: relative; - display: block; - overflow: hidden; -} -#carbonads .carbon-wrap { - display: flex; -} -#carbonads .carbon-img { - display: block; - margin: 0; - line-height: 1; -} -#carbonads .carbon-img img { - display: block; -} -#carbonads .carbon-text { - font-size: 13px; - padding: 10px; - margin-bottom: 16px; - line-height: 1.5; - text-align: left; -} -#carbonads .carbon-poweredby { - display: block; - padding: 6px 8px; - background: #f1f1f2; - text-align: center; - text-transform: uppercase; - letter-spacing: 0.5px; - font-weight: 600; - font-size: 8px; - line-height: 1; - border-top-left-radius: 3px; - position: absolute; - bottom: 0; - right: 0; -} - @import './styles/inputs.scss'; @import './styles/footer.scss'; @import './styles/Card.scss'; diff --git a/src/styles/Card.scss b/src/styles/Card.scss index 2d797f7..2c050a1 100644 --- a/src/styles/Card.scss +++ b/src/styles/Card.scss @@ -24,12 +24,10 @@ $border-radius: var(--border-radius); left: $left; } - .card { transition: opacity 0.3s; position: relative; overflow: hidden; - color: $maindark; border-radius: 8px; &--in-progress { @@ -72,7 +70,6 @@ $border-radius: var(--border-radius); } } - .clickable-wrapper { height: 100%; overflow: hidden; @@ -86,7 +83,6 @@ $border-radius: var(--border-radius); background: $lightgray; border-radius: 8px; - @media only screen and (max-width: 500px) { min-height: 220px; } @@ -97,8 +93,6 @@ $border-radius: var(--border-radius); } &.dark-background { - color: $dark; - .card-content, .card__button-container { background: $dark; @@ -120,6 +114,3 @@ $border-radius: var(--border-radius); } } } - - - diff --git a/src/styles/footer.scss b/src/styles/footer.scss index ede21bc..2657c1a 100644 --- a/src/styles/footer.scss +++ b/src/styles/footer.scss @@ -1,17 +1,3 @@ -footer { - padding: 0 30px; - position: fixed; - display: flex; - justify-content: center; - align-items: flex-end; - bottom: 20px; - width: 100%; - - @media only screen and (max-width: 918px) { - padding: 0 20px; - } -} - .tags { display: flex; align-items: center; diff --git a/tailwind.config.js b/tailwind.config.js index c2c8eaa..4f8a5c1 100644 --- a/tailwind.config.js +++ b/tailwind.config.js @@ -1,6 +1,6 @@ module.exports = { content: ['./src/**/*.{js,jsx,ts,tsx}'], - + important: true, theme: { extend: { gridTemplateColumns: {