rockin gradient

qjac · qjac · commit c64001b7691a · 2021-04-26T21:08:30.000-05:00
diff --git a/css/main.css b/css/main.css
@@ -178,20 +178,31 @@ h2 {
                 layout & backgrounds
 ===================================================================*/
 body {
-  background: var(--color-primary);
-  border: 2rem solid var(--color-primary);
   min-height: 100vh;
   text-align: center;
   display: grid;
   justify-content: center;
   align-content: center;
 }
-
+.background-decor {
+  background: var(--color-primary);
+  /* background: conic-gradient(from 0deg at 0% 0%, blue, green, yellow 180deg); */
+  background:  radial-gradient(
+    circle at top right,
+    
+    var(--color-bright)  ,
+    var(--color-highlight1),
+      var(--color-highlight2) 97%
+ /* var(--color-highlight2)  */
+      );;
+  /* border: 2rem solid var(--color-primary); */
+}
 .main-content-container {
   /* for better visual vertical centering */
   margin-bottom: 8vh;
   background: var(--color-light);
   padding: 4vw;
+  border: 4px solid var(--color-highlight1);
 }
 
 @media screen and (min-width: 40em) {
diff --git a/index.html b/index.html
@@ -48,7 +48,7 @@
 <link rel="stylesheet" href="css/main.css">
 </head>
 
-<body>
+<body class="background-decor">
     <main class="main-content-container">
         <svg class="logo" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 720 468" aria-hidden="true">
             <!-- <title id="logoTitle" class="visuallyhidden">Head to homepage</title> -->
