Merge pull request #6 from Dominik-developer/main

Dominik-developer · web-flow · commit 4e4da3b69ee1 · 2024-09-03T16:45:10.000+02:00
By accident i commited to the main insted of work, this is fix
diff --git a/example.html b/example.html
@@ -14,31 +14,30 @@
     <link rel="stylesheet" type="text/css" href="https://dominik-developer.github.io/css_library/example.styles.css"> 
 </head>
 <body>
-    <header>
-        <div id="title">
-            Real page example of  usage of CSS library
-        </div>
-        <nav>
-            <a href="#readmesection" id="readmeLink" class="sectionLink"></a>
-            <a href="#docsSection" id="docsLink" class="sectionLink"></a>
-        </nav>
-    </header>
-    <main>
-        <h1>This page is to show how this library works</h1>
+    <section id="container">
+        <header class="">
+            <div id="title">
+                Real page example of  usage of CSS library
+            </div>
+            Lorem ipsum dolor sit, amet consectetur adipisicing elit. Molestias similique voluptate soluta debitis itaque incidunt impedit dolores fugiat enim, sequi illo vel saepe laboriosam aperiam libero esse. Similique iusto quod vero officia ea in maxime exercitationem commodi deleniti molestias, dolorum, eius ipsam accusantium error quibusdam nobis repellendus ut, explicabo odio.
+        </header>
+        <main>
+            <h1>This page is to show how this library works</h1>
 
-        <h2>README.md </h2>
-        <section id="readmeSection">
-            <iframe src="https://github.com/Dominik-developer/css_library/tree/main/README.md"></iframe>
-        </section>
+            <h2>README.md </h2>
+            <section id="readmeSection">
+                Lorem, ipsum dolor sit amet consectetur adipisicing elit. Assumenda mollitia rem consequatur officia, sit quaerat impedit consectetur tempora fugit similique! Inventore veritatis adipisci voluptatibus omnis sit, cumque delectus ipsum dolores blanditiis impedit, distinctio nesciunt debitis tenetur odio repellat dolor voluptates, porro eius vitae maxime nam. Dicta ratione autem ex, cumque fugit aperiam neque sequi rerum aliquam similique eaque unde totam sapiente facere laboriosam animi ducimus odio. Laudantium itaque, et molestias excepturi repudiandae dignissimos dicta, eius veritatis reiciendis totam neque, qui quos! Reiciendis obcaecati neque mollitia provident accusamus laboriosam porro suscipit tempore eaque officia sit autem, animi quas quod laudantium accusantium dolor ipsa nihil at? Consequuntur laudantium quidem quam voluptatibus, ad tempore architecto soluta dolorem repellendus reprehenderit, minus sapiente pariatur ex tempora ratione aspernatur maxime quo dignissimos id cumque dolorum commodi corporis vel? Modi laboriosam odit expedita fugiat, ex tenetur nesciunt vitae nihil excepturi corrupti dicta incidunt maxime aliquam nam velit fuga delectus deleniti optio quis quas id, voluptas officiis. Veritatis, officiis vel quidem libero atque fuga incidunt dolorem laboriosam alias minima ipsam, maiores eos quaerat voluptatem! Dolore et, iure neque explicabo, ipsa odio nemo, illum fuga quidem in non quas. Magni earum aliquid, a rerum porro cum aliquam non laborum.
+            </section>
 
-        <h2>Documentation</h2>
-        <section id="docsSection">
-            <iframe src="https://github.com/Dominik-developer/css_library/tree/main/documentation,txt"></iframe>
-        </section>
-    </main>
-    <footer>
-        Hello there :(
-    </footer>
+            <h2>Documentation</h2>
+            <section id="docsSection">
+                Lorem ipsum dolor sit amet consectetur adipisicing elit. Quasi laboriosam amet hic voluptatibus enim quos adipisci voluptatem totam est aperiam error vero repudiandae sequi, et minus dolor fugit ducimus magni deserunt officia molestias possimus! Voluptas atque incidunt, ab debitis illo beatae corrupti nesciunt quam ex. Ullam reiciendis temporibus unde quos saepe obcaecati dicta similique incidunt inventore adipisci? Dignissimos accusamus consequuntur praesentium culpa vero fuga exercitationem numquam, repudiandae dolorem deleniti molestiae nobis quae ut ducimus, totam, quaerat aut ab. Reprehenderit dolorem rerum distinctio sit molestiae quae enim ab, ex tempora repellat assumenda sunt repudiandae laudantium consectetur atque cumque accusantium, facere deserunt nesciunt quos a, exercitationem est ratione. Doloribus ipsam sit illo officia non officiis, natus totam. Iste fugit velit iusto dicta minus perferendis suscipit aspernatur corporis tenetur sit ea, dolores aliquid non tempore harum quia consequuntur et laborum temporibus! Totam laboriosam explicabo, odit quas sed vero nihil quaerat eos magnam sunt labore nemo officia. Mollitia commodi ad ea inventore nulla, possimus repellendus. Corrupti iusto dolores debitis sed vel! Accusamus deleniti reiciendis incidunt laudantium alias. Officia quidem aspernatur sequi optio voluptatibus iusto ea ipsam, itaque ipsum, corporis dolore obcaecati quae quam harum quia, veniam accusantium ducimus? Corrupti molestias velit tenetur asperiores quasi!
+            </section>
+        </main>
+        <footer>
+            Lorem, ipsum dolor sit amet consectetur adipisicing elit. Ipsam eveniet asperiores doloremque at vero cum consequatur, quisquam doloribus earum aliquid et dolore libero debitis quam suscipit hic dolorem iure illum. Velit quidem porro amet ratione alias, voluptas nesciunt. Tenetur, nulla. Iste doloremque natus et. Accusamus facilis sequi qui laboriosam libero.
+        </footer>
+    </section>
     
 </body>
 </html>
diff --git a/example.styles.css b/example.styles.css
@@ -1,19 +1,7 @@
 
 /* those styles only aply to example.html file in repository */
 
-header {
-    height: 5%;
-}
-
-nav {
-    height: 5%;
-    justify-content: center;
-}
-
-nav a {
-    font-weight: bold;
-}
-
+/*
 main {
     margin-left: 5%;
     margin-right: 5%;
@@ -27,12 +15,12 @@ h1, h2 {
     font-weight: bold;
 }
 
+
 section {
     width: 100%;
     padding: 5%;
+    box-sizing: border-box;
 }
+*/
 
-footer {
-    height: 5%;
-}
 
diff --git a/index.css b/index.css
@@ -26,7 +26,7 @@ body {
     color: #333;
     cursor: default;
     display: block;
-    overflow: scroll;
+    /*overflow: hidden;*/
 }
 
 
diff --git a/root/footer.css b/root/footer.css
@@ -5,9 +5,12 @@ footer {
   display: block;
   box-sizing: border-box;
   background-color: #fff;
-
   width: 100vw;
-  /*margin: 20px;*/
+
+  margin-left: 20px;
+  margin-right: 20px;
+
+  padding: 5px;
 }
 
 
@@ -17,7 +20,7 @@ footer {
 @media (max-width: 1200px) {
   footer {
       width: 90vw;
-      /*margin: 0 auto; */
+     /* margin: 0 auto; */
   }
 }
 
diff --git a/root/header.css b/root/header.css
@@ -2,21 +2,23 @@
 /* link to the ropository: https://github.com/Dominik-developer/css_library */
 
 header {
-    width: 100vw;
     display: block;
     box-sizing: border-box;
     background-color: #fff;
-}
-
-header.h40 {
-    height: 40px;
+    width: 100vw;
+    
+    margin-left: 20px;
+    margin-right: 20px;
+  
     padding: 5px;
 }
-
+/*
 header.h60 {
     height: 60px;
     padding: 5px;
 }
+*/
+
 
 
 /* responsiveness */
@@ -25,7 +27,7 @@ header.h60 {
 @media (max-width: 1200px) {
     footer {
         width: 90vw;
-        /*margin: 0 auto; */
+      /* margin: 0 auto; */
     }
   }
   
diff --git a/root/main.css b/root/main.css
@@ -2,11 +2,16 @@
 /* link to the ropository: https://github.com/Dominik-developer/css_library */
 
 main {
-    width: 100vw;
-    height: 100hv;
     display: block;
     box-sizing: border-box;
     background-color: #fff;
+    width: 100vw;
+    height: 100vh;
+
+    margin-left: 20px;
+    margin-right: 20px;
+  
+    padding: 5px;
 }
 
 /*
@@ -22,7 +27,7 @@ main.h60 {
 @media (max-width: 1200px) {
     footer {
         width: 90vw;
-        /*margin: 0 auto; */
+      /*  margin: 0 auto; */
     }
   }
   

Original file line number	Diff line number	Diff line change
`@@ -26,7 +26,7 @@ body {`
`26`	`26`	`color: #333;`
`27`	`27`	`cursor: default;`
`28`	`28`	`display: block;`
`29`		`- overflow: scroll;`
	`29`	`+ /overflow: hidden;/`
`30`	`30`	`}`
`31`	`31`
`32`	`32`