diff --git a/_includes/content.html b/_includes/content.html
index c753677..0f4788c 100644
--- a/_includes/content.html
+++ b/_includes/content.html
@@ -17,6 +17,8 @@
{{ page.title }}
+
Important: These docs are for the outdated Jets 5 versions and below. For the latest
+ Jets docs: docs.rubyonjets.com
{{ content }}
@@ -31,4 +33,4 @@ {{ page.title }}
-{% endif %}
+{% endif %}
\ No newline at end of file
diff --git a/_sass/masthead.scss b/_sass/masthead.scss
index 0884e8e..2108e31 100644
--- a/_sass/masthead.scss
+++ b/_sass/masthead.scss
@@ -7,7 +7,8 @@ header.masthead {
color: white;
background-color: #020766;
- h1, h2 {
+ h1,
+ h2 {
border: none;
}
@@ -20,17 +21,21 @@ header.masthead {
position: relative;
padding: 50px 0 30px;
text-align: center;
+
.header-content-inner {
position: relative;
max-width: 500px;
margin: 0 auto;
+
h1 {
font-size: 30px;
margin-top: 0;
margin-bottom: 30px;
}
+
.list-badges {
margin-bottom: 25px;
+
img {
height: 50px;
margin-bottom: 25px;
@@ -38,41 +43,49 @@ header.masthead {
}
}
}
+
.device-container {
max-width: 300px;
margin: 0 auto 100px;
+
.screen img {
border-radius: 3px;
}
}
+
@media (min-width: 768px) {
+
// min-height: 100%;
.header-content {
// height: 100vh;
min-height: 600px;
padding: 0;
text-align: left;
+
.header-content-inner {
position: absolute;
top: 50%;
max-width: none;
margin: 0;
transform: translateY(-50%);
+
h1 {
font-size: 35px;
}
}
}
+
.device-container {
max-width: none;
max-height: calc(100vh - 100px);
margin: 100px auto 0;
}
}
+
@media (min-width: 992px) {
.header-content .header-content-inner h1 {
font-size: 40px;
line-height: normal;
}
}
-}
+}
\ No newline at end of file
diff --git a/_sass/theme.scss b/_sass/theme.scss
index fb129f7..43c4d54 100644
--- a/_sass/theme.scss
+++ b/_sass/theme.scss
@@ -3,12 +3,14 @@
font-size: 2.2em;
font-weight: bold;
}
+
h2 {
font-size: 1.7em;
line-height: 1.3em;
padding-bottom: 20px;
}
}
+
.homepage-logo {
width: 60%;
margin: auto;
@@ -49,7 +51,7 @@ section#main img {
section#main .intro-text .name {
display: block;
text-transform: uppercase;
- font-family: Montserrat,"Helvetica Neue",Helvetica,Arial,sans-serif;
+ font-family: Montserrat, "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 2em;
font-weight: 700;
}
@@ -81,6 +83,7 @@ section#main .intro-text .skills {
.content-body {
text-align: left;
margin-top: 30px;
+
@media (min-width: 992px) {
margin-top: 35px;
}
@@ -110,6 +113,7 @@ footer img.footer-logo {
h2 {
font-size: 1.3em;
}
+
li {
font-size: 0.9em;
}
@@ -125,8 +129,12 @@ footer img.footer-logo {
.content-body-list {
- .video-container iframe, .video-container object, .video-container embed {
+
+ .video-container iframe,
+ .video-container object,
+ .video-container embed {
width: 180px;
+
@media (min-width: 768px) {
/* 16:9 ratio */
width: 300px;
@@ -156,6 +164,7 @@ footer img.footer-logo {
font-size: 1.15em;
padding-bottom: 10px;
position: relative;
+
// background-color: yellow;
// border: 1px solid red;
@media (min-width: 1000px) {
@@ -171,11 +180,13 @@ footer img.footer-logo {
text-align: center;
display: table-cell;
height: 70px;
+
// background-color: green;
@media (min-width: 768px) {
width: 150px;
height: 120px;
}
+
@media (min-width: 1000px) {
width: inherit;
height: 160px;
@@ -184,24 +195,30 @@ footer img.footer-logo {
display: block;
float: none;
}
+
img.center-crop {
object-fit: contain;
- object-position: center; /* Center the image within the element */
+ object-position: center;
+ /* Center the image within the element */
height: 64px;
+
@media (min-width: 768px) {
height: 110px;
}
+
@media (min-width: 1000px) {
height: 160px;
}
}
}
+
.related-link {
// background-color: red;
vertical-align: top;
display: table-cell;
height: 70px;
padding-left: 15px;
+
@media (min-width: 1000px) {
height: 50px;
display: block;
@@ -210,7 +227,8 @@ footer img.footer-logo {
margin-bottom: 5px;
text-align: center;
}
- a {
+
+ a {
display: block;
vertical-align: middle;
line-height: normal;
@@ -240,11 +258,13 @@ ul.toc {
list-style-type: none;
padding: 5px;
margin-left: 0;
+
li {
list-style-type: none;
padding-left: 5px;
margin-left: 0;
}
+
ul {
padding-left: 10px;
}
@@ -253,11 +273,13 @@ ul.toc {
.getting-started-options {
padding: 40px 30px;
text-align: center;
+
img {
vertical-align: middle;
text-align: center;
padding: 20px;
}
+
font-size: 2em;
}
@@ -274,20 +296,23 @@ ul.toc {
text-align: left;
margin: 0 auto 0 0;
padding-bottom: 20px;
+
.video-container {
- position:relative;
- padding-bottom:56.25%;
- padding-top:30px;
- height:0;
- overflow:hidden;
+ position: relative;
+ padding-bottom: 56.25%;
+ padding-top: 30px;
+ height: 0;
+ overflow: hidden;
}
- .video-container iframe, .video-container object, .video-container embed {
- position:absolute;
- top:0;
- left:0;
- width:100%;
- height:100%;
+ .video-container iframe,
+ .video-container object,
+ .video-container embed {
+ position: absolute;
+ top: 0;
+ left: 0;
+ width: 100%;
+ height: 100%;
}
}
@@ -297,10 +322,12 @@ ul.toc {
h4 {
font-weight: bold;
}
+
// background-color: red;
font-size: 1.25em;
vertical-align: middle;
display: table-cell;
+
@media (min-width: 768px) {
height: 350px;
}
@@ -338,6 +365,7 @@ ul.toc {
font-size: 0.9em;
padding: 10px;
margin-bottom: 15px;
+
p {
margin: 0;
}
@@ -360,15 +388,18 @@ ul.toc {
margin: 0;
padding: 0;
width: 200px;
+
// desktop
@media (min-width: 500px) {
// without padding-left its centered
width: 320px;
}
+
@media (min-width: 600px) {
// without padding-left its centered
width: 400px;
}
+
@media (min-width: 768px) {
padding-left: 64px;
width: 512px;
@@ -400,6 +431,7 @@ ul.toc {
.navbar-logo {
max-height: 25px;
+
@media (min-width: 992px) {
max-height: 55px;
}
@@ -429,4 +461,9 @@ ul.toc {
.learn {
margin-bottom: 20px;
+}
+
+#old-version-note {
+ font-size: 1.2rem;
+ color: #e44522;
}
\ No newline at end of file