change theme

Author: maxthematics

assets/css/main.scss

@@ -2,5 +2,86 @@
 # front matter so Jekyll processes it
 ---
 
-@import "minimal-mistakes/skins/contrast";  // base skin
-@import "minimal-mistakes";                 // main theme
+
+/* Core colors */
+$background-color: #0d1b2a;      // page background
+$text-color: #e0e1dd;            // main text
+$muted-text-color: #a9bcd0;      // subtle text
+$link-color: #f4a261;            // warm orange links
+$brand-color: #e67e22;           // brand accent
+$border-color: #415a77;          // separators
+$code-background-color: #1b263b; // code blocks
+$footer-background-color: #1b263b;
+$footer-text-color: #e0e1dd;
+
+@import "minimal-mistakes/skins/contrast";  // basis-skin
+@import "minimal-mistakes";                 // lädt das theme
+
+/* === General page background and text === */
+body {
+  background-color: $background-color;
+  color: $text-color;
+}
+
+/* Masthead (top bar) */
+.masthead, .site-title, .site-nav, .site-nav .page-link {
+  background-color: $brand-color;
+  color: #fff !important;
+}
+
+.masthead a:hover,
+.site-nav .page-link:hover {
+  color: lighten($brand-color, 20%) !important;
+}
+
+/* Sidebar and widgets */
+.sidebar {
+  background-color: darken($background-color, 3%);
+  color: $text-color;
+}
+
+/* Links */
+a, a:visited {
+  color: $link-color;
+}
+a:hover {
+  color: lighten($link-color, 15%);
+}
+
+/* Buttons */
+.btn, .btn--primary {
+  background-color: $brand-color;
+  border-color: darken($brand-color, 5%);
+  color: #fff;
+
+  &:hover, &:focus {
+    background-color: lighten($brand-color, 5%);
+    border-color: lighten($brand-color, 10%);
+    color: #fff;
+  }
+}
+
+/* Footer */
+.page__footer {
+  background-color: $footer-background-color;
+  color: $footer-text-color;
+  border-top: 1px solid $border-color;
+}
+
+/* === Author avatar: circular and properly clipped === */
+.author__avatar {
+  border: none;
+  border-radius: 50%;
+  overflow: hidden;
+  box-shadow: none;
+  margin-bottom: 0.75em;
+  width: 200px;    /* adjust as needed */
+  height: 200px;   /* keep it square */
+}
+
+.author__avatar img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;  /* keeps aspect ratio while filling the circle */
+  border-radius: 50%;
+}