clevermissfox
KPCKevin Powell - Community
•Created by clevermissfox on 7/25/2024 in #front-end
em scope in @media and @container
Am I remembering correctly that in an @media query, using ems or rems e.g.
- in @container
@media (min-width: 50rem) or @media (min-width: 50em) is referring the browsers font-size, even if you've changed your html font-size to something like 62.5% , its still using 1rem = 16px and 1em=16px?
but within a container query @container(min-width: 50rem) or @container(min-width: 50em) rem is referring to what youve defined as your root font-size (so if you've changed your :root {font-size: 62.5%;} then a container query in rem would be calculating/resolving 1rem=10px.
if youve changed the containers font-size .container {font-size: 32px" the container query would be calculating/resolving 1em=32px ?
I do remember a post about the @container spec that 1em looks at the containers font-size but want to confirm:
- the @media is not looking at your :root {font-size: ...}, its looking at the browsers root (which can either be 16px or what the user sets as their preferred font size) ✅- in @container
1rem is looking at what youve defined in your :root {font-size: ...} ✅18 replies
KPCKevin Powell - Community
•Created by clevermissfox on 7/11/2024 in #front-end
SOLVED: select element not respecting grid cell- heights gonna height
14 replies
KPCKevin Powell - Community
•Created by clevermissfox on 7/4/2024 in #front-end
outline on focus-visible is not even?
5 replies
KPCKevin Powell - Community
•Created by clevermissfox on 6/15/2024 in #front-end
Grid help
https://codepen.io/Miss-Fox/pen/wvbpdRd
relevant styles in ' @layer help'
So i run into this issue fairly often but not always.... I am declaring my columns as the size i want them to be 30ch 3em 55ch respectively. but the min function isdoing its thing saying which is smaller 100% or 30ch. which leads me to wonder, why is my grid exactly the size of the childrens implicit content as a default? i thought it was the flex on the body but even if i take that off , its still the implicit size.
How to i make my columns the size i want them to be until they start running out of room? if i give my parent grid .wrap a width of 100%, then the children use the max 1fr and grow to fill the screen.
33 replies
KPCKevin Powell - Community
•Created by clevermissfox on 6/7/2024 in #front-end
not -solved: ClipPath
Problem One:
Why doesnt my clip-path on the pseudo element in the top right corner look the same as the hotpink svg with the same path ? the circle cutout isnt in the middle and its squished.
https://codepen.io/Miss-Fox/pen/abrwMjq?editors=1100
Problem One Solution
had to convert the clip-path to a relative path with this site https://yoksel.github.io/relative-clip-path/
Problem Two:
If I declare overflow hidden or clip on the label element , everything breaks?? The clip-path on the pseudo element no longer is applied
9 replies
KPCKevin Powell - Community
•Created by clevermissfox on 6/5/2024 in #front-end
Theme-Toggle: Filter? BG Blend? Mix-Blend?
Hi everyone. I'm trying to use this theme toggle so that i have the little circle that shows which option is toggled on. Im wondering if there is a way to use blend modes or filters (or masks maybe?) so that only the item that the circle is over has saturation. Doesnt have to be a pseudo element, and the internal icons (the logos) dont have to be bg images.
https://codepen.io/Ceecee-Hart/pen/VwObNQe?editors=1100
20 replies
KPCKevin Powell - Community
•Created by clevermissfox on 6/1/2024 in #front-end
component scoped private props
18 replies
KPCKevin Powell - Community
•Created by clevermissfox on 4/28/2024 in #front-end
html input behaviour
i've been wondering about this for awhile. when your text input starts running out of room the right side of it starts to disappear (as shown in this screen recording; gave the input a bg of hotpink to further illustrate) and its value starts getting cut off. is there a way to stop this behaviour or always make sure its the width of its value? (well besides min-width: npx or something)
like does it recognize its input.value as content ? doesnt seem like it or it wouldnt hide itself, it would overflow which would be better.
12 replies
KPCKevin Powell - Community
•Created by clevermissfox on 4/27/2024 in #front-end
Using Vite with SCSS
So i was advised to try scss with vite instead of just using node as i was getting errors.
What i did was:
-create new folder on desktop and open it in vs code
- use the cmd
npm create vite@latest
-Selected Vanilla JS framework
-Selected Vanilla JS variant
-used the cmds as instructed cd vite-project-2, npm install, npm run dev
-then the cmd npm i -D sass which is now showing in my devDependancies
where do i go next? this is where i got stuck with node when i would:
-create src/scss/main.scss in the root
- added some basic styles to the main.scss file
-in the terminal, typed sass --watch src/scss:dist/css
everytime i would get the error The term 'sass' is not recognized as the name of a cmdlet, function, script file, or operable program. Check the spelling of the name, or if a path was included, verify that the path is correct and try again even though sass (and the compatible version) was shown as a devDependancy. I thought maybe it had something to do with chocolately, perhaps needing to install with choco on this machine as when i first installed node, the version was def installed as verified with the command prompt but anytime i went into vs code , it said it wasnt. i had to install Chocolatey to get Node and NPM to work.
but i digress. what are the next steps to try for this vite/sass file ? do i do the same thing e.g create src/scss/main.scss and use the --watch cmd?112 replies
KPCKevin Powell - Community
•Created by clevermissfox on 4/22/2024 in #front-end
Grid-template-columns: auto-fit... but what of grid-template-rows?
In this example, I happily used grid-template-columns: repeat(auto-fit, etc); these buttons are actually ul>li > buttons. I did discover when tabbing through that the button was being focused on within the li so different sizes etc. (if you tab through the codepen when it opens youll see what i mean)
I know this could be easily solved taking off the button:focus outline and instead moving it to the li with li:focus-within. However, i am curious about how to solve this in the use case where i have :
--parent grid set to grid-template-columns: repeat(auto-fit)
--button set to absolute, inset: 0, with li as position: relative;
--parent grid ROWs set to....?
obviously as the button becomes absolute, the lis collapse in height as there is no content within to define that space. I thought, no problem, i will set the grid-rows. But when i began to, i had no idea what values to set. As the columns are set to auto-fit, the rows have to be dynamic so they cant be set explicitly (unless isnt there a trick to set them to 99 or something more than ill need? or that may only apply to rows with "content" that will take up space?) ; i could give the li's the block-padding i need but it still is looking so tall ...
tried
grid-template-rows: repeat(auto-fit, minmax(calc(1lh + 0.5em), 1fr)) ; as well as auto-fill ; both defined the first row but nothing after that. So how do i set the rows count to expand as they are needed depending on the columns value?
I know I could do so with a custom property and JavaScript , just wondering what ppl do in css when they have a template columns of auto-fit but still need to define template-rows?
https://codepen.io/Miss-Fox/pen/oNOJgKe?editors=0100
default styles are applied, but at the very bottom of the css are the selectors and properties ive mentioned here to easily toggle on9 replies
KPCKevin Powell - Community
•Created by clevermissfox on 4/10/2024 in #front-end
Can i get this shape with gradients on one element?
https://codepen.io/Miss-Fox/pen/MWRGMZe (this pen has changed, didnt mean to overwirte it)
trying to use one background property with gradients sans the pseudo element. Breaking my brain because i need one gradient to go to the right to have that break on top and seemingly one to go to the bottom to get the solid bottom border. Right now i have the bottom border as a pseudo element but i'm curious if it can be achieved all on the .box background property?
63 replies
KPCKevin Powell - Community
•Created by clevermissfox on 4/10/2024 in #front-end
Stacking Context Q- Backdrop Filter
How do i fix it so the ::before element is behind the card again while still applying the blur filter?
https://codepen.io/Miss-Fox/pen/BaExrPe
7 replies
KPCKevin Powell - Community
•Created by clevermissfox on 4/2/2024 in #front-end
minFn confusion
73 replies
KPCKevin Powell - Community
•Created by clevermissfox on 3/31/2024 in #front-end
Repeating-Linear-Gradient
10 replies
KPCKevin Powell - Community
•Created by clevermissfox on 3/22/2024 in #front-end
attribute values in custom props?
So since we can do
content: attr(data-value), I’m curious if there’s a way to store the value of attributes within custom properties ? Can I do something like —_value: attr(data-value)? Will it look for an attribute of [data-value] on the element I use it on ?8 replies
KPCKevin Powell - Community
•Created by clevermissfox on 3/4/2024 in #front-end
aria-current or aria-selected ?
6 replies
KPCKevin Powell - Community
•Created by clevermissfox on 2/23/2024 in #front-end
Updating @property with JS for animation on load
https://codepen.io/Miss-Fox/pen/BabgmjK?editors=0110
hopefully the video explains better with the visuals than i can type out but basically i am trying to update the :root custom property so that its value is equal to the respective javascript variable (days, hours, minutes) and then update that on each "box" class of '.option' so that the angle on that box matches (if days is 24, angle is 24). Its actually written as a percent not an angle but im not sure if that matters here?
Elements involved:
+@property for dark-grade-angle, dark-grade-day, dark-grade-min;
+ --clr-bg-options has the conic gradient with the custom property as the angle/percentage
+.options is the class name of each box
+"angle" is the name of the @keyframes animation thats being triggered in the root.
+in the javascript are the variables "days", "hours", "minutes" that have the values i want to update each option to.
let me know if theres any clarification needed
7 replies
KPCKevin Powell - Community
•Created by clevermissfox on 2/21/2024 in #front-end
nested :is() selector
what am i missing with this selector
but this works
```
& :is(:nth-child(1)) {
grid-column: 1;
grid-row: 3;
}
````
have also tried &:is(>:nth-child(1)) {...} &:is(> :nth-child(1)) {...} &:is(>:first-child) {...}` and a few more. here is the example . i know im just missing a space or something. but goal is how to get direct-child:nth child(n) while using :is() and nesting "&"
in the media-query around CSS line 440 https://codepen.io/Miss-Fox/pen/qBvGEGp?editors=1100. Is this an issue with the selectore or specificty or.....?13 replies
KPCKevin Powell - Community
•Created by clevermissfox on 1/24/2024 in #front-end
custom cursor effect
Someone posted this awhile ago asking about the custom cursor (I think it’s only visible on desktop) and I’m trying to figure out how these hover effects work. From what I can tell the button has its hover effect and on hover the custom cursor is transparent so it just looks like the cursor is becoming the hover state. Anyone else have any thoughts on this ? The timing seems a little tricky on when the cursor goes transparent and how it’s animated out and in.
It’s a site for accessibility so would be ironic if so but any issues with this kind of effect being inaccessible for those using assistive technology?
https://design.google/library/designing-global-accessibility-part-1
10 replies