CODEWITHSUNDEEP
htmlcssreactjsfrontendstyled-components
Joji
Joji

Reputation: 5646

how should I fix these styling problems with styled-component

I'm trying to make a portfolio website as practice. I am not really good at css and I learned from other people's code to learn from their design and special effects.

Here is what I achieve so far, I have a little gallery to store my photos and use a photo enlarger to enlarge it when clicking on it. Normally when it is not hovered or clicked, the photos are desaturated by filter: grayscale(50%) contrast(1); and when it is hovered, the saturation returns to normal and there is a shadow below the photos.

Here is the demo: https://codesandbox.io/s/objective-swartz-tuo1t

The relevant code snippets are

const Avatar = styled(SingleSource)`
  position: relative;
  mix-blend-mode: multiply;
  filter: grayscale(50%) contrast(1);
  transition: ${theme.transition};
`;

const AvatarContainer = styled.a`
  box-shadow: 0 10px 30px -15px ${colors.shadowNavy};
  transition: ${theme.transition};

  &:hover,
  &:focus {
    box-shadow: 0 20px 30px -15px ${colors.shadowNavy};
  }
  width: 100%;
  background: transparent;
  position: relative;
  margin-left: -20px;
  &:hover,
  &:focus {
    background: transparent;
    ${Avatar} {
      filter: none;
      mix-blend-mode: normal;
    }
  }

here < SingleSource /> is the enlarger component for each photo.

However now there are several problems.

  1. The desaturation effect is not applied at all. The saturation of photos are normal all the time.

  2. There is white paddings around ever photo, kind of photo frames. I believe it has to do with the shadow style I applied. Specifically this snippet 

      box-shadow: 0 10px 30px -15px ${colors.shadowNavy};
  transition: ${theme.transition};

  &:hover,
  &:focus {
    box-shadow: 0 20px 30px -15px ${colors.shadowNavy};
  }

  3. There is a blue border around the picture container when you click on that area. How can I remove this. enter image description here

Upvotes: 0

Views: 157

Answers (1)

Derek
Derek

Reputation: 4751

Based on your code snippet, this should solve the outline problem for you. In components/jobs.js update the definition of TabContent to look like:

const TabContent = styled.div`
  top: 0;
  left: 0;
  width: 100%;
  height: auto;
  opacity: ${props => (props.isActive ? 1 : 0)};
  z-index: ${props => (props.isActive ? 2 : -1)};
  position: ${props => (props.isActive ? "relative" : "absolute")};
  visibility: ${props => (props.isActive ? "visible" : "hidden")};
  transition: ${theme.transition};
  transition-duration: ${props => (props.isActive ? "0.5s" : "0s")};
  &:focus-within { // <--------- this is what was added
    outline: none;
  }
  ul {
    padding: 0;
    margin: 0;
    list-style: none;
    font-size: ${fontSizes.large};
    li {
      position: relative;
      padding-left: 30px;
      margin-bottom: 10px;
      &:before {
        content: "▹";
        position: absolute;
        left: 0;
        color: ${colors.green};
        line-height: ${fontSizes.xlarge};
      }
    }
  }
`;

Upvotes: 1

Related Questions