123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140 |
- // Base
- //-------------------------------
- *,
- *::before,
- *::after {
- box-sizing: border-box;
- }
- ::selection {
- color: var(--bg-color);
- background-color: var(--text-color);
- }
- body {
- font-size: $base-font-size;
- line-height: $base-line-height;
- color: var(--text-color);
- background-color: var(--bg-color);
- }
- .page {
- margin-bottom: 8em;
- }
- .wrapper {
- max-width: 48rem;
- margin: 4rem auto 4rem auto;
- }
- @media (max-width: 48rem) {
- body {
- font-size: $mobile-font-size;
- }
- .wrapper {
- width: 90%;
- margin: 3rem auto 2rem auto;
- }
- }
- // Links and paragraphs
- //-------------------------------
- a, .a {
- color: var(--link-color);
- text-decoration: none;
- position: relative;
- border-bottom: 0.18rem solid transparent;
- transition: border 0.15s;
- &:hover, &:focus {
- text-decoration: none;
- border-bottom: 0.15em solid;
- }
- strong {
- color: inherit;
- }
- }
- // Headings
- //-------------------------------
- h1, h2, h3, h4, h5, h6 {
- margin-bottom: .5rem;
- font-weight: $base-font-weight-bold;
- line-height: 1.1;
- color: var(--text-color);
- text-rendering: optimizeLegibility;
- }
- h1 {
- font-size: 2rem;
- }
- h2 {
- margin-top: 2.5rem;
- font-size: 1.5rem;
- }
- h3 {
- margin-top: 1.5rem;
- font-size: 1.25rem;
- }
- h4, h5, h6 {
- margin-top: 1rem;
- font-size: 1rem;
- }
- b,
- strong {
- color: var(--text-color);
- }
- dt {
- font-weight: $base-font-weight-bold;
- }
- dd {
- margin-bottom: .5rem;
- }
- abbr {
- font-size: 85%;
- font-weight: $base-font-weight-bold;
- color: var(--text-color);
- text-transform: uppercase;
- &[title] {
- cursor: help;
- border-bottom: 1px dotted var(--text-color-light);
- }
- }
- strong {
- color: var(--text-color);
- }
- // Lists, blockquotes
- //-------------------------------
- ul, ol, dl {
- margin-top: 0;
- margin-bottom: 1.5rem;
- }
- // HR, IMG
- //-------------------------------
- hr {
- margin-bottom: 4em;
- max-width: 30%;
- border: 0.1em solid var(--shadow-color);
- }
- img {
- margin: 2.5rem auto;
- display: block;
- max-width: 100%;
- }
|