Skip to content
This repository has been archived by the owner on Feb 29, 2020. It is now read-only.

Add extra space for snippets, fix various CSS stuff #3047

Merged
merged 3 commits into from
Jul 31, 2017
Merged

Add extra space for snippets, fix various CSS stuff #3047

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
03bda34
style(mc): #3000 add bottom padding to compensate for snippets
k88hudson Jul 31, 2017
38139c3
style(mc): Add responsive styling for Topics
k88hudson Jul 31, 2017
9669521
style(mc): Fix uneven vertical spacing of sections
k88hudson Jul 31, 2017
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 4 additions & 0 deletions system-addon/content-src/components/Base/_Base.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,10 @@ main {
margin: auto;
width: $wrapper-default-width;

// This is needed to offset the snippets container so things
// at the bottom of the page are still visible when snippets are visible
padding-bottom: $snippets-container-height;

@media (min-width: $break-point-small) {
width: $wrapper-max-width-small;
}
Expand Down
1 change: 1 addition & 0 deletions system-addon/content-src/components/TopSites/_TopSites.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,7 @@
margin: 0;
padding: 0;
margin-inline-end: -$base-gutter;
margin-bottom: -$top-sites-vertical-space;

// Two columns
@media (max-width: $break-point-small) {
Expand Down
44 changes: 28 additions & 16 deletions system-addon/content-src/components/Topics/_Topics.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,36 +4,48 @@

font-size: 13px;
color: $topic-grey;
min-width: 780px;
line-height: 16px;
margin-top: $topic-margin-top;
line-height: 1.6;
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

was this meant to stay here?

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

like, do you need both the multiplier and also the 16px? i remember the 16px came from an average number on both windows and osx looking pretty good, i wonder if adding the multiplier will change that

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I added the multiplier for the small sizes so that the text looks a little better wrapped. The 16px is for the full size


ul {
display: inline;
padding-left: 12px;
@media (min-width: $break-point-large) {
line-height: 16px;
min-width: 780px;
}

ul li {
display: inline;
ul {
margin: 0;
padding: 0;
@media (min-width: $break-point-large) {
display: inline;
padding-left: 12px;
}
}

ul li::after {
content: '•';
padding-left: 8px;
padding-right: 8px;
}

ul li:last-child::after {
content: none;
ul li {
display: inline-block;
@media (min-width: $break-point-large) {
display: inline;
}
&::after {
content: '•';
padding-left: 8px;
padding-right: 8px;
}
&:last-child::after {
content: none;
}
}

.topic-link {
color: $topic-blue;
}

.topic-read-more {
float: right;
margin-right: 40px;
@media (min-width: $break-point-large) {
margin-right: 40px;
float: right;
}
color: $topic-blue;
}

Expand Down
2 changes: 2 additions & 0 deletions system-addon/content-src/styles/_variables.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -68,6 +68,8 @@ $search-margin-bottom: 40px;

$image-path: 'assets/';

$snippets-container-height: 120px;

@mixin fade-in {
box-shadow: inset $inner-box-shadow, 0 0 0 5px $faintest-black;
transition: box-shadow 150ms;
Expand Down