Rowe2ry Comments - Answer Overflow

Topics

Rowe2ry

KPCKevin Powell - Community

•Created by Kida Sacheil on 12/15/2024 in #front-end

Dealing with content on a moving colored background

I played with it and couldn't figure it out either. I will say I'm pretty positive, the text element will need to be inside of the element with the background it is trying to render against to work. this is the example I was trying to follow which is exactly what you want to do. https://css-tricks.com/reverse-text-color-mix-blend-mode/ (note, their UI example is a loading bar, I spent longer than I'd like to admit waiting for the example to load before I realized the loading UI IS the showcase of mix-blend-mode: difference;)

10 replies

KPCKevin Powell - Community

•Created by Kida Sacheil on 12/15/2024 in #front-end

Dealing with content on a moving colored background

I cam here to say a blend mode might help but was beat to the punch.

10 replies

KPCKevin Powell - Community

•Created by travel561 on 12/17/2024 in #front-end

I am trying to apply responsive design to my website

Okay, that helps to give guidance on what you're doing. For the hero section, I don't know what you want the mobile layout to look like, but you can start with using a grid layout to set the Text section (header, text blurb, and action button) and the image section. Make a top level container (<div>, <section>, etc.) for text and image contents, then place them in a parent container wiht the grid column and row definitions. Grid will give you control over how many rows and columns you want, gaps between them, and what size/ratios your colun and row widths are. Then using either grid-template-areas or grid-column-start/grid-column-end and grid-row-start/grid-row-end on the text and image containers to choose how they stack at different media queries. https://developer.mozilla.org/en-US/docs/Web/CSS/grid-template-areas

20 replies

KPCKevin Powell - Community

•Created by travel561 on 12/17/2024 in #front-end

I am trying to apply responsive design to my website

To start, I'd recommend a quick pencil sketch in a notebook or making Figma mockup of what you want. Coding to a design usually yields better results than just coding something, looking at what shows up in the browser, and then asking yourself "What does this need?" When I did my personal portfolio site, I spent 3 days doing the Figma for it. Then I coded it out in another 3 days. If I had not invested the UI time in, the development would have taken much longer and with worse results.

20 replies

KPCKevin Powell - Community

•Created by Rowe2ry on 12/10/2024 in #front-end

Flexbox or Grid?

Yeah the whole dev team has U-L-T-R-A-W-I-D-E-S

7 replies

KPCKevin Powell - Community

•Created by Rowe2ry on 12/10/2024 in #front-end

Flexbox or Grid?

I'm embarrased at how easy that was to do. Idk why but I thought I was going to need flexbox and flex wrap for this because I've used both before in lots of places in our app.

7 replies

KPCKevin Powell - Community

•Created by Rowe2ry on 12/10/2024 in #front-end

Flexbox or Grid?

No description

7 replies

KPCKevin Powell - Community

•Created by Raskin on 11/8/2024 in #front-end

skip eggs function

No description

27 replies

KPCKevin Powell - Community

•Created by Raskin on 11/8/2024 in #front-end

skip eggs function

No description

27 replies

KPCKevin Powell - Community

•Created by peterpumkineaterr on 10/31/2024 in #front-end

I accidentally made complex portfolio design, i don’t know how i should develop it in css.

No description

40 replies

KPCKevin Powell - Community

•Created by peterpumkineaterr on 10/31/2024 in #front-end

I accidentally made complex portfolio design, i don’t know how i should develop it in css.

You are only defining a space-between property value in your header { /*styles*/ } declaration

40 replies

KPCKevin Powell - Community

•Created by peterpumkineaterr on 10/31/2024 in #front-end

I accidentally made complex portfolio design, i don’t know how i should develop it in css.

No description

40 replies

KPCKevin Powell - Community

•Created by peterpumkineaterr on 10/31/2024 in #front-end

I accidentally made complex portfolio design, i don’t know how i should develop it in css.

Yeah, he is saying to use JS to toggle to remove the active class from all of your links, then add the active to only one clicked. Then include a css selector along with your &:hover { /*styles here*/ } => &:hover,&.active { /* styles here */ } Its been a while since I've been using something other than the Blazor web assembly framework we use in prod, but just showing the HTML and styling I'd use is something like:

<ul>
   <li><a href="#work" aria-selected="false">Work</a></li>
   <li><a href="#aboutMe" aria-selected="false">Me</a></li>
   <li><a href="#resume" aria-selected="false">Resume<li><a href="#work" aria-selected="false">Work</a></li></a></li>
</ul>

<ul>
   <li><a href="#work" aria-selected="false">Work</a></li>
   <li><a href="#aboutMe" aria-selected="false">Me</a></li>
   <li><a href="#resume" aria-selected="false">Resume<li><a href="#work" aria-selected="false">Work</a></li></a></li>
</ul>

li {
     a {
         position: relative;
        
         &:hover::before,
         [aria-selected="true"]::before {
             transform: scaleX(1);
         }
          
         &::before {
             content: '';
             width: 100%;
             height: 3px;
             background-color: black;
             position: absolute;
             left: 0;
             bottom: -4px;
             transition: transform 150ms ease-in-out;
             transform: scaleX(0);
         }
    }
}

li {
     a {
         position: relative;
        
         &:hover::before,
         [aria-selected="true"]::before {
             transform: scaleX(1);
         }
          
         &::before {
             content: '';
             width: 100%;
             height: 3px;
             background-color: black;
             position: absolute;
             left: 0;
             bottom: -4px;
             transition: transform 150ms ease-in-out;
             transform: scaleX(0);
         }
    }
}

And then instead of toggling on the class list, you flip the attribute boolean value on aria-selected

40 replies

KPCKevin Powell - Community

•Created by peterpumkineaterr on 10/31/2024 in #front-end

I accidentally made complex portfolio design, i don’t know how i should develop it in css.

No description

40 replies

KPCKevin Powell - Community

•Created by peterpumkineaterr on 10/31/2024 in #front-end

I accidentally made complex portfolio design, i don’t know how i should develop it in css.

replace your li block with this and then tweak the left, top, background color, width, and height values to your liking. Pseudo element (::before) is easier to position and control than the browser-defined "underline" text decoration:

li {
        list-style: none;
        margin: 1em 0;
        font-size: 1.25rem;
        font-family: "satoshi-light";

        a {
            color: black;
            text-decoration: none;
            position: relative;
        
            &:hover::before {
                transform: scaleX(1);
            }
          
            &::before {
              content: '';
              width: 100%;
              height: 3px;
              background-color: black;
              position: absolute;
              left: 0;
              bottom: -4px;
              transition: transform 150ms ease-in-out;
              transform: scaleX(0);
            }
        }
    }

li {
        list-style: none;
        margin: 1em 0;
        font-size: 1.25rem;
        font-family: "satoshi-light";

        a {
            color: black;
            text-decoration: none;
            position: relative;
        
            &:hover::before {
                transform: scaleX(1);
            }
          
            &::before {
              content: '';
              width: 100%;
              height: 3px;
              background-color: black;
              position: absolute;
              left: 0;
              bottom: -4px;
              transition: transform 150ms ease-in-out;
              transform: scaleX(0);
            }
        }
    }

40 replies

KPCKevin Powell - Community

•Created by peterpumkineaterr on 10/31/2024 in #front-end

I accidentally made complex portfolio design, i don’t know how i should develop it in css.

When I did my portfolio, I spent 3 days doing the Figma, and 4 days coding it out and I was going for dev positions. If I was trying to show off my design skills and I wasn't a dev and I wasn't applying for dev roles, I would make like a squarespace or wix site to host my portfolio, and then include links to the Figma.

40 replies

KPCKevin Powell - Community

•Created by peterpumkineaterr on 10/31/2024 in #front-end

I accidentally made complex portfolio design, i don’t know how i should develop it in css.

If Figma is your specialty, and the jobs you are applying for are for Figma, you may want to comission a contracted dev on Fiver to code the site to look like your Figma. If you have to learn all of the dev skills needed to make modern complex layouts... then you may as well go into applying for dev roles by the time you've learned enought to deploy your working website ¯\_(ツ)_/¯

40 replies

KPCKevin Powell - Community

•Created by EasyToKill_ (long break) on 10/22/2024 in #front-end

Convert SVG to CSS properties

From the css. The css says URL, but its the actual SVG file data its reading. The browser isn't making any network calls to load the svgs, it comes with the stylesheet

13 replies

KPCKevin Powell - Community

•Created by Rowe2ry on 10/29/2024 in #front-end

Style an element if it has 2 attributes with the same value?

Ahh I'm starting to see it. Thats an innovative approach. I think I might just bite the bullet and use our Blazor framwork tooling to assign an "increment-disabled" and/or "decrement-disabled" class if I don't get approval to ignore this requirement

15 replies

KPCKevin Powell - Community

•Created by Rowe2ry on 10/29/2024 in #front-end

Style an element if it has 2 attributes with the same value?

That's pretty cool. I am not good at reading the scss

15 replies