guides/assets/stylesrc/_main.scss
body.guide {
&::-webkit-scrollbar {
width: 12px;
background-color: $gray-100;
}
&::-webkit-scrollbar-track {
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
border-radius: 10px;
background-color: transparent;
}
&::-webkit-scrollbar-thumb {
border-radius: 10px;
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5);
}
-webkit-tap-highlight-color:rgba(38, 27, 35, 0);
// ----------------------------------------------------------------------------
// Typographic Baseline
// ----------------------------------------------------------------------------
:root {
font-family: Inter, sans-serif;
font-feature-settings: 'liga' 1, 'calt' 1; /* fix for Chrome */
}
@supports (font-variation-settings: normal) {
:root { font-family: InterVariable, sans-serif; }
}
font-family: Inter, sans-serif;
font-size: 1rem; /* 16px */
font-style: normal;
font-weight: 400;
line-height: 1.4;
font-feature-settings: "liga" 1;
@supports (font-variant-ligatures: common-ligatures) {
font-feature-settings: normal;
font-variant-ligatures: common-ligatures;
}
font-feature-settings: "onum" 1;
@supports (font-variant-numeric: oldstyle-nums) {
font-feature-settings: normal;
font-variant-numeric: oldstyle-nums;
}
p {
// Set hyphenation rules
hyphenate-limit-lines: 2; /* Safari */
-webkit-hyphenate-limit-before: 3;
-webkit-hyphenate-limit-after: 2;
hyphenate-limit-chars: 6 3 2; /* Not Safari */
hyphenate-limit-last: always;
margin: 0 0 0.75em 0; // Space after paragraph
text-align: left;
} // p
// Links
a {
&:link {
color: $rf-brand;
text-decoration: underline;
}
&:hover,
&:active {
color: $rf-brand-light;
}
&:visited {
color: $rf-brand-darker;
}
}
abbr {
hyphens: manual;
}
abbr.smallcaps {
font-feature-settings: "smcp" 1, "c2sc" 1;
@supports (font-variant-caps: all-small-caps) {
font-feature-settings: normal;
font-variant-caps: all-small-caps;
}
}
// Tables
table {
border-collapse: collapse;
font-variant-numeric: lining-nums tabular-nums;
margin: 2em auto;
width: 100%;
caption {
caption-side: bottom;
}
th {
background-color: $gray-700;
color: #fff;
font-size: 0.875em;
padding: 0.5em;
text-align: left;
}
tr {
&:nth-child(even) {
background-color: $gray-100;
}
}
td {
padding: 0.5em;
}
}
// Headlines
// TODO: media queries to increase font size, current sizes are for desktop, so drop base to mobile appropriate and MQ up twice (min width 60/120 em, minheight 30/60em)
h1 {
color: $rf-brand;
font-family: 'Calibre', sans-serif;
font-size: 3rem; /* 48px */
font-weight: 700; /* Light */
line-height: 1em;
margin-top: 0;
@include media('<desktop') { margin-top: 0.5em; }
} // h1
h2 {
font-family: 'Calibre', sans-serif;
font-size: 2.25rem; // Calibre is smaller than inter at the same size
font-weight: 700; /* Bold */
a,
a:link,
a:visited {
color: $rf-brand;
} // a, a:link, a:visited
} // h2
h3 {
font-size: 1.5rem; /* 24px */
font-weight: 600; /* Semibold */
a,
a:link,
a:visited {
color: $gray-900;
} // a, a:link, a:visited
code {
font-size: 1.5rem;
font-weight: 400;
}
} // h3
h4 {
font-size: 1.125rem;
code {
font-size: 1.125rem;
font-weight: 400;
}
}
h5 {
font-size: 0.9375rem;
code {
font-size: 0.9375rem;
font-weight: 400;
}
}
h1, h2, h3, h4, h5 {
a,
a:link {
text-decoration: none;
} // a, a:link
a:hover,
a:active {
text-decoration: underline;
} // a:hover, a:active
span {
font-weight: 400;
}
} // h1, h2, h3, h4
// Old style numbers look weird in headlines and ordered lists, so use proportional lining numbers
h1, h2, h3, h4, h5, h6, ol, ol > li {
font-feature-settings: "kern" 1;
@supports (kerning: normal) {
font-feature-settings: normal;
kerning: normal;
}
font-feature-settings: "lnum" 1;
@supports (font-variant-numeric: lining-nums) {
font-feature-settings: normal;
font-variant-numeric: lining-nums;
}
}
// Horizontal Rule
hr {
height: 1em;
border: 0;
background: url("../images/hr_rails_mobile.svg") center no-repeat;
background-size: contain;
margin: 1em auto;
width: 90%;
@include media('>tablet') {
height: 1.5em;
background: url("../images/hr_rails.svg") center no-repeat;
}
@include media('>desktop-ultra-wide') {
height: 2em;
}
&.hide {
height: 0 !important;
}
}
// Definition Lists
dl {
margin: 0;
dt {
font-weight: bold;
font-size: 1.125rem;
padding: 0.125em 0 0.25em 0;
margin-bottom: 0.75em;
@include media('<phone-wide') {
font-size: 1rem;
} // @include media('<phone-wide')
} // dt
dd {
padding: 0.25em 0 1em;
border-bottom: 1px solid $gray-500;
margin: 0 0 1em 0;
.guides-indes-list &:last-child {
border-bottom: none;
}
} // dd
} // dl
// :where(&[dir="ltr"]) dd { margin-left: 1.5em; }
// :where(&[dir="rtl"]) dd { margin-right: 1.5em; }
// :where(&[dir="ltr"]) :is(dd) { margin-left: 0; padding-left: 0; }
// :where(&[dir="rtl"]) :is(dd) { margin-right: 0; padding-right: 0; }
li {
margin-bottom: 0.5em;
}
// Code
pre, code {
font-size: 1rem;
font-family: "IBM Plex Mono", "Anonymous Pro", "Inconsolata", "Menlo", "Consolas", "Bitstream Vera Sans Mono", "Courier New", monospace;
line-height: 1.5;
margin: 1em 0;
overflow: auto;
} // pre, code
p code, ul code {
background: $gray-200;
border-radius: calc($base-border-radius / 2);
padding: 1px 3px;
}
p img {
max-width: 100%;
}
pre, tt, code {
// https://caniuse.com/mdn-css_properties_white-space_pre-wrap
white-space: pre-wrap; /* css-3 */
white-space: -pre-wrap; /* Opera 4-6 */
white-space: -o-pre-wrap; /* Opera 7 */
word-wrap: break-word; /* Internet Explorer 5.5+ */
}
// Back to Top element
a.back-to-top {
background: url('../images/up_white_arrow.png') no-repeat center center, $rf-brand;
background-size: 1em;
border-radius: calc($base-border-radius * 2);
box-shadow: 0 2px 20px rgba(0,0,0,0.25);
padding: 1.5em;
position: fixed;
right: 1em;
bottom: 1em;
visibility: hidden;
}
a.back-to-top.show {
visibility: visible;
}
// ----------------------------------------------------------------------------
// Layout
// ----------------------------------------------------------------------------
.wrapper {
padding: 1em;
:where(body[dir="ltr"]) & { text-align: left; }
:where(body[dir="rtl"]) & { text-align: right; }
@include media('>desktop') { // 1024
max-width: calc(55rem + 420px);
margin: 0 auto;
padding-right: 470px;
}
} // .wrapper
#container .wrapper {
padding-top: 0;
h2:first-child {
margin-top: 0;
}
}
select {
border-radius: $base-border-radius;
padding: 0.25em;
}
// topNav is a hidden area for mobile only
nav#topNav {
background-color: $gray-200;
color: $gray-600;
padding: 0.5em 0;
font-size: 0.875rem;
@include media('>desktop') {
display: none;
}
.wrapper {
text-align: center;
}
.s-hidden {
display: none;
}
.red-button {
background: $rf-brand;
border-bottom: 2px solid $rf-brand-dark;
border-radius: $base-border-radius;
color: white;
padding: 0.5em 1em;
}
.more-info-label {
@include media('<desktop') {
display: none;
}
}
.more-info-button {
cursor: pointer;
}
.more-info-links {
@extend %list-in-disguise;
background: $gray-200;
border-radius: $base-border-radius;
box-shadow: 0 2px 20px rgba(0,0,0,0.25);
font-size: 1.25em;
position: absolute;
left: 10vw;
width: 80vw;
li {
border-bottom: 1px solid $gray-300;
padding: 0.5em;
&:last-child {
border-bottom: none;
}
a,
a:link,
a:visited {
font-weight: bold;
text-decoration: none;
}
}
}
} // nav#topNav
header#page_header {
width: 100%;
.wrapper {
max-width: calc(57em + 400px);
padding-right: 0;
}
nav#feature_nav {
@include media('>desktop'){
align-items: top;
display: flex;
flex-direction: row;
justify-content: space-between;
width: 100%;
}
// Image augmented
.header-logo {
text-align: center;
a {
background-image: url("../images/logo_rails-circle.svg");
background-repeat: no-repeat;
background-position: top center;
display: inline-block;
font-family: 'Calibre', sans-serif;
font-size: 2.25rem;
font-weight: 700;
margin: 0 auto;
padding-top: 75px;
text-align: center;
text-decoration: none;
font-weight: 700;
@include media('>desktop'){
padding: 10px 0 0 85px;
background-position: top left;
height: 85px;
vertical-align: middle;
}
} // a
span#version_switcher {
color: $gray-600;
display: block;
font-size: 0.75em;
@include media('>desktop') {
display: inline-block;
margin-left: 0.5em;
vertical-align: 1px;
}
select {
color: $gray-600;
}
} // span#version_switcher
} // .header-logo
ul.nav {
@extend %list-in-disguise;
margin: 1em 1em 0 1em;
@include media('>desktop'){
display: flex;
flex-direction: row;
justify-content: flex-end;
margin: 0;
padding: 1em 0 0 0;
}
li {
background: $gray-200;
border-bottom: 1px solid $gray-300;
font-size: 1.25em;
text-align: center;
padding: 1em;
@include media('>desktop'){
background: none;
border: none;
font-size: 0.75rem;
height: 24px;
padding-top: 5px;
&:first-child {padding-top: 0;}
a,
a:link,
a:visited {
color: $gray-900;
font-weight: bold;
text-decoration: none;
}
}
&:first-child {
border-top-left-radius: $base-border-radius;
border-top-right-radius: $base-border-radius;
}
&:nth-last-child(2) {
border-bottom: none;
border-bottom-left-radius: $base-border-radius;
border-bottom-right-radius: $base-border-radius;
}
&:last-child {
// the drop down
background: none;
border: none;
padding: 1em 0 0 0;
select {
max-width: 100%;
}
}
a#home_nav {
@include media('>desktop') {
// Image replacement
background-color: transparent;
color: transparent;
border: 0;
overflow: hidden;
text-indent: 100%;
text-shadow: none;
white-space: nowrap;
&:before {
content: "";
display: block;
height: 100%;
width: 0;
}
// all the rest
background-image: url("../images/icon_house-chimney.svg");
background-repeat: no-repeat;
background-position: top center;
display: inline-block;
height: 24px;
width: 24px;
}
}
&.guides-index-large {
@include media('<desktop') {
display: none;
}
}
&.guides-index-small {
@include media('>desktop') {
display: none;
}
@include media('<desktop') {
display: block;
}
}
}
}
} // nav#feature_nav
} // header#page_header
// Desktop guides flyout
.guides-index .guides-index-item {
position: relative;
z-index: 15;
padding-bottom: 0.125em;
:where(body[dir="ltr"]) & { background-position: right top; padding-right: 1em; }
:where(body[dir="rtl"]) & { background-position: left top; padding-left: 1em; }
}
#guides {
background: $gray-200;
box-shadow: 0 2px 20px rgba(0,0,0,0.25);
display: block;
border-radius: $base-border-radius;
color: $gray-900;
height: 61em;
padding: 2em 2em 1.5em 2em;
position: absolute;
top: 25px;
right: 50px;
width: 90vw;
max-width: 1000px;
z-index: 10;
:where(body[dir="ltr"]) & { left: auto; right: 50px; }
:where(body[dir="rtl"]) & { left: 50px; right: auto; }
&.visible {
display: block !important;
}
.guides-section-container {
display: flex;
flex-direction: column;
flex-wrap: wrap;
max-height: 60em;
width: 100%;
.guides-section {
flex: auto;
margin: 0 2em 0.5em 0;
text-align: left;
width: 33%;
dt, dd {
font-weight: 400 !important;
font-size: 0.825rem;
margin: 0;
padding: 0;
font-variant-numeric: lining-nums tabular-nums;
}
dt {
margin: 0.5em 0;
font-weight: bold !important;
}
dd {
line-height: 1.2;
margin-bottom: 0.5em;
border-bottom: none;
a,
a:link,
a:visited {
color: $gray-900;
text-decoration: none;
font-weight: 400 !important;
}
a:hover,
a:active {
color: $rf-brand !important;
text-decoration: underline !important;
}
}
}
}
} // #guides
footer#page_footer {
background-color: $gray-800;
color: #fff;
font-size: 0.75em;
padding: 1.5em 1.5em .5em 1.5em;
width: 100%;
.wrapper {
padding: 0;
@include media('>desktop') {
padding: 0 1.5em;
}
}
p {
max-width: 100vw;
}
}
#feature {
background-color: $gray-100;
@include media('>desktop') {
background-color: #fff;
}
hr {
margin-top: 2.5em;
}
#subCol {
background-color: $gray-100;
border-radius: $base-border-radius;
font-size: 1rem;
padding: 0.5em 1em;
@include media('>desktop') {
display: block;
position: fixed;
top: 100px;
right: 50px;
max-height: calc(100vh - 200px);
width: 400px;
}
&.guide-index {
background-color: transparent !important;
}
@include media('>desktop-ultra-wide') {
right: calc(30vw - 400px);
}
@include media('>desktop-hd') { // 1920
right: calc(40vw - 400px);
}
h3.chapter img {
margin-right: 0.25em;
}
ol.chapters {
&::-webkit-scrollbar
{
width: 6px;
background-color: #F5F5F5;
}
&::-webkit-scrollbar-track
{
background-color: #F5F5F5;
border-radius: 6px;
box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
}
&::-webkit-scrollbar-thumb
{
border-radius: 5px;
background-image: -webkit-gradient(linear,
left bottom,
left top,
color-stop(0.44, $rf-brand-light),
color-stop(0.72, $rf-brand),
color-stop(0.86, $rf-brand-dark));
}
@include media('>desktop') {
overflow-y: auto;
overflow-x: hidden;
max-height: calc(100vh - 350px);
}
li {
font-weight: bold;
a,
a:link,
a:visited {
color: $gray-900;
text-decoration: none;
}
a:hover,
a:active {
color: $rf-brand;
text-decoration: underline;
} // a
ul {
margin-top: 0.5em;
margin-bottom: 0.75em;
padding-inline-start: 1em;
@include media('>desktop') {
max-width: 310px;
width: 310px;
}
li {
font-weight: 400;
@include media('>desktop') {
width: 310px;
}
} // li
} // ul
} // li
} // ol
}
}
} // body.guide