From 632c631c9f25bad7d6c708cc8025ecb1f9722538 Mon Sep 17 00:00:00 2001 From: mco-system Date: Tue, 11 Apr 2023 18:21:10 +1100 Subject: [PATCH] fix: target='_new' for hrefs --- src/thsf/static/css/custom.css | 156 ++++++++++++++++++---------- src/thsf/static/css/wrappers.css | 171 ++++++++++++++++++++----------- 2 files changed, 212 insertions(+), 115 deletions(-) diff --git a/src/thsf/static/css/custom.css b/src/thsf/static/css/custom.css index f997125..c176830 100644 --- a/src/thsf/static/css/custom.css +++ b/src/thsf/static/css/custom.css @@ -1,59 +1,103 @@ -.logo { - width: inherit; +@media screen and (min-width: 45em) { + .header { + display: flex; + flex-direction: row; + justify-content: center; + gap: 0; + text-align: center; + font-size: 9.75em; + font-weight: bold; + padding: 0; + } + .logo { + width: inherit; + } + .header > span { + margin: 0; + } + .subheader { + margin: -1em 0 0 0; + font-size: 3.47em; + } + .place { + margin: 0; + font-size: 2.145em; + } + .important { + font-family: pfdintextcomppromedium; + } + .left { + float: left; + margin-right: 0.5em; + } + .right { + float: right; + margin-left: 0.5em; + } + .logo_partner { + max-width: 250px; + max-height: 250px; + margin: 1em; + } + .button { + font-size: 2.5em; + transition-property: color; + transition-duration: 1s; + } + .button:hover { + color: var(--main-color); + cursor: pointer; + } } -.header { - display: flex; - flex-direction: row; - justify-content: center; - gap: 0; - text-align: center; - font-size: 9.75em; - font-weight: bold; - padding: 0; -} - -.header > span { - margin: 0; -} - -.subheader { - margin: -1em 0 0 0; - font-size: 3.47em; -} - -.place { - margin: 0; - font-size: 2.145em; -} - -.important { - font-family: pfdintextcomppromedium; -} - -.left { - float: left; - margin-right: 0.5em; -} - -.right { - float: right; - margin-left: 0.5em; -} - -.logo_partner { - max-width: 250px; - max-height: 250px; - margin: 1em; -} - -.button { - font-size: 2.5em; - transition-property: color; - transition-duration: 1s; -} - -.button:hover { - color: var(--main-color); - cursor: pointer; +@media screen and (max-width: 44em) { + .header { + display: flex; + flex-direction: row; + justify-content: center; + gap: 0; + text-align: center; + font-size: 6.75em; + font-weight: bold; + padding: 0; + } + .header > span { + margin: 0; + } + .logo { + width: inherit; + } + .subheader { + margin: -1em 0 0 0; + font-size: 2.30em; + } + .place { + margin: 0; + font-size: 1.8em; + } + .important { + font-family: pfdintextcomppromedium; + } + .left { + float: left; + margin-right: 0.25em; + } + .right { + float: right; + margin-left: 0.25em; + } + .logo_partner { + max-width: 125px; + max-height: 125px; + margin: 0.25em; + } + .button { + font-size: 1.5em; + transition-property: color; + transition-duration: 1s; + } + .button:hover { + color: var(--main-color); + cursor: pointer; + } } diff --git a/src/thsf/static/css/wrappers.css b/src/thsf/static/css/wrappers.css index 386ad01..8be1ed5 100644 --- a/src/thsf/static/css/wrappers.css +++ b/src/thsf/static/css/wrappers.css @@ -1,61 +1,114 @@ -.page_wrapper { - display: flex; - flex-direction: column; - justify-content: center; - align-items: center; - align-content: center; - text-align: center; - padding-bottom: 5em; +@media screen and (min-width: 45em) { + .page_wrapper { + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + align-content: center; + text-align: center; + padding-bottom: 5em; + } + .center_wrapper, + .header_wrapper { + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + text-align: center; + } + .logo_wrapper { + margin-top: 1em; + width: 40em; + } + .navbar_wrapper { + position: fixed; + bottom: 0; + padding: 1em 0; + display: flex; + flex-direction: row; + justify-content: center; + align-items: center; + gap: 2em; + background-color: var(--main-bg-color); + width: 100vw; + } + .content { + font-size: 2em; + font-family: pfdintextcompprothin; + color: var(--main-color); + width: 20em; + text-align:justify; + text-justify: inter-word; + } + .partners { + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + text-align: center; + } + .subpartners { + display: flex; + flex-direction: row; + justify-content: center; + align-items: center; + text-align: center; + } } - -.center_wrapper, -.header_wrapper { - display: flex; - flex-direction: column; - justify-content: center; - align-items: center; - text-align: center; -} - -.logo_wrapper { - margin-top: 1em; - width: 40em; -} - -.navbar_wrapper { - position: fixed; - bottom: 0; - padding: 1em 0; - display: flex; - flex-direction: row; - justify-content: center; - align-items: center; - gap: 2em; - background-color: var(--main-bg-color); - width: 100vw; -} - -.content { - font-size: 2em; - font-family: pfdintextcompprothin; - color: var(--main-color); - width: 20em; - text-align:justify; - text-justify: inter-word; -} - -.partners { - display: flex; - flex-direction: column; - justify-content: center; - align-items: center; - text-align: center; -} - -.subpartners { - display: flex; - flex-direction: row; - justify-content: center; - align-items: center; - text-align: center; +@media screen and (max-width: 44em) { + .page_wrapper { + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + align-content: center; + text-align: center; + padding-bottom: 2em; + } + .center_wrapper, + .header_wrapper { + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + text-align: center; + } + .logo_wrapper { + margin-top: 0.5em; + width: 35em; + } + .navbar_wrapper { + position: fixed; + bottom: 0; + padding: 0.5em 0; + display: flex; + flex-direction: row; + justify-content: center; + align-items: center; + gap: 1em; + background-color: var(--main-bg-color); + width: 100vw; + } + .content { + font-size: 1em; + font-family: pfdintextcompprothin; + color: var(--main-color); + width: 20em; + text-align:justify; + text-justify: inter-word; + } + .partners { + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + text-align: center; + } + .subpartners { + display: flex; + flex-direction: row; + justify-content: center; + align-items: center; + text-align: center; + } }