From 331eca575d088c41df150b7b378a2f52cff1933e Mon Sep 17 00:00:00 2001 From: kts of kettek Date: Sun, 24 Jan 2016 05:15:34 -0800 Subject: [PATCH] Adjusted body background to be separate from the content background -- also added a shadow to the content. Updated TODO for future snazz. --- TODO.md | 1 + wiki/style.css | 40 ++++++++++++++++++++++++++++++---------- 2 files changed, 31 insertions(+), 10 deletions(-) diff --git a/TODO.md b/TODO.md index f518ae8..b84d070 100644 --- a/TODO.md +++ b/TODO.md @@ -4,3 +4,4 @@ * Create actual login restrictions and credentials * Allow file uploading * Make searching a thing + * Make controls stay at top of document window when scrolling out of bounds diff --git a/wiki/style.css b/wiki/style.css index dd9e9ad..8b9d5c2 100644 --- a/wiki/style.css +++ b/wiki/style.css @@ -1,12 +1,15 @@ html,body { - background-color: #f3f3d8; + background-color: #fbf4d0; color: #0c0c27; margin: 0; padding: 0; width: 100%; height: 100%; font-size: large; } #wrapper { - min-height: 100%; + border-bottom: 1px solid transparent; + + height: auto; + position: relative; } #content { @@ -19,12 +22,14 @@ html,body { padding-right: 2em; padding-bottom: 2em; margin: auto; + margin-bottom: 2em; max-width: 36em; - min-height: 100%; - height: 100%; - /*-webkit-box-shadow: inset 0px 0px 3px 0px rgba(0,0,0,0.75); - -moz-box-shadow: inset 0px 0px 3px 0px rgba(0,0,0,0.75); - box-shadow: inset 0px 0px 3px 0px rgba(0,0,0,0.75);*/ + display: block; + background-color: #f3f3d8; + -webkit-box-shadow: 0px 0px 3px 0px rgba(0,0,0,0.75); + -moz-box-shadow: 0px 0px 3px 0px rgba(0,0,0,0.75); + box-shadow: 0px 0px 6px 0px rgba(0,0,0,0.25), 0px 0px 120px 0px #dbB470; + z-index: 1000; } #content h1, #content h2, #content h3, #content h4, #content h5, #content h6 { font-weight: 700; @@ -36,7 +41,7 @@ html,body { width: 100%; } #content code { - background-color: #3c3c57; + background-color: #6c6c87; color: #f3f3d8; font-family: 'Roboto Mono', courier, monospace; padding: 0 0.3em 0.1em 0.3em; @@ -46,20 +51,31 @@ html,body { display: block; width: 100%; padding: 1em; - box-shadow: inset 2px 2px 8px #0c0c27; + -webkit-box-sizing: border-box; + -moz-box-sizing: border-box; + box-sizing: border-box; + box-shadow: inset 2px 2px 8px #2c2c47; +} +#content a { + color: #b87602; +} +#content a:visited { + color: #6c6c87; } #footer { font-size: 50%; text-align: center; width: 100%; - position: absolute; padding-bottom: 1em; padding-top: 1em; + position: absolute; bottom: 0; left: 0; } /* menu and flexbox styling */ #menu { + position: relative; + z-index: 1001; font-family: 'Oswald', sans-serif; font-size: 100%; width: 100%; @@ -127,6 +143,7 @@ html,body { } /* controls */ #controls { + position: relative; font-family: 'Oswald', sans-serif; font-size: 75%; width: 100%; @@ -142,6 +159,7 @@ html,body { -webkit-flew-flow: row wrap; justify-content: space-around; align-items: center; + z-index: 1001; } #controls li { flex-grow: 1; @@ -186,6 +204,8 @@ html,body { -webkit-flex-flow: row wrap; justify-content: flex-start; align-items: stretch; + position: relative; + z-index: 1001; } #crumbs li { text-align: left;