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:
trean
2023-12-19 19:58:30 +01:00
committed by GitHub
parent 64e6bb66e2
commit e2950d7b47
34 changed files with 1275 additions and 146 deletions
@@ -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%;
}
}