cherry

styles/typography.scss

@@ -0,0 +1,81 @@
+// This file includes styles for text and font styles in the project.
+// It does not include color styles, which are defined in the 'variables_colors.scss' and 'global.scss' files.
+
+@import url("https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap");
+@import "variables_colors.scss";
+@import "variables.scss";
+
+html,
+body {
+  font-family: "Roboto", sans-serif;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  color: var(--color-font);
+  font-size: $font-size-default;
+  letter-spacing: $font-letter-spacing-default;
+}
+
+/* Headings */
+h1 {
+  font-size: 2rem;
+  font-weight: bold;
+}
+
+h2 {
+  font-size: 1.7rem;
+  font-weight: bold;
+}
+
+h3 {
+  font-size: 1.5rem;
+  font-weight: bold;
+}
+
+h4 {
+  font-size: 1.4rem;
+  font-weight: bold;
+}
+
+h5 {
+  font-size: 1.2rem;
+  font-weight: bold;
+}
+
+h6 {
+  font-size: 1.1rem;
+  font-weight: bold;
+}
+
+/* General Texts */
+a {
+  font-weight: bold;
+  text-decoration: none;
+  color: var(--color-font-link);
+  transition: color 50ms linear;
+
+  &:hover {
+    text-decoration: underline;
+    color: var(--color-font-link-hover) !important;
+  }
+
+  &:visited {
+    text-decoration: none;
+    color: var(--color-font-link);
+  }
+}
+
+.text-muted {
+  color: var(--color-font-muted);
+  font-weight: bold;
+  font-size: 0.8em;
+}
+
+.text-error {
+  font-weight: bold;
+  color: var(--color-error);
+}
+label {
+  font-weight: bold;
+  font-size: 0.9em;
+  letter-spacing: 2px;
+}