change scss

Author: Waldenth

_styles/-theme.scss

@@ -3,25 +3,23 @@
 
 // colors
 [data-dark="false"] {
-  --primary: #0795d9;
+  --primary: #0ea5e9;
   --secondary: #7dd3fc;
   --text: #000000;
   --background: #ffffff;
   --background-alt: #fafafa;
   --light-gray: #e0e0e0;
   --gray: #808080;
-  --dark-gray: #404040;
   --overlay: #00000020;
 }
 [data-dark="true"] {
-  --primary: #0795d9;
+  --primary: #0ea5e9;
   --secondary: #075985;
   --text: #ffffff;
   --background: #181818;
   --background-alt: #1c1c1c;
   --light-gray: #404040;
   --gray: #808080;
-  --dark-gray: #b0b0b0;
   --overlay: #ffffff10;
 }
 
@@ -33,6 +31,7 @@
   --code: "Roboto Mono", monospace;
 
   // font sizes
+  --medium: 1rem;
   --large: 1.2rem;
   --xl: 1.4rem;
   --xxl: 1.6rem;
@@ -45,10 +44,8 @@
 
   // text line spacing
   --spacing: 2;
-  --compact: 1.5;
 
   // effects
   --rounded: 3px;
   --shadow: 0 0 10px 0 var(--overlay);
-  --transition: 0.2s ease;
 }

_styles/alert.scss

@@ -28,10 +28,10 @@
   font-size: var(--large);
 }
 
-.alert-content > :first-child {
+.alert-content > *:first-child {
   margin-top: 0;
 }
 
-.alert-content > :last-child {
+.alert-content > *:last-child {
   margin-bottom: 0;
 }

_styles/all.scss

@@ -1,11 +1,7 @@
 ---
 ---
 
-*,
-::before,
-::after {
+* {
   box-sizing: border-box;
-  -moz-text-size-adjust: none;
-  -webkit-text-size-adjust: none;
-  text-size-adjust: none;
+  transition: none 0.2s;
 }

_styles/anchor.scss

@@ -4,18 +4,17 @@
 .anchor {
   display: inline-block;
   position: relative;
-  top: -0.15em;
-  left: 0.5em;
   width: 0;
-  margin: 0 !important;
+  margin: 0;
+  left: 0.5em;
   color: var(--primary) !important;
   opacity: 0;
-  font-size: 0.75em !important;
+  font-size: 0.75em;
   text-decoration: none;
-  transition: opacity var(--transition), color var(--transition);
+  transition-property: opacity, color;
 }
 
-:hover > .anchor,
+*:hover > .anchor,
 .anchor:focus {
   opacity: 1;
 }

_styles/body.scss

@@ -1,15 +1,18 @@
 ---
 ---
 
+html,
 body {
-  display: flex;
-  flex-direction: column;
   margin: 0;
   padding: 0;
   min-height: 100vh;
   background: var(--background);
   color: var(--text);
   font-family: var(--body);
+}
+
+body {
+  display: flex;
+  flex-direction: column;
   text-align: center;
-  line-height: var(--compact);
 }

_styles/button.scss

@@ -16,19 +16,20 @@ button {
   gap: 10px;
   max-width: calc(100% - 5px - 5px);
   margin: 5px;
-  padding: 8px 15px;
+  padding: 10px 15px;
   border: none;
   border-radius: var(--rounded);
   background: var(--primary);
   color: var(--background);
   text-align: center;
-  font: inherit;
   font-family: var(--heading);
   font-weight: var(--semi-bold);
+  line-height: 1;
   text-decoration: none;
   vertical-align: middle;
+  -webkit-appearance: none;
   appearance: none;
-  transition: background var(--transition), color var(--transition);
+  transition-property: background, color;
 }
 
 .button:hover {

_styles/card.scss

@@ -37,8 +37,9 @@
   padding: 20px;
 }
 
-.card-text > * {
-  margin: 0 !important;
+.card-text > *,
+.card-text > .tags {
+  margin: 0;
 }
 
 .card-title {
@@ -47,6 +48,6 @@
 }
 
 .card-subtitle {
-  margin-top: -10px !important;
+  margin-top: -15px;
   font-style: italic;
 }

_styles/citation.scss

@@ -4,13 +4,9 @@
 $thumb-size: 180px;
 $wrap: 800px;
 
-.citation-container {
-  container-type: inline-size;
-}
-
 .citation {
   display: flex;
-  margin: 20px 0;
+  margin: 15px 0;
   border-radius: var(--rounded);
   background: var(--background);
   overflow: hidden;
@@ -36,7 +32,7 @@ $wrap: 800px;
   position: relative;
   display: inline-flex;
   flex-wrap: wrap;
-  gap: 10px;
+  gap: 15px;
   max-width: 100%;
   height: min-content;
   padding: 20px;
@@ -51,6 +47,7 @@ $wrap: 800px;
 .citation-details,
 .citation-description {
   width: 100%;
+  line-height: calc(var(--spacing) - 0.4);
 }
 
 .citation-title {
@@ -67,10 +64,6 @@ $wrap: 800px;
   z-index: -1;
 }
 
-.citation-publisher {
-  text-transform: capitalize;
-}
-
 .citation-description {
   color: var(--gray);
 }
@@ -91,7 +84,7 @@ $wrap: 800px;
   margin: 0;
 }
 
-@container (max-width: #{$wrap}) {
+@media (max-width: $wrap) {
   .citation {
     flex-direction: column;
   }

_styles/code.scss

@@ -13,6 +13,7 @@ code.highlighter-rouge {
   padding: 2px 6px;
   background: var(--light-gray);
   border-radius: var(--rounded);
+  line-height: calc(var(--spacing) - 0.2);
 }
 
 // code block
@@ -23,6 +24,7 @@ div.highlighter-rouge {
   overflow-x: auto;
   overflow-y: auto;
   text-align: left;
+  line-height: calc(var(--spacing) - 0.4);
 
   div.highlight {
     display: contents;

_styles/cols.scss

@@ -18,11 +18,11 @@ $one: 500px;
   min-height: 0;
 }
 
-.cols > div > :first-child {
+.cols > div > *:first-child {
   margin-top: 0 !important;
 }
 
-.cols > div > :last-child {
+.cols > div > *:last-child {
   margin-bottom: 0 !important;
 }