diff --git a/app/assets/images/logo-forem.svg b/app/assets/images/logo-forem.svg
new file mode 100644
index 000000000..10db2f0b6
--- /dev/null
+++ b/app/assets/images/logo-forem.svg
@@ -0,0 +1 @@
+
diff --git a/app/assets/stylesheets/base/main.scss b/app/assets/stylesheets/base/main.scss
index d293ab1c7..509be7d81 100644
--- a/app/assets/stylesheets/base/main.scss
+++ b/app/assets/stylesheets/base/main.scss
@@ -20,12 +20,16 @@ body {
}
}
- &.user-tags-followed-0, &.user-tags-followed-1, &.user-tags-followed-2{
+ &.user-tags-followed-0,
+ &.user-tags-followed-1,
+ &.user-tags-followed-2 {
#sidebar-nav-followed-tags {
height: 90px;
}
}
- &.user-tags-followed-3, &.user-tags-followed-4, &.user-tags-followed-5{
+ &.user-tags-followed-3,
+ &.user-tags-followed-4,
+ &.user-tags-followed-5 {
#sidebar-nav-followed-tags {
height: 205px;
}
diff --git a/app/assets/stylesheets/config/_colors.scss b/app/assets/stylesheets/config/_colors.scss
index ea4586240..34187f50c 100644
--- a/app/assets/stylesheets/config/_colors.scss
+++ b/app/assets/stylesheets/config/_colors.scss
@@ -99,7 +99,7 @@
// Footer
--footer-bg: var(--base-20);
- --footer-color: var(--base-80);
+ --footer-color: var(--base-60);
--footer-link-color: var(--base-80);
--footer-link-color-hover: var(--base-100);
diff --git a/app/assets/stylesheets/views/footer.scss b/app/assets/stylesheets/views/footer.scss
index 3f2c684c4..559cc2007 100644
--- a/app/assets/stylesheets/views/footer.scss
+++ b/app/assets/stylesheets/views/footer.scss
@@ -1,85 +1,40 @@
@import '../config/import';
.crayons-footer {
- --footer-padding: var(--su-4);
+ --footer-padding: var(--su-5);
background: var(--footer-bg);
color: var(--footer-color);
- padding: var(--footer-padding) 0;
+ padding: var(--footer-padding);
+ position: relative;
+ text-align: center;
@media (min-width: $breakpoint-m) {
- --footer-padding: var(--su-6);
- }
-
- @media (min-width: $breakpoint-l) {
--footer-padding: var(--su-8);
}
&__container {
- display: flex;
- position: relative;
- flex-direction: column;
- padding: 0 var(--su-2);
- margin-bottom: calc(var(--su-9) + env(safe-area-inset-bottom));
-
- @media (min-width: $breakpoint-m) {
- flex-direction: row;
- padding: 0 var(--layout-padding);
- margin-bottom: env(safe-area-inset-bottom);
- }
- }
-
- &__nav {
- display: grid;
- column-gap: var(--su-4);
- grid-template-rows: repeat(9, 1fr);
- grid-auto-flow: column;
-
- @media (min-width: $breakpoint-s) {
- grid-template-rows: repeat(6, 1fr);
- column-gap: var(--su-8);
- }
-
- @media (min-width: $breakpoint-l) {
- grid-template-rows: repeat(6, 1fr);
- column-gap: var(--su-10);
- }
- }
-
- &__info {
- display: grid;
- gap: var(--su-4);
- width: 100%;
- align-self: flex-start;
+ justify-items: center;
font-size: var(--fs-s);
- order: 1;
- padding: var(--su-6) 0 0 var(--su-3);
-
+ grid-gap: var(--su-6);
+ margin-bottom: env(safe-area-inset-bottom);
@media (min-width: $breakpoint-m) {
- width: 25%;
- padding: 0;
- margin-right: var(--su-8);
- order: initial;
+ grid-gap: var(--su-5);
+ font-size: var(--fs-base);
}
}
- // Logo
- &__logo {
- display: flex;
-
- .logo {
- width: 50px;
- height: 40px;
- padding: 0 7px 0 9px; // TODO: we have to fix SVG for logo a little...
- background: var(--logo-bg);
- fill: var(--logo-color);
- border-radius: 3px;
- }
+ &__divider {
+ border: none;
+ border-top: 1px solid var(--footer-color);
+ opacity: 0.15;
+ width: 20%;
+ margin: 0;
}
&__mascot {
position: absolute;
- right: var(--su-4);
- top: calc(var(--footer-padding) * -1 - 2px);
+ right: var(--footer-padding);
+ top: -2px;
display: none;
transform-origin: center top;
transition: all var(--transition-props);
diff --git a/app/views/layouts/_footer.html.erb b/app/views/layouts/_footer.html.erb
index 96c09fc5e..8e3657554 100644
--- a/app/views/layouts/_footer.html.erb
+++ b/app/views/layouts/_footer.html.erb
@@ -1,41 +1,37 @@