diff --git a/src/App.tsx b/src/App.tsx index 83d03a9..06ef379 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -2,12 +2,11 @@ import { useCallback, useEffect, useState } from 'react' import styled from 'styled-components' import hintImg from '@assets/imgs/hint.svg' -import titleImg from '@assets/imgs/title.svg' import Grid from '@components/Grid' import Hint from '@components/Hint' import IconButton from '@components/IconButton' -import Title from '@components/Title' +import Ribbon from '@components/Ribbon' import { Step } from '@lib/search' @@ -32,10 +31,21 @@ const AppWrapper = styled.div` justify-content: center; transition: background-color 1.25s ease; + ${Ribbon} { + margin: 24px 0 0 0; + } + ${Hint} { margin-top: 140px; } + p { + margin: 12px 0; + font-family: var(--fontFamily); + color: white; + font-size: 1rem; + } + @media (max-width: 640px) { flex-direction: column; justify-content: flex-start; @@ -69,7 +79,7 @@ const Colors = styled.div` justify-content: center; background-color: white; border-radius: 8px; - margin-bottom: 24px; + margin-bottom: 12px; padding: 2px; box-shadow: 0px 2px 1px 1px #aaa; ` @@ -136,9 +146,8 @@ export default () => { - - Solved with A* Algorithm - + 8-Puzzle +

Solved with the A* Algorithm

{THEME_COLORS.map(color => \ No newline at end of file diff --git a/src/components/Ribbon.tsx b/src/components/Ribbon.tsx new file mode 100644 index 0000000..2350373 --- /dev/null +++ b/src/components/Ribbon.tsx @@ -0,0 +1,115 @@ +import styled from 'styled-components' + +type RibbonProps = { + children: string + className?: string +} + +const Ribbon = ({ children, className }: RibbonProps) => { + return ( +
+
+
+
+
+
+
+
+
{children}
+
+
+
+ ) +} + +const RibbonStyled = styled(Ribbon)` + --width: 300px; + --height: calc(var(--width) / 5.5); + + display: flex; + width: var(--width); + padding-top: 15px; + position: relative; + .side-ribbon-wrapper{ + display: flex; + width: 100%; + justify-content: space-between; + } + .side-ribbon { + position: relative; + display: flex; + + :nth-child(1):after, :nth-child(2):before { + content: ''; + display: block; + height: var(--height); + width: calc(var(--width) / 7); + background-color: #e8e0e0; + } + :nth-child(1):before, :nth-child(2):after { + content: ''; + border: calc(var(--height) / 2) solid #e8e0e0; + box-sizing: border-box; + display: block; + } + :nth-child(1):before { + border-left-color: #fff0; + } + :nth-child(2):after { + border-right-color: #fff0; + } + } + .main-ribbon { + position: absolute; + top: 0px; + left: 0px; + right: 0px; + margin: auto; + width: calc(var(--width) * 0.625); + } + .shadow { + width: 100%; + justify-content: space-between; + display: flex; + position: absolute; + bottom: -7px; + z-index: 1; + } + .shadow:before { + margin-left: 4px; + width: calc(var(--height) * 0.7); + height: calc(var(--height)); + background-color: #997687; + content: ''; + display: block; + transform: skew(0deg, 24deg); + } + .shadow:after { + margin-right: 4px; + width: calc(var(--height) * 0.7); + height: calc(var(--height)); + background-color: #997687; + content: ''; + display: block; + transform: skew(0deg, -24deg); + } + .title-wrapper { + height: var(--height); + display: flex; + border-radius: 8px; + background-color: white; + position: relative; + z-index: 2; + overflow: hidden; + } + .title-wrapper div { + font-family: var(--fontFamily); + font-size: 2.125rem; + color: var(--primary); + } + .main-ribbon div { + margin: auto; + } +` + +export default RibbonStyled diff --git a/src/components/Title.tsx b/src/components/Title.tsx deleted file mode 100644 index fae1f5a..0000000 --- a/src/components/Title.tsx +++ /dev/null @@ -1,38 +0,0 @@ -import styled from 'styled-components' - -type TitleProps = { - className?: string - img?: string - children: React.ReactText -} - -const Title = ({ className, img, children }: TitleProps) => ( -
- {img && } - {children} -
-) - -const StyledTitle = styled(Title)` - width: 300px; - img { - width: 100%; - } - span { - width: 100%; - display: block; - height: 2em; - margin: 10px 0 5px; - color: white; - font-family: var(--fontFamily); - } - text-align: center; - margin: 20px 0 10px; - - @media (max-width: 480px) { - width: 200px; - margin: 20px auto 10px; - } -` - -export default StyledTitle