From a65705b92b5fb688d2f8dc03bb97b745c2cfee27 Mon Sep 17 00:00:00 2001 From: Shipwreckt Date: Sun, 12 May 2024 16:28:43 +0100 Subject: added the website files --- public/style.css | 145 +++++++++++++++++++++++++++++++++++++++++++++++++------ 1 file changed, 130 insertions(+), 15 deletions(-) (limited to 'public/style.css') diff --git a/public/style.css b/public/style.css index 3eae408..8ee3f07 100644 --- a/public/style.css +++ b/public/style.css @@ -1,24 +1,139 @@ +/** + * Typography & Text styles + */ +html { + font-size: 62.5%; +} body { - font-family: sans-serif; - margin: auto; - max-width: 1280px; + font-size: 1.5em; /* currently ems cause chrome bug misinterpreting rems on body element */ + line-height: 1.6; + font-weight: 400; + font-family: "Roboto", "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif; + color: #FFFFFF; +} + +/** + * Links + */ +a { + font-weight: normal; + text-decoration: none; + color:#6738a5; +} +a:focus { + outline: thin dotted; +} + +small { + font-size: 75%; +} + +/** + * Headings + */ +h1, +h2, +h3, +h4, +h5, +h6 { + line-height: 1; + text-rendering: optimizeLegibility; /* voodoo to enable ligatures and kerning | https://developer.mozilla.org/en-US/docs/CSS/text-rendering */ + margin-top: 0; + margin-bottom: 2rem; + font-weight: 300; } +h1 { font-size: 3.6rem; line-height: 1.25; letter-spacing: -.1rem; } +h2 { font-size: 3.0rem; line-height: 1.3; letter-spacing: -.1rem; } +h3 { font-size: 2.4rem; line-height: 1.35; letter-spacing: -.08rem; } +h4 { font-size: 1.8rem; line-height: 1.5; letter-spacing: -.05rem; } +h5 { font-size: 1.5rem; line-height: 1.6; letter-spacing: 0; } +h6 { font-size: 1.4rem; line-height: 1.6; letter-spacing: 0; } -.navbar { - background-color: #313236; - border-radius: 2px; - max-width: 800px; +/** + * Paragraphs + */ +p { + margin: 0 auto 1.5em auto; /* bottom margin for paragraphs */ } +p + p { -.navbar a { - color: #aaa; - display: inline-block; - font-size: 15px; - padding: 10px; - text-decoration: none; } -.navbar a:hover { - color: #ffffff; +/** + * Quotes & Blockquotes + */ +q { + quotes: '\00201C' '\00201D'; } +q:before { + content: open-quote; +} +q:after { + content: close-quote; +} + +blockquote { + /*background-color: #F8F8F8;*/ + border-left: 2px solid #AFC0D2; + margin: 1.6em 10%; + padding: .75em 1em; + font-size:1.8rem; +} +blockquote p:last-child { + margin-bottom: 0; +} + +/** + * Layout styles + */ + +/* Full size background image */ +html, #container, .inner { background-color:transparent;} +html { + background:url(Images/Background.jpg) center center no-repeat fixed; + background-size:cover; +} +body { + max-width:800px; + margin:25px auto; +} +header, #content, footer { + background: rgba(0,0,0,.8); + padding:25px; + color:#FFFFFF; +} + +/* Menu Links */ +ul.main-menu { + margin: 0; + padding: 0; + display: flex; + flex-wrap: wrap; + justify-content: left; + list-style: none; +} +ul.main-menu li a { + margin-right:20px; + font-size:2.0rem; + border-bottom: solid transparent 3px; + color:#cfd2da; +} +ul.main-menu li a:hover { + color:#FFFFFF; +} +ul.main-menu li a.active { + color:#FFFFFF; + border-bottom-color:#6129aa; +} + +/* Utility classes */ +.hide { + display:none; +} +.show { + display:block; +} + + -- cgit v1.2.3