added readme and github links

krismakesstuff · Mar 7, 2024 · 21309d0 · 21309d0
1 parent f9db652
commit 21309d0
Show file tree

Hide file tree

Showing 2 changed files with 40 additions and 8 deletions.
diff --git a/index.html b/index.html
@@ -20,8 +20,12 @@
 </head>
 <body>
     <div id="title-wrapper">
-        <h1 id="site-title">seq1</h1>
-        <p id="site-description">a simple sequencer synth. </p>
+        <div id="site-title">seq1</div>
+        <div id="site-description">step sequencer and oscillator<br>
+            <span> <a href="/README.md" target="_blank" class='site-links'>ReadMe.md</a> 
+            <a href="https://github.com/krismakesstuff/rnbo-step-sequencer?tab=readme-ov-file" target="_blank" class='site-links'>github repo</a></span>
+        </div>
+
     </div>
 
 

diff --git a/style/sytle.css b/style/sytle.css
@@ -56,8 +56,8 @@ body{
         'canvas-wrapper'
         'osc1-canvas-wrapper';
 
-    grid-template-columns: 100% 0%;
-    grid-template-rows: 80px auto 100px auto auto auto auto ;
+    grid-template-columns: 100%;
+    grid-template-rows: auto auto 100px auto auto auto auto ;
     /* grid-template-rows: repeat(7, auto); */
 
     width: 1000px; 
@@ -69,19 +69,47 @@ body{
 /* Title */
 #title-wrapper{
     grid-area: title-wrapper;
-    display: grid;
-    grid-template-columns: 1fr;
-    grid-template-rows: 1fr;
+
+    /* display: grid;
+    grid-template-columns: var(--leftSideWidth) 1fr;
+    grid-template-rows: 1fr; */
+    /* align-items: center;
+    justify-items: center; */
     background-color: var(--color6);
 }
 
 #site-title{
+    /* grid-area: 1 / 1 / 3 / 2; */
+    font-family: 'Poppins';
     font-size: var(--titleFontSize);
-    text-align: center;
+    text-align: right;
+    align-self: center;
     margin-left: 10px;
+    margin-right: 10px;
     color: var(--color1);
 }
 
+#site-description{
+    font-size: var(--labelFontSize);
+    text-align: right;
+    /* text-align: start; */
+    margin-left: 10px;
+    margin-right: 10px;
+    margin-bottom: 10px;
+
+    /* height: 70%; */
+    color: var(--color1);
+}
+
+.site-links{
+  /* grid-area: 2 / 2 / 3 / 4; */
+  font-size: var(--smallFontSize);
+  color: var(--color1);
+    background-color: var(--color6);
+}
+
+
+
 /* Playback controls */
 /* #playback-controls-wrapper{
     grid-area: playback-controls-wrapper;