Untitled
unknown
scss
2 years ago
2.9 kB
6
Indexable
p { margin-bottom: 20px; &:last-child { margin-bottom: 0; } } // Lists ul, ol { list-style-type: none; margin-top: 20px; margin-bottom: 20px; @media only screen and (min-width: $large) { margin-top: 35px; margin-bottom: 35px; } } ul li, ol li { font-size: 12px; line-height: 16px; @media only screen and (min-width: $tablet) { line-height: 25px; } @media only screen and (min-width: $large) { line-height: 30px; font-size: 18px; } &::before { content: "—"; margin-right: 5px; } ol li { &::before { content: ""; } } } .h1, h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5, h6 { text-transform: uppercase; // TODO: add global margin & line-height } h1, .h1, h2, h4, h5, h6 { font-size: 25px; margin-top: 6px; line-height: 1.25; text-align: center; text-transform: uppercase; margin-bottom: 20px; @media only screen and (min-width: $tablet) { text-align: unset; } @media only screen and (min-width: $small) { font-size: 25px; } @media only screen and (min-width: $large) { margin-bottom: 40px; font-size: 40px; } @media only screen and (min-width: $xLarge) { font-size: 40px; margin-bottom: 30px; } } h3, .h3 { font-size: 14px; margin-top: 25px; margin-bottom: 6px; @media only screen and (min-width: $tablet) { font-size: 18px; } @media only screen and (min-width: $small) { margin-top: 35px; } @media only screen and (min-width: $large) { font-size: 25px; margin-bottom: 8px; } @media only screen and (min-width: $xLarge) { font-size: 30px; } } // Fonts .font { &-light { &-extended { font-family: $font-light-ex; } } &-regular { font-family: $font-regular; line-height: 1.6; font-size: 10px; @media only screen and (min-width: $small) { font-size: 14px; } @media only screen and (min-width: $large) { font-size: 18px; } @media only screen and (min-width: $xLarge) { margin-top: 42px; } &-extended { font-family: $font-regular-ex; } } &-bold { font-family: $font-bold; } } .text { &-uppercase { text-transform: uppercase; } } blockquote { display: flex; justify-content: center; & > p { font-family: $font-regular-ex; text-transform: uppercase; line-height: 1.25; font-size: 18px; max-width: 375px; margin-top: 30px; @media only screen and (min-width: $tablet) { font-size: 14px; margin-top: 40px; } @media only screen and (min-width: $small) { max-width: 555px; font-size: 20px; } @media only screen and (min-width: $large) { max-width: 680px; font-size: 25px; } @media only screen and (min-width: $xLarge) { max-width: 760px; font-size: 30px; margin-top: 60px; } } }
Editor is loading...