mirror of
https://github.com/qdrant/landing_page.git
synced 2026-10-12 06:18:31 +02:00
New blog section (#477)
* new blog layout WIP * contact form - compact variant, some hero section styles * pagination style * post fetching WIP * two cols form * blog post * blog post related posts styles * some refactoring * forms fixes * hero section * breadcrumbs * fix * fixes for featured section * fixes * blog single page * single page related posts - mobile view * single page * html, share links hover * input focus styles * some hovers * added page-serch * fixes * fix compact view of card * form ids * related posts, mobile list, css fixes * blog post archetype * posts * turned off cards img animation * netlify cms update * removed excessive padding * readme * font 500 for news letter form
This commit is contained in:
@@ -81,3 +81,94 @@
|
||||
-moz-transition: all $ms ease;
|
||||
transition: all $ms ease;
|
||||
}
|
||||
|
||||
@mixin font-styles($size, $weight, $line-height, $color, $font-family) {
|
||||
font-family: $font-family;
|
||||
font-size: $size;
|
||||
font-style: normal;
|
||||
font-weight: $weight;
|
||||
line-height: $line-height;
|
||||
color: $color;
|
||||
}
|
||||
|
||||
@mixin blog-font-styles($size, $weight, $line-height, $color) {
|
||||
@include font-styles($size, $weight, $line-height, $color, vars.$blog-font-family);
|
||||
}
|
||||
|
||||
/* button's text have be contained in a span with class .text to properly work */
|
||||
@mixin buttonHoverEffect ($hoverBackground, $hoverColor, $hoverBorderColor: none) {
|
||||
-webkit-mask-image: -webkit-radial-gradient(white, black);
|
||||
display: inline-block;
|
||||
overflow-x: hidden;
|
||||
@if($hoverBorderColor) {
|
||||
border-width: 1px;
|
||||
}
|
||||
|
||||
&:before {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
content: "";
|
||||
-moz-transition: transform 500ms cubic-bezier(0.860, 0.000, 0.070, 1.000);
|
||||
-o-transition: transform 500ms cubic-bezier(0.860, 0.000, 0.070, 1.000);
|
||||
-webkit-transition: transform 500ms cubic-bezier(0.860, 0.000, 0.070, 1.000);
|
||||
transition: transform 500ms cubic-bezier(0.860, 0.000, 0.070, 1.000);
|
||||
-moz-transition-timing-function: cubic-bezier(0.860, 0.000, 0.070, 1.000);
|
||||
-o-transition-timing-function: cubic-bezier(0.860, 0.000, 0.070, 1.000);
|
||||
-webkit-transition-timing-function: cubic-bezier(0.860, 0.000, 0.070, 1.000);
|
||||
transition-timing-function: cubic-bezier(0.860, 0.000, 0.070, 1.000);
|
||||
-ms-transform: scale(0, 1);
|
||||
-webkit-transform: scale(0, 1) translate3d(0, 0, 0);
|
||||
transform: scale(0, 1);
|
||||
-ms-transform-origin: top right;
|
||||
-webkit-transform-origin: top right;
|
||||
transform-origin: top right;
|
||||
}
|
||||
|
||||
&:hover::before {
|
||||
-ms-transform: scale(1, 1);
|
||||
-webkit-transform: scale(1, 1) translate3d(0, 0, 0);
|
||||
transform: scale(1, 1);
|
||||
-ms-transform-origin: bottom left;
|
||||
-webkit-transform-origin: bottom left;
|
||||
transform-origin: bottom left;
|
||||
background: $hoverBackground;
|
||||
@if($hoverBorderColor) {
|
||||
border: 1px solid $hoverBorderColor;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
& .text, & .txt {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
.text, .txt {
|
||||
color:$hoverColor;
|
||||
transition: color 0.2s linear;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@mixin fixed-height-img($height, $width: auto) {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
max-width: $width;
|
||||
min-width:$width;
|
||||
height: $width;
|
||||
overflow: hidden;
|
||||
margin-bottom: 0;
|
||||
& > img {
|
||||
flex-shrink: 0;
|
||||
width: auto;
|
||||
min-width: 100%;
|
||||
min-height: 100%;
|
||||
max-width: none;
|
||||
max-height: 100%;
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user