basic features

2024-12-21 18:23:56 +01:00 · 2024-12-21 18:23:56 +01:00 · 70c2dcf6c5
commit 70c2dcf6c5
3 changed files with 134 additions and 0 deletions
--- a/image.jpg
+++ b/image.jpg
--- a/index.html
+++ b/index.html
@ -0,0 +1,38 @@
+<!DOCTYPE html>
+<html>
+    <head>
+        <title>LY-DESIGN</title>
+        <link rel="stylesheet" type="text/css" href="style.css" />
+    </head>
+    <body class="lyb-body">
+        
+        <div class="lyb-box">
+
+            <h1 class="lyb-h1 lyb-h">Page title</h1>
+            <h2 class="lyb-h2 lyb-h">Page title</h2>
+            <h3 class="lyb-h3 lyb-h">Page title</h3>
+            <h4 class="lyb-h4 lyb-h">Page title</h4>
+
+            <p class="lyb-text">
+                This is the normal textflow <a class="lyb-link">that</a> is used by the lybdesign guide and how it should look like to people.
+                I primarily like it because its nice to use and looks pretty fine to look at
+            </p>
+        
+
+
+            <p class="lyb-info">
+                Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+            </p>
+
+            <p class="lyb-text">
+                sdsadsadjsadosjdisajdoisadjo
+            </p>
+        <div class="lyb-img-container">
+            <img src="image.jpg" width="500px" height="500px" class="lyb-img" />
+            Bookmage
+        </div>
+
+        </div>
+        
+    </body>
+</html>
--- a/style.css
+++ b/style.css
@ -0,0 +1,96 @@
+/* Variables to be used by this file for easy theming */
+:root {
+    --lyb-color-shadow: #151515;
+    --lyb-color-text: #b8cfd0;
+    --lyb-color-text-link: #7bb4b6;
+    --lyb-color-bg: #1e2633;
+    --lyb-color-bg-dark: #26292d;
+    --lyb-color-bg-info: #46613a;
+    --lyb-color-bg-info-border: #6a835f;
+    --lyb-color-bg-warn: #d1e36c;
+    --lyb-color-bg-error: #b93434;
+}
+
+/* The main style for the page body */
+.lyb-body {
+    color: var(--lyb-color-text);
+    font-family: sans-serif;
+    padding:0px;
+    margin:0px;
+    font-size: 1.1rem;
+    line-height: 1.8;
+}
+
+/* Box used to make content dynamically scale */
+.lyb-box {
+    max-width: 90rem;
+    margin: 0 auto;
+    background-color: #1e2633;
+    display:block;
+}
+
+/* Paragraphs of normal text */
+.lyb-text {
+    padding: 0.5rem;
+    margin: 0 auto;
+    max-width: 70rem;
+}
+
+/* Informational blocks containg additional stuff */
+.lyb-info {
+    padding: 0.5rem;
+    margin: 0.2rem auto;
+    max-width: 60rem;
+    border: 1px solid var(--lyb-color-bg-info-border);
+    background-color: var(--lyb-color-bg-info);
+    box-shadow: 7px 7px var(--lyb-color-shadow);
+}
+
+/* Headers */
+.lyb-h {
+    margin:0px 1rem 0px 1rem;
+    padding:0.5rem;
+}
+
+.lyb-h1 {
+    text-align: center;
+    font-size: 3.5rem;
+    border-bottom:1px solid #CCC;
+}
+
+.lyb-h2 {
+    font-size: 3rem;
+    border-bottom:1px solid #CCC;
+}
+
+.lyb-h3 {
+    font-size: 2.5rem;
+}
+
+.lyb-h4 {
+    font-size: 2rem;
+}
+
+.lyb-link {
+    color: var(--lyb-color-text-link);
+    font-weight: bold;
+}
+
+.lyb-link:hover {
+    text-decoration: underline;
+}
+
+.lyb-img-container {
+    font-weight: bold;
+    margin: 0rem auto;
+    text-align: center;
+    padding:1rem;
+}
+
+.lyb-img {
+    border: 1px solid var(--lyb-color-text);
+    box-shadow: 7px 7px var(--lyb-color-shadow);
+    margin: 0rem auto;
+    display:block;
+    max-width: 60rem;
+}