Skip to content

Commit f1c928b

Browse files
palewirepalewire
authored
Merge pull request jupyter#663 from jupyter/breakpoints
Added consistent breakpoints for our custom components
2 parents 89f1619 + 32dae3d commit f1c928b

10 files changed

+310
-275
lines changed

‎_sass/components/_box.scss

+46-45
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

+2-1
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

+5-4
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

+10-9
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,11 @@
11
@import "settings/colors";
2+
@import "settings/breakpoints";
23

34
.homepage-section {
45
display: table;
56
padding: 7em 0;
67
width: 100%;
7-
@media (max-width: 420px) {
8+
@media (max-width: $breakpoint-s) {
89
padding: 3em 0;
910
}
1011
.showcase {
@@ -17,7 +18,7 @@
1718
margin-top: 2em;
1819
h2 {
1920
margin: 0;
20-
@media (max-width: 420px) {
21+
@media (max-width: $breakpoint-s) {
2122
font-size: 1.8em;
2223
}
2324
}
@@ -32,7 +33,7 @@
3233
justify-content: start;
3334
align-items: center;
3435
flex-direction: row;
35-
@media (max-width: 420px) {
36+
@media (max-width: $breakpoint-s) {
3637
align-items: start;
3738
flex-direction: column;
3839
}
@@ -59,7 +60,7 @@
5960
text-decoration: none;
6061
}
6162
&:first-of-type {
62-
@media (max-width: 420px) {
63+
@media (max-width: $breakpoint-s) {
6364
margin-bottom: 1em;
6465
}
6566
}
@@ -71,14 +72,14 @@
7172
justify-content: start;
7273
align-items: center;
7374
flex-direction: row;
74-
@media (max-width: 420px) {
75+
@media (max-width: $breakpoint-s) {
7576
margin-top: 1em;
7677
align-items: start;
7778
flex-direction: column;
7879
}
7980
.feature {
8081
margin: 0 2em;
81-
@media (max-width: 420px) {
82+
@media (max-width: $breakpoint-s) {
8283
margin: 0 0 2em 0;
8384
}
8485
h3 {
@@ -93,7 +94,7 @@
9394
}
9495
&.openstandards-section {
9596
width: 100%;
96-
@media (max-width: 900px) {
97+
@media (max-width: $breakpoint-l) {
9798
padding: 1em 1em 0 1em;
9899
}
99100
.description {
@@ -108,7 +109,7 @@
108109
align-items: center;
109110
flex-direction: row;
110111
margin: 4em 0 0 0;
111-
@media (max-width: 900px) {
112+
@media (max-width: $breakpoint-l) {
112113
margin: 2em 0 0 0;
113114
align-items: start;
114115
flex-direction: column;
@@ -122,7 +123,7 @@
122123
height: auto;
123124
padding: 2em;
124125
margin: 0 auto 2em auto;
125-
@media (max-width: 900px) {
126+
@media (max-width: $breakpoint-l) {
126127
width: 275px;
127128
}
128129
h3 {

‎_sass/components/_iframes.scss

+3-1
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

+76-54
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)