Commander1024
/
lostplaces-frontend
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Sanitized line endigs.

This commit is contained in:
Marcus Scholz 2020-09-06 11:47:19 +02:00
parent e3b281f868
commit 9012d465d6
2 changed files with 31 additions and 34 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

62
components/03_Organisms/footer/_footer.scss
View File

@ -10,22 +10,22 @@ $-primary-line-color: $-almost-white;
font-size: 0.75rem; font-size: 0.75rem;
* { * {
box-sizing: border-box box-sizing: border-box;
} }
ul { ul {
list-style: none list-style: none;
} }
a { a {
text-decoration: none text-decoration: none;
} }
&__generic-anchor { &__generic-anchor {
color: $-primary-link-color; color: $-primary-link-color;
&:hover { &:hover {
color: $-primary-line-color color: $-primary-line-color;
} }
} }
@ -36,12 +36,12 @@ $-primary-line-color: $-almost-white;
} }
&__list-top { &__list-top {
width: 33.333% width: 33.333%;
} }
&__list-top > li { &__list-top > li {
text-align: center; text-align: center;
padding-bottom: 10px padding-bottom: 10px;
} }
&__list-header { &__list-header {
@ -69,7 +69,7 @@ $-primary-line-color: $-almost-white;
top: 50%; top: 50%;
left: 10px; left: 10px;
border-top: 1px solid $-primary-line-color; border-top: 1px solid $-primary-line-color;
width: calc(100% - 20px) width: calc(100% - 20px);
} }
// Include social media icons. // Include social media icons.
@ -121,7 +121,6 @@ $-primary-line-color: $-almost-white;
} }
} }
// !! WIP and broken Wurstwasser !!
// Social media icons style. // Social media icons style.
.LP-Footer__Icon { .LP-Footer__Icon {
background-size: 40px 40px; background-size: 40px 40px;
@ -131,7 +130,6 @@ $-primary-line-color: $-almost-white;
position: absolute; position: absolute;
height: 50px; height: 50px;
width: 50px; width: 50px;
filter: invert(1); // Bullshit, have to properly style the svg.
} }
// Big letters of "EXPLORE WITH US" // Big letters of "EXPLORE WITH US"
@ -139,13 +137,13 @@ $-primary-line-color: $-almost-white;
display: flex; display: flex;
align-items: center; align-items: center;
font-size: 3.5em; font-size: 3.5em;
color: $-almost-white color: $-almost-white;
} }
// Small letters of "EXPLORE WITH US" // Small letters of "EXPLORE WITH US"
&__social-small { &__social-small {
font-size: 0.6em; font-size: 0.6em;
padding: 0px 20px padding: 0px 20px;
} }
&__social-overlap { &__social-overlap {
@ -164,57 +162,57 @@ $-primary-line-color: $-almost-white;
width: 100%; width: 100%;
padding: 10px; padding: 10px;
border-top: 1px solid $-primary-line-color; border-top: 1px solid $-primary-line-color;
margin-top: 10px margin-top: 10px;
} }
&__bottom-section > div:first-child { &__bottom-section > div:first-child {
margin-right: auto margin-right: auto;
} }
&__bottom-wrapper { &__bottom-wrapper {
font-size: 1.5em; font-size: 1.5em;
color: $-almost-white color: $-almost-white;
} }
// Media queries using global widths. // Media queries using global widths.
@media(max-width: $-viewport-normal) { @media(max-width: $-viewport-normal) {
.LP-Footer__list-header { .LP-Footer__list-header {
font-size: 2em font-size: 2em;
} }
.LP-Footer__list-anchor { .LP-Footer__list-anchor {
font-size: 1.1em font-size: 1.1em;
} }
.LP-Footer__social-connect { .LP-Footer__social-connect {
font-size: 2.5em font-size: 2.5em;
} }
.LP-Footer__social-overlap > a { .LP-Footer__social-overlap > a {
font-size: 2.24em; font-size: 2.24em;
height: 50px; height: 50px;
} }
.LP-Footer__bottom-wrapper { .LP-Footer__bottom-wrapper {
font-size: 1.3em font-size: 1.3em;
} }
} }
@media(max-width: $-viewport-medium) { @media(max-width: $-viewport-medium) {
.LP-Footer__list-top { .LP-Footer__list-top {
width: 100% width: 100%;
} }
.LP-Footer__list-header { .LP-Footer__list-header {
font-size: 3em; font-size: 3em;
} }
.LP-Footer__list-anchor { .LP-Footer__list-anchor {
font-size: 1.5em font-size: 1.5em;
} }
.LP-Footer__social-section { .LP-Footer__social-section {
justify-content: center justify-content: center
} }
.LP-Footer__social-section::after { .LP-Footer__social-section::after {
top: 25% top: 25%;
} }
.LP-Footer__social-connect { .LP-Footer__social-connect {
margin-bottom: 10px; margin-bottom: 10px;
padding: 0 10px padding: 0 10px;
} }
.LP-Footer__social-overlap { .LP-Footer__social-overlap {
display: flex; display: flex;
@ -223,48 +221,48 @@ $-primary-line-color: $-almost-white;
} }
.LP-Footer__social-icons-wrapper { .LP-Footer__social-icons-wrapper {
width: 100%; width: 100%;
padding: 0 padding: 0;
} }
.LP-Footer__social-overlap { .LP-Footer__social-overlap {
margin-left: 0px; margin-left: 0px;
} }
.LP-Footer__bottom-section { .LP-Footer__bottom-section {
padding: 0 5px 10px 5px padding: 0 5px 10px 5px;
} }
.LP-Footer__bottom-wrapper { .LP-Footer__bottom-wrapper {
text-align: center; text-align: center;
width: 100%; width: 100%;
margin-top: 10px margin-top: 10px;
} }
} }
@media(max-width: $-viewport-small) { @media(max-width: $-viewport-small) {
.LP-Footer__social-overlap > a { .LP-Footer__social-overlap > a {
margin: auto margin: auto;
} }
.LP-Footer__social-overlap > a:not(:first-child) { .LP-Footer__social-overlap > a:not(:first-child) {
margin-left: 0; margin-left: 0;
} }
.LP-Footer__bottom-rights { .LP-Footer__bottom-rights {
display: block display: block;
} }
} }
@media(max-width: $-viewport-extra-small) { @media(max-width: $-viewport-extra-small) {
.LP-Footer__list-header { .LP-Footer__list-header {
font-size: 2.2em font-size: 2.2em;
} }
.LP-Footer__list-anchor { .LP-Footer__list-anchor {
font-size: 1.2em font-size: 1.2em;
} }
.LP-Footer__social-connect { .LP-Footer__social-connect {
font-size: 2.4em font-size: 2.4em;
} }
.LP-Footer__social-overlap > a { .LP-Footer__social-overlap > a {
font-size: 2.24em font-size: 2.24em;
} }
.LP-Footer__bottom-wrapper { .LP-Footer__bottom-wrapper {
font-size: 1.3em font-size: 1.3em;
} }
} }
} }

3
public/main.css
View File

@ -1307,8 +1307,7 @@ body {
background-clip: content-box; background-clip: content-box;
position: absolute; position: absolute;
height: 50px; height: 50px;
width: 50px; width: 50px; }
filter: invert(1); }
.LP-Footer__social-explore { .LP-Footer__social-explore {
display: flex; display: flex;
align-items: center; align-items: center;