Docker/codex.docs
Docker/codex.docs
1
0
Fork 0
mirror of https://github.com/codex-team/codex.docs.git synced 2025-08-10 16:05:32 +02:00
Code Issues Releases Activity

Added a mobile layout

Browse source
This commit is contained in:
geekan 2021-10-12 21:08:03 +03:00
parent 23ccbc4ba1
commit daa1af796c
1 changed files with 153 additions and 74 deletions
Download patch file Download diff file Expand all files Collapse all files

227
src/views/components/banner.twig
View file

@ -1,87 +1,166 @@
<style> <style>
.hawk-bnnr__body { .hawk-bnnr__body {
width: 95%; width: 95%;
padding: 0 1%; padding: 0 1%;
margin: 5% auto; margin: 5% auto;
position: relative; position: relative;
color: #fff; color: #fff;
font-family: 'SFProDisplay', Roboto, 'Open Sans', sans-serif; font-family: 'SFProDisplay', Roboto, 'Open Sans', sans-serif;
} }
.hawk-bnnr__content { .hawk-bnnr__content {
position: absolute; position: absolute;
width: 30%; width: 30%;
font-size: 0.8vw; font-size: 0.8vw;
margin-left: 3.5%; margin-left: 3.5%;
top: 15%; top: 15%;
} }
.hawk-bnnr__illustration { .hawk-bnnr__illustration {
width: 100%; width: 100%;
border-radius: 10px; border-radius: 10px;
} }
.hawk-bnnr__title { .hawk-bnnr__title {
font-size: 2.5em; font-size: 2.5em;
font-weight: bold; font-weight: bold;
margin-bottom: 5%; margin-bottom: 5%;
} }
.hawk-bnnr__text { .hawk-bnnr__text {
font-size: 1.25em; font-size: 1.25em;
line-height: 1.5; line-height: 1.5;
margin-bottom: 7.5%; margin-bottom: 7.5%;
letter-spacing: -0.15px; letter-spacing: -0.15px;
} }
.hawk-bnnr__second_title { .hawk-bnnr__second_title {
font-size: 2.5em; font-size: 2.5em;
font-weight: bold; font-weight: bold;
margin-bottom: 2%; margin-bottom: 2%;
} }
.hawk-bnnr__slogan { .hawk-bnnr__slogan {
font-size: 1.65em; font-size: 1.65em;
font-weight: 500; font-weight: 500;
} }
.hawk-bnnr__garage { .hawk-bnnr__garage {
position: absolute; position: absolute;
width: 28%; width: 28%;
border-radius: 5px; border-radius: 5px;
left: 50%; left: 50%;
transform: translate(-50%); transform: translate(-50%);
top: -8.5%; top: -8.5%;
border: 1px solid #30323d; border: 1px solid #30323d;
box-shadow: 0 12px 44px 0 rgba(0, 0, 0, 0.5), inset 0 0 0 1px rgba(255, 255, 255, 0.06); box-shadow: 0 12px 44px 0 rgba(0, 0, 0, 0.5), inset 0 0 0 1px rgba(255, 255, 255, 0.06);
} }
.hawk-bnnr__right-content { .hawk-bnnr__right-content {
position: absolute; position: absolute;
width: 20%; width: 20%;
font-size: 0.8vw; font-size: 0.8vw;
right: 11.3%; right: 11.3%;
top: 15%; top: 15%;
} }
.hawk-bnnr__product-hunt { .hawk-bnnr__product-hunt {
margin-top: 5%; margin-top: 5%;
width: 90%; width: 90%;
} }
.hawk-bnnr__product-hunt--mobile {
display: none;
}
@media(max-width: 750px) {
.hawk-bnnr__body {
width: 75%;
background-image: url('https://capella.pics/7f81d43a-f2d0-4daf-884f-011d25a48ab7.jpg');
padding: 30px 25px;
border-radius: 10px;
}
.hawk-bnnr__content {
position: inherit;
font-size: 11px;
width: 95%;
margin: 0 0 0 10px;
}
.hawk-bnnr__break {
display: none;
}
.hawk-bnnr__illustration {
display: none;
}
.hawk-bnnr__title {
font-size: 2.4em;
margin-bottom: 15px;
}
.hawk-bnnr__text {
width: 100%;
margin-bottom: 23px;
line-height: 1.43;
}
.hawk-bnnr__second_title {
font-size: 2em;
}
.hawk-bnnr__slogan {
font-size: 1.2em;
}
.hawk-bnnr__garage {
position: inherit;
width: 120%;
top: auto;
right: auto;
}
.hawk-bnnr__product-hunt {
display: none;
}
.hawk-bnnr__product-hunt--mobile {
display: block;
width: 200px;
margin: 20px auto 0;
}
.hawk-bnnr__right-content {
position: inherit;
width: auto;
font-size: 0.7em;
right: auto;
top: auto;
margin-left: 10px;
margin-bottom: 20px;
}
}
</style> </style>
<div class="hawk-bnnr__body"> <div class="hawk-bnnr__body">
<img class="hawk-bnnr__illustration" src="https://capella.pics/3b43621c-1d13-473c-bf6c-4ee5fd3de61d.jpg" alt=""> <img class="hawk-bnnr__illustration" src="https://capella.pics/3b43621c-1d13-473c-bf6c-4ee5fd3de61d.jpg" alt="">
<div class="hawk-bnnr__content"> <div class="hawk-bnnr__content">
<div class="hawk-bnnr__title">What a day! 🥳🎈🎉 </div> <div class="hawk-bnnr__title">What a day! 🥳🎈🎉
<div class="hawk-bnnr__text">Today we are releasing our next big open-source project.<br>As big as Editor.js or bigger. It is the error tracking service<br> called Hawk! Check it out.</div>
</div> </div>
<div class="hawk-bnnr__right-content"> <div class="hawk-bnnr__text">Today we are releasing our next big open-source project.<br class="hawk-bnnr__break">As big as Editor.js or bigger. It is the error tracking service<br class="hawk-bnnr__break">
<div class="hawk-bnnr__second_title">Hawk</div> called Hawk! Check it out.</div>
<div class="hawk-bnnr__slogan">Code problems. Resolved.</div> </div>
<a href="https://www.producthunt.com/posts/editor-js?utm_source=badge-featured&amp;utm_medium=badge&amp;utm_souce=badge-editor-js" target="_blank"> <div class="hawk-bnnr__right-content">
<img class="hawk-bnnr__product-hunt" src="https://api.producthunt.com/widgets/embed-image/v1/featured.svg?post_id=150153&amp;theme=light"> <div class="hawk-bnnr__second_title">Hawk</div>
</a> <div class="hawk-bnnr__slogan">Code problems. Resolved.</div>
</div> <a href="https://www.producthunt.com/posts/editor-js?utm_source=badge-featured&amp;utm_medium=badge&amp;utm_souce=badge-editor-js" target="_blank">
<img class="hawk-bnnr__garage" src="https://capella.pics/ae86cbae-925b-453c-a89b-81334e39169d" alt=""> <img class="hawk-bnnr__product-hunt" src="https://api.producthunt.com/widgets/embed-image/v1/featured.svg?post_id=150153&amp;theme=light">
</div> </a>
</div>
<img class="hawk-bnnr__garage" src="https://capella.pics/ae86cbae-925b-453c-a89b-81334e39169d" alt="">
<a href="https://www.producthunt.com/posts/editor-js?utm_source=badge-featured&amp;utm_medium=badge&amp;utm_souce=badge-editor-js" target="_blank">
<img class="hawk-bnnr__product-hunt--mobile" src="https://api.producthunt.com/widgets/embed-image/v1/featured.svg?post_id=150153&amp;theme=light">
</a>
</div>