diff options
author | xengineering <me@xengineering.eu> | 2021-08-30 09:04:20 +0200 |
---|---|---|
committer | xengineering <me@xengineering.eu> | 2021-08-30 09:04:20 +0200 |
commit | 51ff53be7d7b734cb306f7fb98c8381d5e35ab7d (patch) | |
tree | 99452f8359bfb401cab4d1a8a8af4e8f5af83357 | |
parent | f1ff1a362529a6f49e1b40eafb008f1fa3e663a9 (diff) | |
download | libweb-51ff53be7d7b734cb306f7fb98c8381d5e35ab7d.tar libweb-51ff53be7d7b734cb306f7fb98c8381d5e35ab7d.tar.zst libweb-51ff53be7d7b734cb306f7fb98c8381d5e35ab7d.zip |
Add old Code
-rw-r--r-- | css/xengineering.css | 93 |
1 files changed, 93 insertions, 0 deletions
diff --git a/css/xengineering.css b/css/xengineering.css new file mode 100644 index 0000000..63357e9 --- /dev/null +++ b/css/xengineering.css @@ -0,0 +1,93 @@ +/* + vim: shiftwidth=2 tabstop=2 expandtab +*/ + +/* + General Stuff +*/ + +* { + 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; +} + +main { + background-color: white; +} + +nav a { + color: lightgray; + text-decoration: none; /* disable ugly underlined links */ +} + +/* How should the link behave if the mouse is over this item? */ +nav a:hover { + background-color: lightgray; + color: black; +} + + + +/* + Default Geometry / Geometry for Phones ('Mobile First Development') +*/ + +main { + padding-left: 20px; + padding-right: 20px; + text-align: justify; +} + +nav a { + display: block; + padding: 16px; + text-align: center; +} + + + +/* + Geometry for Tablets +*/ + +@media only screen and (min-width: 600px) { + /* empty --> same rules as for phones */ +} + + + +/* + Geometry for Desktops +*/ + +@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 */ + } +} |