Init

themes/agico-hugo/assets/scss/_typography.scss

@@ -0,0 +1,162 @@
+/* 400 normal */
+@font-face {
+  font-family: "Work Sans";
+  src: url("/fonts/WorkSans-Regular.woff2") format("woff2");
+  font-weight: 400;
+  font-style: normal;
+  font-display: swap;
+}
+
+/* 400 italic */
+@font-face {
+  font-family: "Work Sans";
+  src: url("/fonts/WorkSans-Italic.woff2") format("woff2");
+  font-weight: 400;
+  font-style: italic;
+  font-display: swap;
+}
+
+/* 600 (Semibold) */
+@font-face {
+  font-family: "Work Sans";
+  src: url("/fonts/WorkSans-SemiBold.woff2") format("woff2");
+  font-weight: 600;
+  font-style: normal;
+  font-display: swap;
+}
+
+/* 800 (ExtraBold) */
+@font-face {
+  font-family: "Work Sans";
+  src: url("/fonts/WorkSans-ExtraBold.woff2") format("woff2");
+  font-weight: 800;
+  font-style: normal;
+  font-display: swap;
+}
+
+:root {
+  --font-primary: "Work Sans", system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
+}
+
+
+body {
+  line-height: 1.6;
+  //font-family: $font_secondary;
+  -webkit-font-smoothing: antialiased;
+  font-size: 16px;
+  color: $text-color;
+  font-family: var(--font-primary);
+  font-synthesis: weight style;
+}
+
+p,
+.paragraph {
+  font-weight: 400;
+  color: $text-color;
+  font-size: 16px;
+  line-height: 1.6;
+  transition: 0.3s;
+  //font-family: $font_secondary;
+}
+
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+  color: $text-dark;
+  //font-family: $font-primary;
+ /* text-transform: capitalize; */
+  font-weight: 800;
+  line-height: 1.2;
+  transition: 0.3s ease;
+}
+
+h6 {
+  /* padding-top:10px; */
+}
+
+h1,
+.h1 {
+  font-size: 40px;
+}
+
+// List in descending order to prevent extra sort function
+$type-levels: 6, 5, 4, 3, 2;
+
+@each $level in $type-levels {
+  $font-size: $font-size * $font-scale;
+
+  // Output heading styles
+  h#{$level},
+  .h#{$level} {
+    font-size: $font-size;
+    line-height: calc(2px + 2ex + 2px);
+    margin-bottom: 0.65em;
+
+    // responsive for h1, h2, h3, h4
+    &:not(h5, .h5, h6, .h6) {
+      @include desktop {
+        font-size: calc(#{$font-size} * 0.9);
+        margin-bottom: 0.55em;
+      }
+
+      @include tablet {
+        font-size: calc(#{$font-size} * 0.8);
+      }
+    }
+
+    // responsive for h5, h6
+    @include desktop {
+      font-size: calc(#{$font-size} * 0.95);
+      margin-bottom: 0.55em;
+    }
+
+    @include tablet {
+      font-size: calc(#{$font-size} * 0.9);
+    }
+  }
+}
+
+.text-white a,
+.text-white a:hover,
+.text-white a:focus {
+  color: $white;
+  text-decoration: underline;
+}
+
+input[type="checkbox"] {
+  width: 20px;
+  height: 20px;
+  border: 2px solid #ccc;
+  border-radius: 4px;
+  background: #fff;
+  cursor: pointer;
+  position: relative;
+  transition: all 0.15s ease-in-out;
+  border-radius: 20px;
+}
+
+input[type="checkbox"]:hover,
+input[type="checkbox"]:focus {
+  border-color: #207495;
+  outline: none;
+}
+
+input[type="checkbox"]:checked {
+  background-color: #207495;
+  border-color: #207495;
+}
+
+input[type="checkbox"]:checked::after {
+  content: "";
+  position: absolute;
+  top: 1px;
+  left: 4px;
+  width: 8px;
+  height: 12px;
+  border: solid #fff;
+  border-width: 0 2px 2px 0;
+  transform: rotate(45deg);
+}