krikkert/habitica
1
0
Fork 0
mirror of https://github.com/HabitRPG/habitica.git synced 2025-12-14 05:07:22 +01:00
Code Issues Packages Projects Releases Wiki Activity

Site Footer Update (#14134)

Browse Source 
* first pass

* second pass

* third pass

* fourth pass, not a lot of progress

* fifth pass, slowly gettin there

* breakpoint nonsense

* flexbox and breakpoint nonsense

* svg updates, css updates

* whitespace

* chore: merge upstream/develop

* style(breakpoints): added responsive breakpoints, social column alignment tweaks

* style(breakpoints): add xs-specific selectors and classes

* style: mobile footer

* style: mobile footer

* style: static landing page footer

* style: small tweaks to social layout

* fix(translations): update website/common/locales/de/gear.json to develop

* update(style): small updates

* update(style): cleaning up code

* update(style): cleaning up code

* update(style): mobile footer updates

* update(style): complete mobile footer & clean up code

* update(style): add tablet breakpoint and remove rogue terms link
This commit is contained in:
Natalie L
2022-09-14 17:35:24 -04:00
committed by GitHub
parent 6b0b393e32
commit 9a896470d5
9 changed files with 817 additions and 437 deletions
Download Patch File Download Diff File Expand all files Collapse all files

104
website/client/src/components/static/staticWrapper.vue
View File

@@ -33,7 +33,7 @@
@import '~@/assets/scss/colors.scss';
.home-header {
background: #6133b4 !important;
background: $purple-300 !important;
position: static;
box-shadow: none !important;
height: 100px !important;
@@ -46,13 +46,13 @@
.nav-item a {
font-size: 14px !important;
color: #d5c8ff !important;
color: $purple-600 !important;
padding-top: 2.8em !important;
}
.nav-item a:hover {
background: transparent !important;
color: #fff !important;
color: $white !important;
}
.nav-item .nav-link {
@@ -73,20 +73,20 @@
}
.white-header {
background: #fff !important;
background-color: #fff !important;
background: $white !important;
background-color: $white !important;
a {
color: #271b3d !important;
color: $header-dark-background !important;
}
a:hover {
color: #fff !important;
color: $white !important;
}
}
#purple-footer {
background-color: #271b3d;
background-color: $header-dark-background;
.row {
margin: 0;
@@ -94,19 +94,91 @@
footer, footer a {
background: transparent;
color: #d5c8ff;
color: $purple-500;
&:hover {
color: $white;
}
}
h3 {
color: $purple-400;
}
hr {
border-top-color: $purple-100;
}
.donate-text {
color: $purple-500;
}
.logo {
color: #bda8ff;
color: $purple-300;
}
.social-circle, .btn-contribute {
background: #36205d;
color: #bda8ff;
.colophon {
color: $purple-500;
}
.svg-icon {
color: #bda8ff;
.social-circle {
background: $purple-50;
color: $purple-500;
.instagram svg {
background-color: $purple-50;
fill: $purple-500;
&:hover {
fill: $white;
}
}
.twitter svg {
background-color: $purple-50;
fill: $purple-500;
&:hover {
fill: $white;
}
}
.facebook svg {
background-color: $purple-50;
fill: $purple-500;
&:hover {
fill: $white;
}
}
.tumblr svg {
background-color: $purple-50;
fill: $purple-500;
&:hover {
fill: $white;
}
}
}
.btn-contribute {
background: $white;
box-shadow: none;
border-radius: 2px;
width: 175px;
height: 32px;
color: $gray-50;
text-align: center;
line-height: 1.71;
font-weight: bold;
font-size: 0.875rem;
vertical-align: middle;
padding: 0;
margin: 32px 0 32px 24px;
box-shadow: 0 1px 3px 0 rgba(26, 24, 29, 0.12), 0 1px 2px 0 rgba(26, 24, 29, 0.24);
a {
display: flex;
}
.text{
display: inline-block;
vertical-align: bottom;
}
}
}
@@ -142,7 +214,7 @@
<style lang="scss" scoped>
#bottom-wrap.purple-4 {
background-color: #271b3d;
background-color: #271B3D;
}
#bottom-wrap {