chore(*): update font-size, add popup
This commit is contained in:
Tim Hartmann
parent
9736a0e274
commit
61552cde25
File diff suppressed because one or more lines are too long
|
|
@ -1,4 +1,4 @@
|
|||
<svg width="35" height="34" viewBox="0 0 35 34" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M17.3333 0C7.76038 0 0 7.61126 0 17C0 26.3889 7.76038 34 17.3333 34C26.9063 34 34.6667 26.3889 34.6667 17C34.6667 7.61126 26.9063 0 17.3333 0Z" fill="#4360DF"/>
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M17.9154 16.2546C18.7858 16.3435 19.6562 16.4323 20.7263 16.3739C23.6255 16.2154 25.3818 14.7559 25.2571 12.5744C25.1301 10.3548 22.7936 8.98732 20.4559 9.11518C16.6461 9.32337 13.8445 12.6039 13.529 16.3534C14.0464 16.2345 14.5909 16.1635 15.1045 16.1355C16.1747 16.077 17.045 16.1658 17.9154 16.2546ZM10.4469 21.107C10.5671 23.1416 12.7807 24.3951 14.9955 24.2779C18.6047 24.087 21.259 21.0799 21.5578 17.6429C21.0676 17.7519 20.5518 17.817 20.0652 17.8427C19.0514 17.8963 18.2267 17.8149 17.4021 17.7334C16.5775 17.652 15.7529 17.5706 14.7391 17.6242C11.9926 17.7695 10.3287 19.1072 10.4469 21.107Z" fill="white"/>
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M17.3333 0C7.76038 0 0 7.61126 0 17C0 26.3889 7.76038 34 17.3333 34C26.9063 34 34.6667 26.3889 34.6667 17C34.6667 7.61126 26.9063 0 17.3333 0Z" fill="white"/>
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M17.9154 16.2546C18.7858 16.3435 19.6562 16.4323 20.7263 16.3739C23.6255 16.2154 25.3818 14.7559 25.2571 12.5744C25.1301 10.3548 22.7936 8.98732 20.4559 9.11518C16.6461 9.32337 13.8445 12.6039 13.529 16.3534C14.0464 16.2345 14.5909 16.1635 15.1045 16.1355C16.1747 16.077 17.045 16.1658 17.9154 16.2546ZM10.4469 21.107C10.5671 23.1416 12.7807 24.3951 14.9955 24.2779C18.6047 24.087 21.259 21.0799 21.5578 17.6429C21.0676 17.7519 20.5518 17.817 20.0652 17.8427C19.0514 17.8963 18.2267 17.8149 17.4021 17.7334C16.5775 17.652 15.7529 17.5706 14.7391 17.6242C11.9926 17.7695 10.3287 19.1072 10.4469 21.107Z" fill="#0E1C36"/>
|
||||
</svg>
|
||||
|
|
|
|||
|
Before Width: | Height: | Size: 980 B After Width: | Height: | Size: 980 B |
144
src/index.html
144
src/index.html
File diff suppressed because one or more lines are too long
|
|
@ -21,6 +21,26 @@ $(document).ready(function() {
|
|||
$('.js-navigation-list').removeClass('is-active');
|
||||
});
|
||||
|
||||
// Popup
|
||||
$('.js-popup').magnificPopup({
|
||||
type: 'inline',
|
||||
preloader: false,
|
||||
focus: '#name',
|
||||
|
||||
// When elemened is focused, some mobile browsers in some cases zoom in
|
||||
// It looks not nice, so we disable it:
|
||||
callbacks: {
|
||||
beforeOpen: function() {
|
||||
if($(window).width() < 700) {
|
||||
this.st.focus = false;
|
||||
} else {
|
||||
this.st.focus = '#name';
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
// Scroll
|
||||
$('.js-anchor-scroll').anchorScroll({
|
||||
scrollSpeed: 800, // scroll speed
|
||||
offsetTop: 100, // offset for fixed top bars (defaults to 0)
|
||||
|
|
|
|||
|
|
@ -23,6 +23,7 @@
|
|||
@import 'components/icons',
|
||||
'components/button',
|
||||
'components/logo',
|
||||
'components/popup',
|
||||
'components/spotlightbox',
|
||||
'components/accentbox',
|
||||
'components/user',
|
||||
|
|
|
|||
|
|
@ -1,11 +1,14 @@
|
|||
.a-button {
|
||||
cursor: pointer;
|
||||
display: inline-block;
|
||||
padding: get-inset-squish-spacing(l);
|
||||
vertical-align: top;
|
||||
border: 2px solid transparent;
|
||||
border-radius: $global-border-radius;
|
||||
background: linear-gradient(256.69deg, #0FF2D6 -11.72%, rgba(0, 187, 158, 0) 199.22%), #09D9B9;
|
||||
box-shadow: 0;
|
||||
color: get-color(unique, white);
|
||||
font-size: get-font(size);
|
||||
font-weight: bold;
|
||||
line-height: 1;
|
||||
text-align: center;
|
||||
|
|
|
|||
|
|
@ -1,3 +0,0 @@
|
|||
.c-footer {
|
||||
color: get-color(unique, white);
|
||||
}
|
||||
|
|
@ -50,7 +50,7 @@
|
|||
@include respond(large) {
|
||||
margin-left: 100px;
|
||||
margin-top: 50px;
|
||||
width: 45%;
|
||||
width: 40%;
|
||||
}
|
||||
|
||||
img {
|
||||
|
|
|
|||
|
|
@ -0,0 +1,405 @@
|
|||
/* Magnific Popup CSS */
|
||||
.mfp-bg {
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
z-index: 1042;
|
||||
overflow: hidden;
|
||||
position: fixed;
|
||||
background: #0b0b0b;
|
||||
opacity: 0.8; }
|
||||
|
||||
.mfp-wrap {
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
z-index: 1043;
|
||||
position: fixed;
|
||||
outline: none !important;
|
||||
-webkit-backface-visibility: hidden; }
|
||||
|
||||
.mfp-container {
|
||||
text-align: center;
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
left: 0;
|
||||
top: 0;
|
||||
padding: 0 8px;
|
||||
box-sizing: border-box; }
|
||||
|
||||
.mfp-container:before {
|
||||
content: '';
|
||||
display: inline-block;
|
||||
height: 100%;
|
||||
vertical-align: middle; }
|
||||
|
||||
.mfp-align-top .mfp-container:before {
|
||||
display: none; }
|
||||
|
||||
.mfp-content {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
margin: 0 auto;
|
||||
text-align: left;
|
||||
z-index: 1045; }
|
||||
|
||||
.mfp-inline-holder .mfp-content,
|
||||
.mfp-ajax-holder .mfp-content {
|
||||
width: 100%;
|
||||
cursor: auto; }
|
||||
|
||||
.mfp-ajax-cur {
|
||||
cursor: progress; }
|
||||
|
||||
.mfp-zoom-out-cur, .mfp-zoom-out-cur .mfp-image-holder .mfp-close {
|
||||
cursor: -moz-zoom-out;
|
||||
cursor: -webkit-zoom-out;
|
||||
cursor: zoom-out; }
|
||||
|
||||
.mfp-zoom {
|
||||
cursor: pointer;
|
||||
cursor: -webkit-zoom-in;
|
||||
cursor: -moz-zoom-in;
|
||||
cursor: zoom-in; }
|
||||
|
||||
.mfp-auto-cursor .mfp-content {
|
||||
cursor: auto; }
|
||||
|
||||
.mfp-close,
|
||||
.mfp-arrow,
|
||||
.mfp-preloader,
|
||||
.mfp-counter {
|
||||
-webkit-user-select: none;
|
||||
-moz-user-select: none;
|
||||
user-select: none; }
|
||||
|
||||
.mfp-loading.mfp-figure {
|
||||
display: none; }
|
||||
|
||||
.mfp-hide {
|
||||
display: none !important; }
|
||||
|
||||
.mfp-preloader {
|
||||
color: #CCC;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
width: auto;
|
||||
text-align: center;
|
||||
margin-top: -0.8em;
|
||||
left: 8px;
|
||||
right: 8px;
|
||||
z-index: 1044; }
|
||||
.mfp-preloader a {
|
||||
color: #CCC; }
|
||||
.mfp-preloader a:hover {
|
||||
color: #FFF; }
|
||||
|
||||
.mfp-s-ready .mfp-preloader {
|
||||
display: none; }
|
||||
|
||||
.mfp-s-error .mfp-content {
|
||||
display: none; }
|
||||
|
||||
button.mfp-close,
|
||||
button.mfp-arrow {
|
||||
overflow: visible;
|
||||
cursor: pointer;
|
||||
background: transparent;
|
||||
border: 0;
|
||||
-webkit-appearance: none;
|
||||
display: block;
|
||||
outline: none;
|
||||
padding: 0;
|
||||
z-index: 1046;
|
||||
box-shadow: none;
|
||||
touch-action: manipulation; }
|
||||
|
||||
button::-moz-focus-inner {
|
||||
padding: 0;
|
||||
border: 0; }
|
||||
|
||||
.mfp-close {
|
||||
width: 44px;
|
||||
height: 44px;
|
||||
line-height: 44px;
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 0;
|
||||
text-decoration: none;
|
||||
text-align: center;
|
||||
opacity: 0.65;
|
||||
padding: 0 0 18px 10px;
|
||||
color: #FFF;
|
||||
font-style: normal;
|
||||
font-size: 28px;
|
||||
font-family: Arial, Baskerville, monospace; }
|
||||
.mfp-close:hover,
|
||||
.mfp-close:focus {
|
||||
opacity: 1; }
|
||||
.mfp-close:active {
|
||||
top: 1px; }
|
||||
|
||||
.mfp-close-btn-in .mfp-close {
|
||||
color: #333; }
|
||||
|
||||
.mfp-image-holder .mfp-close,
|
||||
.mfp-iframe-holder .mfp-close {
|
||||
color: #FFF;
|
||||
right: -6px;
|
||||
text-align: right;
|
||||
padding-right: 6px;
|
||||
width: 100%; }
|
||||
|
||||
.mfp-counter {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
color: #CCC;
|
||||
font-size: 12px;
|
||||
line-height: 18px;
|
||||
white-space: nowrap; }
|
||||
|
||||
.mfp-arrow {
|
||||
position: absolute;
|
||||
opacity: 0.65;
|
||||
margin: 0;
|
||||
top: 50%;
|
||||
margin-top: -55px;
|
||||
padding: 0;
|
||||
width: 90px;
|
||||
height: 110px;
|
||||
-webkit-tap-highlight-color: transparent; }
|
||||
.mfp-arrow:active {
|
||||
margin-top: -54px; }
|
||||
.mfp-arrow:hover,
|
||||
.mfp-arrow:focus {
|
||||
opacity: 1; }
|
||||
.mfp-arrow:before,
|
||||
.mfp-arrow:after {
|
||||
content: '';
|
||||
display: block;
|
||||
width: 0;
|
||||
height: 0;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
margin-top: 35px;
|
||||
margin-left: 35px;
|
||||
border: medium inset transparent; }
|
||||
.mfp-arrow:after {
|
||||
border-top-width: 13px;
|
||||
border-bottom-width: 13px;
|
||||
top: 8px; }
|
||||
.mfp-arrow:before {
|
||||
border-top-width: 21px;
|
||||
border-bottom-width: 21px;
|
||||
opacity: 0.7; }
|
||||
|
||||
.mfp-arrow-left {
|
||||
left: 0; }
|
||||
.mfp-arrow-left:after {
|
||||
border-right: 17px solid #FFF;
|
||||
margin-left: 31px; }
|
||||
.mfp-arrow-left:before {
|
||||
margin-left: 25px;
|
||||
border-right: 27px solid #3F3F3F; }
|
||||
|
||||
.mfp-arrow-right {
|
||||
right: 0; }
|
||||
.mfp-arrow-right:after {
|
||||
border-left: 17px solid #FFF;
|
||||
margin-left: 39px; }
|
||||
.mfp-arrow-right:before {
|
||||
border-left: 27px solid #3F3F3F; }
|
||||
|
||||
.mfp-iframe-holder {
|
||||
padding-top: 40px;
|
||||
padding-bottom: 40px; }
|
||||
.mfp-iframe-holder .mfp-content {
|
||||
line-height: 0;
|
||||
width: 100%;
|
||||
max-width: 900px; }
|
||||
.mfp-iframe-holder .mfp-close {
|
||||
top: -40px; }
|
||||
|
||||
.mfp-iframe-scaler {
|
||||
width: 100%;
|
||||
height: 0;
|
||||
overflow: hidden;
|
||||
padding-top: 56.25%; }
|
||||
.mfp-iframe-scaler iframe {
|
||||
position: absolute;
|
||||
display: block;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
box-shadow: 0 0 8px rgba(0, 0, 0, 0.6);
|
||||
background: #000; }
|
||||
|
||||
/* Main image in popup */
|
||||
img.mfp-img {
|
||||
width: auto;
|
||||
max-width: 100%;
|
||||
height: auto;
|
||||
display: block;
|
||||
line-height: 0;
|
||||
box-sizing: border-box;
|
||||
padding: 40px 0 40px;
|
||||
margin: 0 auto; }
|
||||
|
||||
/* The shadow behind the image */
|
||||
.mfp-figure {
|
||||
line-height: 0; }
|
||||
.mfp-figure:after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 40px;
|
||||
bottom: 40px;
|
||||
display: block;
|
||||
right: 0;
|
||||
width: auto;
|
||||
height: auto;
|
||||
z-index: -1;
|
||||
box-shadow: 0 0 8px rgba(0, 0, 0, 0.6);
|
||||
background: #444; }
|
||||
.mfp-figure small {
|
||||
color: #BDBDBD;
|
||||
display: block;
|
||||
font-size: 12px;
|
||||
line-height: 14px; }
|
||||
.mfp-figure figure {
|
||||
margin: 0; }
|
||||
|
||||
.mfp-bottom-bar {
|
||||
margin-top: -36px;
|
||||
position: absolute;
|
||||
top: 100%;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
cursor: auto; }
|
||||
|
||||
.mfp-title {
|
||||
text-align: left;
|
||||
line-height: 18px;
|
||||
color: #F3F3F3;
|
||||
word-wrap: break-word;
|
||||
padding-right: 36px; }
|
||||
|
||||
.mfp-image-holder .mfp-content {
|
||||
max-width: 100%; }
|
||||
|
||||
.mfp-gallery .mfp-image-holder .mfp-figure {
|
||||
cursor: pointer; }
|
||||
|
||||
@media screen and (max-width: 800px) and (orientation: landscape), screen and (max-height: 300px) {
|
||||
/**
|
||||
* Remove all paddings around the image on small screen
|
||||
*/
|
||||
.mfp-img-mobile .mfp-image-holder {
|
||||
padding-left: 0;
|
||||
padding-right: 0; }
|
||||
.mfp-img-mobile img.mfp-img {
|
||||
padding: 0; }
|
||||
.mfp-img-mobile .mfp-figure:after {
|
||||
top: 0;
|
||||
bottom: 0; }
|
||||
.mfp-img-mobile .mfp-figure small {
|
||||
display: inline;
|
||||
margin-left: 5px; }
|
||||
.mfp-img-mobile .mfp-bottom-bar {
|
||||
background: rgba(0, 0, 0, 0.6);
|
||||
bottom: 0;
|
||||
margin: 0;
|
||||
top: auto;
|
||||
padding: 3px 5px;
|
||||
position: fixed;
|
||||
box-sizing: border-box; }
|
||||
.mfp-img-mobile .mfp-bottom-bar:empty {
|
||||
padding: 0; }
|
||||
.mfp-img-mobile .mfp-counter {
|
||||
right: 5px;
|
||||
top: 3px; }
|
||||
.mfp-img-mobile .mfp-close {
|
||||
top: 0;
|
||||
right: 0;
|
||||
width: 35px;
|
||||
height: 35px;
|
||||
line-height: 35px;
|
||||
background: rgba(0, 0, 0, 0.6);
|
||||
position: fixed;
|
||||
text-align: center;
|
||||
padding: 0; } }
|
||||
|
||||
@media all and (max-width: 900px) {
|
||||
.mfp-arrow {
|
||||
-webkit-transform: scale(0.75);
|
||||
transform: scale(0.75); }
|
||||
.mfp-arrow-left {
|
||||
-webkit-transform-origin: 0;
|
||||
transform-origin: 0; }
|
||||
.mfp-arrow-right {
|
||||
-webkit-transform-origin: 100%;
|
||||
transform-origin: 100%; }
|
||||
.mfp-container {
|
||||
padding-left: 6px;
|
||||
padding-right: 6px; } }
|
||||
|
||||
|
||||
.c-popup {
|
||||
max-width: 700px;
|
||||
margin: get-inline-spacing(m) auto;
|
||||
padding: get-inset-spacing(l);
|
||||
border-radius: $global-border-radius;
|
||||
background: get-color(unique, white);
|
||||
|
||||
#mc_embed_signup .mc-field-group input[type="checkbox"] {
|
||||
width: auto;
|
||||
}
|
||||
.content__gdpr {
|
||||
line-height: 1.4;
|
||||
}
|
||||
label + p {
|
||||
margin: 0;
|
||||
}
|
||||
#mc_embed_signup .mc-field-group .checkbox {
|
||||
align-items: center;
|
||||
display: flex;
|
||||
|
||||
span {
|
||||
padding-left: 8px;
|
||||
}
|
||||
}
|
||||
#mc_embed_signup input {
|
||||
border-radius: 0;
|
||||
}
|
||||
.content__gdprLegal {
|
||||
margin-top: get-stack-spacing(m);
|
||||
line-height: 1.4;
|
||||
}
|
||||
#mc-embedded-subscribe {
|
||||
margin: 0;
|
||||
border: 2px solid transparent;
|
||||
border-radius: $global-border-radius;
|
||||
|
||||
&:hover {
|
||||
border: 2px solid get-brand(primary);
|
||||
color: get-brand(primary);
|
||||
}
|
||||
}
|
||||
input#mc-embedded-subscribe {
|
||||
border-radius: $global-border-radius;
|
||||
}
|
||||
fieldset {
|
||||
margin-top: get-stack-spacing(m);
|
||||
}
|
||||
#mc_embed_signup h2 {
|
||||
margin: 0;
|
||||
font-size: 2.4rem;
|
||||
}
|
||||
}
|
||||
|
|
@ -17,6 +17,10 @@
|
|||
}
|
||||
}
|
||||
|
||||
.icon {
|
||||
fill: #fff;
|
||||
}
|
||||
|
||||
&__item {
|
||||
height: 100%;
|
||||
padding: get-inset-spacing(m);
|
||||
|
|
|
|||
|
|
@ -15,7 +15,7 @@
|
|||
|
||||
.o-row {
|
||||
margin-top: get-stack-spacing(l);
|
||||
padding: get-inset-spacing(m);
|
||||
padding: 0 get-inset-spacing(m);
|
||||
}
|
||||
|
||||
.o-row-xl {
|
||||
|
|
|
|||
|
|
@ -77,7 +77,7 @@
|
|||
&__list {
|
||||
background: white;
|
||||
box-shadow: 0 0 20px rgba(0,0,0,.2);
|
||||
font-size: 1.8rem;
|
||||
font-size: 1.6rem;
|
||||
transform: translateX(-100%);
|
||||
transition: all .3s;
|
||||
|
||||
|
|
|
|||
|
|
@ -108,7 +108,7 @@ $fontSettings: (
|
|||
color: get-color(gray, darkest),
|
||||
baseFamily: (-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"),
|
||||
headingFamily: (Roboto, Helvetica, sans-serif),
|
||||
size: 19px
|
||||
size: 18px
|
||||
) !default;
|
||||
|
||||
/// Typography
|
||||
|
|
|
|||
|
|
@ -45,8 +45,6 @@ select {
|
|||
font-family: get-font(baseFamily);
|
||||
font-size: get-font(size);
|
||||
line-height: 1;
|
||||
-webkit-appearance: none;
|
||||
appearance: none;
|
||||
|
||||
&:placeholder {
|
||||
color: rgba(get-font(color), .3);
|
||||
|
|
@ -94,7 +92,7 @@ textarea {
|
|||
label {
|
||||
display: block;
|
||||
margin-top: $form-gutter;
|
||||
font-size: get-font(size);
|
||||
font-size: 16px;
|
||||
font-weight: bold;
|
||||
line-height: 1.2;
|
||||
|
||||
|
|
|
|||
|
|
@ -13,7 +13,7 @@ h6 {
|
|||
}
|
||||
|
||||
+ p {
|
||||
margin-top: get-stack-spacing(m);
|
||||
margin-top: get-stack-spacing(s);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -24,7 +24,7 @@ h6 {
|
|||
|
||||
.a-subtitle {
|
||||
color: get-color(gray);
|
||||
font-size: 2.2rem;
|
||||
font-size: 2.1rem;
|
||||
}
|
||||
|
||||
.a-paragraph {
|
||||
|
|
|
|||
Loading…
Reference in New Issue