X-Git-Url: https://git.mdrn.pl/wolnelektury.git/blobdiff_plain/eb2eb95bfbfe8c777c4192ea434a0e999edf3a51..0b270a76ad73162f894285c360a0ee87fa84e536:/src/wolnelektury/static/2022/styles/layout/_author.scss diff --git a/src/wolnelektury/static/2022/styles/layout/_author.scss b/src/wolnelektury/static/2022/styles/layout/_author.scss index 2cbaa5cef..618b19ac5 100644 --- a/src/wolnelektury/static/2022/styles/layout/_author.scss +++ b/src/wolnelektury/static/2022/styles/layout/_author.scss @@ -3,6 +3,13 @@ display: flex; padding: 50px 0; justify-content: space-between; + flex-direction: column; + align-items: center; + + @include rwd($break-flow) { + flex-direction: row; + align-items: flex-start; + } h2 { margin: 0; @@ -21,9 +28,13 @@ width: 100%; &:nth-child(1) { + > div { + display: flex; + flex-wrap: wrap; - div { - display: flex; + @include rwd($break-wide) { + flex-wrap: nowrap; + } } h2 { @@ -31,21 +42,35 @@ } .l-author__photo { - width: 100%; - max-width: 238px; + flex-shrink: 0; + width: calc(50% - 24px); + @include rwd($break-wide) { + width: 238px; + } + + img { + width:100%; + } } } &:nth-child(2) { - max-width: 415px; - padding-top: 48px; - padding-left: 32px; + max-width: 415px - 32px; + padding-top: 48px; + @include rwd($break-flow) { + max-width: 415px; + padding-left: 32px; + } } } } .l-author__info { - min-width: 364px; + display: contents; + min-width: 364px; + @include rwd($break-wide) { + display: block; + } h3 { margin: 0; @@ -54,6 +79,8 @@ line-height: 140%; letter-spacing: -0.01em; color: #007880; + + width: 40%; } p { margin-top: 20px; @@ -62,11 +89,47 @@ line-height: 150%; color: #474747; } + h4 { + font-size: 18px; + line-height: 150%; + font-weight: bolder; + color: #474747; + } + + ul { + padding: 0; + list-style: none; + margin-top: 0.25rem; + margin-bottom: 0; + li { + font-size: 18px; + line-height: 150%; + font-weight: normal; + } + } + + dt { + float: left; + clear: left; + margin-right: .4em; + font-weight: normal; + font-size: 18px; + line-height: 150%; + } + dd { + margin-left: 0; + font-weight: normal; + font-size: 18px; + line-height: 150%; + } } .l-author__photo { - margin: 0; - margin-right: 50px; + margin: 0; + margin-right: 16px; + @include rwd($break-wide) { + margin-right: 50px; + } img { border-radius: 10px; overflow: hidden; @@ -126,8 +189,14 @@ line-height: 140%; letter-spacing: -0.02em; color: #083F4D; + + p { + font-size: inherit; + line-height: inherit; + margin-top: 0; + } } - p { + > p { font-style: normal; font-weight: normal; font-size: 15px; @@ -140,4 +209,62 @@ .l-author__quotes__slider__item { max-width: 336px; outline: 0; + + .verse-indent { + padding-left: 1em; + &.verse-indent-2 { padding-left: 1.1em; } + &.verse-indent-3 { padding-left: 1.2em; } + &.verse-indent-4 { padding-left: 1.3em; } + &.verse-indent-5 { padding-left: 1.4em; } + &.verse-indent-6 { padding-left: 1.5em; } + &.verse-indent-7 { padding-left: 1.6em; } + &.verse-indent-8 { padding-left: 1.7em; } + &.verse-indent-9 { padding-left: 1.8em; } + &.verse-indent-10 { padding-left: 1.9em; } + &.verse-indent-11 { padding-left: 2em; } + &.verse-indent-12 { padding-left: 2.1em; } + } + .verse-cont { padding-left: 2.1em; } + .verse-p { padding-left: 1em; } + .verse-right { text-align: right; } + .verse-center { text-align: center; } +} + + +.l-author__header { + display: flex; + align-items: center; + width: 100%; + border-bottom: 1px solid #D9D9D9; + padding-bottom: 22px; + + figure { + padding: 0; + font-size: 0; + width: 40px; + height: 40px; + overflow: hidden; + display: flex; + align-items: center; + justify-content: center; + border-radius: 50%; + margin: 0 12px 0 0; + + img { + max-width: 100%; + } + } + + h1 { + font-weight: $bold; + font-size: 37px; + line-height: 130%; + letter-spacing: -0.01em; + color: #083F4D; + margin: 0; + + span { + font-weight: $regular; + } + } }