Me

Import

To import the framework, paste the following code in the head of your html file:

<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://ln.topdf.de/web_framework/css/styles.css">
<script src="https://ln.topdf.de/web_framework/js/marked.min.js"></script>
<script type="module" src="https://ln.topdf.de/web_framework/js/index.js"></script>

and this right below the body

<script src="js/markdown.js"></script>
# Usage ## Features ### header To create a header, use the `header` element. If you want a child of it to be on the right instead of the left, give it the `push` class. ### themes To create a button to switch between the currently available themes, simply create a `button` element with the class `theme-button`. ### container For the contents you might want it responsive. You can create a `div` and give it the class `container`, to make every child responsive. The container elements also keep a nice distance ### textbox The textbox is there to put your real content. The fields get highlighted and an outline will be made. Simply create a `div` with the class `textbox`. In a textbox you can use: - headers (`h1`, `h2`, `h3`) - blocktexts (`p`) - images (`img`) - lists (`ol`, `ul`) - inputs you can give a blocktext the class ``secondary`` to make it secondary and `elevated` to make it elevated. ### images There are a couple of classes, you can add to your images in a textbox: - `negated`: the image gets negated when in dark mode. - `max`: the image spans over the whole textbox. - `half`: the image spans half the textbox. - `third`: the image spans over a third of the textbox. Due to responsive design the classes defining how far the image spans, may only apply on large screens. ### markdown support If you want to use markdown, you just have to add the class `markdown` to a textbox. Also look at this sweet formular: $$x_{1, 2} = \frac{-b \pm \sqrt{b^2 - 4ac}}{2a}$$ ## Overview For an overview of everything supported, see down below the example. This should contain most of the features. If you want to see the html code, just press `ctrl` + `u`.

Lorem Ipsum

This is elevated text.

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam

a list

another list

  1. Lorem ipsum dolor sit amet
  2. Lorem ipsum dolor sit amet
  3. Lorem ipsum dolor sit amet
  4. Lorem ipsum dolor sit amet

A full page picture

h1 first header

h2 second header

h3 third header

h4 fourth header

link (all my projects) 
You can just like this create EVERYTHING below!

<div class="markdown" src="assets/mathe.md"></div>