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