From 1dad2cc1e367f5ee7f16099db80c08a68120b4c0 Mon Sep 17 00:00:00 2001 From: Commander1024 Date: Sun, 6 Sep 2020 19:20:14 +0200 Subject: [PATCH] Dropped a new main.css with the beta changes for the footer. --- lostplaces/lostplaces_app/static/main.css | 232 +++++++++++++++++----- 1 file changed, 187 insertions(+), 45 deletions(-) diff --git a/lostplaces/lostplaces_app/static/main.css b/lostplaces/lostplaces_app/static/main.css index ab2c444..fb70e4e 100644 --- a/lostplaces/lostplaces_app/static/main.css +++ b/lostplaces/lostplaces_app/static/main.css @@ -423,13 +423,6 @@ .RV-ImageGrid__Item img { object-position: center; } -@font-face { - font-family: 'Crimson Text'; - font-style: italic; - font-weight: 400; - font-display: swap; - src: local("Crimson Text Italic"), local("CrimsonText-Italic"), url(fonts/Crimson/CrimsonText-Italic.ttf) format("truetype"); } - @font-face { font-family: 'Crimson Text'; font-style: normal; @@ -437,6 +430,13 @@ font-display: swap; src: local("Crimson Text Regular"), local("CrimsonText-Regular"), url(fonts/Crimson/CrimsonText-Regular.ttf) format("truetype"); } +@font-face { + font-family: 'Crimson Text'; + font-style: italic; + font-weight: 400; + font-display: swap; + src: local("Crimson Text Italic"), local("CrimsonText-Italic"), url(fonts/Crimson/CrimsonText-Italic.ttf) format("truetype"); } + @font-face { font-family: 'Crimson Text'; font-style: normal; @@ -444,13 +444,6 @@ font-display: swap; src: local("Crimson Text Bold"), local("CrimsonText-Bold"), url(fonts/Crimson/CrimsonText-Bold.ttf) format("truetype"); } -@font-face { - font-family: 'Montserrat'; - font-style: italic; - font-weight: 400; - font-display: swap; - src: local("Montserrat Italic"), local("Montserrat-Italic"), url(fonts/Montserrat/Montserrat-Italic.ttf) format("truetype"); } - @font-face { font-family: 'Montserrat'; font-style: normal; @@ -458,6 +451,13 @@ font-display: swap; src: local("Montserrat Regular"), local("Montserrat-Regular"), url(fonts/Montserrat/Montserrat-Regular.ttf) format("truetype"); } +@font-face { + font-family: 'Montserrat'; + font-style: italic; + font-weight: 400; + font-display: swap; + src: local("Montserrat Italic"), local("Montserrat-Italic"), url(fonts/Montserrat/Montserrat-Italic.ttf) format("truetype"); } + @font-face { font-family: 'Montserrat'; font-style: normal; @@ -555,11 +555,11 @@ body { .LP-Link { color: #565656; text-decoration: none; - font-family: Montserrat, Helvetica, sans-serif; } + font-family: "Montserrat", Helvetica, sans-serif; } .LP-Link:hover { color: #C09F80; } .LP-Link .LP-Paragraph { - font-family: Montserrat, Helvetica, sans-serif; } + font-family: "Montserrat", Helvetica, sans-serif; } .LP-Link .LP-Paragraph:hover { color: #C09F80; } @@ -567,7 +567,7 @@ body { display: inline; } .LP-Headline { - font-family: Montserrat, Helvetica, sans-serif; + font-family: "Montserrat", Helvetica, sans-serif; color: #565656; font-size: 1.7rem; padding-top: 0px; @@ -641,7 +641,7 @@ body { .LP-Input--tagging .LP-Input__Field, .LP-Input--tagging .tagify { min-height: 36px; height: max-content; - font-family: Montserrat, Helvetica, sans-serif; + font-family: "Montserrat", Helvetica, sans-serif; font-size: 1em; padding: 0; padding-left: 8px; } @@ -669,12 +669,12 @@ body { background-color: #76323F; color: #f9f9f9; } .LP-Input .LP-Input__Label { - font-family: Montserrat, Helvetica, sans-serif; + font-family: "Montserrat", Helvetica, sans-serif; font-size: 16px; white-space: wrap; overflow: hidden; } .LP-Input .LP-Input__Message { - font-family: Montserrat, Helvetica, sans-serif; + font-family: "Montserrat", Helvetica, sans-serif; font-style: italic; font-size: 13px; padding: 3px; @@ -747,7 +747,7 @@ body { .LP-Tag .LP-Paragraph, .tagify__tag .LP-Paragraph { padding: 0; margin: 0; - font-family: Montserrat, Helvetica, sans-serif; + font-family: "Montserrat", Helvetica, sans-serif; font-size: 1em; display: inline; } @@ -757,7 +757,7 @@ body { justify-content: center; align-items: stretch; background-color: #f9f9f9; - font-family: Montserrat, Helvetica, sans-serif; + font-family: "Montserrat", Helvetica, sans-serif; border-radius: 3px; font-weight: bold; box-shadow: 0 0 2px #565656; @@ -796,7 +796,7 @@ body { padding: 8px; } .LP-Pagination { - font-family: Montserrat, Helvetica, sans-serif; + font-family: "Montserrat", Helvetica, sans-serif; font-weight: bold; display: flex; flex-direction: row; @@ -879,19 +879,19 @@ body { padding-bottom: 10px; padding-top: 10px; } .LP-PlaceTeaser .LP-PlaceTeaser__Meta .LP-Paragraph { - font-family: Montserrat, Helvetica, sans-serif; + font-family: "Montserrat", Helvetica, sans-serif; padding: 0; margin: 0; margin-top: 5px; font-size: 0.9rem; } .LP-PlaceTeaser .LP-PlaceTeaser__Meta .LP-Headline { - font-family: Montserrat, Helvetica, sans-serif; + font-family: "Montserrat", Helvetica, sans-serif; color: #565656; font-size: 1rem; padding: 0px; margin: 0px; } .LP-PlaceTeaser .LP-PlaceTeaser__Description { - font-family: Montserrat, Helvetica, sans-serif; + font-family: "Montserrat", Helvetica, sans-serif; color: #565656; display: none; } @@ -1030,7 +1030,7 @@ body { .LP-Header__UserInformation { margin-right: 3%; } .LP-Header__UserInformation .LP-Paragraph { - font-family: Montserrat, Helvetica, sans-serif; + font-family: "Montserrat", Helvetica, sans-serif; white-space: nowrap; } .LP-Header__UserInformation .LP-Link { margin: 0 3px; @@ -1241,25 +1241,167 @@ body { display: block; } .LP-Footer { - margin-top: 75px; + margin: auto; + background: #565656; width: 100%; - background-color: #565656; - padding: 25px; } - .LP-Footer .LP-LinkList__List { + font-family: "Montserrat", Helvetica, sans-serif; + font-size: 0.75rem; } + .LP-Footer * { + box-sizing: border-box; } + .LP-Footer ul { + list-style: none; } + .LP-Footer a { + text-decoration: none; } + .LP-Footer__GenericAnchor { + color: #D7CEC7; } + .LP-Footer__GenericAnchor:hover { + color: #f9f9f9; } + .LP-Footer__Flex { + display: flex; + flex-flow: row wrap; } + .LP-Footer__ListTop { + text-align: center; + width: 33.333%; } + .LP-Footer__ListTop > li { + padding-bottom: 10px; } + .LP-Footer__ListHeader { + padding: 10px 0 5px 0; + color: #f9f9f9; + font-size: 2.3vw; } + .LP-Footer__ListAnchor { + font-size: 1.3em; } + .LP-Footer__ListText { + font-size: 1.3em; + color: #f9f9f9; } + .LP-Footer__ListText-left { + text-align: left; } + .LP-Footer__SocialSection { + width: 100%; + align-items: center; + justify-content: space-around; + position: relative; + margin-top: 5px; } + .LP-Footer__SocialSection::after { + content: ""; + position: absolute; + z-index: 1; + top: 50%; + left: 10px; + border-top: 1px solid #f9f9f9; + width: calc(100% - 20px); } + .LP-Footer .LP-Footer__Social-Mastodon .LP-Footer__Icon { + background-image: url("icons/social/mastodon.svg"); } + .LP-Footer .LP-Footer__Social-Twitter .LP-Footer__Icon { + background-image: url("icons/social/twitter.svg"); } + .LP-Footer .LP-Footer__Social-Facebook .LP-Footer__Icon { + background-image: url("icons/social/facebook.svg"); } + .LP-Footer .LP-Footer__Social-Youtube .LP-Footer__Icon { + background-image: url("icons/social/youtube.svg"); } + .LP-Footer .LP-Footer__Social-Vimeo .LP-Footer__Icon { + background-image: url("icons/social/vimeo.svg"); } + .LP-Footer .LP-Footer__Social-Instagram .LP-Footer__Icon { + background-image: url("icons/social/instagram.svg"); } + .LP-Footer .LP-Footer__Social-Vkontakte .LP-Footer__Icon { + background-image: url("icons/social/vkontakte.svg"); } + .LP-Footer .LP-Footer__Social-Wordpress .LP-Footer__Icon { + background-image: url("icons/social/wordpress.svg"); } + .LP-Footer .LP-Footer__Icon { + background-size: 40px 40px; + background-repeat: no-repeat; + background-position: center; + background-clip: content-box; + position: absolute; + height: 50px; + width: 50px; } + .LP-Footer__SocialExplore { display: flex; align-items: center; + font-size: 3.5em; + color: #f9f9f9; } + .LP-Footer__SocialSmall { + font-size: 0.6em; + padding: 0px 20px; } + .LP-Footer__SocialOverlap { + position: relative; + z-index: 2; + background: #565656; + padding: 0 10px; } + .LP-Footer__SocialOverlap > a { + font-size: 3em; + padding-right: 50px; } + .LP-Footer__BottomSection { + width: 100%; + padding: 10px; + border-top: 1px solid #f9f9f9; + margin-top: 10px; } + .LP-Footer__BottomSection > div:first-child { + margin-right: auto; } + .LP-Footer__BottomWrapper { + font-size: 1.5em; + color: #f9f9f9; } + +@media (max-width: 1000px) { + .LP-Footer__ListHeader { + font-size: 2em; } + .LP-Footer__ListAnchor { + font-size: 1.1em; } + .LP-Footer__SocialConnect { + font-size: 2.5em; } + .LP-Footer__SocialOverlap > a { + font-size: 2.24em; + height: 50px; } + .LP-Footer__BottomWrapper { + font-size: 1.3em; } } + +@media (max-width: 750px) { + .LP-Footer__ListTop { + width: 100%; } + .LP-Footer__ListHeader { + font-size: 3em; } + .LP-Footer__ListAnchor { + font-size: 1.5em; } + .LP-Footer__SocialSection { justify-content: center; } - .LP-Footer .LP-LinkList__List .LP-LinkList__Item { - border: none; - padding: 5px; - width: auto; } - .LP-Footer .LP-LinkList__List .LP-LinkList__Item .LP-Text { - color: #f9f9f9; - font-size: 17px; } - .LP-Footer .LP-LinkList__List .LP-LinkList__Item .LP-Link { - display: inline; } - .LP-Footer .LP-LinkList__List .LP-LinkList__Item .LP-Link:hover { - background-color: inherit; } + .LP-Footer__SocialSection::after { + top: 25%; } + .LP-Footer__SocialConnect { + margin-bottom: 10px; + padding: 0 10px; } + .LP-Footer__SocialOverlap { + display: flex; + justify-content: center; + height: 50px; } + .LP-Footer__SocialIconsWrapper { + width: 100%; + padding: 0; } + .LP-Footer__SocialOverlap { + margin-left: 0px; } + .LP-Footer__BottomSection { + padding: 0 5px 10px 5px; } + .LP-Footer__BottomWrapper { + text-align: center; + width: 100%; + margin-top: 10px; } } + +@media (max-width: 650px) { + .LP-Footer__SocialOverlap > a { + margin: auto; } + .LP-Footer__SocialOverlap > a:not(:first-child) { + margin-left: 0; } + .LP-Footer__BottomRights { + display: block; } } + +@media (max-width: 450px) { + .LP-Footer__ListHeader { + font-size: 2.2em; } + .LP-Footer__ListAnchor { + font-size: 1.2em; } + .LP-Footer__SocialConnect { + font-size: 2.4em; } + .LP-Footer__SocialOverlap > a { + font-size: 2.24em; } + .LP-Footer__BottomWrapper { + font-size: 1.3em; } } .LP-Form--tagging { margin-top: 25px; } @@ -1315,7 +1457,7 @@ body { .LP-Form .LP-Form__Legend { margin: 0; padding: 0; - font-family: Montserrat, Helvetica, sans-serif; + font-family: "Montserrat", Helvetica, sans-serif; font-size: 21px; } .LP-Form .LP-Form__Composition { @@ -1389,7 +1531,7 @@ body { flex-basis: 100px; } .LP-Form .LP-Form__InfoText .LP-Paragraph { - font-family: Montserrat, Helvetica, sans-serif; + font-family: "Montserrat", Helvetica, sans-serif; color: #565656; } .LP-ImageGrid { @@ -1609,7 +1751,7 @@ body { border-radius: 2px; position: relative; outline: 0; - font-family: Montserrat, Helvetica, sans-serif; } + font-family: "Montserrat", Helvetica, sans-serif; } .tagify__dropdown__item--active { color: #f9f9f9;