Skip to content
Snippets Groups Projects
Commit 02d6e431 authored by Benjamin Becker's avatar Benjamin Becker
Browse files

refactors css for footer

parent dc4ac985
No related branches found
No related tags found
No related merge requests found
@font-face {
font-family: "MuseoSans";
src: url("/base/fonts/Fonts/905300/fd479df2-01b0-4e3a-a411-915c477f1352.eot?#iefix");
src: url("/base/fonts/Fonts/905300/fd479df2-01b0-4e3a-a411-915c477f1352.eot?#iefix") format("eot"), url("/base/fonts/Fonts/905300/1d3191cd-ae8c-45e2-bb04-11e96d8fa974.woff2") format("woff2"), url("/base/fonts/Fonts/905300/b252d464-65cb-4950-88f7-ac0a1bf79b75.woff") format("woff"), url("/base/fonts/Fonts/905300/b3d18117-6517-4d3f-afc1-774086ff5fc1.ttf") format("truetype");
}
body {
font-family: "MuseoSans", Euphemia, Segoe UI, Arial, Helvetica, sans-serif, "Droid Sans";
font-weight: 300;
font-style: normal;
line-height: 1.25;
font-size: 16px;
background-color: white;
margin: 20px 0 0 0;
}
.trapo-container {
width: 100%;
max-width: 1280px;
margin: 0 auto;
}
.trapo-inner-container {
width: 960px;
margin: 0 auto;
}
@media only screen and (max-width: 1023px) {
.trapo-inner-container {
padding-right: 80px;
padding-left: 80px;
-webkit-box-sizing: border-box;
box-sizing: border-box;
max-width: 100%;
}
}
@media only screen and (max-width: 768px) {
.trapo-inner-container {
padding-right: 15px;
padding-left: 15px;
}
}
.trapo-header-layout {
display: -ms-grid;
display: grid;
width: 100%;
-ms-grid-columns: [left] 300px [right] 630px;
grid-template-columns: [left] 300px [right] 630px;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
}
.trapo-header-layout .trapo-left {
-ms-grid-column: left;
grid-column-start: left;
}
.trapo-header-layout .trapo-right {
-ms-grid-column: right;
grid-column-start: right;
}
@media only screen and (max-width: 1023px) {
.trapo-header-layout {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: start;
-ms-flex-pack: start;
justify-content: flex-start;
}
.trapo-header-layout h1 {
margin-left: 35px;
}
}
.trapo-layout {
display: -ms-grid;
display: grid;
width: 100%;
-ms-grid-columns: [left] 300px [right] 630px;
grid-template-columns: [left] 300px [right] 630px;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
}
.trapo-layout .trapo-left {
-ms-grid-column: left;
grid-column-start: left;
}
.trapo-layout .trapo-right {
-ms-grid-column: right;
grid-column-start: right;
}
@media only screen and (max-width: 1023px) {
.trapo-layout {
display: block;
}
}
h1 {
font-weight: 500;
font-size: 2.375rem;
color: #003064;
}
@media only screen and (max-width: 1023px) {
h1 {
font-size: 1.5rem;
}
}
h2 {
font-weight: 300;
font-size: 1.5rem;
color: #003064;
margin: 0;
line-height: normal;
}
h3 {
font-weight: 300;
font-size: 1.125rem;
margin: 0;
line-height: normal;
}
a {
text-decoration: none;
}
ul {
margin: 0;
padding: 0;
}
fieldset {
padding: 0;
margin: 0;
border: none;
}
.trapo-hide {
display: none;
}
.trapo-skip-link {
position: fixed;
top: -200px;
text-decoration: none;
padding: 10px;
display: inline-block;
}
.trapo-skip-link:focus {
top: 0;
}
/*# sourceMappingURL=common.css.map */
\ No newline at end of file
{
"version": 3,
"mappings": "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",
"sources": [
"common.scss"
],
"names": [],
"file": "common.css"
}
\ No newline at end of file
.trapo-footer {
@extend .trapo-container;
background-color: $trapo-red;
background-image: url(/base/images/footer-wappen.png);
background-repeat: no-repeat;
background-size: 658px 336px;
background-position: 80% 40%;
@include respond-to(mobile) {
background-image: none;
}
&-spacer {
@extend .trapo-inner-container;
margin-bottom: 20px;
div {
border-bottom: 1px dashed $trapo-textcolor-white;
height: 220px;
width: 100%;
@include respond-to(tablet) {
border-bottom-style: solid;
}
@include respond-to(mobile) {
height: 20px;
border: none;
}
}
}
&-content {
@extend .trapo-inner-container;
@include trapo-text-small();
color: $trapo-textcolor-white;
display: flex;
padding-bottom: 20px;
@include respond-to(tablet) {
flex-wrap: wrap-reverse;
}
}
&-copyright {
@include respond-to(tablet) {
padding: 20px 40px 20px 0;
}
margin-right: auto;
}
&-link-container {
a {
color: inherit;
padding: 10px 20px;
display: inline-block;
@include respond-to(tablet) {
padding-top: 20px;
}
@include respond-to(mobile) {
padding-left: 0;
padding-right: 40px;
}
&:hover {
text-decoration: underline;
}
&:first-child {
padding-left: 0;
}
&:last-child {
padding-right: 0;
}
}
}
}
This diff is collapsed.
This diff is collapsed.
...@@ -3,3 +3,4 @@ ...@@ -3,3 +3,4 @@
@import "scss/page.scss"; @import "scss/page.scss";
@import "scss/search.scss"; @import "scss/search.scss";
@import "scss/read.scss"; @import "scss/read.scss";
@import "scss/footer.scss";
<footer class="footer"> <footer class="trapo-footer">
<div class="container"> <div class="trapo-footer-spacer">
<div class="footer-content"> <div></div>
<div class='footer-first-row'> </div>
<div class="footer-left"> <div class="trapo-footer-content">
</div> <div class="trapo-footer-copyright">&copy; {{g.site_title}}</div>
</div> <nav class='trapo-footer-link-container'>
<div class='footer-line'></div> <a href='http://www.schleswig-holstein.de/tpkontakt'>Kontakt</a>
<div class="footer-left"> <a href='http://www.schleswig-holstein.de/tpimpressum'>Impressum</a>
<div class="footer-icon">&copy; {{g.site_title}}</div> <a href='https://www.schleswig-holstein.de/DE/Serviceseiten/Barrierefreiheitserklaerung/barrierefreiheit_node.html'>Barrierefreiheit</a>
</div> <a href='http://www.schleswig-holstein.de/tpdatenschutz'>Datenschutz</a>
<div class="footer-right"> </nav>
<div class='footer-icon'><a href='http://www.schleswig-holstein.de/tpkontakt'>Kontakt</a></div>
<div class='footer-icon'><a href='http://www.schleswig-holstein.de/tpimpressum'>Impressum</a></div>
<div class='footer-icon'><a href='https://www.schleswig-holstein.de/DE/Serviceseiten/Barrierefreiheitserklaerung/barrierefreiheit_node.html'>Barrierefreiheit</a></div>
<div class='footer-icon last'><a href='http://www.schleswig-holstein.de/tpdatenschutz'>Datenschutz</a></div>
</div>
</div>
</div> </div>
</footer> </footer>
\ No newline at end of file
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment