limestone

commit 6a7195f2d364464247e0e9df581da3fefedf199e
parent 2fa6e3033c98594b5c33f6e84137e737c6d9bc06
Author: niljimeno <niliara@proton.me>
Date:   Fri,  5 Jun 2026 13:08:02 +0200

finish basic display ui

Diffstat:
M
index.html
 | 
30
++++++++++++++++++++++--------
M
style.css
 | 
101
++++++++++++++++++++++++++++++++++++++++---------------------------------------

2 files changed, 73 insertions(+), 58 deletions(-)
diff --git a/index.html b/index.html
@@ -10,31 +10,45 @@
 
 <header>
 <h2>Limestone</h2>
+
+<form>
+    <input type="text" placeholder="Search"></input>
+    <button>
+        <svg stroke="#000"  viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M14.9536 14.9458L21 21M17 10C17 13.866 13.866 17 10 17C6.13401 17 3 13.866 3 10C3 6.13401 6.13401 3 10 3C13.866 3 17 6.13401 17 10Z" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>
+    </button>
+</form>
+
+<button class="normal">Log in</button>
+
 </header>
 
 <main>
 
 
+<!--
 <h1 style="font-size:4em; text-align:center;">Limestone</h1>
+-->
+<br></br>
 <br></br>
 
 <div class="about">
 <div class="text">
+<!--
 <span>Manage your projects, correctly.</span>
-<form>
-<input type="text" placeholder="Search"></input>
-<button>
-<svg stroke="#000"  viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M14.9536 14.9458L21 21M17 10C17 13.866 13.866 17 10 17C6.13401 17 3 13.866 3 10C3 6.13401 6.13401 3 10 3C13.866 3 17 6.13401 17 10Z" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
-</svg>
-</button>
-</form>
+-->
+<span>Version control, <i>reimagined</i></span>
+<div class="buttons">
+<button class="normal">Get started</button>
+<button class="normal">Don't get started</button>
+</div>
 </div>
 
+<div>
 <div class="image">
 <img src="logoc.jpg"></img>
 </div>
 </div>
+</div>
 
 
 
diff --git a/style.css b/style.css
@@ -1,9 +1,10 @@
 body {
     font-family: sans-serif;
-    font-size: 1.4em;
+    font-size: 1.6em;
     margin: 0;
 
-    width: 900px;
+    width: 1200px;
+    max-width: 90%;
     margin: 0 auto;
 }
 
@@ -11,66 +12,38 @@ body {
     font-weight: normal;
 }
 
-main {
-}
-
-/*
-form {
-    height: 2em;
+header {
+    height: 4em;
 
-    align-content: center;
     display: flex;
-    width: 100%;
-}
-
-form input, form button {
-    box-sizing: border-box;
-    border-radius: 0.2em;
-    padding: 0.4em;
-}
-
-form input[type=text] {
-    border: 1px gray solid;
-
-    font-size: 1em;
-    height: 100%;
-
-    border-top-right-radius: 0;
-    border-bottom-right-radius: 0;
+    justify-content: space-between;
+    align-content: center;
+    align-items: center;
 }
 
-form button {
-    border: 1px gray solid;
-
-    font-size: 1em;
-    height: 100%;
-
-    padding-left:  0.4em;
-    padding-right: 0.4em;
-
-    border-top-left-radius: 0;
-    border-bottom-left-radius: 0;
-}
-*/
 
 form {
     height: 2em;
 
     align-content: center;
-    display: flex;
+    display: grid;
+    grid-template-columns: auto 2.4em;
+
+    width: 20em;
 }
 
 form input, form button {
     border: none;
     background-color: #eee;
     box-sizing: border-box;
-    padding: 0.4em;
 
     border-radius: 0.2em;
+    padding: 0.4em
 }
 
 form input[type=text] {
-    font-size: 1em;
+    font-size: 0.8em;
+    padding-left: 1em;
     height: 100%;
 
     border-top-right-radius: 0;
@@ -80,19 +53,17 @@ form input[type=text] {
 
 form button {
     font-size: 1em;
-    height: 100%;
+    height: 2em;
 
     border-top-left-radius: 0;
     border-bottom-left-radius: 0;
+    aspect-ratio: 1;
 }
 
 form button svg {
     height: 100%;
 }
 
-header {
-    height: 4em;
-}
 
 
 .about {
@@ -118,8 +89,8 @@ header {
 
     width: 10em;
     box-shadow: -1.4em -1.4em #ccc;
-    margin-top: 1em;
-    margin-left: 1em;
+    margin-top: 1.4em;
+    margin-left: 1.4em;
 }
 
 .about .image img {
@@ -132,11 +103,11 @@ header {
     left: 0;
 }
 
-.about .image:hover {
+.about div:hover .image {
     box-shadow: -2em -2em #ccc;
 }
 
-.about .image:hover img {
+.about div:hover .image img {
     width: 10em;
     box-shadow: -1.3em -1.3em #aaa;
 
@@ -148,3 +119,33 @@ header {
 .about p {
     margin-bottom: 0.4em;
 }
+
+.about .buttons {
+    display: flex;
+    gap: 1em;
+}
+
+button.normal {
+    transition: 0.1s;
+    font-size: 0.7em;
+
+    line-height: 2em;
+    padding: 0.1em 1em;
+
+    background-color: white;
+    border: 2px solid #888;
+
+    position: relative;
+    top: -0.2em;
+    left: -0.2em;
+
+    box-shadow: 0.3em 0.3em #888;
+}
+
+button.normal:hover {
+    position: relative;
+    top: 0;
+    left: 0;
+
+    box-shadow: 0.1em 0.1em #888;
+}