From 93cb69b7ddaa60b3d3351272eb024027e4b0778b Mon Sep 17 00:00:00 2001 From: xengineering Date: Thu, 2 Dec 2021 14:29:47 +0100 Subject: Restructure whole Repository --- README.md | 11 +- css/xengineering.css | 286 ------------------------------------------------ demo.png | Bin 0 -> 46706 bytes html/template.html | 93 ---------------- html/test_nav_main.html | 175 ----------------------------- html/test_simple.html | 175 ----------------------------- img/demo.png | Bin 46706 -> 0 bytes index.html | 61 ----------- js/xengineering.js | 71 ------------ libweb.css | 286 ++++++++++++++++++++++++++++++++++++++++++++++++ libweb.js | 71 ++++++++++++ test.html | 175 +++++++++++++++++++++++++++++ todo | 2 + 13 files changed, 543 insertions(+), 863 deletions(-) delete mode 100644 css/xengineering.css create mode 100644 demo.png delete mode 100644 html/template.html delete mode 100644 html/test_nav_main.html delete mode 100644 html/test_simple.html delete mode 100644 img/demo.png delete mode 100644 index.html delete mode 100644 js/xengineering.js create mode 100644 libweb.css create mode 100644 libweb.js create mode 100644 test.html create mode 100644 todo diff --git a/README.md b/README.md index 9f2f518..44a01c7 100644 --- a/README.md +++ b/README.md @@ -3,11 +3,18 @@ A repository with reusable components for web development. -![A demo image for the design included in this repository](./img/demo.png) +![A demo image for the design included in this repository](./demo.png) ## Usage -Just clone it to your web server or add it as a Git submodule to your application repository. In each case you can create symbolic links to relevant files. +Just clone it to your web server or add it as a Git submodule to your +application repository. In each case you can create symbolic links to relevant +files. + +## Testing + +Have a look at `test.html`. You can open it in your browser (e.g. `firefox +test.html`) and have a look at all the supported elements. ## Goals diff --git a/css/xengineering.css b/css/xengineering.css deleted file mode 100644 index e54061c..0000000 --- a/css/xengineering.css +++ /dev/null @@ -1,286 +0,0 @@ -/* -vim: shiftwidth=2 tabstop=2 expandtab - -libweb - reusable code for websites - - Copyright (C) 2021 xengineering - - This program is free software: you can redistribute it and/or modify - it under the terms of the GNU Affero General Public License as published by - the Free Software Foundation, either version 3 of the License, or - (at your option) any later version. - - This program is distributed in the hope that it will be useful, - but WITHOUT ANY WARRANTY; without even the implied warranty of - MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the - GNU Affero General Public License for more details. - - You should have received a copy of the GNU Affero General Public License - along with this program. If not, see . - -contact via mail: me@xengineering.eu -*/ - - -/******************************** VARIABLES ***********************************/ - -:root { - --font-color-dark: black; - --font-color-light: white; - - --background-color-light: white; - --background-color-light2: lightgray; - --background-color-dark: black; - --background-color-dark2: darkgray; - - --font-family-primary: Arial, Helvetica, sans-serif; - - --vertical-space-small: 1vh; - --vertical-space-medium: 2vh; - --vertical-space-big: 3vh; -} - -/***************************** DEFAULT / MOBILE *******************************/ - -/* personal defaults for all elements */ -* { - /* box model elements */ - margin: 0; - padding: 0; - border: 0 solid; - - /* positioning */ - position: relative; - float: none; - top: 0; - bottom: 0; - left: 0; - right: 0; - - display: block; - box-sizing: border-box; - width: 100%; - height: auto; - - /* styling */ - font-family: var(--font-family-primary); - font-size: 1.0em; - color: var(--font-color-dark); - border-color: var(--font-color-dark); - background-color: var(--background-color-light); -} - -head { - display: none; /* do not display anything from the head section */ -} - -/* body */ - -nav { - background-color: var(--background-color-dark); -} - -#menu-button { - width: 100%; - padding-top: 1em; - padding-bottom: 1em; - margin: 0; - text-align: center; - color: var(--font-color-light); - background-color: var(--background-color-dark); -} - -.menu-anchor { - padding-top: 1em; - padding-bottom: 1em; - padding-left: 0; - padding-right: 0; - margin: 0; - text-align: center; - color: var(--font-color-light); - background-color: var(--background-color-dark); -} - -main { - padding-left: 3vw; - padding-right: 3vw; -} - -h1 { - text-align: center; - margin-top: var(--vertical-space-big); - margin-bottom: var(--vertical-space-small); - font-size: 2.2em; -} - -h2 { - margin-top: var(--vertical-space-big); - margin-bottom: var(--vertical-space-small); - font-size: 2.0em; -} - -h3 { - margin-top: var(--vertical-space-big); - margin-bottom: var(--vertical-space-small); - font-size: 1.8em; -} - -h4 { - margin-top: var(--vertical-space-big); - margin-bottom: var(--vertical-space-small); - font-size: 1.6em; -} - -h5 { - margin-top: var(--vertical-space-big); - margin-bottom: var(--vertical-space-small); - font-size: 1.4em; -} - -h6 { - margin-top: var(--vertical-space-big); - margin-bottom: var(--vertical-space-small); - font-size: 1.2em; -} - -p { - margin-top: var(--vertical-space-small); - margin-bottom: var(--vertical-space-small); -} - -a { - display: inline; - margin-top: var(--vertical-space-medium); - margin-bottom: var(--vertical-space-medium); - text-decoration: none; - color: blue; -} - -button { - margin-top: var(--vertical-space-medium); - margin-bottom: var(--vertical-space-medium); - display: block; - padding: 0.7em; - margin-left: auto; - margin-right: auto; - width: fit-content; - background-color: var(--background-color-light2); - border-radius: 0.5em; -} - -img { - margin-top: var(--vertical-space-medium); - margin-bottom: var(--vertical-space-medium); -} - -ol { - margin-top: var(--vertical-space-medium); - margin-bottom: var(--vertical-space-medium); - list-style-position: outside; - padding-left: 2em; -} - -ul { - margin-top: var(--vertical-space-medium); - margin-bottom: var(--vertical-space-medium); - list-style-position: outside; - padding-left: 2em; -} - -li { - display: list-item; - margin-top: var(--vertical-space-small); - margin-bottom: var(--vertical-space-small); -} - -pre { - margin-top: var(--vertical-space-medium); - margin-bottom: var(--vertical-space-medium); - padding: 1em; - white-space: pre-wrap; - background-color: var(--background-color-light2); - border-radius: 0.5em; -} - -footer { - height: var(--vertical-space-big); - background-color: rgba(0,0,0,0); -} - -.card { - margin-top: var(--vertical-space-medium); - margin-bottom: var(--vertical-space-medium); - padding: 1em; - box-shadow: 0 0.5em 1em 0 rgba(0,0,0,0.2); - border-radius: 0.5em; -} - -.card-first-item { - margin-top: 0; -} - -.card-last-item { - margin-bottom: 0; -} - -/******************************************************************************/ - - - -/********************************** TABLET ************************************/ - -@media only screen and (min-aspect-ratio: 11/12) { -} - -/******************************************************************************/ - - - -/********************************* DESKTOP ************************************/ - -@media only screen and (min-aspect-ratio: 14/9) { - -nav { - display: inline-block; - height: 100%; - width: 15vw; - position: fixed; - margin 0; - padding 0; -} - -#menu-button { - display: none; -} - -.menu-anchor { - text-align: left; - padding-left: 1em; - padding-right: 1em; -} - -.menu-anchor:hover { - color: black; - background-color: lightgray; -} - -main { - width: auto; - margin: 0; - margin-left: 15vw; - padding: 0; - padding-left: 15vw; - padding-right: 15vw; -} - -h1 { - text-align: left; -} - -button:hover { - background-color: var(--background-color-dark2); -} - -} - -/******************************************************************************/ diff --git a/demo.png b/demo.png new file mode 100644 index 0000000..4908150 Binary files /dev/null and b/demo.png differ diff --git a/html/template.html b/html/template.html deleted file mode 100644 index ef28d03..0000000 --- a/html/template.html +++ /dev/null @@ -1,93 +0,0 @@ - - - - - - - - - libweb - - - - - - - - - - - -
-

libweb

- -

A repository with reusable components for web development. Here is a long paragraph:

- -

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.

- -

This is a link to example.com.

- -

This is an ordered list:

-
    -
  1. One
    2. -
  2. Two
    3. -
  3. Long point: Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
    4. -
- -

This is an unordered list:

-
    -
  • One
    • -
  • Two
    • -
  • Long point: Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
    • -
- -

Have a look at this beautiful code:

- 
#!/usr/bin/python3
-
-print("This is just some example code!")
-
- -

Sometimes it is quite nice to put things into cards:

-
-

This is a Card

-

Cards are very good.

-
- -

It is also possible to put cards into an anchor tag:

- -
-

This is a Card inside an Anchor

-

It is a link!

-
- -
- - - - - - diff --git a/html/test_nav_main.html b/html/test_nav_main.html deleted file mode 100644 index 7016efc..0000000 --- a/html/test_nav_main.html +++ /dev/null @@ -1,175 +0,0 @@ - - - - - - - - - libweb - - - - - - - - - - - -
- - -

A simple Test Page

-

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

-

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

-

A simple Test Page

-

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

-

A simple Test Page

-

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

-

A simple Test Page

-

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

-
A simple Test Page
-

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

-
A simple Test Page
-

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

- - -

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.

- - - Example Link - - - An example image - Not existing image - - -
    -
  1. First item
    2. -
  2. Second item
    3. -
  3. Third item
    4. -
  4. Long item: 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.
    5. -
-

Just some 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.

-
    -
  • An item
    • -
  • Another item
    • -
  • Just another item
    • -
  • Long item: 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.
    • -
- - - 
#!/bin/sh
-
-# This is a cool shell script.
-echo "I am $(whoami)"
-
- - -
-

This is a Card

-

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.

-

This is a Card

-

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.

-
- -
- -
- - - - - - diff --git a/html/test_simple.html b/html/test_simple.html deleted file mode 100644 index 3791429..0000000 --- a/html/test_simple.html +++ /dev/null @@ -1,175 +0,0 @@ - - - - - - - - - libweb - - - - - - - - - -
- - -

A simple Test Page

-

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

-

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

-

A simple Test Page

-

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

-

A simple Test Page

-

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

-

A simple Test Page

-

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

-
A simple Test Page
-

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

-
A simple Test Page
-

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

- - -

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.

- - - Example Link - - - - - - An example image - Not existing image - - -
    -
  1. First item
    2. -
  2. Second item
    3. -
  3. Third item
    4. -
  4. Long item: 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.
    5. -
  5. an item
    6. -
  6. an item
    7. -
  7. an item
    8. -
  8. an item
    9. -
  9. an item
    10. -
  10. an item
    11. -
-

Just some 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.

-
    -
  • An item
    • -
  • Another item
    • -
  • Just another item
    • -
  • Long item: 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.
    • -
- - - 
#!/bin/sh
-
-# This is a cool shell script.
-echo "I am $(whoami)"
-
- - -
-

This is a Card

-

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.

-

This is a Card

-

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.

-
- -
- - - -
- - - - diff --git a/img/demo.png b/img/demo.png deleted file mode 100644 index 4908150..0000000 Binary files a/img/demo.png and /dev/null differ diff --git a/index.html b/index.html deleted file mode 100644 index db676c0..0000000 --- a/index.html +++ /dev/null @@ -1,61 +0,0 @@ - - - - - - - - - libweb - - - - - - - - - - - -
-

libweb

-

A repository with reusable components for web development.

- -

Test Pages

-

Here are some test pages:

- -
- - - - - - diff --git a/js/xengineering.js b/js/xengineering.js deleted file mode 100644 index d82db88..0000000 --- a/js/xengineering.js +++ /dev/null @@ -1,71 +0,0 @@ -/* -vim: shiftwidth=2 tabstop=2 expandtab - -libweb - reusable code for websites - - Copyright (C) 2021 xengineering - - This program is free software: you can redistribute it and/or modify - it under the terms of the GNU Affero General Public License as published by - the Free Software Foundation, either version 3 of the License, or - (at your option) any later version. - - This program is distributed in the hope that it will be useful, - but WITHOUT ANY WARRANTY; without even the implied warranty of - MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the - GNU Affero General Public License for more details. - - You should have received a copy of the GNU Affero General Public License - along with this program. If not, see . - -contact via mail: me@xengineering.eu -*/ - -// define menu state -const MenuState = { - Desktop: "Desktop", - MobileCollapsed: "MobileCollapsed", - MobileExpanded: "MobileExpanded" -} -var state; - -// init menu state and add mediaChange handler -var isMobile = window.matchMedia("(max-aspect-ratio: 14/9)"); -mediaChange(isMobile); -isMobile.addListener(mediaChange) - -function mediaChange(isMobile) { - if (isMobile.matches) { - state = MenuState.MobileCollapsed; - handleState(state); - } else { - state = MenuState.Desktop; - handleState(state); - } -} - -function toggleMenu() { - switch (state) { - case MenuState.MobileCollapsed: - state = MenuState.MobileExpanded; - handleState(state); - break; - case MenuState.MobileExpanded: - state = MenuState.MobileCollapsed; - handleState(state); - break; - } -} - -function handleState(state) { - var items = document.getElementsByTagName("a"); - for(var i=0; i. + +contact via mail: me@xengineering.eu +*/ + + +/******************************** VARIABLES ***********************************/ + +:root { + --font-color-dark: black; + --font-color-light: white; + + --background-color-light: white; + --background-color-light2: lightgray; + --background-color-dark: black; + --background-color-dark2: darkgray; + + --font-family-primary: Arial, Helvetica, sans-serif; + + --vertical-space-small: 1vh; + --vertical-space-medium: 2vh; + --vertical-space-big: 3vh; +} + +/***************************** DEFAULT / MOBILE *******************************/ + +/* personal defaults for all elements */ +* { + /* box model elements */ + margin: 0; + padding: 0; + border: 0 solid; + + /* positioning */ + position: relative; + float: none; + top: 0; + bottom: 0; + left: 0; + right: 0; + + display: block; + box-sizing: border-box; + width: 100%; + height: auto; + + /* styling */ + font-family: var(--font-family-primary); + font-size: 1.0em; + color: var(--font-color-dark); + border-color: var(--font-color-dark); + background-color: var(--background-color-light); +} + +head { + display: none; /* do not display anything from the head section */ +} + +/* body */ + +nav { + background-color: var(--background-color-dark); +} + +#menu-button { + width: 100%; + padding-top: 1em; + padding-bottom: 1em; + margin: 0; + text-align: center; + color: var(--font-color-light); + background-color: var(--background-color-dark); +} + +.menu-anchor { + padding-top: 1em; + padding-bottom: 1em; + padding-left: 0; + padding-right: 0; + margin: 0; + text-align: center; + color: var(--font-color-light); + background-color: var(--background-color-dark); +} + +main { + padding-left: 3vw; + padding-right: 3vw; +} + +h1 { + text-align: center; + margin-top: var(--vertical-space-big); + margin-bottom: var(--vertical-space-small); + font-size: 2.2em; +} + +h2 { + margin-top: var(--vertical-space-big); + margin-bottom: var(--vertical-space-small); + font-size: 2.0em; +} + +h3 { + margin-top: var(--vertical-space-big); + margin-bottom: var(--vertical-space-small); + font-size: 1.8em; +} + +h4 { + margin-top: var(--vertical-space-big); + margin-bottom: var(--vertical-space-small); + font-size: 1.6em; +} + +h5 { + margin-top: var(--vertical-space-big); + margin-bottom: var(--vertical-space-small); + font-size: 1.4em; +} + +h6 { + margin-top: var(--vertical-space-big); + margin-bottom: var(--vertical-space-small); + font-size: 1.2em; +} + +p { + margin-top: var(--vertical-space-small); + margin-bottom: var(--vertical-space-small); +} + +a { + display: inline; + margin-top: var(--vertical-space-medium); + margin-bottom: var(--vertical-space-medium); + text-decoration: none; + color: blue; +} + +button { + margin-top: var(--vertical-space-medium); + margin-bottom: var(--vertical-space-medium); + display: block; + padding: 0.7em; + margin-left: auto; + margin-right: auto; + width: fit-content; + background-color: var(--background-color-light2); + border-radius: 0.5em; +} + +img { + margin-top: var(--vertical-space-medium); + margin-bottom: var(--vertical-space-medium); +} + +ol { + margin-top: var(--vertical-space-medium); + margin-bottom: var(--vertical-space-medium); + list-style-position: outside; + padding-left: 2em; +} + +ul { + margin-top: var(--vertical-space-medium); + margin-bottom: var(--vertical-space-medium); + list-style-position: outside; + padding-left: 2em; +} + +li { + display: list-item; + margin-top: var(--vertical-space-small); + margin-bottom: var(--vertical-space-small); +} + +pre { + margin-top: var(--vertical-space-medium); + margin-bottom: var(--vertical-space-medium); + padding: 1em; + white-space: pre-wrap; + background-color: var(--background-color-light2); + border-radius: 0.5em; +} + +footer { + height: var(--vertical-space-big); + background-color: rgba(0,0,0,0); +} + +.card { + margin-top: var(--vertical-space-medium); + margin-bottom: var(--vertical-space-medium); + padding: 1em; + box-shadow: 0 0.5em 1em 0 rgba(0,0,0,0.2); + border-radius: 0.5em; +} + +.card-first-item { + margin-top: 0; +} + +.card-last-item { + margin-bottom: 0; +} + +/******************************************************************************/ + + + +/********************************** TABLET ************************************/ + +@media only screen and (min-aspect-ratio: 11/12) { +} + +/******************************************************************************/ + + + +/********************************* DESKTOP ************************************/ + +@media only screen and (min-aspect-ratio: 14/9) { + +nav { + display: inline-block; + height: 100%; + width: 15vw; + position: fixed; + margin 0; + padding 0; +} + +#menu-button { + display: none; +} + +.menu-anchor { + text-align: left; + padding-left: 1em; + padding-right: 1em; +} + +.menu-anchor:hover { + color: black; + background-color: lightgray; +} + +main { + width: auto; + margin: 0; + margin-left: 15vw; + padding: 0; + padding-left: 15vw; + padding-right: 15vw; +} + +h1 { + text-align: left; +} + +button:hover { + background-color: var(--background-color-dark2); +} + +} + +/******************************************************************************/ diff --git a/libweb.js b/libweb.js new file mode 100644 index 0000000..d82db88 --- /dev/null +++ b/libweb.js @@ -0,0 +1,71 @@ +/* +vim: shiftwidth=2 tabstop=2 expandtab + +libweb - reusable code for websites + + Copyright (C) 2021 xengineering + + This program is free software: you can redistribute it and/or modify + it under the terms of the GNU Affero General Public License as published by + the Free Software Foundation, either version 3 of the License, or + (at your option) any later version. + + This program is distributed in the hope that it will be useful, + but WITHOUT ANY WARRANTY; without even the implied warranty of + MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the + GNU Affero General Public License for more details. + + You should have received a copy of the GNU Affero General Public License + along with this program. If not, see . + +contact via mail: me@xengineering.eu +*/ + +// define menu state +const MenuState = { + Desktop: "Desktop", + MobileCollapsed: "MobileCollapsed", + MobileExpanded: "MobileExpanded" +} +var state; + +// init menu state and add mediaChange handler +var isMobile = window.matchMedia("(max-aspect-ratio: 14/9)"); +mediaChange(isMobile); +isMobile.addListener(mediaChange) + +function mediaChange(isMobile) { + if (isMobile.matches) { + state = MenuState.MobileCollapsed; + handleState(state); + } else { + state = MenuState.Desktop; + handleState(state); + } +} + +function toggleMenu() { + switch (state) { + case MenuState.MobileCollapsed: + state = MenuState.MobileExpanded; + handleState(state); + break; + case MenuState.MobileExpanded: + state = MenuState.MobileCollapsed; + handleState(state); + break; + } +} + +function handleState(state) { + var items = document.getElementsByTagName("a"); + for(var i=0; i + + + + + + + + libweb + + + + + + + + + + + +
+ + +

A simple Test Page

+

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

+

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

+

A simple Test Page

+

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

+

A simple Test Page

+

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

+

A simple Test Page

+

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

+
A simple Test Page
+

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

+
A simple Test Page
+

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

+ + +

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.

+ + + Example Link + + + An example image + Not existing image + + +
    +
  1. First item
    2. +
  2. Second item
    3. +
  3. Third item
    4. +
  4. Long item: 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.
    5. +
+

Just some 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.

+
    +
  • An item
    • +
  • Another item
    • +
  • Just another item
    • +
  • Long item: 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.
    • +
+ + + 
#!/bin/sh
+
+# This is a cool shell script.
+echo "I am $(whoami)"
+
+ + +
+

This is a Card

+

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.

+

This is a Card

+

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.

+
+ +
+ +
+ + + + + + diff --git a/todo b/todo new file mode 100644 index 0000000..fc3190d --- /dev/null +++ b/todo @@ -0,0 +1,2 @@ +badge support for https://krautmacher.org/services/ejabberd.html +rotated mobile screen bug -- cgit v1.2.3-70-g09d2