From d7da2b70826980291f08c9f95fa4a89e903af492 Mon Sep 17 00:00:00 2001 From: xengineering Date: Mon, 30 Aug 2021 21:37:05 +0200 Subject: Implement Menu --- css/xengineering.css | 91 +++++++++++++++++++++------------------------------- debug.html | 33 +------------------ html/template.html | 49 ++++++++++++++++++++++++++++ 3 files changed, 87 insertions(+), 86 deletions(-) mode change 100644 => 120000 debug.html create mode 100644 html/template.html 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 deleted file mode 100644 index 151c638..0000000 --- a/debug.html +++ /dev/null @@ -1,32 +0,0 @@ - - - - - - - - - libweb - - - - - - - - - - - -
-

libweb

-

A repository with reusable components for web development.

-
- - - - diff --git a/debug.html b/debug.html new file mode 120000 index 0000000..4bc392f --- /dev/null +++ b/debug.html @@ -0,0 +1 @@ +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 @@ + + + + + + + + + libweb + + + + + + + + + + + +
+

libweb

+

A repository with reusable components for web development.

+ example link +
+ + + + + + -- cgit v1.2.3-70-g09d2