ProdJuan
KPCKevin Powell - Community
•Created by ProdJuan on 6/10/2024 in #back-end
shell script to create file with latest mod time of any other files in directory
looks like that can be adapted to fit my use case (js and css files are in separate directories),
just
cd to each respective directory and do the latest_file + touch statements and it's a 3-line solve. Nice! 👍3 replies
KPCKevin Powell - Community
•Created by Vandana on 6/6/2024 in #front-end
grid
cool, so you get the benefit of the group but w/o the structure insertion. neat!
47 replies
KPCKevin Powell - Community
•Created by Vandana on 6/6/2024 in #front-end
grid
not sure why your existing class
.text-image-section doesn't accomplish already.47 replies
KPCKevin Powell - Community
•Created by ProdJuan on 4/18/2024 in #front-end
Text overflows shrinking containers as browser is narrow, how to fix?
Just updated the PEN to include more of the page design this group is part of to demonstrate the purpose of panel height constraint
6 replies
KPCKevin Powell - Community
•Created by ProdJuan on 4/20/2024 in #os-and-tools
How to split editor in VSC (within pane, not separate pane)
hmm, '>View: Toggle Split Editor in Group' 👈 (taking 'group' to mean quadrant)
Also available: '>View: Toggle Layout of Split Editor in Group' to switch between vertical/horizontal split
7 replies
KPCKevin Powell - Community
•Created by ProdJuan on 4/18/2024 in #front-end
Text overflows shrinking containers as browser is narrow, how to fix?
so, the height is needed to support a large background image that's behind the section, the image is scaled proportionally to the browser width which makes height bound to browser width.
6 replies
KPCKevin Powell - Community
•Created by Daddyzilla on 4/11/2024 in #front-end
Opacity overload?
if 'animation' isn't strictly called for, then a CSS transition of opacity from 0 to 0.6 when the scroll-point is reached would serve, then when the user hovers over the go-to-top, the :hover class can carry opacity from 0.6 to 1.0. no conflicts between animations because transition is managing visibility via opacity.
17 replies
KPCKevin Powell - Community
•Created by Daddyzilla on 4/11/2024 in #front-end
Opacity overload?
@Daddyzilla another option to trigger the reveal of the 'go-to-top' is IntersectionObserver. put code in the observer definition to add the 'make-visible' class to your go-to-top element when the entry is not intersecting, then observe an element that will scroll off the top of the page (e.g., a header element).
You said your go-to-top must animate into visibility as the user scrolls about 30% down the page, does that mean it's some-degree animated-into-visibility between zero-scroll and 30%-scrolled?
17 replies
KPCKevin Powell - Community
•Created by ProdJuan on 4/3/2024 in #front-end
Why Don't Absolute-Positioned Elements Remain Aligned to Background Image when Browser Widens/Nar?
the premise being: try and match the position top/left (bottom/right) to the tip of the pin as close as can be done.
27 replies
KPCKevin Powell - Community
•Created by ProdJuan on 4/3/2024 in #front-end
Why Don't Absolute-Positioned Elements Remain Aligned to Background Image when Browser Widens/Nar?
well, I was thinking something like transform(-50%,calc(-100% + 4px))
27 replies
KPCKevin Powell - Community
•Created by ProdJuan on 4/3/2024 in #front-end
Why Don't Absolute-Positioned Elements Remain Aligned to Background Image when Browser Widens/Nar?
at 64px tall, those pin icons .... the bottom tip isn't at the zero line, it's up a few px from the bottom. that might account for some vertical shifting.
27 replies
KPCKevin Powell - Community
•Created by ProdJuan on 4/3/2024 in #front-end
Why Don't Absolute-Positioned Elements Remain Aligned to Background Image when Browser Widens/Nar?
ok, the orange pin in top left is positioned using bottom/right with the translate(50%,0%).
Is it holding stable for you as width changes?
27 replies
KPCKevin Powell - Community
•Created by ProdJuan on 4/3/2024 in #front-end
Why Don't Absolute-Positioned Elements Remain Aligned to Background Image when Browser Widens/Nar?
ok, sorry, just hit save button in codepen for it. (the orange pin is the one that used to be from top left)
27 replies
KPCKevin Powell - Community
•Created by ProdJuan on 4/3/2024 in #front-end
Why Don't Absolute-Positioned Elements Remain Aligned to Background Image when Browser Widens/Nar?
I updated the codepen to have the first icon positioned using right/bottom properties and you can see how it creeps around while the others are stable.
27 replies
KPCKevin Powell - Community
•Created by ProdJuan on 4/3/2024 in #front-end
Why Don't Absolute-Positioned Elements Remain Aligned to Background Image when Browser Widens/Nar?
Mark, If I wanted to use 'right/bottom' as the means to position the pin icons, how would I adjust the transform so that they would be as stable as they are using the left/top in CSS? @MarkBoots
27 replies
KPCKevin Powell - Community
•Created by ProdJuan on 4/3/2024 in #front-end
Why Don't Absolute-Positioned Elements Remain Aligned to Background Image when Browser Widens/Nar?
so those pins actually land on/over a map image (an image is an image), so that's the basis for using an image of a grid rather than CSS-constructed lines/boxes.
nifty css-block making those boxes though!
27 replies
KPCKevin Powell - Community
•Created by ProdJuan on 4/3/2024 in #front-end
Why Don't Absolute-Positioned Elements Remain Aligned to Background Image when Browser Widens/Nar?
latest has upper/lower container, grid-item height set by css to scale with browser width.
27 replies
KPCKevin Powell - Community
•Created by ProdJuan on 4/3/2024 in #front-end
Why Don't Absolute-Positioned Elements Remain Aligned to Background Image when Browser Widens/Nar?
I added a few more container elements to the pen to better resemble the actual case on my page.
27 replies
KPCKevin Powell - Community
•Created by ProdJuan on 4/3/2024 in #front-end
Why Don't Absolute-Positioned Elements Remain Aligned to Background Image when Browser Widens/Nar?
project spec calls for 'large pins' so they are fixed size by design.
27 replies
KPCKevin Powell - Community
•Created by ProdJuan on 4/3/2024 in #front-end
Why Don't Absolute-Positioned Elements Remain Aligned to Background Image when Browser Widens/Nar?
all 5 pins adjusted, pen saved, should be current now
27 replies