Psyzen Posts - Answer Overflow

Psyzen

Explore posts from servers

KPCKevin Powell - Community SMSatisfactory Modding

Posts Comments

KPCKevin Powell - Community

•Created by Psyzen on 2/18/2024 in #front-end

Scrollbar margin disappears ?

12 replies

KPCKevin Powell - Community

•Created by Psyzen on 2/11/2024 in #front-end

How to set border for second grid row ?

So... Is it possible to do it ?

grid-template-columns: reepat(5, 1fr);
grid-template-rows: repeat(3, 1fr);
/* How to add **border: 1px solid #000** to the row 2 from first to the last column ? */

grid-template-columns: reepat(5, 1fr);
grid-template-rows: repeat(3, 1fr);
/* How to add **border: 1px solid #000** to the row 2 from first to the last column ? */

I do know you can do that with container. I guess my questions would be more how to do it with grid-area where there are single items.

4 replies

KPCKevin Powell - Community

•Created by Psyzen on 2/7/2024 in #front-end

A problem I find with Semantic HTML

I am making a dashboard website for a mobile game I enjoy. The problem I encountered with the lack of tags and I end up using too much <section> tags and not everything is a section but without it there is nothing else to use. Sure I use <header>, <nav>, <main>,<footer>, <section> but for example <article> is way too specific it's a dashboard not blog post or a cooking recipe and it doesn't have any headings. So I am wondering there is NO SHOT screen readers gonna use it. And is this even worth learning more, because the more I read it the more divs with class names and comments sounds less complex. And semantics at this point is ironic because since html5 nothing about that has meaning, or rather it has meaning but the meaning is more specific rather being general. Such as <item>, <container>, <content>,etc.

54 replies

KPCKevin Powell - Community

•Created by Psyzen on 1/23/2024 in #front-end

Transition in tailwind for grid ?

I have the code set up. I wrote grid grid-cols-[3.5rem] and then with mouse on enter attribute I change it to 14.5rem and on out back to 3.5rem the JS works fine. It used to work but for some reason it doesn't work anymore. I set up in tailwind.config.js grid property extends: { transitionProperty: { grid: 'grid' } } and then I did transition-grid ease-in-out duration-500 and it worked but for some reason it doesn't anymore or I made a mistake somewhere.

3 replies

KPCKevin Powell - Community

•Created by Psyzen on 1/19/2024 in #ui-ux

Redesigning navigation sidebar

5 replies

KPCKevin Powell - Community

•Created by Psyzen on 1/16/2024 in #front-end

Background color changes dimensions ???

14 replies

KPCKevin Powell - Community

•Created by Psyzen on 1/11/2024 in #ui-ux

Feedback for any improvements ?

40 replies

KPCKevin Powell - Community

•Created by Psyzen on 12/10/2023 in #ui-ux

Balance between color tips

I am using 60-30-10 rule, well trying to use. 60 -> #141414 / dark gray 30 -> #212121 / lighter dark gray 10 -> #fd700 / gold There is only navigation bar. The hover color #3b3b3b and the bottom of the nav bar profile background is #2e2e2e. The primary 60 and secondary 30, hover, profile background feels fine. I know the accent color which is gold should be used only for 10% of the page but I feel like the gold color is too strong or just a poor choice of accent color. This is codepen since I do not mind sharing it. https://codepen.io/LCSNeo/pen/VwggLRO

8 replies

KPCKevin Powell - Community

•Created by Psyzen on 12/8/2023 in #front-end

Tailwind Arbitrary Values

This is parent ul

      <ul class="grid gap-2 [&:nth-child(2)]:gap-1" href="#">

      <ul class="grid gap-2 [&:nth-child(2)]:gap-1" href="#">

Any ideas why this is not working ? I am trying to change padding for the second child and it just doesn't work. I tried with self-reference &, &*, &>*. The last 2 not exactly sure how it works. I assume this > is used for children elements to point they parent and * to select all of the elements. Correct me if I am wrong.

19 replies

KPCKevin Powell - Community

•Created by Psyzen on 12/7/2023 in #front-end

Tailwind CSS place-content: align-content/justify-content ?

I only see single values on the official website, when this suppose to accept both values if wanted. Is the support not there yet for both values ?

2 replies

KPCKevin Powell - Community

•Created by Psyzen on 12/6/2023 in #front-end

Grid last element

https://codepen.io/LCSNeo/pen/VwggLRO I am trying to move the last li item to the bottom. I tried align-self but it doesn't seem to work.

16 replies

KPCKevin Powell - Community

•Created by Psyzen on 11/2/2023 in #front-end

How to show first 3 items in the browser ?

9 replies

KPCKevin Powell - Community

•Created by Psyzen on 5/31/2023 in #front-end

Tailwind CSS transition not working.

<div class="mt-6">
  <p class="text-sm">Or sign up with:</p>
  <div class="flex justify-center mt-2">
    <a href="#" class="bg-white rounded-full flex justify-center items-center transition-all duration-1000 ease-in-out" id="googleButton">
      <img src="../assets/icons/google/g-logo-48.png" alt="Google" class="bg-white rounded-full">
      <span class="left-full font-semibold" id="googleText"></span>
    </a>
  </div>
</div>

<div class="mt-6">
  <p class="text-sm">Or sign up with:</p>
  <div class="flex justify-center mt-2">
    <a href="#" class="bg-white rounded-full flex justify-center items-center transition-all duration-1000 ease-in-out" id="googleButton">
      <img src="../assets/icons/google/g-logo-48.png" alt="Google" class="bg-white rounded-full">
      <span class="left-full font-semibold" id="googleText"></span>
    </a>
  </div>
</div>

For the most part everything works. The only thing that doesn't work is the animation speed. No matter what I do nothing happens. I could make it work in regular CSS but that would defeat the point learning in Tailwind CSS. So if anyone has any clue why transition-all duration-1000 ease-in-out doesn't work. Let me know it. Thank you for you time.

3 replies

KPCKevin Powell - Community

•Created by Psyzen on 9/26/2022 in #front-end

Gap between divs...

I made a div container with border in that div I made another div with background color. Between those 2 divs there is a tiny tiny gap. Margin: -2px; fixes it. Can anyone explain me why is this happening ? I even removed all my css that affects layout like margins or paddings, tried to set them to 0 and it didn't work. :/

44 replies

Gaming

Programming