jbx 2.4.0 → 2.6.0

package/{style.css → src/style.css}

@@ -9,19 +9,23 @@ html {
 
 :root {
   --size: 16px;
-  --base-font-size: 24px;
-  --base-radius: #95a5a6;
+  --font-size: 20px;
+  --font-size-small: 17px;
+  --radius-small: 2px;
 }
 
 @media screen and (max-width: 1200px) {
   :root {
-    --base-font-size: 21px;
+    --font-size: 18px;
+    --font-size-small: 16px;
+    --size: 14px;
   }
 }
 
 @media screen and (max-width: 600px) {
   :root {
-    --base-font-size: 18px;
+    --font-size: 16px;
+    --font-size-small: 14px;
   }
 }
 
@@ -46,12 +50,43 @@ body {
   color: #000;
 }
 
+h1,
+h2,
+h3,
+h4 {
+  line-height: 1;
+  padding: 0;
+  font-variation-settings: 'wdth' 107;
+  color: var(--base-font-color-bright);
+  font-weight: 650;
+}
+
+strong,
+b {
+  font-weight: 500;
+}
+
+.jbx-h1 {
+  font-size: calc(var(--font-size) * 2);
+  font-weight: 700;
+}
+.jbx-h2 {
+  font-size: calc(var(--font-size) * 1.25);
+}
+.jbx-h3 {
+  font-size: calc(var(--font-size) * 1);
+}
+.jbx-h4 {
+  font-size: var(--font-size-small);
+  text-transform: uppercase;
+}
+
 /* base text */
 html,
 body,
 .jbx-button,
 .jbx-input {
-  font-size: var(--base-font-size);
+  font-size: var(--font-size);
   line-height: 1;
 }
 
@@ -89,6 +124,8 @@ body,
 }
 
 .jbx-button {
+  color: #000;
+  border-radius: var(--radius-small);
   appearance: none;
   user-select: none;
   cursor: pointer;
@@ -98,53 +135,85 @@ body,
   padding: 0 calc(var(--size) / 2);
   border: none;
   height: calc(var(--size) * 2.5);
+  transition: top 0.1s, left 0.1s, box-shadow 0.05s;
 }
 .jbx-button:active {
-  top: 1;
-  left: 1;
-  box-shadow: 2px 2px 0 #ccc;
+  top: 1px;
+  left: 1px;
+  box-shadow: 1px 1px 0 #ccc;
 }
 
+/* LINKS */
 .jbx-a {
+  cursor: pointer;
   color: #000;
-  box-shadow: var(--accent-color) 0 2px 0, inset var(--accent-color) 0 -2px 0;
-  font-weight: 700;
+  box-shadow: #0002 0 2px 0;
+  font-weight: 500;
   text-decoration: none;
 }
-.jbx-a:hover {
-  color: '#34495e';
+.jbx-a::after {
+  content: '↗';
+  color: #0004;
+  font-size: var(--font-size-small);
+  position: relative;
+  top: -1px;
+  right: -1px;
+  transition: top 0.3s, right 0.3s, color 0.3s;
 }
-
-.jbx-h1,
-.jbx-h2,
-.jbx-h3,
-.jbx-h4 {
-  line-height: 1;
-  padding: 0;
-  margin: 0;
-  font-weight: 600;
+.jbx-a:hover,
+.jbx-block-link:hover .jbx-a {
+  box-shadow: var(--accent-color) 0 2px 0;
+}
+.jbx-a:hover::after,
+.jbx-block-link:hover .jbx-a::after {
+  top: -3px;
+  right: -3px;
+  color: var(--accent-color);
 }
 
-.jbx-h4 {
-  font-size: calc(var(--base-font-size));
-  letter-spacing: -0.11px;
+.jbx-block-link {
+  min-width: 300px;
+  flex: 1;
+  text-decoration: none;
+  color: #000;
+  display: inline-block;
+  padding: var(--size);
 }
-.jbx-h3 {
-  font-size: calc(var(--base-font-size) * 1.25);
-  letter-spacing: -0.22px;
+a.jbx-a::before,
+.jbx-block-link::before {
+  content: '';
+  display: block;
+  position: absolute;
+  background-color: #ecf0f1;
+  z-index: -1;
+  transition: transform 0.2s, opacity 0.2s;
+  transform: scale(0.98) translatey(4px);
+  opacity: 0;
+  top: -4px;
+  left: -6px;
+  right: -6px;
+  bottom: -4px;
 }
-.jbx-h2 {
-  font-size: calc(var(--base-font-size) * 1.5);
-  letter-spacing: -0.33px;
+.jbx-block-link::before {
+  border-radius: 16px;
 }
-.jbx-h1 {
-  font-size: calc(var(--base-font-size) * 2.5);
-  letter-spacing: -1px;
+a.jbx-a::before {
+  border-radius: 8px;
+}
+a.jbx-a:hover::before,
+.jbx-block-link:hover::before {
+  transform: scale(1) translatey(0);
+  opacity: 1;
 }
 
+.jbx-a {
+  display: inline-block;
+}
+
+/* /LINKS */
+
 .jbx-small-text {
-  font-size: calc(var(--base-font-size) * 0.8);
-  line-height: calc(var(--base-font-size) * 0.6);
+  font-size: var(--font-size-small);
 }
 
 .jbx-container {
@@ -171,6 +240,10 @@ body,
   flex-direction: column;
 }
 
+.jbx-text {
+  line-height: 1.4;
+}
+
 .jbx-input {
   color: #777;
   -webkit-text-fill-color: #777;
@@ -179,7 +252,7 @@ body,
   display: block;
   appearance: none;
   border: none;
-  border-radius: 0;
+  border-radius: var(--radius-small);
   height: calc(var(--size) * 2.5);
   background-color: #eee;
   padding: 0 calc(var(--size) * 0.5);
@@ -189,7 +262,6 @@ body,
 .jbx-dropzone {
   height: 120px;
   flex: 1;
-  max-width: 320px;
   display: flex;
   text-align: center;
   align-items: center;
@@ -218,29 +290,14 @@ body,
   cursor: pointer;
 }
 
-/*export const Dropzone = Styled.div({
-
-
-
-  },
-  '& input': {
-    position: 'absolute',
-    top: '0',
-    left: '0',
-    height: '100%',
-    width: '100%',
-    opacity: '0',
-    cursor: 'pointer'
-  }
-});*/
-
 .jbx-range {
   flex: 1;
   width: 100%;
   appearance: none;
-  background-color: var(--accent-color);
+  background-color: #bdc3c780;
   height: var(--size);
   border-radius: 0;
+  border-radius: var(--radius-small);
 }
 
 .jbx-range::-webkit-slider-thumb {
@@ -252,6 +309,7 @@ body,
   width: var(--size);
   background-color: #000;
   border: none;
+  border-radius: var(--radius-small);
 }
 .jbx-range::-moz-range-thumb {
   appearance: none;
@@ -261,10 +319,41 @@ body,
   width: var(--size);
   background-color: #000;
   border: none;
+  border-radius: var(--radius-small);
 }
 .jbx-range::-webkit-slider-runnable-track {
   appearance: none;
+  /*background-color: yellow;*/
 }
 .jbx-range:focus {
   outline: none;
 }
+
+.jbx-bullet-container {
+  display: inline-block;
+  margin: -8px 4px -8px 0;
+}
+
+.jbx-bullet {
+  border: 1.5px solid #000;
+  color: #000;
+  text-align: center;
+  line-height: 0.99;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: calc(var(--font-size-small) - 3px);
+  height: calc(var(--size) * 1.25);
+  width: calc(var(--size) * 1.25);
+  border-radius: 100%;
+  top: -2px;
+  font-weight: 500;
+}
+
+.jbx-hr {
+  margin: calc(var(--size) * 2) auto;
+  width: 38.2%;
+  border-radius: 0;
+  border: none;
+  border-top: 2px solid #ecf0f1;
+}

package/tsconfig.json

@@ -0,0 +1,20 @@
+{
+  "compilerOptions": {
+    "target": "es2022",
+    "lib": ["dom", "dom.iterable", "esnext"],
+    "allowJs": true,
+    "skipLibCheck": true,
+    "strict": true,
+    "forceConsistentCasingInFileNames": true,
+    "noEmit": true,
+    "esModuleInterop": true,
+    "module": "esnext",
+    "moduleResolution": "node",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "jsx": "preserve",
+    "incremental": true
+  },
+  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"],
+  "exclude": ["node_modules"]
+}