Fixed mobile view hero component and footer (#17)

Author: isaozler

toolkit/theme/design-system/build/icons/hourglass/svg.hourglass.tokens.json

@@ -5,7 +5,7 @@
         "$type": "icon",
         "$name": "hourglass",
         "$description": "",
-        "$value": "<svg height=\"24px\" width=\"24px\" viewBox=\"0 0 20 20\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"> <path d=\"M15.125 6.906a1.257 1.257 0 0 0 .5-1V3.125a1.25 1.25 0 0 0-1.25-1.25h-8.75a1.25 1.25 0 0 0-1.25 1.25v2.813a1.258 1.258 0 0 0 .5 1L6.289 8l2.672 2-4.086 3.063a1.258 1.258 0 0 0-.5 1v2.812a1.25 1.25 0 0 0 1.25 1.25h8.75a1.25 1.25 0 0 0 1.25-1.25v-2.781a1.257 1.257 0 0 0-.5-1L11.039 10l1.774-1.344 2.312-1.75Zm-9.5-3.781h8.75v2.781l-.453.344H6.039l-.414-.313V3.126Zm8.75 10.969v2.781h-8.75v-2.813l3.75-2.812v1.875a.625.625 0 1 0 1.25 0v-1.867l3.75 2.836Z\" fill=\"currentColor\"/> </svg>",
+        "$value": "<svg height=\"24px\" width=\"24px\" viewBox=\"0 0 30 30\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"> <path d=\"M21.052 4.708c.415.037.82.204 1.141.493l.132.132c.293.323.47.746.47 1.206v3.43a1.785 1.785 0 0 1-.128.654l-.096.201a1.875 1.875 0 0 1-.58.635l-.003.002L16.796 15l5.192 3.54.014.01.145.11.013.012c.163.14.304.31.411.504l.096.201c.083.206.127.428.129.654v3.43l-.01.195a1.8 1.8 0 0 1-.46 1.012l-.133.132c-.32.29-.726.455-1.141.492l-.179.008H8.923c-.417 0-.833-.13-1.177-.384l-.142-.116a1.821 1.821 0 0 1-.567-.978l-.026-.166-.002-.016L7 23.478v-3.483l.001-.021.014-.188.002-.018.03-.166c.038-.162.098-.319.179-.464l.01-.016.098-.155.01-.015.101-.128c.104-.12.223-.225.352-.314l.016-.012L12.986 15l-5.174-3.498-.015-.012a1.889 1.889 0 0 1-.453-.442l-.118-.186a1.799 1.799 0 0 1-.21-.63L7 10.008V6.539a1.8 1.8 0 0 1 .604-1.338l.142-.116c.343-.254.76-.385 1.177-.385h11.95l.179.008ZM9.139 20.182v2.98h11.52v-2.941l-4.691-3.198v1.823a1.07 1.07 0 0 1-.96 1.063l-.11.006a1.07 1.07 0 0 1-1.069-1.07v-1.832l-4.69 3.169Zm-.121.082h.002l.006-.006-.008.006Zm5.877-6.557 2.176-1.483H12.7l2.196 1.483Zm-5.756-3.89.395.268H20.21l.45-.307v-2.94H9.138v2.98Z\" fill=\"currentColor\"/> <path d=\"M21.052 4.708c.415.037.82.204 1.141.493l.132.132c.293.323.47.746.47 1.206v3.43a1.785 1.785 0 0 1-.128.654l-.096.201a1.875 1.875 0 0 1-.58.635l-.003.002L16.796 15l5.192 3.54.014.01.145.11.013.012c.163.14.304.31.411.504l.096.201c.083.206.127.428.129.654v3.43l-.01.195a1.8 1.8 0 0 1-.46 1.012l-.133.132c-.32.29-.726.455-1.141.492l-.179.008H8.923c-.417 0-.833-.13-1.177-.384l-.142-.116a1.821 1.821 0 0 1-.567-.978l-.026-.166-.002-.016L7 23.478v-3.483l.001-.021.014-.188.002-.018.03-.166c.038-.162.098-.319.179-.464l.01-.016.098-.155.01-.015.101-.128c.104-.12.223-.225.352-.314l.016-.012L12.986 15l-5.174-3.498-.015-.012a1.889 1.889 0 0 1-.453-.442l-.118-.186a1.799 1.799 0 0 1-.21-.63L7 10.008V6.539a1.8 1.8 0 0 1 .604-1.338l.142-.116c.343-.254.76-.385 1.177-.385h11.95l.179.008ZM9.139 20.182v2.98h11.52v-2.941l-4.691-3.198v1.823a1.07 1.07 0 0 1-.96 1.063l-.11.006a1.07 1.07 0 0 1-1.069-1.07v-1.832l-4.69 3.169Zm-.121.082h.002l.006-.006-.008.006Zm5.877-6.557 2.176-1.483H12.7l2.196 1.483Zm-5.756-3.89.395.268H20.21l.45-.307v-2.94H9.138v2.98Z\" fill=\"currentColor\"/> </svg>",
         "$dimensions": {
           "width": 24,
           "height": 24

toolkit/theme/design-system/build/icons/hourglass_slim/svg.hourglass_slim.tokens.json

@@ -0,0 +1,16 @@
+{
+  "kda": {
+    "icons": {
+      "hourglass_slim": {
+        "$type": "icon",
+        "$name": "hourglass_slim",
+        "$description": "",
+        "$value": "<svg height=\"24px\" width=\"24px\" viewBox=\"0 0 20 20\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"> <path d=\"M15.125 6.906a1.257 1.257 0 0 0 .5-1V3.125a1.25 1.25 0 0 0-1.25-1.25h-8.75a1.25 1.25 0 0 0-1.25 1.25v2.813a1.258 1.258 0 0 0 .5 1L6.289 8l2.672 2-4.086 3.063a1.258 1.258 0 0 0-.5 1v2.812a1.25 1.25 0 0 0 1.25 1.25h8.75a1.25 1.25 0 0 0 1.25-1.25v-2.781a1.257 1.257 0 0 0-.5-1L11.039 10l1.774-1.344 2.312-1.75Zm-9.5-3.781h8.75v2.781l-.453.344H6.039l-.414-.313V3.126Zm8.75 10.969v2.781h-8.75v-2.813l3.75-2.812v1.875a.625.625 0 1 0 1.25 0v-1.867l3.75 2.836Z\" fill=\"currentColor\"/> </svg>",
+        "$dimensions": {
+          "width": 24,
+          "height": 24
+        }
+      }
+    }
+  }
+}

toolkit/theme/design-system/build/tokens/kda-design-system.tokens.config.json

@@ -209,6 +209,7 @@
         "banner": {
           "title": {
             "font": {
+              "width": "auto",
               "size": "1.5rem",
               "weight": 500,
               "lineHeight": "1.5rem",
@@ -2452,7 +2453,8 @@
       "graphQL": "<svg height=\"24px\" width=\"24px\" xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 30 30\"> <path fill=\"currentColor\" d=\"m17.613 5.751 5.082 2.85a2.255 2.255 0 0 1 3.123-.077c.153.14.282.301.389.477.606 1.028.238 2.339-.82 2.928-.18.1-.372.175-.575.223v5.699c1.18.273 1.91 1.423 1.627 2.569-.05.204-.13.4-.239.581-.61 1.023-1.958 1.374-3.014.782a2.18 2.18 0 0 1-.542-.429l-5.052 2.832c.383 1.124-.245 2.335-1.402 2.706a2.275 2.275 0 0 1-.69.108c-1.216.001-2.203-.955-2.204-2.136 0-.205.03-.41.09-.609l-5.083-2.847a2.252 2.252 0 0 1-3.117.07 2.098 2.098 0 0 1-.072-3.026 2.224 2.224 0 0 1 1.075-.603l.001-5.699c-1.184-.276-1.913-1.433-1.628-2.584.048-.198.127-.389.23-.566.61-1.024 1.96-1.374 3.015-.782.183.101.35.228.495.377l5.086-2.85c-.347-1.133.32-2.322 1.484-2.657.203-.059.416-.088.628-.088 1.216-.001 2.203.954 2.204 2.134.001.209-.03.418-.091.617Zm-.53.877a.799.799 0 0 1-.06.058l6.654 11.19c.027-.009.058-.016.084-.023v-5.707c-1.179-.283-1.897-1.442-1.604-2.588.006-.024.012-.049.02-.072l-5.095-2.858Zm-3.106.059-.062-.06L8.82 9.479c.337 1.135-.337 2.318-1.505 2.645l-.078.021v5.708l.086.023 6.655-11.19-.002.001Zm2.138.507a2.285 2.285 0 0 1-1.228 0L8.234 18.383c.302.283.517.645.618 1.041h13.297c.1-.398.317-.761.622-1.044L16.115 7.194Zm1.016 16.227 5.06-2.838a1.715 1.715 0 0 1-.04-.142H8.85l-.022.083 5.087 2.852c.4-.404.962-.653 1.586-.653.646 0 1.226.269 1.63.698Z\"/> </svg>",
       "heart_filled": "<svg height=\"24px\" width=\"22.857142857142854px\" viewBox=\"0 0 20 21\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"> <path d=\"m10 4.34-.555-.578c-.947-.946-2.205-.988-3.508-.97A4.876 4.876 0 0 0 2.468 4.34a5.443 5.443 0 0 0-1.467 3.664 5.46 5.46 0 0 0 1.363 3.71L10 19.282l7.636-7.58a5.46 5.46 0 0 0 1.363-3.71 5.443 5.443 0 0 0-1.467-3.663 4.876 4.876 0 0 0-3.47-1.547c-1.302-.019-2.56.023-3.507.97L10 4.338Z\" fill=\"currentColor\"/> </svg>",
       "heart_outline": "<svg height=\"24px\" width=\"22.857142857142854px\" viewBox=\"0 0 20 21\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"> <path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M10.005 4.24a5.332 5.332 0 0 1 7.542 7.532l-.007.008L10 19.328l-7.54-7.54-.007-.007a5.332 5.332 0 0 1 7.542-7.532l.003-.002.007-.007Zm1.017 1.061L10.004 6.32 8.98 5.312a3.862 3.862 0 0 0-5.465 5.453L10 17.25l6.485-6.493A3.862 3.862 0 0 0 11.022 5.3Z\" fill=\"currentColor\" stroke=\"currentColor\" stroke-width=\".4\"/> <path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M10.005 4.24a5.332 5.332 0 0 1 7.542 7.532l-.007.008L10 19.328l-7.54-7.54-.007-.007a5.332 5.332 0 0 1 7.542-7.532l.003-.002.007-.007Zm1.017 1.061L10.004 6.32 8.98 5.312a3.862 3.862 0 0 0-5.465 5.453L10 17.25l6.485-6.493A3.863 3.863 0 0 0 11.022 5.3Z\" fill=\"currentColor\"/> </svg>",
-      "hourglass": "<svg height=\"24px\" width=\"24px\" viewBox=\"0 0 20 20\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"> <path d=\"M15.125 6.906a1.257 1.257 0 0 0 .5-1V3.125a1.25 1.25 0 0 0-1.25-1.25h-8.75a1.25 1.25 0 0 0-1.25 1.25v2.813a1.258 1.258 0 0 0 .5 1L6.289 8l2.672 2-4.086 3.063a1.258 1.258 0 0 0-.5 1v2.812a1.25 1.25 0 0 0 1.25 1.25h8.75a1.25 1.25 0 0 0 1.25-1.25v-2.781a1.257 1.257 0 0 0-.5-1L11.039 10l1.774-1.344 2.312-1.75Zm-9.5-3.781h8.75v2.781l-.453.344H6.039l-.414-.313V3.126Zm8.75 10.969v2.781h-8.75v-2.813l3.75-2.812v1.875a.625.625 0 1 0 1.25 0v-1.867l3.75 2.836Z\" fill=\"currentColor\"/> </svg>",
+      "hourglass": "<svg height=\"24px\" width=\"24px\" viewBox=\"0 0 30 30\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"> <path d=\"M21.052 4.708c.415.037.82.204 1.141.493l.132.132c.293.323.47.746.47 1.206v3.43a1.785 1.785 0 0 1-.128.654l-.096.201a1.875 1.875 0 0 1-.58.635l-.003.002L16.796 15l5.192 3.54.014.01.145.11.013.012c.163.14.304.31.411.504l.096.201c.083.206.127.428.129.654v3.43l-.01.195a1.8 1.8 0 0 1-.46 1.012l-.133.132c-.32.29-.726.455-1.141.492l-.179.008H8.923c-.417 0-.833-.13-1.177-.384l-.142-.116a1.821 1.821 0 0 1-.567-.978l-.026-.166-.002-.016L7 23.478v-3.483l.001-.021.014-.188.002-.018.03-.166c.038-.162.098-.319.179-.464l.01-.016.098-.155.01-.015.101-.128c.104-.12.223-.225.352-.314l.016-.012L12.986 15l-5.174-3.498-.015-.012a1.889 1.889 0 0 1-.453-.442l-.118-.186a1.799 1.799 0 0 1-.21-.63L7 10.008V6.539a1.8 1.8 0 0 1 .604-1.338l.142-.116c.343-.254.76-.385 1.177-.385h11.95l.179.008ZM9.139 20.182v2.98h11.52v-2.941l-4.691-3.198v1.823a1.07 1.07 0 0 1-.96 1.063l-.11.006a1.07 1.07 0 0 1-1.069-1.07v-1.832l-4.69 3.169Zm-.121.082h.002l.006-.006-.008.006Zm5.877-6.557 2.176-1.483H12.7l2.196 1.483Zm-5.756-3.89.395.268H20.21l.45-.307v-2.94H9.138v2.98Z\" fill=\"currentColor\"/> <path d=\"M21.052 4.708c.415.037.82.204 1.141.493l.132.132c.293.323.47.746.47 1.206v3.43a1.785 1.785 0 0 1-.128.654l-.096.201a1.875 1.875 0 0 1-.58.635l-.003.002L16.796 15l5.192 3.54.014.01.145.11.013.012c.163.14.304.31.411.504l.096.201c.083.206.127.428.129.654v3.43l-.01.195a1.8 1.8 0 0 1-.46 1.012l-.133.132c-.32.29-.726.455-1.141.492l-.179.008H8.923c-.417 0-.833-.13-1.177-.384l-.142-.116a1.821 1.821 0 0 1-.567-.978l-.026-.166-.002-.016L7 23.478v-3.483l.001-.021.014-.188.002-.018.03-.166c.038-.162.098-.319.179-.464l.01-.016.098-.155.01-.015.101-.128c.104-.12.223-.225.352-.314l.016-.012L12.986 15l-5.174-3.498-.015-.012a1.889 1.889 0 0 1-.453-.442l-.118-.186a1.799 1.799 0 0 1-.21-.63L7 10.008V6.539a1.8 1.8 0 0 1 .604-1.338l.142-.116c.343-.254.76-.385 1.177-.385h11.95l.179.008ZM9.139 20.182v2.98h11.52v-2.941l-4.691-3.198v1.823a1.07 1.07 0 0 1-.96 1.063l-.11.006a1.07 1.07 0 0 1-1.069-1.07v-1.832l-4.69 3.169Zm-.121.082h.002l.006-.006-.008.006Zm5.877-6.557 2.176-1.483H12.7l2.196 1.483Zm-5.756-3.89.395.268H20.21l.45-.307v-2.94H9.138v2.98Z\" fill=\"currentColor\"/> </svg>",
+      "hourglass_slim": "<svg height=\"24px\" width=\"24px\" viewBox=\"0 0 20 20\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"> <path d=\"M15.125 6.906a1.257 1.257 0 0 0 .5-1V3.125a1.25 1.25 0 0 0-1.25-1.25h-8.75a1.25 1.25 0 0 0-1.25 1.25v2.813a1.258 1.258 0 0 0 .5 1L6.289 8l2.672 2-4.086 3.063a1.258 1.258 0 0 0-.5 1v2.812a1.25 1.25 0 0 0 1.25 1.25h8.75a1.25 1.25 0 0 0 1.25-1.25v-2.781a1.257 1.257 0 0 0-.5-1L11.039 10l1.774-1.344 2.312-1.75Zm-9.5-3.781h8.75v2.781l-.453.344H6.039l-.414-.313V3.126Zm8.75 10.969v2.781h-8.75v-2.813l3.75-2.812v1.875a.625.625 0 1 0 1.25 0v-1.867l3.75 2.836Z\" fill=\"currentColor\"/> </svg>",
       "info": "<svg height=\"24px\" width=\"24px\" viewBox=\"0 0 20 20\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"> <path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M13.034 3H6.965C4.587 3 3 4.703 3 7.141v5.718C3 15.299 4.583 17 6.965 17h6.068C15.416 17 17 15.3 17 12.859V7.14C17 4.701 15.416 3 13.034 3ZM6.965 4.05h6.069c1.785 0 2.916 1.214 2.916 3.091v5.718c0 1.877-1.13 3.091-2.917 3.091H6.966c-1.786 0-2.916-1.214-2.916-3.091V7.14c0-1.874 1.134-3.091 2.915-3.091ZM10 6.818a.525.525 0 0 1 .072 1.045l-.079.005a.525.525 0 0 1-.07-1.045L10 6.818Zm-.007 2.221c.266 0 .486.198.52.454l.005.071v3.093a.525.525 0 0 1-1.045.072l-.005-.072V9.564c0-.29.235-.525.525-.525Z\" fill=\"currentColor\"/> </svg>",
       "info_filled": "<svg height=\"24px\" width=\"24px\" viewBox=\"0 0 20 20\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"> <path d=\"M10 18.333a8.333 8.333 0 1 1 0-16.666 8.333 8.333 0 1 1 0 16.666Zm-.834-9.166v5h1.667v-5H9.166Zm0-3.334V7.5h1.667V5.833H9.166Z\" fill=\"currentColor\"/> </svg>",
       "integration": {

toolkit/theme/design-system/build/tokens/kda-design-system.tokens.svg.json

@@ -1506,6 +1506,16 @@
         "$type": "icon",
         "$name": "hourglass",
         "$description": "",
+        "$value": "<svg height=\"24px\" width=\"24px\" viewBox=\"0 0 30 30\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"> <path d=\"M21.052 4.708c.415.037.82.204 1.141.493l.132.132c.293.323.47.746.47 1.206v3.43a1.785 1.785 0 0 1-.128.654l-.096.201a1.875 1.875 0 0 1-.58.635l-.003.002L16.796 15l5.192 3.54.014.01.145.11.013.012c.163.14.304.31.411.504l.096.201c.083.206.127.428.129.654v3.43l-.01.195a1.8 1.8 0 0 1-.46 1.012l-.133.132c-.32.29-.726.455-1.141.492l-.179.008H8.923c-.417 0-.833-.13-1.177-.384l-.142-.116a1.821 1.821 0 0 1-.567-.978l-.026-.166-.002-.016L7 23.478v-3.483l.001-.021.014-.188.002-.018.03-.166c.038-.162.098-.319.179-.464l.01-.016.098-.155.01-.015.101-.128c.104-.12.223-.225.352-.314l.016-.012L12.986 15l-5.174-3.498-.015-.012a1.889 1.889 0 0 1-.453-.442l-.118-.186a1.799 1.799 0 0 1-.21-.63L7 10.008V6.539a1.8 1.8 0 0 1 .604-1.338l.142-.116c.343-.254.76-.385 1.177-.385h11.95l.179.008ZM9.139 20.182v2.98h11.52v-2.941l-4.691-3.198v1.823a1.07 1.07 0 0 1-.96 1.063l-.11.006a1.07 1.07 0 0 1-1.069-1.07v-1.832l-4.69 3.169Zm-.121.082h.002l.006-.006-.008.006Zm5.877-6.557 2.176-1.483H12.7l2.196 1.483Zm-5.756-3.89.395.268H20.21l.45-.307v-2.94H9.138v2.98Z\" fill=\"currentColor\"/> <path d=\"M21.052 4.708c.415.037.82.204 1.141.493l.132.132c.293.323.47.746.47 1.206v3.43a1.785 1.785 0 0 1-.128.654l-.096.201a1.875 1.875 0 0 1-.58.635l-.003.002L16.796 15l5.192 3.54.014.01.145.11.013.012c.163.14.304.31.411.504l.096.201c.083.206.127.428.129.654v3.43l-.01.195a1.8 1.8 0 0 1-.46 1.012l-.133.132c-.32.29-.726.455-1.141.492l-.179.008H8.923c-.417 0-.833-.13-1.177-.384l-.142-.116a1.821 1.821 0 0 1-.567-.978l-.026-.166-.002-.016L7 23.478v-3.483l.001-.021.014-.188.002-.018.03-.166c.038-.162.098-.319.179-.464l.01-.016.098-.155.01-.015.101-.128c.104-.12.223-.225.352-.314l.016-.012L12.986 15l-5.174-3.498-.015-.012a1.889 1.889 0 0 1-.453-.442l-.118-.186a1.799 1.799 0 0 1-.21-.63L7 10.008V6.539a1.8 1.8 0 0 1 .604-1.338l.142-.116c.343-.254.76-.385 1.177-.385h11.95l.179.008ZM9.139 20.182v2.98h11.52v-2.941l-4.691-3.198v1.823a1.07 1.07 0 0 1-.96 1.063l-.11.006a1.07 1.07 0 0 1-1.069-1.07v-1.832l-4.69 3.169Zm-.121.082h.002l.006-.006-.008.006Zm5.877-6.557 2.176-1.483H12.7l2.196 1.483Zm-5.756-3.89.395.268H20.21l.45-.307v-2.94H9.138v2.98Z\" fill=\"currentColor\"/> </svg>",
+        "$dimensions": {
+          "width": 24,
+          "height": 24
+        }
+      },
+      "hourglass_slim": {
+        "$type": "icon",
+        "$name": "hourglass_slim",
+        "$description": "",
         "$value": "<svg height=\"24px\" width=\"24px\" viewBox=\"0 0 20 20\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"> <path d=\"M15.125 6.906a1.257 1.257 0 0 0 .5-1V3.125a1.25 1.25 0 0 0-1.25-1.25h-8.75a1.25 1.25 0 0 0-1.25 1.25v2.813a1.258 1.258 0 0 0 .5 1L6.289 8l2.672 2-4.086 3.063a1.258 1.258 0 0 0-.5 1v2.812a1.25 1.25 0 0 0 1.25 1.25h8.75a1.25 1.25 0 0 0 1.25-1.25v-2.781a1.257 1.257 0 0 0-.5-1L11.039 10l1.774-1.344 2.312-1.75Zm-9.5-3.781h8.75v2.781l-.453.344H6.039l-.414-.313V3.126Zm8.75 10.969v2.781h-8.75v-2.813l3.75-2.812v1.875a.625.625 0 1 0 1.25 0v-1.867l3.75 2.836Z\" fill=\"currentColor\"/> </svg>",
         "$dimensions": {
           "width": 24,

toolkit/theme/design-system/dist/css/breakpoints.css

@@ -5,6 +5,18 @@
  * Changes will be overwritten. Please update the source design tokens instead.
  */
 
+@media (max-width: 30rem) {
+  :root {
+    --kda-explorer-hero-banner-title-font-width: 100%;
+    --kda-explorer-hero-banner-title-font-size: 1.25rem;
+
+    &.dark {
+      --kda-explorer-hero-banner-title-font-width: 100%;
+      --kda-explorer-hero-banner-title-font-size: 1.25rem;
+    }
+  }
+}
+
 @media (min-width: 64rem) {
   :root {
     --kda-explorer-hero-banner-title-font-size: 1.75rem;