Work (#8)

* Add files via upload * Fix padding * Update * Fix link
Dominik-developer · Sep 10, 2024 · 8072c42 · 8072c42
1 parent fae10fb
commit 8072c42
Show file tree

Hide file tree

Showing 3 changed files with 307 additions and 4 deletions.
diff --git a/example.html b/example.html
@@ -7,15 +7,25 @@
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Example page for CSS library</title>
+    <meta name="author" content="Dominik-developer">
 
     <!-- This link adds CSS library-->
     <link rel="stylesheet" type="text/css" href="https://dominik-developer.github.io/BaseFrame_CSS_library/index.css"> 
+
+    <!-- Additional styles for exemple webiste -->
+    <style>
+        body {
+            font-size: larger;
+        }
+    </style>
 
 </head>
-<body>
+<body class="reader">
     <section id="container">
         <header>
             <h1>Real page example of  usage of CSS library</h1>
+            <p>link to repository: <a href="https://github.com/Dominik-developer/BaseFrame_CSS_library">LINK</a></p>
+
             <div>  
                 Lorem ipsum dolor sit amet consectetur adipisicing elit. Totam minima suscipit pariatur, quibusdam quis facere alias commodi. Repudiandae odit vel similique laudantium soluta, a sint distinctio consequuntur recusandae. Veniam, sint! At ut dolorem obcaecati inventore dolores rerum magnam ex possimus voluptatibus aliquid, illo aperiam amet debitis quae et illum non aut quam aspernatur voluptas nam sequi provident! Officia error cumque dolor rem voluptatibus incidunt veniam aperiam ut placeat minima, eos sequi, laudantium ipsum fugit repudiandae delectus soluta similique, doloribus sapiente aut iste. Optio ab necessitatibus deleniti iusto itaque facere harum dolor nihil amet dicta placeat odio, autem tempora nobis repellendus?
             </div>

diff --git a/index.css b/index.css
@@ -4,12 +4,12 @@
 
 /* Some features have just been introduced and may not work or cause problems. Any problems or bugs should be reported as soon as possible so that they can be fixed. You can report them by opening a new issue in the library repository. Link to the ropository: https://github.com/Dominik-developer/css_library */
 
+
 body {
     margin: 0;
     padding: 0;
     box-sizing: border-box;
     width: 100vw;
-    /*min-height: 100vh;*/
     background-color: #fff;
 
     font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
@@ -107,6 +107,33 @@ header {
     box-sizing: border-box;
     background-color: #fff;
     width: 100vw;
+}
+
+@media (min-width: 1201px) {
+    header {
+        width: 100%;
+        margin: 0 auto; 
+    }
+}
+
+@media (max-width: 1200px) {
+    header {
+        width: 100%;
+        margin: 0 auto; 
+    }
+}
+
+@media (max-width: 768px) {
+    header {
+        width: 100%;
+        margin: 0 auto; 
+    }
+}
+
+@media (max-width: 480px) {
+    header {
+        width: 100%;
+        margin: 0 auto; 
   }
 
 @media (min-width: 1201px) {
@@ -124,6 +151,80 @@ header {
     }
   }
 
+
+/* MAIN */
+main {
+    display: block;
+    box-sizing: border-box;
+    background-color: #fff;
+    width: 100vw;
+}
+
+@media (min-width: 1201px) {
+    main {
+        width: 100%;
+        margin: 0 auto; 
+    }
+}
+
+@media (max-width: 1200px) {
+    main {
+        width: 100%;
+        margin: 0 auto; 
+    }
+}
+
+@media (max-width: 768px) {
+    main {
+        width: 100%;
+        margin: 0 auto; 
+    }
+}
+
+@media (max-width: 480px) {
+    main {
+        width: 100%;
+        margin: 0 auto; 
+    }
+}
+
+
+/* FOOTER */
+footer {
+    display: block;
+    box-sizing: border-box;
+    background-color: #fff;
+    width: 100vw;
+}
+
+@media (min-width: 1201px) {
+    footer {
+      width: 100%;
+        margin: 0 auto; 
+    }
+}
+
+@media (max-width: 1200px) {
+    footer {
+        width: 100%;
+        margin: 0 auto; 
+    }
+}
+
+@media (max-width: 768px) {
+    footer {
+        width: 100%;
+        margin: 0 auto; 
+    }
+}
+
+@media (max-width: 480px) {
+    footer {
+        width: 100%;
+        margin: 0 auto; 
+    }
+}
+
   @media (max-width: 768px) {
     footer {
         width: 90vw; 
@@ -137,20 +238,117 @@ header {
         padding: 10px; 
     }
   }
-
+  
 
 /* CENTERING ELEMENT CLASSES */
 .centerOutside {
     display: flex; 
     justify-content: center;
     align-items: center; 
     height: 100vh; /* basics height of outer element, here height of the browser  */
-
 }
 
 .centerInside {
     width: 50%; /* basics width for inner element */
     height: 50%; /* basics height for inner element */
     background-color: lightblue; /* basics background color for inner element so its visible  */
+}
+
+
+/* This class add nice styling of margins and width to website */
+body.reader {}
+
+/* HEADER class: reader */
+body.reader header {}
+
+@media (min-width: 1201px) {
+    body.reader header {
+        width: 90vw;
+        padding: 20px;
+    }
+}
+
+@media (max-width: 1200px) {
+    body.reader header {
+        width: 90vw;
+        padding: 10px;
+    }
+}
+
+@media (max-width: 768px) {
+    body.reader header {
+        width: 90vw;
+        padding: 10px;
+    }
+}
+
+@media (max-width: 480px) {
+    body.reader header {
+        width: 90vw; 
+        padding: 10px; 
+    }
+}
+
+
+/* MAIN class: reader */
+body.reader main {}
+
+@media (min-width: 1201px) {
+    body.reader main {
+        width: 90vw;
+        padding: 20px;
+    }
+}
 
+@media (max-width: 1200px) {
+    body.reader main {
+        width: 90vw;
+        padding: 10px;
+    }
+}
+
+@media (max-width: 768px) {
+    body.reader main {
+      width: 90vw;
+      padding: 10px;
+    }
+}
+
+@media (max-width: 480px) {
+    body.reader main {
+        width: 90vw;
+        padding: 10px; 
+    }
+}
+
+
+/* FOOTER */
+footer {}
+
+@media (min-width: 1201px) {
+    body.reader footer {
+        width: 90vw; 
+        padding: 20px; 
+    }
+}
+
+@media (max-width: 1200px) {
+    body.reader footer {
+        width: 90vw;
+        padding: 10px;
+    }
+}
+
+@media (max-width: 768px) {
+    body.reader footer {
+        width: 90vw; 
+        padding: 10px
+    }
+}
+
+  @media (max-width: 480px) {
+    body.reader footer {
+        width: 90vw; 
+        padding: 10px; 
+    }
 }
diff --git a/paddings.css b/paddings.css
@@ -0,0 +1,95 @@
+
+/* HEADER */
+body.reader header {}
+
+@media (min-width: 1201px) {
+    body.reader header {
+        width: 90vw;
+        padding: 20px;
+    }
+}
+
+@media (max-width: 1200px) {
+    body.reader header {
+        width: 90vw;
+        padding: 10px;
+    }
+}
+
+@media (max-width: 768px) {
+    body.reader header {
+        width: 90vw;
+        padding: 10px;
+    }
+}
+
+@media (max-width: 480px) {
+    body.reader header {
+        width: 90vw; 
+        padding: 10px; 
+    }
+}
+
+
+/* MAIN */
+body.reader main {}
+
+@media (min-width: 1201px) {
+    body.reader main {
+        width: 90vw;
+        padding: 20px;
+    }
+}
+
+@media (max-width: 1200px) {
+    body.reader main {
+        width: 90vw;
+        padding: 10px;
+    }
+}
+
+@media (max-width: 768px) {
+    body.reader main {
+      width: 90vw;
+      padding: 10px;
+    }
+}
+
+@media (max-width: 480px) {
+    body.reader main {
+        width: 90vw;
+        padding: 10px; 
+    }
+}
+
+
+/* FOOTER */
+body.reader footer {}
+
+@media (min-width: 1201px) {
+    body.reader footer {
+        width: 90vw; 
+        padding: 20px; 
+    }
+}
+
+@media (max-width: 1200px) {
+    body.reader footer {
+        width: 90vw;
+        padding: 10px;
+    }
+}
+
+@media (max-width: 768px) {
+    body.reader footer {
+        width: 90vw; 
+        padding: 10px
+    }
+}
+
+  @media (max-width: 480px) {
+    body.reader footer {
+        width: 90vw; 
+        padding: 10px; 
+    }
+}