mirror of https://github.com/zulip/zulip.git
hello: Add interactive block showing basic usage.
Co-Authored-By: Vlad Korobov <terpimost@gmail.com>
This commit is contained in:
Aman Agrawal
Tim Abbott
parent
3001f59d00
commit
ec23f5e77b
Binary file not shown.
|
After Width: | Height: | Size: 170 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 126 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 135 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 136 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 284 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 184 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 174 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 174 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 221 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 118 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 99 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 98 KiB |
|
|
@ -68,42 +68,85 @@
|
|||
</div>
|
||||
<div class="screen-2">
|
||||
<div class="screen-2__container">
|
||||
<div class="screen-2__content">
|
||||
<h2 class="screen-2__header">What makes Zulip different</h2>
|
||||
<div class="screen-2__desc">
|
||||
<p>
|
||||
People often tell us that traditional team chat tools (Slack, Microsoft Teams, etc.) feel chaotic and stressful.
|
||||
</p>
|
||||
<p>
|
||||
Zulip is designed around conversations that are labeled with topics, to make communication <a href="/why-zulip/">organized and efficient</a>. It’s easy to get an overview of what conversations are happening, and to read one conversation at a time.
|
||||
</p>
|
||||
</div>
|
||||
<a class="quote" href="/case-studies/idrift/">
|
||||
<div class="quote__text">
|
||||
Zulip’s <strong>threading model</strong> makes it so much easier to <strong>manage my team</strong>… As a leader, <strong>in just a few minutes</strong> I can get an overview over what’s going on and see where my attention is needed.
|
||||
</div>
|
||||
<div class="quote__source">
|
||||
Case study with <strong>Gaute Lund</strong>, <i>co-founder of iDrift AS</i>
|
||||
</div>
|
||||
</a>
|
||||
<div>
|
||||
<h2 class="screen-2__header">Designed for async conversations.</h2>
|
||||
<div class="screen-2__subtitle">Here's what it looks like in action.</div>
|
||||
</div>
|
||||
<div class="appshot-2">
|
||||
<picture>
|
||||
<!-- dark theme is only with webp images, since webp support was at the same time or earlier than prefers-color-scheme https://caniuse.com/?search=prefers-color-scheme https://caniuse.com/webp -->
|
||||
<!-- we only have mobile images here -->
|
||||
<source class='appshot-2__img'
|
||||
type="image/webp"
|
||||
srcset="{{ static('images/landing-page/hello/generated/screen-2-mobile-dark-2x.webp') }},
|
||||
{{ static('images/landing-page/hello/generated/screen-2-mobile-dark-2x.webp') }} 2x"
|
||||
media="(prefers-color-scheme: dark)"/>
|
||||
<source class='appshot-2__img'
|
||||
type="image/webp"
|
||||
srcset="{{ static('images/landing-page/hello/generated/screen-2-mobile-2x.webp') }},
|
||||
{{ static('images/landing-page/hello/generated/screen-2-mobile-2x.webp') }} 2x"/>
|
||||
<img alt="" class='appshot-2__img'
|
||||
src="{{ static('images/landing-page/hello/generated/screen-2-mobile-2x.jpg') }}"
|
||||
srcset="{{ static('images/landing-page/hello/generated/screen-2-mobile-2x.jpg') }}"/>
|
||||
</picture>
|
||||
<div class="screen-2__tabs">
|
||||
<input type="radio" id="screen-2__tab1" name="screen-2__tabs-radio" class="screen-2__tab-input" checked />
|
||||
<input type="radio" id="screen-2__tab2" name="screen-2__tabs-radio" class="screen-2__tab-input" />
|
||||
<input type="radio" id="screen-2__tab3" name="screen-2__tabs-radio" class="screen-2__tab-input" />
|
||||
<input type="radio" id="screen-2__tab4" name="screen-2__tabs-radio" class="screen-2__tab-input" />
|
||||
<input type="radio" id="screen-2__tab5" name="screen-2__tabs-radio" class="screen-2__tab-input" />
|
||||
<ul>
|
||||
<li>
|
||||
<label for="screen-2__tab1">
|
||||
Get an overview of conversations with unread messages in your inbox.
|
||||
</label>
|
||||
</li>
|
||||
<li>
|
||||
<label for="screen-2__tab2">
|
||||
Focus on one conversation at a time, no matter how many others are happening.
|
||||
</label>
|
||||
</li>
|
||||
<li>
|
||||
<label for="screen-2__tab3">
|
||||
Reply to each conversation in context.
|
||||
</label>
|
||||
</li>
|
||||
<li>
|
||||
<label for="screen-2__tab4">
|
||||
Conversation continue seamlessly over time.
|
||||
</label>
|
||||
</li>
|
||||
<li>
|
||||
<label for="screen-2__tab5">
|
||||
Start a new conversation by giving it a brief topic.
|
||||
</label>
|
||||
</li>
|
||||
</ul>
|
||||
<div class="screen-2__tabs-content">
|
||||
<div class="screen-2__tab-image">
|
||||
<picture>
|
||||
<source
|
||||
srcset="{{ static('images/landing-page/hello/generated/01-tab-cont-dark-2x.jpg') }}"
|
||||
media="(prefers-color-scheme: dark)" />
|
||||
<img alt="" src="{{ static('images/landing-page/hello/generated/01-tab-cont-2x.jpg') }}"/>
|
||||
</picture>
|
||||
</div>
|
||||
<div class="screen-2__tab-image">
|
||||
<picture>
|
||||
<source
|
||||
srcset="{{ static('images/landing-page/hello/generated/02-tab-cont-dark-2x.jpg') }}"
|
||||
media="(prefers-color-scheme: dark)" />
|
||||
<img alt="" src="{{ static('images/landing-page/hello/generated/02-tab-cont-2x.jpg') }}"/>
|
||||
</picture>
|
||||
</div>
|
||||
<div class="screen-2__tab-image">
|
||||
<picture>
|
||||
<source
|
||||
srcset="{{ static('images/landing-page/hello/generated/03-tab-cont-dark-2x.jpg') }}"
|
||||
media="(prefers-color-scheme: dark)" />
|
||||
<img alt="" src="{{ static('images/landing-page/hello/generated/03-tab-cont-2x.jpg') }}"/>
|
||||
</picture>
|
||||
</div>
|
||||
<div class="screen-2__tab-image">
|
||||
<picture>
|
||||
<source
|
||||
srcset="{{ static('images/landing-page/hello/generated/04-tab-cont-dark-2x.jpg') }}"
|
||||
media="(prefers-color-scheme: dark)" />
|
||||
<img alt="" src="{{ static('images/landing-page/hello/generated/04-tab-cont-2x.jpg') }}"/>
|
||||
</picture>
|
||||
</div>
|
||||
<div class="screen-2__tab-image">
|
||||
<picture>
|
||||
<source
|
||||
srcset="{{ static('images/landing-page/hello/generated/05-tab-cont-dark-2x.jpg') }}"
|
||||
media="(prefers-color-scheme: dark)" />
|
||||
<img alt="" src="{{ static('images/landing-page/hello/generated/05-tab-cont-2x.jpg') }}"/>
|
||||
</picture>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -36,7 +36,7 @@ def generate_landing_page_images() -> None:
|
|||
scaled_width = get_x_size(image.width, size)
|
||||
scaled_height = get_x_size(image.height, size)
|
||||
scaled = image.thumbnail_image(scaled_width, height=scaled_height)
|
||||
for format in ("webp[Q=55]", "jpg[Q=75,optimize-coding=true]"):
|
||||
for format in ("webp[Q=60]", "jpg[Q=80,optimize-coding=true]"):
|
||||
scaled.write_to_file(f"{GENERATED_IMAGES_DIR}/{file_name}-{size}x.{format}")
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -91,7 +91,7 @@ ul {
|
|||
|
||||
.screen-1 {
|
||||
background: linear-gradient(
|
||||
180deg,
|
||||
0deg,
|
||||
hsl(209deg 45% 58%) 0%,
|
||||
hsl(210deg 48% 66%) 100%
|
||||
);
|
||||
|
|
@ -172,13 +172,12 @@ ul {
|
|||
.cta-buttons a:hover {
|
||||
transition-duration: 0.1s;
|
||||
background: hsl(215.9deg 98.3% 53.3%);
|
||||
transform: scale(1.01);
|
||||
}
|
||||
|
||||
.cta-buttons a:active {
|
||||
transition-duration: 0.1s;
|
||||
background: hsl(215.8deg 89.3% 47.8%);
|
||||
transform: scale(0.99);
|
||||
transform: scale(0.98);
|
||||
}
|
||||
|
||||
.cta-desc {
|
||||
|
|
@ -210,15 +209,132 @@ ul {
|
|||
}
|
||||
|
||||
.screen-2 {
|
||||
height: 740px;
|
||||
background: linear-gradient(
|
||||
180deg,
|
||||
hsl(210deg 48% 66%) 0%,
|
||||
hsl(236deg 48% 58%) 100%
|
||||
hsl(209deg 45% 58%) 0%,
|
||||
hsl(236deg 47% 50%) 100%
|
||||
);
|
||||
}
|
||||
|
||||
.screen-2__container,
|
||||
.screen-2__container {
|
||||
margin: 0;
|
||||
display: flex;
|
||||
padding: 42px 8px;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 32px;
|
||||
}
|
||||
|
||||
.screen-2__tabs {
|
||||
align-items: center;
|
||||
max-width: 986px;
|
||||
margin: 0 auto;
|
||||
padding: 16px 16px 16px 28px;
|
||||
display: flex;
|
||||
border-radius: 64px;
|
||||
background: hsl(0deg 0% 0% / 10%);
|
||||
}
|
||||
|
||||
input[type="radio"].screen-2__tab-input {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.screen-2__tabs ul {
|
||||
list-style-type: none;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.screen-2__tabs ul li {
|
||||
flex: 1;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.screen-2__tabs ul li label {
|
||||
display: block;
|
||||
padding: 24px 16px 24px 24px;
|
||||
text-align: left;
|
||||
cursor: pointer;
|
||||
color: hsl(0deg 0% 100%);
|
||||
font-family: sans-serif;
|
||||
font-size: 26px;
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
line-height: 130%; /* 33.8px */
|
||||
position: relative;
|
||||
opacity: 0.7;
|
||||
transition: all 0.1s;
|
||||
}
|
||||
|
||||
.screen-2__tabs ul li label:hover {
|
||||
opacity: 0.85;
|
||||
}
|
||||
|
||||
.screen-2__tabs ul li label::before {
|
||||
content: "";
|
||||
display: block;
|
||||
position: absolute;
|
||||
top: 24px;
|
||||
bottom: 24px;
|
||||
left: -2px;
|
||||
width: 5px;
|
||||
border-radius: 5px;
|
||||
background: hsl(0deg 0% 100%);
|
||||
opacity: 0.3;
|
||||
transition: all 0.1s;
|
||||
}
|
||||
|
||||
.screen-2__tabs ul li label:hover::before {
|
||||
opacity: 0.45;
|
||||
}
|
||||
|
||||
.screen-2__tabs .screen-2__tabs-content .screen-2__tab-image {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.screen-2__tabs-content img {
|
||||
max-width: 357px;
|
||||
border-radius: 50px;
|
||||
vertical-align: bottom;
|
||||
}
|
||||
|
||||
#screen-2__tab1:checked
|
||||
~ .screen-2__tabs-content
|
||||
.screen-2__tab-image:nth-of-type(1),
|
||||
#screen-2__tab2:checked
|
||||
~ .screen-2__tabs-content
|
||||
.screen-2__tab-image:nth-of-type(2),
|
||||
#screen-2__tab3:checked
|
||||
~ .screen-2__tabs-content
|
||||
.screen-2__tab-image:nth-of-type(3),
|
||||
#screen-2__tab4:checked
|
||||
~ .screen-2__tabs-content
|
||||
.screen-2__tab-image:nth-of-type(4),
|
||||
#screen-2__tab5:checked
|
||||
~ .screen-2__tabs-content
|
||||
.screen-2__tab-image:nth-of-type(5) {
|
||||
display: block;
|
||||
}
|
||||
|
||||
#screen-2__tab1:checked ~ ul li:nth-of-type(1) label,
|
||||
#screen-2__tab2:checked ~ ul li:nth-of-type(2) label,
|
||||
#screen-2__tab3:checked ~ ul li:nth-of-type(3) label,
|
||||
#screen-2__tab4:checked ~ ul li:nth-of-type(4) label,
|
||||
#screen-2__tab5:checked ~ ul li:nth-of-type(5) label {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
#screen-2__tab1:checked ~ ul li:nth-of-type(1) label::before,
|
||||
#screen-2__tab2:checked ~ ul li:nth-of-type(2) label::before,
|
||||
#screen-2__tab3:checked ~ ul li:nth-of-type(3) label::before,
|
||||
#screen-2__tab4:checked ~ ul li:nth-of-type(4) label::before,
|
||||
#screen-2__tab5:checked ~ ul li:nth-of-type(5) label::before {
|
||||
opacity: 0.7;
|
||||
width: 7px;
|
||||
left: -3px;
|
||||
}
|
||||
|
||||
.screen-3__container,
|
||||
.screen-4__container,
|
||||
.screen-5__container {
|
||||
|
|
@ -229,8 +345,7 @@ ul {
|
|||
gap: 56px;
|
||||
}
|
||||
|
||||
.screen-4__container,
|
||||
.screen-2__container {
|
||||
.screen-4__container {
|
||||
display: flex;
|
||||
flex-flow: row nowrap;
|
||||
align-items: center;
|
||||
|
|
@ -263,12 +378,7 @@ ul {
|
|||
margin: 32px 0 16px;
|
||||
}
|
||||
|
||||
.screen-2__header {
|
||||
max-width: 600px;
|
||||
display: inline-block;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.screen-2__header,
|
||||
.screen-4__header,
|
||||
.screen-5__header {
|
||||
margin: 0;
|
||||
|
|
@ -325,7 +435,6 @@ ul {
|
|||
color: hsl(233deg 14% 26%);
|
||||
}
|
||||
|
||||
.screen-2 .quote__text,
|
||||
.screen-3 .quote__text {
|
||||
max-width: 580px;
|
||||
}
|
||||
|
|
@ -389,11 +498,6 @@ ul {
|
|||
}
|
||||
}
|
||||
|
||||
.screen-2 .quote__text strong {
|
||||
color: hsl(233.8deg 65% 52.9%);
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.quote__source {
|
||||
position: relative;
|
||||
top: 7px;
|
||||
|
|
@ -433,8 +537,8 @@ ul {
|
|||
height: 920px;
|
||||
background: linear-gradient(
|
||||
180deg,
|
||||
hsl(236deg 48% 58%) 0%,
|
||||
hsl(250deg 50% 54%) 100%
|
||||
hsl(236deg 47% 50%) 0%,
|
||||
hsl(250deg 50% 45%) 99.36%
|
||||
);
|
||||
|
||||
.screen-3__quotes {
|
||||
|
|
@ -450,10 +554,6 @@ ul {
|
|||
margin: 0;
|
||||
}
|
||||
|
||||
.quote__text {
|
||||
line-height: 130%;
|
||||
}
|
||||
|
||||
.quote__text strong {
|
||||
color: hsl(250deg 70% 60% / 100%);
|
||||
font-weight: 600;
|
||||
|
|
@ -473,12 +573,14 @@ ul {
|
|||
padding: 60px 16px;
|
||||
}
|
||||
|
||||
.screen-2__header,
|
||||
.screen-3__header,
|
||||
.screen-5__header {
|
||||
margin: 0;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.screen-2__subtitle,
|
||||
.screen-3__subtitle,
|
||||
.screen-5__subtitle {
|
||||
text-align: center;
|
||||
|
|
@ -493,8 +595,8 @@ ul {
|
|||
.screen-4 {
|
||||
background: linear-gradient(
|
||||
180deg,
|
||||
hsl(250deg 50% 54%) 0%,
|
||||
hsl(281deg 67% 62%) 100%
|
||||
hsl(250deg 50% 45%) 0%,
|
||||
hsl(281deg 68% 55%) 100%
|
||||
);
|
||||
}
|
||||
|
||||
|
|
@ -532,8 +634,8 @@ ul {
|
|||
.screen-5 {
|
||||
background: linear-gradient(
|
||||
180deg,
|
||||
hsl(281deg 67% 62%) 0%,
|
||||
hsl(317deg 45% 32%) 100%
|
||||
hsl(281deg 68% 55%) 0%,
|
||||
hsl(317deg 45% 30%) 100%
|
||||
);
|
||||
box-sizing: border-box;
|
||||
overflow: hidden;
|
||||
|
|
@ -607,12 +709,20 @@ ul {
|
|||
|
||||
.screen-1 {
|
||||
background: linear-gradient(
|
||||
180deg,
|
||||
0deg,
|
||||
hsl(209deg 55% 40%) 0%,
|
||||
hsl(209deg 40% 55%) 100%
|
||||
);
|
||||
}
|
||||
|
||||
.screen-2 {
|
||||
background: linear-gradient(
|
||||
180deg,
|
||||
hsl(209deg 55% 40%) 0%,
|
||||
hsl(236deg 47% 50%) 100%
|
||||
);
|
||||
}
|
||||
|
||||
.appshot-1__img {
|
||||
box-shadow: 0 0 70px hsl(209deg 100% 24%);
|
||||
}
|
||||
|
|
@ -635,42 +745,6 @@ ul {
|
|||
background: hsl(216deg 90% 82%);
|
||||
}
|
||||
|
||||
.screen-2 {
|
||||
background: linear-gradient(
|
||||
180deg,
|
||||
hsl(209deg 40% 55%) 0%,
|
||||
hsl(236deg 47% 50%) 100%
|
||||
);
|
||||
}
|
||||
|
||||
.appshot-2__img {
|
||||
box-shadow: 0 0 40px hsl(233.5deg 100% 18.2% / 50%);
|
||||
}
|
||||
|
||||
.screen-3 {
|
||||
background: linear-gradient(
|
||||
180deg,
|
||||
hsl(236deg 47% 50%) 0%,
|
||||
hsl(250deg 50% 45%) 99.36%
|
||||
);
|
||||
}
|
||||
|
||||
.screen-4 {
|
||||
background: linear-gradient(
|
||||
180deg,
|
||||
hsl(250deg 50% 45%) 0%,
|
||||
hsl(281deg 68% 55%) 100%
|
||||
);
|
||||
}
|
||||
|
||||
.screen-5 {
|
||||
background: linear-gradient(
|
||||
180deg,
|
||||
hsl(281deg 68% 55%) 0%,
|
||||
hsl(317deg 45% 30%) 100%
|
||||
);
|
||||
}
|
||||
|
||||
.screen-5 .quote__text {
|
||||
background: hsl(255deg 52% 80%);
|
||||
}
|
||||
|
|
@ -692,22 +766,11 @@ ul {
|
|||
}
|
||||
}
|
||||
|
||||
@media (width <= 1311px) {
|
||||
.screen-2 {
|
||||
height: 768px;
|
||||
}
|
||||
|
||||
.appshot-2__img {
|
||||
width: 320px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (width <= 1129px) {
|
||||
.appshot-1__img {
|
||||
width: calc(var(--appshot-1-img-width) * 0.8);
|
||||
}
|
||||
|
||||
.screen-2__container,
|
||||
.screen-4__container {
|
||||
gap: 32px;
|
||||
}
|
||||
|
|
@ -725,7 +788,6 @@ ul {
|
|||
grid-template-rows: 100px 100px;
|
||||
}
|
||||
|
||||
.screen-2__container,
|
||||
.screen-3__container,
|
||||
.screen-4__container {
|
||||
gap: 16px 24px;
|
||||
|
|
@ -746,6 +808,11 @@ ul {
|
|||
font-size: 28px;
|
||||
}
|
||||
|
||||
.screen-2__tabs ul li label {
|
||||
font-size: 22px;
|
||||
}
|
||||
|
||||
.screen-2 .screen-2__subtitle,
|
||||
.screen-3 .screen-3__subtitle,
|
||||
.screen-5 .screen-5__subtitle {
|
||||
font-size: 24px;
|
||||
|
|
@ -796,7 +863,6 @@ ul {
|
|||
height: auto;
|
||||
}
|
||||
|
||||
.screen-2__container,
|
||||
.screen-3__container,
|
||||
.screen-4__container {
|
||||
flex-direction: column;
|
||||
|
|
@ -805,15 +871,11 @@ ul {
|
|||
align-items: unset;
|
||||
}
|
||||
|
||||
.screen-2__content,
|
||||
.screen-4__content {
|
||||
transform: scale(1);
|
||||
padding: 0;
|
||||
max-width: 600px;
|
||||
margin: auto;
|
||||
}
|
||||
|
||||
.screen-4__content {
|
||||
flex-direction: column;
|
||||
gap: 16px;
|
||||
align-items: flex-start;
|
||||
|
|
@ -886,13 +948,6 @@ ul {
|
|||
margin-top: 50px;
|
||||
}
|
||||
|
||||
.appshot-2__img {
|
||||
position: static;
|
||||
width: 100%;
|
||||
height: auto;
|
||||
max-width: 375px;
|
||||
}
|
||||
|
||||
.badges {
|
||||
margin-top: 16px;
|
||||
}
|
||||
|
|
@ -902,6 +957,42 @@ ul {
|
|||
.client-logos {
|
||||
transform: scale(0.86);
|
||||
}
|
||||
|
||||
.screen-2__tabs ul li label {
|
||||
padding: 16px 16px 16px 24px;
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
.screen-2__tabs ul li label::before {
|
||||
top: 16px;
|
||||
bottom: 16px;
|
||||
}
|
||||
|
||||
.screen-2__tabs-content img {
|
||||
max-width: 300px;
|
||||
border-radius: 42px;
|
||||
}
|
||||
|
||||
.screen-2__tabs {
|
||||
border-radius: 56px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (width <= 700px) {
|
||||
.screen-2__tabs ul li label {
|
||||
font-size: 16px;
|
||||
padding: 16px 12px 16px 14px;
|
||||
}
|
||||
|
||||
.screen-2__tabs {
|
||||
border-radius: 0;
|
||||
background: none;
|
||||
padding: 16px 16px 16px 10px;
|
||||
}
|
||||
|
||||
.screen-2__tabs-content img {
|
||||
max-width: 260px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (width <= 530px) {
|
||||
|
|
@ -911,6 +1002,59 @@ ul {
|
|||
grid-template-rows: 100px 100px;
|
||||
margin: -29px -500px;
|
||||
}
|
||||
|
||||
.screen-2__tabs {
|
||||
flex-direction: column-reverse;
|
||||
padding: 0;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.screen-2__tabs ul {
|
||||
padding-left: 8px;
|
||||
}
|
||||
|
||||
.screen-2__tabs ul li label {
|
||||
padding: 8px 10px;
|
||||
}
|
||||
|
||||
.screen-2__tabs ul li label::before {
|
||||
top: 8px;
|
||||
bottom: 8px;
|
||||
}
|
||||
|
||||
.screen-2__tabs-content {
|
||||
overflow: hidden;
|
||||
height: 393px;
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
border-bottom: 1px solid hsl(0deg 0% 100%);
|
||||
border-image-slice: 1;
|
||||
border-width: 1px;
|
||||
border-image-source: linear-gradient(
|
||||
to right,
|
||||
transparent 0%,
|
||||
hsl(0deg 0% 100%) 25%,
|
||||
hsl(0deg 0% 100%) 75%,
|
||||
transparent 100%
|
||||
);
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
.screen-2__tabs-content {
|
||||
border-color: hsl(0deg 0% 0%);
|
||||
border-image-source: linear-gradient(
|
||||
to right,
|
||||
transparent 0%,
|
||||
hsl(0deg 0% 0%) 25%,
|
||||
hsl(0deg 0% 0%) 75%,
|
||||
transparent 100%
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
.screen-2__container {
|
||||
padding-bottom: 24px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (width <= 400px) {
|
||||
|
|
@ -928,7 +1072,6 @@ ul {
|
|||
margin: 30px 7px;
|
||||
}
|
||||
|
||||
.appshot-2__img,
|
||||
.appshot-1__img {
|
||||
/* Let the image change width based on window width */
|
||||
width: 100% !important;
|
||||
|
|
|
|||
Loading…
Reference in New Issue