diff --git a/assets/celticinfo_banner_assets.xcf b/assets/celticinfo_banner_assets.xcf index 9febbdf..9bf178b 100644 Binary files a/assets/celticinfo_banner_assets.xcf and b/assets/celticinfo_banner_assets.xcf differ diff --git a/css/style.css b/css/style.css index 540d800..1fbaf36 100644 --- a/css/style.css +++ b/css/style.css @@ -1,7 +1,8 @@ +/* Define root CSS variables for easy theme management */ :root { --main-bg-color: #121E2A; --main-text-color: #fff; - --secondary-bg-color: #DAE6E7; + --secondary-bg-color: #e8eff0; --secondary-text-color: #121E2A; } @@ -10,17 +11,17 @@ src: url(SourceCodeVF-Upright.otf); } -/* General Body Styling */ +/* General body styling, applies to the entire document */ body { font-family: sourcecodevf, 'Arial', sans-serif; margin: 0 auto; - max-width: 1581px; + max-width: 2048px; padding: 0; background-color: white; color: var(--main-text-color); } -/* Container */ +/* Container is a wrapper for all content, provides padding and centers content */ .container { width: 100%; margin: auto; @@ -39,7 +40,7 @@ body { color: var(--main-text-color); text-decoration: none; text-transform: uppercase; - font-size: 16px; + font-size: 26px; } /* logo */ @@ -65,7 +66,7 @@ body { } .menu ul li { - display: inline; + display: inline; /* inline display for list items for a horizontal navigation menu */ margin-left: 35px; } @@ -93,21 +94,21 @@ body { .banner-content-middle { position: absolute; - top: 34%; - left: 36%; - font-size: 54px; /* Responsive font size */ + top: 35%; + left: 35%; + font-size: 80px; text-align: center; } .banner-content-middle .company-name { - font-size: 68px; /* Responsive font size */ + font-size: 100px; } .banner-content-bottom { position: absolute; - bottom: 7%; - right: 11%; - font-size: 20px; /* Responsive font size */ + bottom: 8%; + right: 4%; + font-size: 28px; } .banner-content-bottom a { @@ -119,14 +120,29 @@ body { text-decoration: underline; } - /* Main Content */ main { padding: 20px; color: var(--secondary-text-color); + background: var(--main-bg-color); + margin-top: -1px; +} + +section { + padding: 5px 15px; + -webkit-box-shadow: 6px 6px 8px 0px rgba(255,255,255,0.6); + box-shadow: 6px 6px 8px 0px rgba(255,255,255,0.6); + /* + -webkit-box-shadow: 6px 6px 8px 0px rgba(18,30,42,0.6); + box-shadow: 6px 6px 8px 0px rgba(18,30,42,0.6); + */ background: var(--secondary-bg-color); } +section:not(:first-child) { + margin-top: 20px; +} + /* Footer */ .footer { background: var(--main-bg-color); @@ -163,7 +179,11 @@ main { } /* Media Queries */ -@media (max-width: 1581px) { +@media (max-width: 2048px) { + .header a { + font-size: 20px; + } + .banner-content-middle { top: 35%; left: 35%; @@ -175,14 +195,15 @@ main { } .banner-content-bottom { - position: absolute; - bottom: 8%; - right: 4%; font-size: 1.4vw; /* Responsive font size */ } } @media (max-width: 768px) { + .header a { + font-size: 16px; + } + .menu { float: none; width: 120px; diff --git a/images/celticinfo_banner_large.png b/images/celticinfo_banner_large.png deleted file mode 100644 index b78a868..0000000 Binary files a/images/celticinfo_banner_large.png and /dev/null differ diff --git a/images/celticinfo_banner_medium.png b/images/celticinfo_banner_medium.png deleted file mode 100644 index 84b9087..0000000 Binary files a/images/celticinfo_banner_medium.png and /dev/null differ diff --git a/images/celticinfo_banner_upscale.png b/images/celticinfo_banner_upscale.png new file mode 100644 index 0000000..add7cda Binary files /dev/null and b/images/celticinfo_banner_upscale.png differ diff --git a/index.html b/index.html index 20cd49f..a34040c 100644 --- a/index.html +++ b/index.html @@ -1,3 +1,4 @@ + @@ -12,23 +13,20 @@
- - -
- -
+
+ +
-