Jasmine W a9df6ac50b
docs: update structure (#8506)
- moved and renamed files/folders based on new structure
- updated docs navigation based on new structure
- moved CLI to top nav (created commands.jsx and commands-navigation.js)
- updated and added redirects
- updating to be consistent with standalone categories
- changing "overview" link in top nav to lead to where intro was moved (docs/intro)
- adding redirects for intro content
- deleting old intro folders
- format all data/navigation files
- deleting old commands folder
- reverting changes to glossary page
- adjust intro navigation for removal of 'vs' paths
- add helm page redirect
- fix more redirects
- add a missing redirect
- fix broken anchor links and formatting mistakes
- deleted duplicate section, added redirect, changed link
- removed duplicate glossary page
2020-09-01 11:14:13 -04:00

169 lines
3.0 KiB
CSS

.g-learn-callout {
padding-top: 88px;
padding-bottom: 88px;
@media (max-width: 768px) {
padding-top: 64px;
padding-bottom: 64px;
}
& .learn-container {
@media (max-width: 1200px) {
display: flex;
flex-wrap: wrap;
justify-content: center;
}
& .mobile-button {
@media (min-width: 1201px) {
display: none;
}
}
}
& .column-container {
display: flex;
justify-content: space-between;
margin: 0 36px;
@media (max-width: 1200px) {
margin: 0 -16px;
flex-wrap: wrap;
}
& .column-content {
& h2 {
@media (max-width: 1200px) {
margin: 0;
}
}
}
& .desktop-button {
@media (max-width: 1200px) {
display: none;
}
}
& > div {
display: flex;
flex-wrap: wrap;
align-items: center;
margin: 0 16px;
width: 33.333%;
overflow: auto;
@media (max-width: 1200px) {
text-align: center;
display: block;
width: 100%;
margin: 0;
margin-bottom: 48px;
}
}
& > a {
margin: 0 16px;
width: 33.333%;
transition: box-shadow 0.25s, transform 0.25s, -webkit-transform 0.25s;
display: flex;
cursor: pointer;
&:hover {
box-shadow: 0 16px 28px rgba(37, 38, 45, 0.12);
transform: translateY(-4px);
}
@media (max-width: 1200px) {
width: calc(50% - 32px);
margin-bottom: 48px;
}
@media (max-width: 768px) {
width: 100%;
&:last-child {
margin-bottom: 48px;
}
}
& .course {
border: 1px solid var(--gray-6);
display: flex;
flex-direction: column;
width: 100%;
& > div {
min-height: 200px;
padding: 25px;
}
& .image {
background: var(--gray-7);
position: relative;
display: flex;
justify-content: center;
align-items: center;
& img {
max-width: 80px;
max-height: 80px;
width: 100%;
}
}
& h4 {
color: var(--gray-2);
}
& .time {
color: var(--gray-4);
position: absolute;
top: 10px;
right: 10px;
}
& .content {
text-align: center;
background: #fff;
@media (max-width: 768px) {
display: flex;
justify-content: center;
align-items: center;
}
& h4 {
margin: 24px 0;
}
}
}
}
&.brand-consul {
& .content label {
color: var(--consul);
}
}
/* Brand -- Nomad */
&.brand-nomad {
& .content label {
color: var(--nomad);
}
}
/* Brand -- Packer */
&.brand-packer {
& .content label {
color: var(--packer);
}
}
/* Brand -- Terraform */
&.brand-terraform {
& .content label {
color: var(--terraform);
}
}
}
}