.page { &__header { display: flex; align-items: center; margin-bottom: 20px; font-size: 14px; color: var(--color-text-second); line-height: 1.5em; @media (--mobile) { font-size: 13px; } &-nav { display: flex; align-items: center; &-item { color: inherit; text-decoration: none; @media (--mobile) { display: none; } &:hover { color: var(--color-link-active); } } svg { margin: 0 6px; @media (--mobile) { display: none; } } } &-time { margin-left: auto; @media (--mobile) { margin-left: 0; } } &-button { margin-left: 20px; text-decoration: none; } } &__title { @apply --text-content-title; margin-bottom: 10px; } .cdx-marker { background: rgba(245,235,111,0.33); padding: 3px 0; } .inline-code, .block-header a .inline-code { @apply --text-inline-code; } &__content { @apply --text-content-main; a { @apply --text-inline-link; } &-block { @apply --content-block; } } } /** * Paragraph * ================== */ .block-paragraph { margin: 0; .inline-code { -webkit-font-smoothing: initial; -moz-osx-font-smoothing: initial; } } /** * Header * ================== */ .block-header { @apply --text-header; &--2 { @apply --text-header-2; } &--3 { @apply --text-header-3; } a { text-decoration: none !important; border: 0; color: inherit !important; } &--anchor { cursor: pointer; &::before { position: absolute; content: ''; margin-left: -30px; width: 14px; height: 19px; margin-top: 0.35em; background-image: url("data:image/svg+xml,%3Csvg width='14' height='19' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%237B7E89' fill-rule='nonzero'%3E%3Cpath d='M8.58 11.997L2.283 5.701a1.762 1.762 0 0 1 0-2.49l.933-.935a1.762 1.762 0 0 1 2.49 0l6.298 6.297a3.508 3.508 0 0 0-.901-3.39L6.952 1.031a3.522 3.522 0 0 0-4.982 0l-.933.933a3.522 3.522 0 0 0 0 4.982l4.151 4.151c.92.92 2.218 1.208 3.392.9z'/%3E%3Cpath d='M12.958 11.628l-4.151-4.15a3.507 3.507 0 0 0-3.391-.899l6.296 6.296a1.76 1.76 0 0 1 0 2.49l-.933.936a1.764 1.764 0 0 1-2.49 0l-6.296-6.298a3.507 3.507 0 0 0 .899 3.39l4.151 4.15a3.522 3.522 0 0 0 4.982 0l.933-.935a3.52 3.52 0 0 0 0-4.98z'/%3E%3C/g%3E%3C/svg%3E"); opacity: 0; transform: translateX(5px); will-change: opacity, transform; transition: all 100ms ease; @media (--mobile){ display: none !important; } } &:hover { color: #4c4c58; } &:hover::before{ opacity: 1; transform: none; } } .inline-code { line-height: inherit; } } /** * Code * ================== */ .block-code { @apply --text-code-block; @apply --squircle; &__content { display: inline-block !important; white-space: pre; word-wrap: normal; background: transparent !important; padding: 15px !important; color: var(--color-code-main) !important; min-width: 100%; box-sizing: border-box; .diff { margin: 0 -15px; padding-left: 15px; padding-right: 15px; } } .hljs-params { color: var(--color-code-params); } .hljs-number { color: var(--color-code-number); } .hljs-title, .hljs-title.class_, .hljs-title.class_.inherited__, .hljs-title.function_ { color: var(--color-code-class); } .hljs-name, .hljs-section, .hljs-selector-tag { color: var(--color-code-tag); } .hljs-tag { color: var(--color-code-main); } .hljs-attr, .hljs-selector-attr, .hljs-selector-class, .hljs-selector-id, .hljs-selector-pseudo, .hljs-title { color: var(--color-code-class); } .hljs-attribute, .hljs-literal, .hljs-operator { color: var(--color-code-variable); } .hljs-emphasis, .hljs-quote, .hljs-string, .hljs-strong, .hljs-template-variable, .hljs-variable { color: var(--color-code-string); } .hljs-doctag, .hljs-keyword, .hljs-meta .hljs-keyword, .hljs-template-tag, .hljs-template-variable, .hljs-type { color: var(--color-code-keyword); } .hljs-variable.language_ { color: var(--color-code-variable) ; } .hljs-code, .hljs-comment, .hljs-formula { color: var(--color-code-comment); } .hljs-regexp { color: var(--color-code-tag); } } /** * List * ================== */ .block-list { margin: 0; list-style: outside; padding-left: 26px; li:not(:last-of-type) { margin-bottom: 8px; } } /** * Image * ================== */ .block-image { margin: 40px auto; text-align: center; &__content { img, video { vertical-align: bottom; max-width: 100%; } &--bordered { img, video { border: 3px solid var(--color-line-gray); box-sizing: border-box; } } &--with-background { padding: 15px; background: var(--color-bg-light); img, video { max-width: 60%; margin: 0 auto; } } } &__caption { margin: 1em auto; color: var(--color-text-second); } } /** * Delimiter * ================== */ .block-delimiter { line-height: 1.6em; width: 100%; text-align: center; &::before { display: inline-block; content: "***"; font-size: 30px; line-height: 65px; height: 30px; letter-spacing: 0.2em; } } /** * Table * ================== */ .block-table { table-layout: fixed; width: 100%; border-radius: 3px; border-collapse: collapse; border: 1px solid var(--color-line-gray); td { padding: 6px 8px; border: 1px solid var(--color-line-gray); } } /** * Warning * ================== */ .block-warning { display: flex; padding: 20px; background: #fffad0; @apply --squircle; &__icon { margin-right: 15px; } &__title { font-weight: bold; } &__message { padding-left: 15px; } } /** * Checklist * ================== */ .block-checklist { margin: 20px 0; &__item { display: flex; box-sizing: content-box; align-items: center; &-checkbox { display: inline-block; flex-shrink: 0; position: relative; width: 20px; height: 20px; margin: 0 10px 0 0; border-radius: 50%; border: 1px solid #d0d0d0; background: #fff; user-select: none; &::after { position: absolute; top: 5px; left: 5px; width: 8px; height: 5px; border: 2px solid #fcfff4; border-top: none; border-right: none; background: transparent; content: ''; opacity: 0; transform: rotate(-45deg); } &--checked { background: #388ae5; border-color: #388ae5; } } &-text { outline: none; flex-grow: 1; padding: 5px 0; } } } .block-checklist__item-checkbox--checked, .block-checklist__item-checkbox::after { opacity: 1; } .block-link { display: block; max-width: 100%; margin: 40px auto; padding: 25px !important; border: 1px solid var(--color-line-gray) !important; box-shadow: 0 1px 1px #4246540a; border-radius: 2px; color: inherit !important; text-decoration: none !important; @media (--mobile) { box-sizing: border-box; padding: 20px !important; margin: 30px auto; } &__image { float: right; max-width: 70px; background-position: center center; background-repeat: no-repeat; background-size: contain; margin: 0 0 30px 30px; border-radius: 3px; @media (--mobile) { margin: 0 0 15px 15px; } } &__title { font-size: 16px; line-height: 1.45em; font-weight: 600; @media (--mobile) { font-size: 12.2px; } } &__domain { display: inline-block; font-variant: small-caps; margin-top: 20px; border: 0 !important; color: var(--color-text-second); font-size: 0.85em; @media (--mobile) { margin-top: 5px; font-size: 12px; } } &__description { margin-top: 10px; font-size: 0.9em; @media (--mobile) { margin-top: 5px; font-size: 12px; } } } .block-embed { margin: 0; &__iframe { width: 100%; height: 450px; border: 0; @media (--mobile) { height: 200px; } } }