Make site bigger

Author: TixieSalander

src/sass/3-components/_buttons.scss

@@ -13,10 +13,10 @@ $btn-shadow: 0 .1rem .2rem #0f0f0f1a;
 .btn {
   display: inline-block;
   margin: 0;
-  padding: 1rem 2rem;
+  padding: 1.3rem 2rem;
   color: #fff;
   font-weight: 500;
-  font-size: 1.4rem;
+  font-size: 1.6rem;
   line-height: 1.16em;
   text-align: center;
   text-decoration: none !important;
@@ -103,7 +103,7 @@ $btn-shadow: 0 .1rem .2rem #0f0f0f1a;
 // --------------------------------------------------------------
 
 .btn--big {
-  padding: 1.5rem 3rem;
-  font-size: 1.6rem;
+  padding: 2.5rem 3rem;
+  font-size: 1.8rem;
   box-shadow: 0 .2rem .4rem #0f0f0f1a;
 }

src/sass/3-components/_forms.scss

@@ -88,9 +88,9 @@ input {
   max-width: 32rem;
   margin-top: 0;
   margin-bottom: 0;
-  padding: 1rem 1.5rem;
+  padding: 1.3rem 1.6rem;
   font-weight: 500;
-  font-size: 1.4rem;
+  font-size: 1.6rem;
   line-height: 1.14em;
   background: $input-background-color;
   border: $input-border;

src/sass/3-components/_pagination.scss

@@ -23,7 +23,8 @@
 .pagination__link,
 .pagination__link:link,
 .pagination__link:visited {
-  min-width: 4.4rem;
-  padding: 1rem 1.3rem;
+  min-width: 4.9rem;
+  padding: 1.3rem 1.6rem;
   font-weight: normal;
+  font-size: 1.05em;
 }

src/sass/4-base/_04-main.scss

@@ -11,7 +11,7 @@ body {
 }
 
 .container {
-  max-width: 102.4rem;
+  max-width: 130.4rem;
   margin-right: auto;
   margin-left: auto;
   padding-right: 1rem;

src/sass/4-base/_06-header.scss

@@ -4,7 +4,7 @@
 
 .header {
   margin-bottom: 2rem;
-  padding: 6rem 0;
+  padding: 5rem 0;
   text-align: center;
   border-top: 1rem solid $color-primary;
 }
@@ -23,8 +23,8 @@
   color: $color-primary;
   font-weight: bold;
   font-weight: 600;
-  font-size: 2.8rem;
-  line-height: 1.33em;
+  font-size: 4rem;
+  line-height: 1.2em;
   letter-spacing: .015em;
   border-radius: .3rem;
 }
@@ -36,7 +36,7 @@
 
 .header__slogan {
   color: darken(desaturate($color-primary, 40), 7);
-  font-size: 1.7rem;
+  font-size: 2rem;
 }
 
 // Search

src/sass/5-modules/plugin-list.scss

@@ -4,7 +4,7 @@
 
 .pluginList {
   display: grid;
-  grid-template-columns: repeat(auto-fill, minmax(min(25rem, 100%), 1fr));
+  grid-template-columns: repeat(auto-fill, minmax(min(27rem, 100%), 1fr));
   gap: 4rem;
   row-gap: 6rem;
   margin-bottom: 6rem;

src/sass/5-modules/plugin.scss

@@ -19,25 +19,25 @@
   margin: 2rem 0 1rem;
   color: #36303e;
   font-weight: normal;
-  font-size: 1.4em;
+  font-size: 1.3em;
   line-height: 1.3em;
 }
 
 .plugin__about {
   margin-bottom: 1.5rem;
   color: #595959;
-  font-size: 1.4rem;
+  font-size: .9em;
 }
 
 .plugin__link,
 .plugin__link:link,
 .plugin__link:visited {
   display: inline-block;
-  margin-right: .6rem;
-  margin-bottom: .6rem;
-  padding: .6rem 1.5rem;
+  margin-right: .4rem;
+  margin-bottom: .4rem;
+  padding: .8rem 1.6rem;
   color: darken($color-primary, 20);
-  font-size: 1.4rem;
+  font-size: 1.6rem;
   line-height: 1.16em;
   text-align: center;
   text-transform: capitalize;

src/sass/8-rwd/_rwd-xsmall.scss

@@ -1,8 +1,15 @@
+@use "sass:math";
+
 // -----------------------------------------------------------
 // == rwd -> xsmall
 // -----------------------------------------------------------
 
-@media (max-width: $xsmall) {  // Header
+@media (max-width: $xsmall) {
+  body {
+    font-size: math.div(14, 10) + em;
+  }
+
+  // Header
   // --------------------------------------------------------------
 
   .header {
@@ -13,7 +20,7 @@
     font-size: 2.1rem;
   }
 
-  .header_slogan {
+  .header__slogan {
     font-size: 1.5rem;
   }
 
@@ -25,6 +32,7 @@
 
   .header__search input,
   .header__search .btn {
+    padding: 1rem 1.5rem;
     font-size: 1.6rem;
   }
 
@@ -35,7 +43,9 @@
   .header__search .btn {
     flex-shrink: 0;
     margin-left: .3rem;
-  }  // Plugins
+  }
+
+  // Plugins
   // --------------------------------------------------------------
 
   .pluginList {
@@ -64,8 +74,24 @@
     margin: 0;
     margin-top: -.5rem;
     margin-bottom: .5rem;
-    font-size: 1.3em;
-  }  // Pagination
+
+    // font-size: 1em;
+  }
+
+  .plugin__about {
+    font-size: 1em;
+  }
+
+  .plugin__link,
+  .plugin__link:link,
+  .plugin__link:visited {
+    margin-right: .6rem;
+    margin-bottom: .6rem;
+    padding: .6rem 1.5rem;
+    font-size: 1.4rem;
+  }
+
+  // Pagination
   // --------------------------------------------------------------
 
   .pagination {

src/sass/_config.scss

@@ -5,7 +5,7 @@
 // base
 // --------------------------------------------------------------
 
-$base-font       : 15; // px value (without unit), will be converted in em
+$base-font       : 18; // px value (without unit), will be converted in em
 $line-height     : 1.5;
 
 $fontstack1      : "Helvetica Neue", helvetica, arial, sans-serif;