Merge pull request #428 from yu23ki14/feature/fix-425

Feature/fix 425
codeforjapan · Jan 2, 2024 · b7406f7 · b7406f7
2 parents 6dc50aa + 3f0c74c
commit b7406f7
Show file tree

Hide file tree

Showing 7 changed files with 213 additions and 166 deletions.
diff --git a/.vscode/settings.json b/.vscode/settings.json
@@ -1,3 +1,4 @@
 {
-  "eslint.validate": []
-}
+  "eslint.validate": [],
+  "prettier.configPath": "./.prettierrc.yaml"
+}
diff --git a/assets/sass/_index.scss b/assets/sass/_index.scss
@@ -13,8 +13,8 @@
 }
 
 .index-item {
-  padding: .8em;
-  background-color: rgba(0,0,0,.2);
+  padding: 0.8em;
+  background-color: rgba(0, 0, 0, 0.2);
   border-radius: 15px;
   a {
     color: $color-base;
@@ -29,6 +29,7 @@
 .index-link-inner {
   display: grid;
   grid-template-rows: max-content;
+  grid-template-columns: auto;
   height: 100%;
   background-color: #fff;
   border-radius: 10px;
@@ -42,19 +43,19 @@
   display: flex;
   align-items: center;
   justify-content: space-between;
-  padding: .5em;
+  padding: 0.5em;
 }
 
 .index-arrow-icon {
   font-size: 2em;
-  padding-left: .5em;
+  padding-left: 0.5em;
 }
 
 .index-item-sns {
   display: flex;
-  padding: .5em 0;
+  padding: 0.5em 0;
   > div {
-    margin-right: .5em;
+    margin-right: 0.5em;
   }
 }
 
@@ -67,6 +68,6 @@
   display: flex;
   justify-content: center;
   > div {
-    margin: 0 .5em;
+    margin: 0 0.5em;
   }
 }
diff --git a/assets/sass/_sub.scss b/assets/sass/_sub.scss
@@ -5,7 +5,7 @@
   @include bp(md) {
     display: grid;
     grid-template-columns: 2fr 2fr;
-    justify-content: center;
+    grid-template-rows: auto;
     width: 40%;
   }
 }
@@ -20,13 +20,13 @@
   line-height: 1.1;
   margin: 0.5em 1em 0.5em 0;
   @include bp(md) {
-    padding: .5em 1em;
+    padding: 0.5em 1em;
     margin-left: 1em;
     margin-bottom: 0.5em;
     box-shadow: 2px 2px 5px $color-alpha-black;
   }
   i {
-    padding-right: .2em;
+    padding-right: 0.2em;
   }
   a {
     color: inherit;

diff --git a/assets/sass/vendor/gridlex/_gridlex-classes.scss b/assets/sass/vendor/gridlex/_gridlex-classes.scss
@@ -1,30 +1,33 @@
+// Add math functions to use division
+@use "sass:math";
+
 //************************
 //    CLASSES
 //************************
 // GRID
 [#{$gl-attributeName}~="#{$gl-gridName}"],
 [#{$gl-attributeName}*="#{$gl-gridName}-"],
-[#{$gl-attributeName}*="#{$gl-gridName}_"]{
+[#{$gl-attributeName}*="#{$gl-gridName}_"] {
   box-sizing: border-box;
   display: flex;
   flex-flow: row wrap;
-  margin: 0 (-$gl-gutter/2);
+  margin: 0 math.div(-$gl-gutter, 2);
 }
 // COLS
 [#{$gl-attributeName}~="#{$gl-colName}"],
 [#{$gl-attributeName}*="#{$gl-colName}-"],
-[#{$gl-attributeName}*="#{$gl-colName}_"]{
+[#{$gl-attributeName}*="#{$gl-colName}_"] {
   box-sizing: border-box;
-  padding: 0 ($gl-gutter/2) $gl-gutter-vertical;
+  padding: 0 math.div($gl-gutter, 2) $gl-gutter-vertical;
   max-width: 100%;
 }
 // JUST "COL" & "COL_"
 [#{$gl-attributeName}~="#{$gl-colName}"],
-[#{$gl-attributeName}*="#{$gl-colName}_"]{
+[#{$gl-attributeName}*="#{$gl-colName}_"] {
   flex: 1 1 0%;
 }
 // JUST "COL-"
-[#{$gl-attributeName}*="#{$gl-colName}-"]{
+[#{$gl-attributeName}*="#{$gl-colName}-"] {
   flex: none;
 }
 
@@ -37,7 +40,7 @@
 [#{$gl-attributeName}*="#{$gl-gridName}-"][#{$gl-attributeName}*="#{$gl-colName}_"],
 [#{$gl-attributeName}*="#{$gl-gridName}_"][#{$gl-attributeName}~="#{$gl-colName}"],
 [#{$gl-attributeName}*="#{$gl-gridName}_"][#{$gl-attributeName}*="#{$gl-colName}-"],
-[#{$gl-attributeName}*="#{$gl-gridName}_"][#{$gl-attributeName}*="#{$gl-colName}_"]{
+[#{$gl-attributeName}*="#{$gl-gridName}_"][#{$gl-attributeName}*="#{$gl-colName}_"] {
   margin: 0;
   padding: 0;
 }
@@ -46,45 +49,46 @@
     HELPERS SUFFIXES
 *************************/
 // FOR GRID
-[#{$gl-attributeName}*="#{$gl-gridName}-"]{
-// No spacing between cols : noGutter
-  &[#{$gl-attributeName}*="-noGutter"]{
+[#{$gl-attributeName}*="#{$gl-gridName}-"] {
+  // No spacing between cols : noGutter
+  &[#{$gl-attributeName}*="-noGutter"] {
     margin: 0;
     > [#{$gl-attributeName}~="#{$gl-colName}"],
-    > [#{$gl-attributeName}*="#{$gl-colName}-"]{
+    > [#{$gl-attributeName}*="#{$gl-colName}-"] {
       padding: 0;
     }
   }
 
-// No Wrapping
-  &[#{$gl-attributeName}*="-noWrap"]{
+  // No Wrapping
+  &[#{$gl-attributeName}*="-noWrap"] {
     flex-wrap: nowrap;
   }
-// Horizontal alignment on center
-  &[#{$gl-attributeName}*="-center"]{
+  // Horizontal alignment on center
+  &[#{$gl-attributeName}*="-center"] {
     justify-content: center;
+    align-self: center;
   }
-// Horizontal alignment on right
-  &[#{$gl-attributeName}*="-right"]{
+  // Horizontal alignment on right
+  &[#{$gl-attributeName}*="-right"] {
     justify-content: flex-end;
     align-self: flex-end;
     margin-left: auto;
   }
-// Vertical alignment on top
-  &[#{$gl-attributeName}*="-top"]{
+  // Vertical alignment on top
+  &[#{$gl-attributeName}*="-top"] {
     align-items: flex-start;
   }
-// Vertical alignment on middle
-  &[#{$gl-attributeName}*="-middle"]{
+  // Vertical alignment on middle
+  &[#{$gl-attributeName}*="-middle"] {
     align-items: center;
   }
-// Vertical alignment on bottom
-  &[#{$gl-attributeName}*="-bottom"]{
+  // Vertical alignment on bottom
+  &[#{$gl-attributeName}*="-bottom"] {
     align-items: flex-end;
   }
 
-// Orders
-  &[#{$gl-attributeName}*="-reverse"]{
+  // Orders
+  &[#{$gl-attributeName}*="-reverse"] {
     flex-direction: row-reverse;
   }
   &[#{$gl-attributeName}*="-column"] {
@@ -93,50 +97,56 @@
       flex-basis: auto;
     }
   }
-  &[#{$gl-attributeName}*="-column-reverse"]{
+  &[#{$gl-attributeName}*="-column-reverse"] {
     flex-direction: column-reverse;
   }
 
-// Spaces between and around cols
-  &[#{$gl-attributeName}*="-spaceBetween"]{
+  // Spaces between and around cols
+  &[#{$gl-attributeName}*="-spaceBetween"] {
     justify-content: space-between;
   }
-  &[#{$gl-attributeName}*="-spaceAround"]{
+  &[#{$gl-attributeName}*="-spaceAround"] {
     justify-content: space-around;
   }
 
-// Equal heights columns
-  &[#{$gl-attributeName}*="-equalHeight"] > [#{$gl-attributeName}~="#{$gl-colName}"],
-  &[#{$gl-attributeName}*="-equalHeight"] > [#{$gl-attributeName}*="#{$gl-colName}-"],
-  &[#{$gl-attributeName}*="-equalHeight"] > [#{$gl-attributeName}*="#{$gl-colName}_"]{
+  // Equal heights columns
+  &[#{$gl-attributeName}*="-equalHeight"]
+    > [#{$gl-attributeName}~="#{$gl-colName}"],
+  &[#{$gl-attributeName}*="-equalHeight"]
+    > [#{$gl-attributeName}*="#{$gl-colName}-"],
+  &[#{$gl-attributeName}*="-equalHeight"]
+    > [#{$gl-attributeName}*="#{$gl-colName}_"] {
     align-self: stretch;
-    > *{
+    > * {
       height: 100%;
     }
   }
-// Removes the padding-bottom
-  &[#{$gl-attributeName}*="-noBottom"] > [#{$gl-attributeName}~="#{$gl-colName}"],
-  &[#{$gl-attributeName}*="-noBottom"] > [#{$gl-attributeName}*="#{$gl-colName}-"],
-  &[#{$gl-attributeName}*="-noBottom"] > [#{$gl-attributeName}*="#{$gl-colName}_"]{
+  // Removes the padding-bottom
+  &[#{$gl-attributeName}*="-noBottom"]
+    > [#{$gl-attributeName}~="#{$gl-colName}"],
+  &[#{$gl-attributeName}*="-noBottom"]
+    > [#{$gl-attributeName}*="#{$gl-colName}-"],
+  &[#{$gl-attributeName}*="-noBottom"]
+    > [#{$gl-attributeName}*="#{$gl-colName}_"] {
     padding-bottom: 0;
   }
 }
 
 // FOR COL
-[#{$gl-attributeName}*="#{$gl-colName}-"]{
-  &[#{$gl-attributeName}*="-top"]{
+[#{$gl-attributeName}*="#{$gl-colName}-"] {
+  &[#{$gl-attributeName}*="-top"] {
     align-self: flex-start;
   }
-  &[#{$gl-attributeName}*="-middle"]{
+  &[#{$gl-attributeName}*="-middle"] {
     align-self: center;
   }
-  &[#{$gl-attributeName}*="-bottom"]{
+  &[#{$gl-attributeName}*="-bottom"] {
     align-self: flex-end;
   }
-  &[#{$gl-attributeName}*="-first"]{
+  &[#{$gl-attributeName}*="-first"] {
     order: -1;
   }
-  &[#{$gl-attributeName}*="-last"]{
+  &[#{$gl-attributeName}*="-last"] {
     order: 1;
   }
 }
@@ -146,7 +156,7 @@
 @include makeGridByNumber(#{$gl-gridName});
 @each $mq-key, $mq-value in $gl-mq-list {
   @include bp(#{$mq-key}) {
-  //@media #{$mq-value} {
+    //@media #{$mq-value} {
     @include makeGridByNumber(_#{$mq-key});
   }
 }
@@ -157,7 +167,6 @@
 @include makeCol(#{$gl-colName});
 @include makeOff(off);
 
-
 @each $mq-key, $mq-value in $gl-mq-list {
   @include bp(#{$mq-key}) {
     @include makeCol(_#{$mq-key});
@@ -166,8 +175,6 @@
   }
 }
 
-
-
 /************************
     HIDING COLS
 *************************/

diff --git a/assets/sass/vendor/gridlex/_gridlex-mixins.scss b/assets/sass/vendor/gridlex/_gridlex-mixins.scss
@@ -1,3 +1,6 @@
+// Add math functions to use division
+@use "sass:math";
+
 // Make the breakpoints
 @mixin bp($breakpoint) {
   $query: map-get($gl-mq-list, $breakpoint);
@@ -9,64 +12,69 @@
 }
 
 // Function to generate the grid by number
-@mixin makeGridByNumber($grid)
-{
+@mixin makeGridByNumber($grid) {
   @for $i from 1 through $gl-colCount {
-      [#{$gl-attributeName}*="#{$grid}-#{$i}"] > [#{$gl-attributeName}~="#{$gl-colName}"],
-      [#{$gl-attributeName}*="#{$grid}-#{$i}"] > [#{$gl-attributeName}*="#{$gl-colName}-"],
-      [#{$gl-attributeName}*="#{$grid}-#{$i}"] > [#{$gl-attributeName}*="#{$gl-colName}_"] {
-        $fraction: 1 / $i;
+    [#{$gl-attributeName}*="#{$grid}-#{$i}"]
+      > [#{$gl-attributeName}~="#{$gl-colName}"],
+    [#{$gl-attributeName}*="#{$grid}-#{$i}"]
+      > [#{$gl-attributeName}*="#{$gl-colName}-"],
+    [#{$gl-attributeName}*="#{$grid}-#{$i}"]
+      > [#{$gl-attributeName}*="#{$gl-colName}_"] {
+      $fraction: math.div(1, $i);
 
-        flex-basis: map-get($gl-colFractions, $fraction);
-        max-width: map-get($gl-colFractions, $fraction);
-      }
+      flex-basis: map-get($gl-colFractions, $fraction);
+      max-width: map-get($gl-colFractions, $fraction);
+    }
   }
 }
 
 // Function to generate the grid by columns
-@mixin makeCol($col)
-{
+@mixin makeCol($col) {
   [#{$gl-attributeName}~="#{$gl-gridName}"],
   [#{$gl-attributeName}*="#{$gl-gridName}-"],
   [#{$gl-attributeName}*="#{$gl-gridName}_"] {
-
     @for $i from 1 through $gl-colCount {
-      > [#{$gl-attributeName}*="#{$col}-#{$i}"]{ flex-basis: map-get($gl-colPortions, $i); max-width: map-get($gl-colPortions, $i); }
+      > [#{$gl-attributeName}*="#{$col}-#{$i}"] {
+        flex-basis: map-get($gl-colPortions, $i);
+        max-width: map-get($gl-colPortions, $i);
+      }
     }
   }
 }
 
 // Function to generate the -first & -last base on mq keys (as _lg-first)
-@mixin makeFirstLast($mq)
-{
+@mixin makeFirstLast($mq) {
   [#{$gl-attributeName}~="#{$gl-gridName}"],
   [#{$gl-attributeName}*="#{$gl-gridName}-"],
   [#{$gl-attributeName}*="#{$gl-gridName}_"] {
-    [#{$gl-attributeName}*="#{$mq}-first"]{
+    [#{$gl-attributeName}*="#{$mq}-first"] {
       order: -1;
     }
-    [#{$gl-attributeName}*="#{$mq}-last"]{
+    [#{$gl-attributeName}*="#{$mq}-last"] {
       order: 1;
     }
   }
 }
 
 // Function to generate the offset
-@mixin makeOff($off)
-{
+@mixin makeOff($off) {
   [#{$gl-attributeName}~="#{$gl-gridName}"],
   [#{$gl-attributeName}*="#{$gl-gridName}-"],
   [#{$gl-attributeName}*="#{$gl-gridName}_"] {
     @for $i from 0 through $gl-colCount - 1 {
-      > [data-push-left*="#{$off}-#{$i}"]{ margin-left: map-get($gl-colPortions, $i); }
+      > [data-push-left*="#{$off}-#{$i}"] {
+        margin-left: map-get($gl-colPortions, $i);
+      }
     }
   }
 
   [#{$gl-attributeName}~="#{$gl-gridName}"],
   [#{$gl-attributeName}*="#{$gl-gridName}-"],
   [#{$gl-attributeName}*="#{$gl-gridName}_"] {
     @for $i from 0 through $gl-colCount - 1 {
-      > [data-push-right*="#{$off}-#{$i}"]{ margin-right: map-get($gl-colPortions, $i); }
+      > [data-push-right*="#{$off}-#{$i}"] {
+        margin-right: map-get($gl-colPortions, $i);
+      }
     }
   }
-}
+}