Changeset View
Changeset View
Standalone View
Standalone View
landing/keyservers.css
Show All 36 Lines | |||||
span.purple_gradient { | span.purple_gradient { | ||||
background: linear-gradient(90deg, #5d34b3 0%, #a314d5 49.31%); | background: linear-gradient(90deg, #5d34b3 0%, #a314d5 49.31%); | ||||
background-clip: text; | background-clip: text; | ||||
-webkit-background-clip: text; | -webkit-background-clip: text; | ||||
-webkit-text-fill-color: transparent; | -webkit-text-fill-color: transparent; | ||||
} | } | ||||
.servers_section, | |||||
.keyserver_company_section { | .keyserver_company_section { | ||||
display: flex; | display: flex; | ||||
padding: 120px 32px; | padding: 120px 32px; | ||||
justify-content: center; | justify-content: center; | ||||
} | } | ||||
.servers_section { | |||||
background-color: var(--light-dark-page-background); | |||||
} | |||||
.servers_container, | |||||
.keyserver_company_container { | .keyserver_company_container { | ||||
display: flex; | display: flex; | ||||
width: 1376px; | width: 1376px; | ||||
max-width: 90vw; | max-width: 90vw; | ||||
} | } | ||||
.servers_image { | |||||
width: 100%; | |||||
max-height: 480px; | |||||
} | |||||
.servers_copy { | |||||
display: flex; | |||||
flex-direction: column; | |||||
justify-content: center; | |||||
padding-left: 72px; | |||||
} | |||||
.read_the_docs { | .read_the_docs { | ||||
width: 100%; | width: 100%; | ||||
align-self: flex-end; | align-self: flex-end; | ||||
margin-bottom: 24px; | margin-bottom: 24px; | ||||
margin-left: 112px; | margin-left: 112px; | ||||
} | } | ||||
@media (max-width: 1440px) { | @media (max-width: 1440px) { | ||||
.servers_container, | |||||
.keyserver_company_container { | .keyserver_company_container { | ||||
flex-direction: column; | flex-direction: column; | ||||
} | } | ||||
.servers_copy { | |||||
padding-left: 0; | |||||
margin-top: 64px; | |||||
} | |||||
.keyserver_company_copy { | .keyserver_company_copy { | ||||
margin-bottom: 48px; | margin-bottom: 48px; | ||||
} | } | ||||
.read_the_docs { | .read_the_docs { | ||||
max-width: 504px; | max-width: 504px; | ||||
align-self: flex-start; | align-self: flex-start; | ||||
margin: 0; | margin: 0; | ||||
} | } | ||||
} | } | ||||
/* ===== CSS BODY GRID LAYOUT ===== */ | /* ===== CSS BODY GRID LAYOUT ===== */ | ||||
div.body_grid { | div.body_grid { | ||||
grid-template-columns: 1fr 1fr; | grid-template-columns: 1fr 1fr; | ||||
grid-template-areas: | grid-template-areas: 'hero_copy hero_image'; | ||||
'hero_copy hero_image' | |||||
'server_image server_copy'; | |||||
} | } | ||||
div.hero_copy { | div.hero_copy { | ||||
grid-area: hero_copy; | grid-area: hero_copy; | ||||
align-self: center; | align-self: center; | ||||
} | } | ||||
div.hero_image { | div.hero_image { | ||||
grid-area: hero_image; | grid-area: hero_image; | ||||
object-fit: scale-down; | object-fit: scale-down; | ||||
align-self: center; | align-self: center; | ||||
} | } | ||||
div.server_image { | |||||
grid-area: server_image; | |||||
object-fit: scale-down; | |||||
align-self: center; | |||||
} | |||||
div.server_copy { | |||||
grid-area: server_copy; | |||||
align-self: center; | |||||
} | |||||
/* ===== LAYOUT HACKS ===== */ | /* ===== LAYOUT HACKS ===== */ | ||||
div.body_grid > div + .starting_section { | div.body_grid > div + .starting_section { | ||||
padding-top: 80px; | padding-top: 80px; | ||||
} | } | ||||
.section { | .section { | ||||
padding-top: 80px; | padding-top: 80px; | ||||
Show All 16 Lines | div.app_landing_grid { | ||||
justify-content: center; | justify-content: center; | ||||
padding: 0 3% 2vh; | padding: 0 3% 2vh; | ||||
} | } | ||||
/* ===== CSS BODY GRID LAYOUT ===== */ | /* ===== CSS BODY GRID LAYOUT ===== */ | ||||
div.body_grid { | div.body_grid { | ||||
grid-template-areas: | grid-template-areas: | ||||
'hero_image' | 'hero_image' | ||||
'hero_copy' | 'hero_copy'; | ||||
'server_image' | |||||
'server_copy'; | |||||
} | } | ||||
/* ===== LAYOUT HACKS ===== */ | /* ===== LAYOUT HACKS ===== */ | ||||
.section { | .section { | ||||
padding-top: 20px; | padding-top: 20px; | ||||
} | } | ||||
} | } |