diff --git a/README.md b/README.md index 6ae5c88..eac4861 100644 --- a/README.md +++ b/README.md @@ -15,7 +15,7 @@ Fork of the experimental KIT theme from kit-ausbildung.de, adapted to Wordpres. ## Installation - * Titel: "Startseite | KIT Karriere" + * Titel: "saai | Archiv für Architektur und Ingenieurbau" * Development ressource: https://github.com/Automattic/_s * Einrichtung Wordpress * URL-Format: Einstellungen -> Permalinks -> Einstellen auf "Beitragsname" -> Übernehmen diff --git a/kit/css/footer.css b/kit/css/footer.css new file mode 100644 index 0000000..404d3da --- /dev/null +++ b/kit/css/footer.css @@ -0,0 +1,343 @@ +.meta-footer { + padding-top: 5.55556rem; + padding-bottom: 2rem; + background-color: #f2f2f2; +} + +.meta-footer-logo { + width: 16.66667rem; + height: 2.38889rem; + margin-bottom: 0.83333rem; +} + +.meta-footer-logo + p { + margin-top: 0; +} + +.meta-footer-logo-text { + margin-bottom: 3.33333rem; + font-size: 1.22222rem; + line-height: 2rem; +} + +.meta-footer-contact-entities { + display: flex; + flex-direction: row; + flex-wrap: wrap; + align-items: flex-start; + justify-content: flex-start; +} + +.meta-footer-contact-entity { + width: calc(50% - 0.83333rem); + margin-top: 1.66667rem; + margin-left: 0.83333rem; +} + +.meta-footer-contact-entity .phone, +.meta-footer-contact-entity .email { + position: relative; + margin-left: 1.66667rem; +} + +.meta-footer-contact-entity .phone::before, +.meta-footer-contact-entity .email::before { + content: ''; + position: absolute; + left: -1.66667rem; + display: block; +} + +.meta-footer-contact-entity .phone::before { + content: url(img/phone-grey.svg); + top: 0; + width: 0.94444rem; + height: 1.11111rem; +} + +.meta-footer-contact-entity .email::before { + content: url(img/mail-grey.svg); + top: -2px; + width: 1.11111rem; + height: 0.77778rem; +} + +.meta-footer-contact-entity:nth-of-type(2n-1) { + margin-left: 0; +} + +.meta-footer-contact-entity:nth-of-type(1), .meta-footer-contact-entity:nth-of-type(2) { + margin-top: 0; +} + +.meta-footer-contact-entity h3 { + font-size: 1rem; + font-weight: 700; + line-height: 1.55556rem; +} + +.meta-footer-contact-entity h3 + p, +.meta-footer-contact-entity p + p { + margin-top: 0.55556rem; +} + +.meta-footer-contact-entity a { + color: #333333; + text-decoration: none; +} + +.meta-footer-contact-entity a:hover { + text-decoration: underline; +} + +.meta-footer-contact-call-to-action { + position: relative; + margin-left: 4.77778rem; +} + +.meta-footer-contact-call-to-action::before { + content: ''; + position: absolute; + left: -4.77778rem; +} + +.meta-footer-contact-call-to-action-phone::before { + content: url(../img/phone-loud-grey.svg); + top: -0.66667rem; + width: 3.44444rem; + height: 3.44444rem; +} + +.meta-footer-contact-call-to-action-email::before { + content: url(../img/mail-grey.svg); + top: -0.11111rem; + width: 3.33333rem; + height: 2.44444rem; +} + +.meta-footer-contact-call-to-action + .meta-footer-contact-call-to-action { + margin-top: 2.5rem; +} + +.meta-footer-contact-call-to-action h3 { + font-size: 1rem; + font-weight: 300; + line-height: 2.22222rem; +} + +.meta-footer-contact-call-to-action a { + font-size: 2rem; + font-weight: 500; + line-height: 2.22222rem; + transition: color .3s; +} + +.meta-footer-contact-call-to-action a:hover { + color: rgba(51, 51, 51, 0.6); +} + +.meta-footer-slogan { + display: flex; + width: 100%; + margin-top: 3.05556rem; + border-top: 1px solid #aaaaaa; + flex-direction: row; + flex-wrap: nowrap; + align-items: center; + justify-content: space-between; +} + +.meta-footer-slogan p { + padding-top: 2rem; + margin-right: 30px; + font-size: 1.22222rem; + line-height: 1.22222rem; +} + +.meta-footer-slogan a { + display: inline-block; + padding-top: 2rem; + color: #ababab; + font-size: 1.94444rem; + font-weight: 700; + line-height: 1.94444rem; + transition: color .5s; +} + +.meta-footer-slogan a:hover { + color: #333333; +} + +@media (max-width: 1280px) { + .meta-footer-contact-call-to-action-phone::before { + width: 2.88889rem; + height: 2.88889rem; + } + .meta-footer-contact-call-to-action-email::before { + width: 2.88889rem; + height: 2.11111rem; + } + .meta-footer-contact-call-to-action a { + font-size: 1.55556rem; + line-height: 1.77778rem; + } +} + +@media (max-width: 1024px) { + .meta-footer { + padding-top: 5rem; + padding-bottom: 1.66667rem; + } + .meta-footer-contact-call-to-action { + margin-left: 3.33333rem; + } + .meta-footer-contact-call-to-action + .meta-footer-contact-call-to-action { + margin-top: 1.66667rem; + } + .meta-footer-contact-call-to-action::before { + left: -3.33333rem; + width: 2.5rem; + height: 2.5rem; + } + .meta-footer-contact-call-to-action-phone::before { + top: 6px; + } + .meta-footer-contact-call-to-action-email::before { + top: 0; + } + .meta-footer-contact-call-to-action h3 { + line-height: 1.55556rem; + } + .meta-footer-slogan { + margin-top: 5rem; + } + .meta-footer-slogan p, + .meta-footer-slogan a { + padding-top: 1.66667rem; + line-height: 1.55556rem; + } +} + +@media (max-width: 960px) { + .meta-footer-slogan { + -ms-flex-wrap: wrap; + flex-wrap: wrap; + } +} + +@media (max-width: 560px) { + .meta-footer { + padding-top: 3.33333rem; + padding-bottom: 3.33333rem; + } + .meta-footer-contact-call-to-action { + margin-top: 0.83333rem; + } + .meta-footer-contact-entity { + width: 100%; + border-bottom: 1px solid #aaaaaa; + } + .meta-footer-contact-entity:nth-of-type(1) { + border-top: 1px solid #aaaaaa; + } + .meta-footer-contact-entity + .meta-footer-contact-entity { + margin-top: 0; + } + .meta-footer-contact-entity:nth-of-type(2n) { + margin-left: 0; + } + .meta-footer-contact-entity.opened .meta-footer-contact-entity-head-icon::after { + height: 0; + } + .meta-footer-contact-entity-head { + position: relative; + display: block; + padding-left: 2.5rem; + cursor: pointer; + -webkit-transition: background-color .3s; + -o-transition: background-color .3s; + transition: background-color .3s; + } + .meta-footer-contact-entity-head-icon { + position: absolute; + top: 12px; + left: 0; + width: 18px; + height: 18px; + line-height: 1; + } + .meta-footer-contact-entity-head-icon::before, .meta-footer-contact-entity-head-icon::after { + content: ''; + position: absolute; + top: 50%; + left: 50%; + -webkit-transform: translate(-50%, -50%); + -ms-transform: translate(-50%, -50%); + transform: translate(-50%, -50%); + background-color: #009982; + -webkit-transition: height .3s; + -o-transition: height .3s; + transition: height .3s; + } + .meta-footer-contact-entity-head-icon::before { + width: 18px; + height: 4px; + } + .meta-footer-contact-entity-head-icon::after { + width: 4px; + height: 18px; + } + .meta-footer-contact-entity-head h3 { + padding: 0.83333rem 0; + margin-bottom: 0; + } + .meta-footer-contact-entity-body { + padding: 0.83333rem 0 1.66667rem; + } + .meta-footer-slogan { + margin-top: 0.83333rem; + overflow-wrap: break-word; + overflow-wrap: anywhere; + } +} + +.footer-bottom { + height: 3.88889rem; + padding: 0; + color: #fbfbfb; + background-color: #404040; +} + +.footer-bottom .content-wrap { + height: 100%; +} + +.footer-bottom .content-wrap ul { + display: flex; + height: 100%; + flex-direction: row; + align-items: center; +} + +.footer-bottom .content-wrap ul li { + position: relative; + margin-right: 1.72222rem; +} + +.footer-bottom .content-wrap ul li:not(:nth-last-of-type(1))::after { + content: '|'; + position: absolute; + top: 0; + right: -1rem; +} + +.footer-bottom .content-wrap ul a { + color: #fbfbfb; + -webkit-transition: color .3s; + -o-transition: color .3s; + transition: color .3s; +} + +.footer-bottom .content-wrap ul a:hover { + color: #808080; +} diff --git a/kit/footer.php b/kit/footer.php index c9faa8b..a4f635d 100644 --- a/kit/footer.php +++ b/kit/footer.php @@ -98,6 +98,7 @@ + diff --git a/kit/header.php b/kit/header.php index 72f27b5..4638833 100644 --- a/kit/header.php +++ b/kit/header.php @@ -17,6 +17,7 @@ + diff --git a/kit/style.css b/kit/style.css index cc3353c..57a4a63 100644 --- a/kit/style.css +++ b/kit/style.css @@ -1380,381 +1380,6 @@ aside .aside-icon:hover { } } -.meta-footer { - padding-top: 5.55556rem; - padding-bottom: 2rem; - background-color: #f2f2f2; -} - -.meta-footer-logo { - width: 16.66667rem; - height: 2.38889rem; - margin-bottom: 0.83333rem; -} - -.meta-footer-logo + p { - margin-top: 0; -} - -.meta-footer-logo-text { - margin-bottom: 3.33333rem; - font-size: 1.22222rem; - line-height: 2rem; -} - -.meta-footer-contact-entities { - display: -webkit-box; - display: -ms-flexbox; - display: flex; - -webkit-box-orient: horizontal; - -webkit-box-direction: normal; - -ms-flex-direction: row; - flex-direction: row; - -ms-flex-wrap: wrap; - flex-wrap: wrap; - -webkit-box-align: start; - -ms-flex-align: start; - align-items: flex-start; - -webkit-box-pack: start; - -ms-flex-pack: start; - justify-content: flex-start; -} - -.meta-footer-contact-entity { - width: calc(50% - 0.83333rem); - margin-top: 1.66667rem; - margin-left: 0.83333rem; -} - -.meta-footer-contact-entity .phone, -.meta-footer-contact-entity .email { - position: relative; - margin-left: 1.66667rem; -} - -.meta-footer-contact-entity .phone::before, -.meta-footer-contact-entity .email::before { - content: ''; - position: absolute; - left: -1.66667rem; - display: block; -} - -.meta-footer-contact-entity .phone::before { - content: url(img/phone-grey.svg); - top: 0; - width: 0.94444rem; - height: 1.11111rem; -} - -.meta-footer-contact-entity .email::before { - content: url(img/mail-grey.svg); - top: -2px; - width: 1.11111rem; - height: 0.77778rem; -} - -.meta-footer-contact-entity:nth-of-type(2n-1) { - margin-left: 0; -} - -.meta-footer-contact-entity:nth-of-type(1), .meta-footer-contact-entity:nth-of-type(2) { - margin-top: 0; -} - -.meta-footer-contact-entity h3 { - font-size: 1rem; - font-weight: 700; - line-height: 1.55556rem; -} - -.meta-footer-contact-entity h3 + p, -.meta-footer-contact-entity p + p { - margin-top: 0.55556rem; -} - -.meta-footer-contact-entity a { - color: #333333; - text-decoration: none; -} - -.meta-footer-contact-entity a:hover { - text-decoration: underline; -} - -.meta-footer-contact-call-to-action { - position: relative; - margin-left: 4.77778rem; -} - -.meta-footer-contact-call-to-action::before { - content: ''; - position: absolute; - left: -4.77778rem; -} - -.meta-footer-contact-call-to-action-phone::before { - content: url(../img/phone-loud-grey.svg); - top: -0.66667rem; - width: 3.44444rem; - height: 3.44444rem; -} - -.meta-footer-contact-call-to-action-email::before { - content: url(../img/mail-grey.svg); - top: -0.11111rem; - width: 3.33333rem; - height: 2.44444rem; -} - -.meta-footer-contact-call-to-action + .meta-footer-contact-call-to-action { - margin-top: 2.5rem; -} - -.meta-footer-contact-call-to-action h3 { - font-size: 1rem; - font-weight: 300; - line-height: 2.22222rem; -} - -.meta-footer-contact-call-to-action a { - font-size: 2rem; - font-weight: 500; - line-height: 2.22222rem; - -webkit-transition: color .3s; - -o-transition: color .3s; - transition: color .3s; -} - -.meta-footer-contact-call-to-action a:hover { - color: rgba(51, 51, 51, 0.6); -} - -.meta-footer-slogan { - display: -webkit-box; - display: -ms-flexbox; - display: flex; - width: 100%; - margin-top: 3.05556rem; - border-top: 1px solid #aaaaaa; - -webkit-box-orient: horizontal; - -webkit-box-direction: normal; - -ms-flex-direction: row; - flex-direction: row; - -ms-flex-wrap: nowrap; - flex-wrap: nowrap; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; - -webkit-box-pack: justify; - -ms-flex-pack: justify; - justify-content: space-between; -} - -.meta-footer-slogan p { - padding-top: 2rem; - margin-right: 30px; - font-size: 1.22222rem; - line-height: 1.22222rem; -} - -.meta-footer-slogan a { - display: inline-block; - padding-top: 2rem; - color: #ababab; - font-size: 1.94444rem; - font-weight: 700; - line-height: 1.94444rem; - -webkit-transition: color .5s; - -o-transition: color .5s; - transition: color .5s; -} - -.meta-footer-slogan a:hover { - color: #333333; -} - -@media (max-width: 1280px) { - .meta-footer-contact-call-to-action-phone::before { - width: 2.88889rem; - height: 2.88889rem; - } - .meta-footer-contact-call-to-action-email::before { - width: 2.88889rem; - height: 2.11111rem; - } - .meta-footer-contact-call-to-action a { - font-size: 1.55556rem; - line-height: 1.77778rem; - } -} - -@media (max-width: 1024px) { - .meta-footer { - padding-top: 5rem; - padding-bottom: 1.66667rem; - } - .meta-footer-contact-call-to-action { - margin-left: 3.33333rem; - } - .meta-footer-contact-call-to-action + .meta-footer-contact-call-to-action { - margin-top: 1.66667rem; - } - .meta-footer-contact-call-to-action::before { - left: -3.33333rem; - width: 2.5rem; - height: 2.5rem; - } - .meta-footer-contact-call-to-action-phone::before { - top: 6px; - } - .meta-footer-contact-call-to-action-email::before { - top: 0; - } - .meta-footer-contact-call-to-action h3 { - line-height: 1.55556rem; - } - .meta-footer-slogan { - margin-top: 5rem; - } - .meta-footer-slogan p, - .meta-footer-slogan a { - padding-top: 1.66667rem; - line-height: 1.55556rem; - } -} - -@media (max-width: 960px) { - .meta-footer-slogan { - -ms-flex-wrap: wrap; - flex-wrap: wrap; - } -} - -@media (max-width: 560px) { - .meta-footer { - padding-top: 3.33333rem; - padding-bottom: 3.33333rem; - } - .meta-footer-contact-call-to-action { - margin-top: 0.83333rem; - } - .meta-footer-contact-entity { - width: 100%; - border-bottom: 1px solid #aaaaaa; - } - .meta-footer-contact-entity:nth-of-type(1) { - border-top: 1px solid #aaaaaa; - } - .meta-footer-contact-entity + .meta-footer-contact-entity { - margin-top: 0; - } - .meta-footer-contact-entity:nth-of-type(2n) { - margin-left: 0; - } - .meta-footer-contact-entity.opened .meta-footer-contact-entity-head-icon::after { - height: 0; - } - .meta-footer-contact-entity-head { - position: relative; - display: block; - padding-left: 2.5rem; - cursor: pointer; - -webkit-transition: background-color .3s; - -o-transition: background-color .3s; - transition: background-color .3s; - } - .meta-footer-contact-entity-head-icon { - position: absolute; - top: 12px; - left: 0; - width: 18px; - height: 18px; - line-height: 1; - } - .meta-footer-contact-entity-head-icon::before, .meta-footer-contact-entity-head-icon::after { - content: ''; - position: absolute; - top: 50%; - left: 50%; - -webkit-transform: translate(-50%, -50%); - -ms-transform: translate(-50%, -50%); - transform: translate(-50%, -50%); - background-color: #009982; - -webkit-transition: height .3s; - -o-transition: height .3s; - transition: height .3s; - } - .meta-footer-contact-entity-head-icon::before { - width: 18px; - height: 4px; - } - .meta-footer-contact-entity-head-icon::after { - width: 4px; - height: 18px; - } - .meta-footer-contact-entity-head h3 { - padding: 0.83333rem 0; - margin-bottom: 0; - } - .meta-footer-contact-entity-body { - padding: 0.83333rem 0 1.66667rem; - } - .meta-footer-slogan { - margin-top: 0.83333rem; - overflow-wrap: break-word; - overflow-wrap: anywhere; - } -} - -.footer-bottom { - height: 3.88889rem; - padding: 0; - color: #fbfbfb; - background-color: #404040; -} - -.footer-bottom .content-wrap { - height: 100%; -} - -.footer-bottom .content-wrap ul { - display: -webkit-box; - display: -ms-flexbox; - display: flex; - height: 100%; - -webkit-box-orient: horizontal; - -webkit-box-direction: normal; - -ms-flex-direction: row; - flex-direction: row; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; -} - -.footer-bottom .content-wrap ul li { - position: relative; - margin-right: 1.72222rem; -} - -.footer-bottom .content-wrap ul li:not(:nth-last-of-type(1))::after { - content: '|'; - position: absolute; - top: 0; - right: -1rem; -} - -.footer-bottom .content-wrap ul a { - color: #fbfbfb; - -webkit-transition: color .3s; - -o-transition: color .3s; - transition: color .3s; -} - -.footer-bottom .content-wrap ul a:hover { - color: #808080; -} - .intro-element { position: relative; height: 33.333vw; diff --git a/kit/template-parts/footer-nav.php b/kit/template-parts/footer-nav.php index 1d49e19..ca638c4 100644 --- a/kit/template-parts/footer-nav.php +++ b/kit/template-parts/footer-nav.php @@ -6,5 +6,7 @@ 'container' => 'false' ) ); ?> + + lol