init

theme/sumedia/_theme.scss

@@ -0,0 +1,83 @@
+:root {
+  --primary-color: #333;
+  --primary-color-ligher: #444;
+  --primary-color-darker: #252525;
+  --secondary-color: #da0;
+  --secondary-color-lighter: #db0;
+  --secondary-color-darker: #c90;
+  --tertiary-color: #460;
+  --tertiary-color-ligher: #680;
+  --tertiary-color-darker: #340;
+  --quarternary-color: #146;
+  --quarternary-color-lighter: #257;
+  --quarternary-color-darker: #035;
+  --bg-color: #fff;
+  --bg-color-inverted: #333;
+  --fg-color: #222;
+  --fg-color-inverted: #f5f5f5;
+  --link-color: #246;
+  --link-color-inverted: #da0;
+  --border-color: #222;
+  --border-color-inverted: #ccc;
+  --shadow-color: #333;
+  --primary-font: $primaryFont;
+  --heading-font: $headingFont;
+  --icon-font: $iconFont;
+}
+
+@media (prefers-color-scheme: dark) {
+  :root {
+    --bg-color: #333;
+    --bg-color-inverted: #fff;
+    --fg-color: #fff;
+    --fg-color-inverted: #222;
+    --link-color: #fc0;
+    --link-color-inverted: #246;
+  }
+}
+
+body {
+  margin: 0;
+  padding: 0;
+  font: var(--primary-font);
+  background: var(--bg-color);
+  color: var(--fg-color);
+  min-height: 100vh;
+  box-sizing: border-box;
+}
+
+h1, h2, h3, h4, h5, h6 {
+  margin: 0;
+  padding: 0;
+  font: var(--heading-font);
+}
+
+h1 {
+  font-size: 1.6rem;
+  line-height: 1.9rem;
+}
+
+h2 {
+  font-size: 1.6rem;
+  line-height: 1.6rem;
+}
+
+h3 {
+  font-size: 1.4rem;
+  line-height: 1.4rem;
+}
+
+h4 {
+  font-size: 1.2rem;
+  line-height: 1.2rem;
+}
+
+h5 {
+  font-size: 1rem;
+  line-height: 1rem;
+}
+
+h6 {
+  font-size: 1rem;
+  line-height: 1rem;
+}