Merge pull request #118 from matks/rebranding-2024

Apply new PS rebranding to TopContributors
PrestaShop · Dec 21, 2023 · bc0c43e · bc0c43e
2 parents 9a6e491 + ccb67ff
commit bc0c43e
Show file tree

Hide file tree

Showing 18 changed files with 198 additions and 657 deletions.
diff --git a/assets/style/_components.scss b/assets/style/_components.scss
@@ -3,39 +3,33 @@
 }
 
 .btn {
-  font-size: 16px;
-  box-shadow: 1px 2px 3px 0 rgba(0, 0, 0, 0.5);
+  margin-top: 25px;
+
+  background-color: #000000;
+  border: 0;
+  border-radius: 0;
+  color: #ffffff;
+  display: inline-block;
+  font-weight: 700;
+  padding: 1rem 3rem;
+  position: relative;
   text-transform: uppercase;
+  transition: none;
 
-  &.btn-primary {
-    width: 284px;
-    height: 54px;
-    line-height: 54px;
-    padding: 0;
-    vertical-align: middle;
-    background: #df0067;
-    border-color: #df0067;
-
-    &:hover,
-    &:active,
-    &:focus {
-      background: #ff3a95;
-      border-color: #ff3a95;
-    }
+  &:after {
+    padding-left: .3em;
+    content: '►';
+    font-size: .8em;
+  }
+
+  &:hover {
+    color: #ffffff;
   }
 
-  &.btn-outline-info {
-    font-size: 14px;
-    border-width: 2px;
-    box-shadow: 1px 1px 3px 0 rgba(0, 0, 0, 0.5),
-      inset 1px 1px 3px 0 rgba(0, 0, 0, 0.5);
-
-    &:hover,
-    &:active,
-    &:focus {
-      box-shadow: 1px 1px 3px 0 rgba(0, 0, 0, 0.5);
-      background: #23b9d6;
-      border-color: #23b9d6;
+  &.large-padding {
+    padding: {
+      left: 2rem;
+      right: 2rem;
     }
   }
 }

diff --git a/assets/style/_footer.scss b/assets/style/_footer.scss
@@ -1,27 +1,23 @@
 footer {
   padding-bottom: 95px;
+  font-family: 'IBM Plex Sans', Arial, sans-serif;
 
-  .white-title {
+  .black-title {
     margin-top: 45px;
     line-height: 30px;
+    font-family: Prestafont, sans-serif;
+    font-size: 28px;
+    max-width: 200px;
   }
-  .white-text {
-    margin-top: 18px;
-  }
-  .btn {
-    margin-top: 25px;
 
-    &.large-padding {
-      padding: {
-        left: 2rem;
-        right: 2rem;
-      }
-    }
+  .black-text {
+    margin-top: 18px;
+    font-weight: bold;
   }
 
   .share,
   .build-link {
-    font-family: 'Montserrat', sans-serif;
+    font-family: 'IBM Plex Sans', Arial, sans-serif;
     font-weight: 300;
     font-size: 16px;
     color: #fff;
@@ -39,35 +35,20 @@ footer {
       }
     }
   }
+}
 
-  .build-link {
-    text-decoration: underline;
-
-    &:hover,
-    &:visited,
-    &:active {
-      color: #fff;
-    }
-  }
-
-  #badge {
-    position: relative;
 
-    > img {
-      position: absolute;
-      left: 50%;
-      margin-left: -95px;
-      top: 75px;
-      z-index: 1;
-    }
+.footer-list a {
+  display: block;
+  padding: 5px 0;
+  font-size: 16px;
+  font-weight: bold;
+  color: #000000;
+  margin: 8px 12px 8px 0;
 
-    > hr {
-      margin: {
-        top: 190px;
-        bottom: 105px;
-      }
-      opacity: 0.7;
-      border-top: solid 1px #ffffff;
-    }
+  &:after {
+    padding-left: .3em;
+    content: '►';
+    font-size: .8em;
   }
 }
diff --git a/assets/style/_header.scss b/assets/style/_header.scss
@@ -1,28 +1,32 @@
 header {
-  height: 32.5rem;
+
+  h1 {
+    font-family: Prestafont, sans-serif;
+    font-size: 95px;
+  }
 
   .gradient {
     width: 100%;
     height: 100%;
     background: $primary;
   }
 
-  .white-text {
+  .black-text {
+    font-family: 'IBM Plex Sans', Arial, sans-serif;
+
     font-size: 18px;
+    max-width: 800px;
     margin: {
       top: 18px;
       bottom: 18px;
     }
   }
 
-  .btn {
-    margin-top: 12px;
+  #header-section {
+    padding-top: 50px;
+    padding-left: 100px;
+    padding-bottom: 50px;
+    padding-right: 100px;
+    background-color: #decde7;
   }
 }
-
-.main-content:first-child {
-  margin-top: -85px;
-}
-.gray-text {
-  color: #797979;
-}
diff --git a/assets/style/_section_1.scss b/assets/style/_section_1.scss
@@ -1,5 +1,5 @@
 #arrow {
-  @include gradient-y(#f100a0, #23b9d6);
+  background-color: #000000;
   position: relative;
   height: 1000px;
 
@@ -29,12 +29,14 @@
 
   .count,
   .words {
-    color: #fff;
+    color: #a4dbe8;
+    font-family: Prestafont, sans-serif;
   }
   .count {
     font-size: 24px;
   }
   .words {
+    font-family: 'IBM Plex Sans', Arial, sans-serif;
     margin-top: -8px;
     font-size: 12px;
   }
@@ -53,24 +55,27 @@
 
 #top-contributors {
   h2 {
+    font-family: Prestafont, sans-serif;
     padding-bottom: 0;
     margin-bottom: 4px;
   }
   .date {
+    font-family: 'IBM Plex Sans', Arial, sans-serif;
     margin-bottom: 23px;
-    color: #797979;
     letter-spacing: 0.2px;
-    font-size: 14px;
+    font-size: 20px;
+    font-weight: bold;
 
     strong {
       font-weight: 600;
     }
   }
 }
 
-$color-expert: #df0067;
-$color-enthusiasts: #280f44;
-$color-beginners: #23b9d6;
+$color-expert: #000000;
+$color-enthusiasts: #000000;
+$color-beginners: #000000;
+$background-expert: #ffffff;
 
 .contributor {
   .avatar {
@@ -242,11 +247,13 @@ $color-beginners: #23b9d6;
   .details {
     float: right;
     text-align: right;
+    font-family: 'IBM Plex Sans', Arial, sans-serif;
 
     .position {
-      color: #df0067;
+      color: #000000;
       font-size: 24px;
       margin-top: 0;
+      font-family: Prestafont, sans-serif;
     }
     .name {
       font-size: 16px;
@@ -337,15 +344,24 @@ $color-beginners: #23b9d6;
   }
 }
 
+.contributors-section {
+  border-top: solid;
+  border-top-width: 1px;
+}
+
+#all-contributors-outer {
+  border-top: solid;
+}
+
 #all-contributors {
   .title {
-    font-family: 'Montserrat', sans-serif;
+    font-family: Prestafont, sans-serif;
     height: 34px;
     line-height: 34px;
     vertical-align: middle;
     font-size: 16px;
     text-align: center;
-    color: #fff;
+    color: #000;
     box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.25);
     margin-bottom: 10px;
   }
@@ -369,6 +385,7 @@ $color-beginners: #23b9d6;
   }
 
   .rank-experts {
+    font-family: Prestafont, sans-serif;
     color: $color-expert;
   }
   .rank-enthusiasts {
@@ -384,7 +401,7 @@ $color-beginners: #23b9d6;
     }
   }
   .experts {
-    background: $color-expert;
+    background: $background-expert;
     .position {
       color: $color-expert;
     }

diff --git a/assets/style/_titles.scss b/assets/style/_titles.scss
@@ -6,7 +6,7 @@ h4 {
 }
 
 h1 {
-  color: #ffffff;
+  color: #000000;
   text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.56);
   font-size: 36px;
   margin: {
@@ -27,7 +27,7 @@ h4 {
 }
 
 h2 {
-  font-size: 20px;
+  font-size: 25px;
 }
 h3 {
   font-size: 16px;

diff --git a/assets/style/resources/Prestafont-Regular.woff2 b/assets/style/resources/Prestafont-Regular.woff2
diff --git a/assets/style/theme.scss b/assets/style/theme.scss
@@ -5,7 +5,7 @@ $grid-columns: 10;
 
 $brand-primary: #df0067;
 $brand-info: #23b9d6;
-$primary: #011738;
+$primary: #ffffff;
 
 $container-max-widths: (
   sm: rem(780px),
@@ -21,15 +21,18 @@ body {
   color: #000;
 }
 
+@font-face {
+  font-family: "Prestafont";
+  src: url("resources/Prestafont-Regular.woff2") format("woff"),
+}
+
 @import 'titles';
 @import 'header';
 @import 'footer';
 @import 'components';
 
 .main-content {
-  border-radius: 5px;
   background-color: #ffffff;
-  box-shadow: 1px 1px 3px 0 rgba(0, 0, 0, 0.53);
 }
 
 @import 'section_1';

diff --git a/components/AllContributors.vue b/components/AllContributors.vue
@@ -1,5 +1,5 @@
 <template>
-  <div>
+  <div id="all-contributors-outer">
     <div id="all-contributors" class="col-md-12">
       <Experts :contributors="experts"></Experts>
       <Enthusiasts :contributors="enthusiasts"></Enthusiasts>

diff --git a/components/Beginners.vue b/components/Beginners.vue
@@ -1,10 +1,10 @@
 <template>
-  <div>
-    <section-header
-      category="beginners"
-      title="Beginners (1 to 5 contrib.)"
-      :stars="1"
-    ></section-header>
+  <div class="contributors-section">
+    <div class="col-12">
+      <h2 class="text-center">Beginners</h2>
+      <div class="text-center date">(1 to 5 contrib.)</div>
+    </div>
+
     <ul id="newbie-contributors-list" class="col-md-12">
       <avatar-item
         v-for="contributor in contributors"
@@ -17,13 +17,11 @@
 </template>
 
 <script>
-  import TitleOfSection from './ui/TitleOfSection.vue'
   import AvatarItem from './ui/AvatarItem.vue'
 
   export default {
     name: 'Beginners',
     components: {
-      'section-header': TitleOfSection,
       'avatar-item': AvatarItem
     },
     props: {