From d6fa6b112451f10f505db886d0ed023b3b931814 Mon Sep 17 00:00:00 2001 From: xengineering Date: Fri, 11 Jun 2021 09:25:18 +0200 Subject: Add CSS --- data/css/birdscan.css | 109 ++++++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 109 insertions(+) create mode 100644 data/css/birdscan.css (limited to 'data') diff --git a/data/css/birdscan.css b/data/css/birdscan.css new file mode 100644 index 0000000..6fe2468 --- /dev/null +++ b/data/css/birdscan.css @@ -0,0 +1,109 @@ +/* + 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; +} + +h1 { + text-align: center; +} + +img { + max-width: 100%; + height: auto; +} + +a { + text-decoration: none; /* disable ugly underlined links */ +} + +nav a { + color: lightgray; +} + +/* 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; +} + +main * { + display: block; +} + +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 */ + } +} -- cgit v1.2.3-70-g09d2