Skip to content

Commit 750bcba

Browse files
palewirepalewire
committed
Added consistent breakpoints for our custom components. Fixes jupyter#649 
1 parent 0454922 commit 750bcba

File tree

10 files changed

+310
-275
lines changed

10 files changed

+310
-275
lines changed

‎_sass/components/_box.scss

Lines changed: 46 additions & 45 deletions
Original file line numberDiff line numberDiff line change
@@ -1,49 +1,50 @@
11
@import "settings/colors";
2+
@import "settings/breakpoints";
23

34
.boxlist {
4-
display: flex;
5-
flex-direction: row;
6-
flex-wrap: wrap;
7-
justify-content: center;
8-
align-items: center;
9-
.box {
10-
min-height: 330px;
11-
width: 260px;
12-
margin: 1.5em 1.5em 1.5em 0;
13-
background: $white;
14-
box-shadow: 0 3px 6px $gray;
15-
border-radius: 2px;
16-
a {
17-
color: $black;
18-
}
19-
@media(max-width: 544px) {
20-
min-height: 240px;
21-
}
22-
&:hover {
23-
box-shadow: 0px 6px 6px #aaa;
24-
}
25-
.box-link {
26-
text-decoration: none;
27-
}
28-
.box-title {
29-
margin: 0;
30-
padding: 1.5em 1em;
31-
background: $blue;
32-
color: $white;
33-
font-size: 1.2em;
34-
}
35-
.box-body {
36-
padding: 2em 1em 1em 1em;
37-
text-align: center;
38-
p {
39-
margin-top: 1em;
40-
}
41-
}
42-
.box-logo {
43-
height: 100px;
44-
width: 100%;
45-
object-fit: contain;
46-
margin: 12px auto;
47-
}
5+
display: flex;
6+
flex-direction: row;
7+
flex-wrap: wrap;
8+
justify-content: center;
9+
align-items: center;
10+
.box {
11+
min-height: 330px;
12+
width: 260px;
13+
margin: 1.5em 1.5em 1.5em 0;
14+
background: $white;
15+
box-shadow: 0 3px 6px $gray;
16+
border-radius: 2px;
17+
a {
18+
color: $black;
4819
}
49-
}
20+
@media (max-width: $breakpoint-m) {
21+
min-height: 240px;
22+
}
23+
&:hover {
24+
box-shadow: 0px 6px 6px #aaa;
25+
}
26+
.box-link {
27+
text-decoration: none;
28+
}
29+
.box-title {
30+
margin: 0;
31+
padding: 1.5em 1em;
32+
background: $blue;
33+
color: $white;
34+
font-size: 1.2em;
35+
}
36+
.box-body {
37+
padding: 2em 1em 1em 1em;
38+
text-align: center;
39+
p {
40+
margin-top: 1em;
41+
}
42+
}
43+
.box-logo {
44+
height: 100px;
45+
width: 100%;
46+
object-fit: contain;
47+
margin: 12px auto;
48+
}
49+
}
50+
}

‎_sass/components/_community-resource.scss

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
@import "settings/colors";
2+
@import "settings/breakpoints";
23

34
.resourcelist {
45
display: table;
@@ -45,7 +46,7 @@
4546
}
4647
}
4748

48-
@media (max-width: 992px) {
49+
@media (max-width: $breakpoint-l) {
4950
.resource {
5051
height: 400px;
5152
padding: 10px 0 30px;

‎_sass/components/_copy.scss

Lines changed: 5 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,25 +1,26 @@
1-
// Formatting for the text that is displayed in content sections of a page.
1+
@import "settings/breakpoints";
2+
23
p {
34
margin: 0 0 10px;
45
}
56

6-
@media (min-width: 992px) {
7+
@media (min-width: $breakpoint-l) {
78
p {
89
font-size: 16px;
910
font-weight: 400;
1011
line-height: 1.375;
1112
}
1213
}
1314

14-
@media (max-width: 992px) {
15+
@media (max-width: $breakpoint-l) {
1516
p {
1617
font-size: 16px;
1718
font-weight: 400;
1819
line-height: 1.25em;
1920
}
2021
}
2122

22-
@media (max-width: 768px) {
23+
@media (max-width: $breakpoint-m) {
2324
p {
2425
font-size: 16px;
2526
font-weight: 400;

‎_sass/components/_homepage.scss

Lines changed: 10 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,10 @@
11
@import "settings/colors";
2+
@import "settings/breakpoints";
23

34
.homepage-section {
45
display: table;
56
padding: 7em 0;
6-
@media (max-width: 420px) {
7+
@media (max-width: $breakpoint-s) {
78
padding: 3em 0;
89
}
910
.showcase {
@@ -14,7 +15,7 @@
1415
margin-top: 2em;
1516
h2 {
1617
margin: 0;
17-
@media (max-width: 420px) {
18+
@media (max-width: $breakpoint-s) {
1819
font-size: 1.8em;
1920
}
2021
}
@@ -29,7 +30,7 @@
2930
justify-content: start;
3031
align-items: center;
3132
flex-direction: row;
32-
@media (max-width: 420px) {
33+
@media (max-width: $breakpoint-s) {
3334
align-items: start;
3435
flex-direction: column;
3536
}
@@ -56,7 +57,7 @@
5657
text-decoration: none;
5758
}
5859
&:first-of-type {
59-
@media (max-width: 420px) {
60+
@media (max-width: $breakpoint-s) {
6061
margin-bottom: 1em;
6162
}
6263
}
@@ -68,14 +69,14 @@
6869
justify-content: start;
6970
align-items: center;
7071
flex-direction: row;
71-
@media (max-width: 420px) {
72+
@media (max-width: $breakpoint-s) {
7273
margin-top: 1em;
7374
align-items: start;
7475
flex-direction: column;
7576
}
7677
.feature {
7778
margin: 0 2em;
78-
@media (max-width: 420px) {
79+
@media (max-width: $breakpoint-s) {
7980
margin: 0 0 2em 0;
8081
}
8182
h3 {
@@ -90,7 +91,7 @@
9091
}
9192
&.openstandards-section {
9293
width: 100%;
93-
@media (max-width: 900px) {
94+
@media (max-width: $breakpoint-l) {
9495
padding: 1em 1em 0 1em;
9596
}
9697
.description {
@@ -105,7 +106,7 @@
105106
align-items: center;
106107
flex-direction: row;
107108
margin: 4em 0 0 0;
108-
@media (max-width: 900px) {
109+
@media (max-width: $breakpoint-l) {
109110
margin: 2em 0 0 0;
110111
align-items: start;
111112
flex-direction: column;
@@ -119,7 +120,7 @@
119120
height: auto;
120121
padding: 2em;
121122
margin: 0 auto 2em auto;
122-
@media (max-width: 900px) {
123+
@media (max-width: $breakpoint-l) {
123124
width: 275px;
124125
}
125126
h3 {

‎_sass/components/_iframes.scss

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,11 @@
1+
@import "settings/breakpoints";
2+
13
.iframe-container {
24
position: relative;
35
overflow: hidden;
46
width: 100%;
57
padding-top: 75%; /* 4:3 Aspect Ratio */
6-
@media (max-width: 767px) {
8+
@media (max-width: $breakpoint-m) {
79
padding-top: 130%; /* A custom aspect ratio for Google Calendar */
810
}
911
}

‎_sass/components/_jumbotron.scss

Lines changed: 76 additions & 54 deletions
Original file line numberDiff line numberDiff line change
@@ -1,68 +1,90 @@
1-
/*Main logo animation on the front page of the Jupyter website */
1+
@import "settings/breakpoints";
22

3-
@-webkit-keyframes fadeIn { from { opacity:0;} to { opacity:1;} }
4-
@-moz-keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
5-
@keyframes fadeIn { from { opacity:0;} to { opacity:1;} }
3+
/*Main logo animation on the front page of the Jupyter website */
4+
@-webkit-keyframes fadeIn {
5+
from {
6+
opacity: 0;
7+
}
8+
to {
9+
opacity: 1;
10+
}
11+
}
12+
@-moz-keyframes fadeIn {
13+
from {
14+
opacity: 0;
15+
}
16+
to {
17+
opacity: 1;
18+
}
19+
}
20+
@keyframes fadeIn {
21+
from {
22+
opacity: 0;
23+
}
24+
to {
25+
opacity: 1;
26+
}
27+
}
628
/*This entire section related to fading is for the front page with the Jupyter logo*/
729
.fade-in {
8-
-webkit-animation:fadeIn ease-in 1; /* call our keyframe named fadeIn, use animation ease-in and repeat it only 1 time */
9-
-moz-animation:fadeIn ease-in 1;
10-
animation:fadeIn ease-in 1;
30+
-webkit-animation: fadeIn ease-in 1; /* call our keyframe named fadeIn, use animation ease-in and repeat it only 1 time */
31+
-moz-animation: fadeIn ease-in 1;
32+
animation: fadeIn ease-in 1;
1133

12-
-webkit-animation-duration:1s;
13-
-moz-animation-duration:1s;
14-
animation-duration:1s;
34+
-webkit-animation-duration: 1s;
35+
-moz-animation-duration: 1s;
36+
animation-duration: 1s;
1537

16-
-webkit-animation-fill-mode:forwards; /* this makes sure that after animation is done we remain at the last keyframe value (opacity: 1)*/
17-
-moz-animation-fill-mode:forwards;
18-
animation-fill-mode:forwards;
38+
-webkit-animation-fill-mode: forwards; /* this makes sure that after animation is done we remain at the last keyframe value (opacity: 1)*/
39+
-moz-animation-fill-mode: forwards;
40+
animation-fill-mode: forwards;
1941

20-
opacity:0; /* make things invisible upon start */
42+
opacity: 0; /* make things invisible upon start */
2143
}
2244

2345
.jumbotron {
24-
background-color: white;
25-
margin-top:30px;
26-
overflow: hidden;
27-
@media (max-width: 768px) {
28-
margin-right: 5%;
29-
}
30-
.main-logo {
31-
height: calc(100% - 20px);
32-
margin-top: 10px;
33-
padding-left: 20px;
34-
}
35-
.fade-in.one {
36-
-webkit-animation-delay: 0.3s;
37-
-moz-animation-delay: 0.3s;
38-
animation-delay: 0.3s;
39-
}
40-
.fade-in.two {
41-
-webkit-animation-delay: 0.7s;
42-
-moz-animation-delay:0.7s;
43-
animation-delay: 0.7s;
44-
}
45-
.fade-in.three {
46-
-webkit-animation-delay: 1.1s;
47-
-moz-animation-delay: 1.1s;
48-
animation-delay: 1.1s;
49-
}
50-
.jumbotron-image-container {
51-
height: 100%;
52-
margin: 0 auto;
53-
position: absolute;
54-
text-align: center;
55-
width: 95%;
56-
img {
57-
margin: 0 auto;
58-
vertical-align: middle;
59-
}
46+
background-color: white;
47+
margin-top: 30px;
48+
overflow: hidden;
49+
@media (max-width: $breakpoint-m) {
50+
margin-right: 5%;
51+
}
52+
.main-logo {
53+
height: calc(100% - 20px);
54+
margin-top: 10px;
55+
padding-left: 20px;
56+
}
57+
.fade-in.one {
58+
-webkit-animation-delay: 0.3s;
59+
-moz-animation-delay: 0.3s;
60+
animation-delay: 0.3s;
61+
}
62+
.fade-in.two {
63+
-webkit-animation-delay: 0.7s;
64+
-moz-animation-delay: 0.7s;
65+
animation-delay: 0.7s;
66+
}
67+
.fade-in.three {
68+
-webkit-animation-delay: 1.1s;
69+
-moz-animation-delay: 1.1s;
70+
animation-delay: 1.1s;
71+
}
72+
.jumbotron-image-container {
73+
height: 100%;
74+
margin: 0 auto;
75+
position: absolute;
76+
text-align: center;
77+
width: 95%;
78+
img {
79+
margin: 0 auto;
80+
vertical-align: middle;
6081
}
82+
}
6183
}
6284

6385
.jumbotron-text {
64-
padding-bottom: 32px;
65-
text-align: center;
66-
font-size: 18px;
67-
line-height: 1.3;
86+
padding-bottom: 32px;
87+
text-align: center;
88+
font-size: 18px;
89+
line-height: 1.3;
6890
}

0 commit comments

Comments
 (0)