fleet/website/assets/styles/pages/articles/articles.less
Eric 7190b74f2f
Website: browser compatibility updates (Edge v17, Chrome v55, Firefox v54, Opera v42, & Safari v10) (#10583)
Closes: #10496 

Changes:
- Fixed alignment issues with the <scrollable-tweets> component's page
indicator (Edge v16 & Safari 10)
- Added a hard-coded height to embedded youtube videos in Markdown
content to fix it rendering with a height of 0 (Edge v17 & Firefox v54)
- Fixed table example syntax highlighting (Edge v17, Chrome v55, Firefox
v54, Opera v42, & Safari v10)
- Added a set width to the edit page button on tables pages (Safari v10,
Firefox v54)
- Fixed a bug with the sidebar height on tables pages (Edge v17)
- Fixed styling on the pricing calculator inputs (Safari v10 & Firefox
v54)
- Fixed a layout issue with the pricing calculator call-to-action
buttons (Safari v10)
- Hid browser-specific form input buttons (Firefox v54)
- Fixed the sidebar CTA image on documentation pages (Opera v42)
- Fixed a CSS issue with the user story banner on `/platform` (Safari
v10, Firefox v54, Chrome v55, Opera v42)
- Updated the documentation page script to only copy links to the user's
clipboard if the user's browser supports it.
- Updated minimum browser versions for Edge, Chrome, and Opera for async
functions support. (Edge v16 » Edge v17, Chrome v51 » Chrome v55, Opera
v38 » Opera v42)
2023-03-17 19:36:15 -05:00

197 lines
4.2 KiB
Plaintext
Vendored

#articles {
padding-left: 24px;
padding-right: 24px;
[purpose='categories-and-search'] {
padding-top: 40px;
padding-bottom: 40px;
[purpose='search'] {
border: 1px solid #C5C7D1;
width: 320px;
border-radius: 8px;
height: 40px;
img {
display: flex;
height: 16px;
margin-top: 3px;
}
}
[purpose='categories'] {
[purpose='category-filter'] {
display: flex;
font-weight: 700;
font-size: 16px;
margin-right: 40px;
cursor: pointer;
}
[purpose='category-filter'].selected {
border-bottom: 2px solid @core-vibrant-blue;
}
}
}
[purpose='category-title'] {
padding-top: 80px;
padding-bottom: 40px;
}
[purpose='rss-button'] {
padding: 4px 8px;
display: inline;
max-width: min-content;
color: #192147;
font-size: 14px;
text-decoration: none;
span::before {
font-family: 'FontAwesome';
content: '\f09e';
color: #192147;
padding-right: 8px;
font-size: 16px;
}
}
[purpose='articles'] {
padding-bottom: 80px;
[purpose='article-card'] {
margin-left: 10px;
margin-right: 10px;
margin-bottom: 40px;
border: none;
border-radius: 16px;
box-shadow: 0px 4px 16px rgba(0, 0, 0, 0.1);
img {
border-top-left-radius: 16px;
border-top-right-radius: 16px;
}
[purpose='article-card-body'] {
padding: 24px 24px 32px 24px;
[purpose='category-name'] {
text-transform: uppercase;
color: @core-fleet-black-50;
font-size: 12px;
font-weight: 700;
line-height: 20px;
text-decoration: none;
}
[purpose='article-title'] {
display: block;
text-decoration: none;
color: @core-fleet-black;
margin-bottom: 24px;
h5 {
font-weight: 700;
font-size: 20px;
line-height: 24px;
}
}
[purpose='article-details'] {
font-size: 14px;
line-height: 20px;
span {
color: @core-fleet-black-50;
}
p {
margin-bottom: 0px;
}
}
}
}
}
@media (min-width: 1200px) {
[purpose='categories-and-search'] {
margin-left: 10px;
margin-right: 10px;
}
[purpose='articles'] {
margin-left: -25px;
margin-right: -25px;
[purpose='article-card'] {
flex: 1 1 350px;
margin-left: 20px;
margin-right: 20px;
margin-bottom: 40px;
border-radius: 16px;
box-shadow: 0px 4px 16px rgba(0, 0, 0, 0.1);
max-width: 370px;
}
}
}
@media (min-width: 991px) {
[purpose='articles'] {
[purpose='article-card'] {
flex: 1 1 290px;
}
}
}
@media (max-width: 991px) {
padding-left: 40px;
padding-right: 40px;
[purpose='categories-and-search'] {
padding-top: 40px;
[purpose='search'] {
width: 100%;
}
[purpose='categories'] {
[purpose='category-filter'] {
margin-right: 24px;
}
}
}
[purpose='category-title'] {
padding-top: 60px;
}
[purpose='articles'] {
[purpose='article-card'] {
flex: 1 1 330px;
max-width: 50%;
}
margin-left: -10px;
margin-right: -10px;
}
}
@media (max-width: 767px) {
[purpose='categories-and-search'] {
[purpose='search'] {
width: 100%;
}
[purpose='categories'] {
[purpose='category-filter'] {
padding-left: 8px;
margin-bottom: 8px;
}
[purpose='category-filter'].selected {
border-left: 2px solid @core-vibrant-blue;
border-bottom: none;
padding-left: 6px;
}
}
}
[purpose='articles'] {
[purpose='article-card'] {
max-width: 100%;
}
}
}
@media (max-width: 576px) {
padding-left: 24px;
padding-right: 24px;
[purpose='articles'] {
margin-left: -10px;
margin-right: -10px;
[purpose='article-card'] {
flex: 1 1 350px;
max-width: 100%;
}
}
}
}