dandri/simplex-chat
1
0
Fork 0
mirror of https://github.com/simplex-chat/simplex-chat.git synced 2026-03-30 22:55:48 +00:00
Code Issues Packages Projects Releases Wiki Activity

website: fix hero layout for small height screens (#2609)

Browse Source
This commit is contained in:
M Sarmad Qadeer
2023-06-24 18:39:06 +05:00
committed by GitHub
parent 6da18d9b2a
commit 9caaab0e8e
2 changed files with 30 additions and 16 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
website/src/_includes/hero.html
View File

@@ -1,7 +1,7 @@
<div class="first-two-sections pt-[66px] bg-white dark:bg-gradient-radial-mobile dark:lg:bg-gradient-radial">
<div class="md:flex md:flex-col-reverse md:items-center xl:flex xl:flex-row xl:items-start relative xl:justify-between xl:gap-10 container">
<div class="">
<section class="xl:h-[calc(100vh-66px)] xl:max-h-[888px] m-auto w-full flex items-center justify-between landing-page-header px-5">
<section class="xl:h-[calc(100vh-66px)] hero-section-1 xl:max-h-[888px] m-auto w-full flex items-center justify-between landing-page-header px-5">
<div class="xl:h-full flex flex-col items-center xl:items-start xl:justify-around w-full landing-page-header-div">
{# <img class="static-phone-tablet hidden md:block xl:hidden" src="/img/new/tab-hero.svg" alt="" /> #}
<img class="static-phone-mobile md:hidden" src="/img/new/mobile-hero.png" alt="" />

44
website/src/css/style.css
View File

@@ -628,20 +628,6 @@ header{
}
}
.tablet-hero-phone-background {
background-image: url("../Images/bg_gfx.png");
background-repeat: no-repeat;
background-position: center;
background-size: contain;
position: absolute;
width: 40%;
top: 5%;
left: 30%;
}
.tablet-hero-phone {
transform: skewY(25deg);
}
/* Overlays */
.overlay a,
p a{
@@ -936,4 +922,32 @@ p a{
.glossary-overlay ol li {
list-style: decimal;
}
}
/* media queries for hero section for short height screens */
.hero-section-1{
padding-top: 2rem;
padding-bottom: 2rem;
}
@media screen and (max-height: 760px) and (min-width: 1280px), screen and (max-height: 860px) and (min-width: 1280px) and (max-width: 1399px) {
.hero-section-1{
height: 100%;
}
h1{
font-size: 48px !important;
}
h2{
font-size: 36px !important;
}
}
@media screen and (max-height: 780px) {
.hero-phone-background{
height: 100%;
margin-top: 2rem;
margin-bottom: 4rem;
top: calc(66px + 2rem);
}
}