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 @@