diff --git a/app/static/css/partials/_about.scss b/app/static/css/partials/_about.scss index d61e6cb..0eec764 100755 --- a/app/static/css/partials/_about.scss +++ b/app/static/css/partials/_about.scss @@ -1,120 +1,121 @@ -.body--about.animated { - //background: linear-gradient(to right, #14801c, #1f3164); -} - -.about { - max-width: var(--container-lg-width); - margin: 0 auto; - padding: var(--spacing-2); - - h1 { - font-size: 22px; - margin: 0 0 var(--spacing) 0; - } - - h2 { - font-size: 22px; - font-weight: 700; - margin: var(--spacing-2) 0; - padding: 0 0 var(--spacing) 0; - } - - h3 { - font-size: 21px; - } - - a { - color: #ee0; - font-weight: 700; - text-decoration: none; - } - - > .row { - @media screen and (max-width: 799px) { - display: block; - } - } -} - -.col--about, .col--bios { - - @media screen and (min-width: 800px) { - width: 50%; - } -} - -.col--bios { - .about-phantasma-block { - width: 100%; - margin-top: var(--spacing); - } -} - -.about-phantasma-block--zh, .col--bios-zh { - line-height: 1.3; -} - -.accordion-checkbox { - position: absolute; - opacity: 0; -} - -.about-bios { - padding: var(--spacing-2) 0; -} - -.accordion-title { - font-weight: 700; - margin: var(--spacing-2) 0; - padding: 0 0 calc(var(--spacing) / 2) 0; - cursor: pointer; - display: flex; - align-items: center; - - .text-about { - background-image: linear-gradient(to right, var(--animated-title-color-2), var(--animated-title-color-3), var(--animated-title-color-4), var(--animated-title-color-1)); - } - - @media screen and (min-width: 800px) { - width: 50%; - } - - &:hover, &:focus { - opacity: 0.8; - } - - h3 { - flex: 1; - padding-right: var(--spacing-2); - } -} - -.accordion-caret { - font-size: 34px; - font-family: "icomoon"; - margin-left: auto; -} - -.accordion-content { - display: none; - - @media screen and (max-width: 799px) { - > .row { - display: block; - } - } - - .alert { - @media screen and (min-width: 800px) { - width: 50%; - } - } -} - -.accordion-checkbox:checked + .accordion-content { - display: block; -} - -.alert { - padding: var(--spacing) 0; -} \ No newline at end of file +.body--about.animated { + //background: linear-gradient(to right, #14801c, #1f3164); +} + +.about { + + max-width: var(--container-lg-width); + margin: 0 auto; + padding: var(--spacing-2); + + h1 { + font-size: 22px; + margin: 0 0 var(--spacing) 0; + } + + h2 { + font-size: 22px; + font-weight: 700; + margin: var(--spacing-2) 0; + padding: 0 0 var(--spacing) 0; + } + + h3 { + font-size: 21px; + } + + a { + color: #ee0; + font-weight: 700; + text-decoration: none; + } + + > .row { + @media screen and (max-width: 799px) { + display: block; + } + } +} + +.col--about, .col--bios { + + @media screen and (min-width: 800px) { + width: 50%; + } +} + +.col--bios { + .about-phantasma-block { + width: 100%; + margin-top: var(--spacing); + } +} + +.about-phantasma-block--zh, .col--bios-zh { + line-height: 1.3; +} + +.accordion-checkbox { + position: absolute; + opacity: 0; +} + +.about-bios { + padding: var(--spacing-2) 0; +} + +.accordion-title { + font-weight: 700; + margin: var(--spacing-2) 0; + padding: 0 0 calc(var(--spacing) / 2) 0; + cursor: pointer; + display: flex; + align-items: center; + + .text-about { + background-image: linear-gradient(to right, var(--animated-title-color-2), var(--animated-title-color-3), var(--animated-title-color-4), var(--animated-title-color-1)); + } + + @media screen and (min-width: 800px) { + width: 50%; + } + + &:hover, &:focus { + opacity: 0.8; + } + + h3 { + flex: 1; + padding-right: var(--spacing-2); + } +} + +.accordion-caret { + font-size: 34px; + font-family: "icomoon"; + margin-left: auto; +} + +.accordion-content { + display: none; + + @media screen and (max-width: 799px) { + > .row { + display: block; + } + } + + .alert { + @media screen and (min-width: 800px) { + width: 50%; + } + } +} + +.accordion-checkbox:checked + .accordion-content { + display: block; +} + +.alert { + padding: var(--spacing) 0; +}