From 7ef40cba9c907dbd204d40ca1046ac83c688149b Mon Sep 17 00:00:00 2001 From: Jeff Avallone Date: Sat, 10 Feb 2018 17:00:01 -0500 Subject: [PATCH] Adding app frame --- src/style.css | 99 ++++++++++++++++++++++++++++++++++++++++++++++- src/template.html | 43 +++++++++++++++++++- 2 files changed, 138 insertions(+), 4 deletions(-) diff --git a/src/style.css b/src/style.css index 9d23ceb..2e67764 100644 --- a/src/style.css +++ b/src/style.css @@ -1,3 +1,98 @@ -body { - font-family: sans-serif; +@import url('//fonts.googleapis.com/css?family=Bangers&text=Regxpr'); + +:root { + --color-green: #bada55; + --color-brown: #6b6659; + --color-tan: #cbcbba; + --color-black: #000; + --color-white: #fff; + --color-red: #b3151a; + + --header-height: 6rem; + --content-margin: 2rem; + --spacing-margin: 1rem; +} + +html { + font-size: 62.5%; +} + +body { + margin: 0 var(--content-margin); + padding: 0; + font-family: sans-serif; + background: var(--color-brown); + font-size: 1.6rem; +} + +#main { + background: var(--color-green) linear-gradient(to bottom, rgba(0,0,0,0) 0%, rgba(0,0,0,0.4) 100%); + box-shadow: 0 0 1rem var(--color-black); + padding: 0 var(--content-margin); + margin: 0 calc(-1 * var(--content-margin)) var(--spacing-margin) calc(-1 * var(--content-margin)); + position: relative; +} + +#main h1 { + font-family: 'Bangers', 'cursive'; + font-size: 4rem; + font-weight: normal; + display: inline-block; + margin: 0; + line-height: var(--header-height); +} + +#main a { + text-decoration: none; + display: inline-block; +} + +#main ul { + line-height: var(--header-height); + position: absolute; + top: 0; + right: var(--content-margin); +} + +#main li a:hover, +#main li a:active { + text-decoration: underline; +} + +footer { + margin: var(--spacing-margin) 0; +} + +footer img { + vertical-align: text-top; + width: 80px; + height: 15px; +} + +a { + color: inherit; +} + +ul { + list-style: none; + margin: 0; + padding: 0; +} + +li { + list-style-type: none; + display: inline-block; +} + +.inline-list li { + white-space: nowrap; +} + +.inline-list li:after { + content: '//'; + padding: 0 0.5rem; +} + +.inline-list li:last-child:after { + content: ''; } diff --git a/src/template.html b/src/template.html index 25f727d..d4d8f98 100644 --- a/src/template.html +++ b/src/template.html @@ -1,10 +1,49 @@ - + - + + + + + + Regexper +
+

+ Regexper +

+ + +
+ + +
+ +