diff options
| author | xengineering <me@xengineering.eu> | 2021-08-30 21:37:05 +0200 |
|---|---|---|
| committer | xengineering <me@xengineering.eu> | 2021-09-04 11:58:17 +0200 |
| commit | d7da2b70826980291f08c9f95fa4a89e903af492 (patch) | |
| tree | 81681aaaa19032c5cccefd6ef27da0384279915d | |
| parent | 51ff53be7d7b734cb306f7fb98c8381d5e35ab7d (diff) | |
| download | libweb-d7da2b70826980291f08c9f95fa4a89e903af492.tar libweb-d7da2b70826980291f08c9f95fa4a89e903af492.tar.zst libweb-d7da2b70826980291f08c9f95fa4a89e903af492.zip | |
Implement Menu
| -rw-r--r-- | css/xengineering.css | 91 | ||||
| l---------[-rw-r--r--] | debug.html | 33 | ||||
| -rw-r--r-- | html/template.html | 49 |
3 files changed, 87 insertions, 86 deletions
diff --git a/css/xengineering.css b/css/xengineering.css index 63357e9..97a7f96 100644 --- a/css/xengineering.css +++ b/css/xengineering.css @@ -1,93 +1,76 @@ -/* - vim: shiftwidth=2 tabstop=2 expandtab -*/ /* - General Stuff +vim: shiftwidth=2 tabstop=2 expandtab */ + + +/********************************** MOBILE ************************************/ + * { - box-sizing: border-box; /* Include padding and border in the element's total width and height */ -} -body { - margin: 0; /* avoid ugly white margin */ - font-family: Arial, Helvetica, sans-serif; /* select a nice font */ } -nav { - background-color: black; +body { + margin: 0; + font-family: Arial, Helvetica, sans-serif; } main { + padding-left: 20px; + padding-right: 20px; + text-align: justify; background-color: white; } nav a { + display: none; + padding: 16px; + text-align: center; color: lightgray; - text-decoration: none; /* disable ugly underlined links */ + background-color: black; + text-decoration: none; } -/* How should the link behave if the mouse is over this item? */ nav a:hover { - background-color: lightgray; color: black; + background-color: lightgray; } - - -/* - Default Geometry / Geometry for Phones ('Mobile First Development') -*/ - -main { - padding-left: 20px; - padding-right: 20px; - text-align: justify; -} - -nav a { +nav button { display: block; + border: 0px; + width: 100%; padding: 16px; text-align: center; + color: lightgray; + background-color: black; + text-decoration: none; } +nav button:hover { + color: black; + background-color: lightgray; +} +/******************************************************************************/ -/* - Geometry for Tablets -*/ + + +/********************************** TABLET ************************************/ @media only screen and (min-width: 600px) { - /* empty --> same rules as for phones */ + } +/******************************************************************************/ -/* - Geometry for Desktops -*/ + +/********************************* DESKTOP ************************************/ @media only screen and (min-width: 768px) { - nav { - height: 100%; - width: 200px; - position: fixed; /* position fixed in top left corner (with offset) */ - top: 0px; /* disable the offset from top left corner */ - } - - nav a { - text-align: left; - } - - main { - margin-left: 200px; /* transparent margin on the left for nav */ - } - - main *{ /* everything inside the content container */ - max-width: 960px; /* maximum width on desktops should be 960 px */ - margin-left: auto; /* center it with margin */ - margin-right: auto; /* center it with margin */ - } } + +/******************************************************************************/ diff --git a/debug.html b/debug.html index 151c638..4bc392f 100644..120000 --- a/debug.html +++ b/debug.html @@ -1,32 +1 @@ -<!DOCTYPE html> - -<!-- - vim: shiftwidth=4 tabstop=4 noexpandtab ---> - -<html> - - <head> - - <title>libweb</title> - - <meta charset="utf-8"/> - <meta name="viewport" content="width=device-width, initial-scale=1.0"> - <link rel="stylesheet" href="css/xengineering.css" type="text/css"> - - </head> - - <body> - - <nav> - <a href="https://xengineering.eu">xengineering.eu</a> - </nav> - - <main> - <h1>libweb</h1> - <p>A repository with reusable components for web development.</p> - </main> - - </body> - -</html> +html/template.html
\ No newline at end of file diff --git a/html/template.html b/html/template.html new file mode 100644 index 0000000..8416587 --- /dev/null +++ b/html/template.html @@ -0,0 +1,49 @@ +<!DOCTYPE html> + +<!-- + vim: shiftwidth=4 tabstop=4 noexpandtab +--> + +<html> + + <head> + + <title>libweb</title> + + <meta charset="utf-8"/> + <meta name="viewport" content="width=device-width, initial-scale=1.0"> + <link rel="stylesheet" href="../css/xengineering.css" type="text/css"> + + </head> + + <body> + + <nav> + <button onclick=toggleMenu()>MENU</button> + <a href="https://xengineering.eu">xengineering.eu</a> + </nav> + + <main> + <h1>libweb</h1> + <p>A repository with reusable components for web development.</p> + <a href="https://example.com">example link</a> + </main> + + <script> + function toggleMenu() { + var items = document.getElementsByTagName("a"); + for(var i=0; i<items.length; i++) { + if (items[i].parentNode.tagName == "NAV") { + if (items[i].style.display == "block") { + items[i].style.display = "none"; + } else { + items[i].style.display = "block"; + } + } + } + } + </script> + + </body> + +</html> |