font-family: fontFamily("headingSans");
font-weight: fontWeight("bold");
font-size: fontSize("largest");
container("border");
filter: blur(20px);
-webkit-transition: all 2s ease;
transition: all 2s ease;
backdrop-filter: blur(10px);
background: rgba( $header-bg,0.8);
@include breakpoint("medium")
$screen-small: 801px;
$screen-medium: 1261px;
$screen-large: 1600px;
stencilColor('button--primary-backgroundColor');
stencilColor('button--primary-color');
display: flex;
justify-content: center;
align-items: center;
overflow: auto;
white-space: nowrap;
&::after {
content: '';
position: absolute;
width: 100%;
transform: scaleX(0);
height: 1px;
bottom: 0;
left: 0;
background-color: stencilColor("navUser-color-hover");
transform-origin: bottom right;
transition: transform 0.25s ease-out;
}
&:hover::after {
transform: scaleX(1);
transform-origin: bottom left;
}
overflow: auto;
scrollbar-width: none;
-ms-overflow-style: none;
&::-webkit-scrollbar {
display: none;
}
#product-listing-container,#tab-related {
display: flex;
flex-wrap: wrap;
padding: 0;
margin: 0;
list-style: none;
align-items: stretch;
justify-content: flex-start;
width: 100%;
}
ul.productGrid, ul.product-list {
width: 100%;
display: flex;
flex-wrap: wrap;
li {
flex: 0 0 50%;
display: flex;
padding: 0px !important;
@include breakpoint("medium") {
flex: 0 0 25%;
}
.card {
display: flex;
flex-direction: column;
flex: 1;
box-sizing: border-box;
height: 100%;
margin-bottom: 1rem;
.call-button {
margin-top: auto;
.button {
background: stencilColor('button--primary-backgroundColor');
color: stencilColor('button--primary-color');
}
}
}
}
}
Category: css
Safari 18.2 is here! For web developers, it’s the biggest release of new features this year. Highlights include cross-document View Transitions, text-box, spatial videos in visionOS, ruby improvements, WASM garbage collection, HTTPS by default, Genmoji, and more.
https://webkit.org/blog/16301/webkit-features-in-safari-18-2/
#bookmark CSS landscape. reset for iPad sumnima themes
@media only screen and (min-width: 1024px) and (max-width: 1366px) and (orientation: landscape) {
/* reset sumnima CSS styles for iPad landscape mode go here */
body {
opacity: 0.3;
}
}
http://www.creativebloq.com/html5/create-fluid-width-videos-8112993
<iframe> video (YouTube, Vimeo, etc)
Our little 100% width trick isn’t going to help us when dealing with video that is delivered via iframe. Setting a height is required, otherwise browsers will render the iframe at a static height of 150px, which is far too squat for most video and makes for more R&E (Ridiculous and Embarrassing). Literally all browsers will render iframe, canvas, embed, and object tags as 300px x 150px if not otherwise declared. Even if this isn’t present in the UA stylesheet.
Fortunately there are a couple of possible solutions here. One of them was pioneered by Thierry Koblentz and presented on A List Apart in 2009: Creating Intrinsic Ratios for Video. With this technique, you wrap the video in another element which has an intrinsic aspect ratio, then absolute position the video within that. That gives us fluid width with a reasonable height we can count on.
<div class=”videoWrapper”>
<!– Copy & Pasted from YouTube –>
<iframe width=”560″ height=”349″ src=”http://www.youtube.com/embed/n_dZNLr2cME?rel=0&hd=1″ frameborder=”0″ allowfullscreen></iframe>
</div>
.videoWrapper {
position: relative;
padding-bottom: 56.25%; /* 16:9 */
padding-top: 25px;
height: 0;
}
.videoWrapper iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
