diff --git a/public/css/app.css b/public/css/app.css index 4c6d6331d4fdd5afdd1434a159cfb2260bf97fa2..1b4ff9c9e7dc62ccf4ee3453cbf637bfe17fb5e8 100644 --- a/public/css/app.css +++ b/public/css/app.css @@ -76,12 +76,6 @@ h2 { border-bottom: 1px solid #222222; } -.big-footer { - padding: 12px; - font-weight: normal; - background-color: #fcb4b7; -} - #content { min-height: 60vh; width: 80%; @@ -95,70 +89,70 @@ h2 { } .columns, -.project-actions, -.big-footer { +.big-footer, +.project-actions { display: flex; } .columns.flex-space-between, -.flex-space-between.project-actions, -.big-footer { +.big-footer, +.flex-space-between.project-actions { justify-content: space-between; } .columns.flex-space-around, -.flex-space-around.project-actions, -.flex-space-around.big-footer { +.flex-space-around.big-footer, +.flex-space-around.project-actions { justify-content: space-around; } .columns.flex-left, -.flex-left.project-actions, -.flex-left.big-footer { +.flex-left.big-footer, +.flex-left.project-actions { justify-content: start; } .columns.flex-column, -.flex-column.project-actions, -.flex-column.big-footer { +.flex-column.big-footer, +.flex-column.project-actions { flex-direction: column; } .columns.flex-middle, -.flex-middle.project-actions, -.flex-middle.big-footer { +.flex-middle.big-footer, +.flex-middle.project-actions { text-align: center; justify-content: center; align-content: center; } .columns.flex-items-center, -.project-actions, -.flex-items-center.big-footer { +.flex-items-center.big-footer, +.project-actions { align-items: center; } .columns .column, -.project-actions .column, -.big-footer .column { +.big-footer .column, +.project-actions .column { flex: auto; } .columns .column.text-right, -.project-actions .column.text-right, -.big-footer .column.text-right { +.big-footer .column.text-right, +.project-actions .column.text-right { flex: 0; } .columns .flex-max, -.project-actions .flex-max, -.big-footer .flex-max { +.big-footer .flex-max, +.project-actions .flex-max { flex: max-content; } .columns.flex-wrap, -.project-actions, -.big-footer { +.flex-wrap.big-footer, +.project-actions { flex-wrap: wrap; } @@ -250,11 +244,6 @@ h2 { #content { width: 90%; } - - .big-footer > * { - text-align: center; - flex: max-content; - } } @media (max-width: 960px) { @@ -305,8 +294,7 @@ h2 { margin: 0px; } -.margin-small, -.big-footer > * { +.margin-small { margin: 15px; } @@ -796,6 +784,85 @@ input.cb:checked + label { } } +.big-footer { + align-items: center; + padding: 16px; + font-weight: normal; + background-color: #fcb4b7; + padding-right: 50px; + padding-left: 50px; +} + +.big-footer .links-footer { + display: inline-flex; + align-items: center; + flex-wrap: wrap; +} + +.big-footer .fontawesome { + height: 30px; + width: 24px; + filter: invert(9%) sepia(26%) saturate(6646%) hue-rotate(242deg) brightness(88%) contrast(121%); + margin-left: 16px; +} + +.big-footer .fontawesome.fontawesome-rss { + display: inline-block; + background-image: url("/images/icons/fontawesome/solid/rss.svg"); + background-repeat: no-repeat; + background-position: center; + background-size: 100%; +} + +.big-footer .fontawesome.fontawesome-twitter { + display: inline-block; + background-image: url("/images/icons/fontawesome/brands/twitter.svg"); + background-repeat: no-repeat; + background-position: center; + background-size: 100%; +} + +.big-footer .fontawesome.fontawesome-mastodon { + display: inline-block; + background-image: url("/images/icons/fontawesome/brands/mastodon.svg"); + background-repeat: no-repeat; + background-position: center; + background-size: 100%; +} + +.big-footer .fontawesome.fontawesome-at { + display: inline-block; + background-image: url("/images/icons/fontawesome/solid/at.svg"); + background-repeat: no-repeat; + background-position: center; + background-size: 100%; +} + +@media (max-width: 1200px) { + .big-footer { + padding-right: 28px; + padding-left: 28px; + flex-direction: column; + font-size: 0.875rem; + } + + .big-footer > * { + text-align: center; + flex: max-content; + } + + .big-footer .links-footer { + justify-content: center; + margin-bottom: 8px; + } +} + +@media (max-width: 960px) { + .links-footer { + flex-direction: column; + } +} + .project { width: 215px; height: 268px; @@ -952,6 +1019,9 @@ input.cb:checked + label { @media (max-width: 960px) { .links { + visibility: hidden; + opacity: 0; + transition: visibility 0.5s, opacity 0.5s linear; top: 30px; right: 0px; margin-right: 8px; diff --git a/public/images/icons/fontawesome/brands/mastodon.svg b/public/images/icons/fontawesome/brands/mastodon.svg new file mode 100644 index 0000000000000000000000000000000000000000..605d64d45c9ca99bc2bc69c75ab2dbddd9e8cbe3 --- /dev/null +++ b/public/images/icons/fontawesome/brands/mastodon.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/public/images/icons/fontawesome/brands/twitter.svg b/public/images/icons/fontawesome/brands/twitter.svg new file mode 100644 index 0000000000000000000000000000000000000000..3db10f686a71ef87b9fd568c10f3cffc9081167e --- /dev/null +++ b/public/images/icons/fontawesome/brands/twitter.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/public/images/icons/fontawesome/solid/at.svg b/public/images/icons/fontawesome/solid/at.svg new file mode 100644 index 0000000000000000000000000000000000000000..1804e169de6b7b806574dfece593bcd802052377 --- /dev/null +++ b/public/images/icons/fontawesome/solid/at.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/public/images/icons/fontawesome/solid/rss.svg b/public/images/icons/fontawesome/solid/rss.svg new file mode 100644 index 0000000000000000000000000000000000000000..a714abd8fdcafdeaeb38187dbc761b08856816f7 --- /dev/null +++ b/public/images/icons/fontawesome/solid/rss.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/resources/sass/_base.scss b/resources/sass/_base.scss index f99b0efb7f1655074c9fa9491a598e4dba78e79a..ef272b6774a48d11044908f690fed22c2f1a81c2 100644 --- a/resources/sass/_base.scss +++ b/resources/sass/_base.scss @@ -46,17 +46,6 @@ h2 { border-bottom: 1px solid $border-color; } -.big-footer { - @extend .columns, .flex-space-between, .flex-wrap; - padding: 12px; - font-weight: normal; - background-color: $footer-background; - // border-top: 1px solid $border-color; - > * { - @extend .margin-small; - } -} - #content { min-height: 60vh; width: 80%; @@ -204,11 +193,6 @@ h2 { #content { width: 90%; } - - .big-footer > * { - text-align: center; - flex: max-content; - } } @media (max-width: $breakpoint-medium) { diff --git a/resources/sass/app.scss b/resources/sass/app.scss index 50e8f87853021f9bb1b952530ed66346f4af3efe..18743fc87585a6aa42fef70954e6c0cfd596a2b6 100644 --- a/resources/sass/app.scss +++ b/resources/sass/app.scss @@ -87,6 +87,7 @@ $breakpoint-large: 1200px; @import "base"; @import "utils"; @import "inputs"; +@import "components/footer"; @import "components/_project_pres"; @import "components/accordion"; @import "components/slider"; diff --git a/resources/sass/components/_footer.scss b/resources/sass/components/_footer.scss new file mode 100644 index 0000000000000000000000000000000000000000..df81e9f23e5b4cfdafe4668fb1039caadc574fd9 --- /dev/null +++ b/resources/sass/components/_footer.scss @@ -0,0 +1,62 @@ +.big-footer { + @extend .columns, .flex-space-between; + align-items: center; + padding: 16px; + font-weight: normal; + background-color: $footer-background; + padding-right: 50px; + padding-left: 50px; + + .links-footer { + display: inline-flex; + align-items: center; + flex-wrap: wrap; + } + + .fontawesome { + height: 30px; + width: 24px; + filter: $filter-dark-purple; + margin-left: 16px; + + &.fontawesome-rss { + @include icon(url("/images/icons/fontawesome/solid/rss.svg"), 100%, center); + } + + &.fontawesome-twitter { + @include icon(url("/images/icons/fontawesome/brands/twitter.svg"), 100%, center); + } + + &.fontawesome-mastodon { + @include icon(url("/images/icons/fontawesome/brands/mastodon.svg"), 100%, center); + } + + &.fontawesome-at { + @include icon(url("/images/icons/fontawesome/solid/at.svg"), 100%, center); + } + } +} + +@media (max-width: $breakpoint-large) { + .big-footer { + padding-right: 28px; + padding-left: 28px; + flex-direction: column; + font-size: $small-font-size; + & > * { + text-align: center; + flex: max-content; + } + + .links-footer { + justify-content: center; + margin-bottom: 8px; + } + } +} + +@media (max-width: $breakpoint-medium) { + .links-footer { + flex-direction: column; + } +} diff --git a/resources/views/layouts/app.blade.php b/resources/views/layouts/app.blade.php index ae106b7431ea0b6842cc9f42fbf8de71172ad144..1da73dbac057d40b284cb9fbe11d18b0787be0b2 100644 --- a/resources/views/layouts/app.blade.php +++ b/resources/views/layouts/app.blade.php @@ -72,9 +72,15 @@