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/Images/Background.jpg | Bin 0 -> 298321 bytes public/index.html | 89 +++++++++++++++++++++----- public/logo.jpg | Bin 0 -> 5074 bytes public/script.js | 29 +++++++++ public/style.css | 145 ++++++++++++++++++++++++++++++++++++++----- 5 files changed, 234 insertions(+), 29 deletions(-) create mode 100644 public/Images/Background.jpg create mode 100644 public/logo.jpg create mode 100644 public/script.js (limited to 'public') diff --git a/public/Images/Background.jpg b/public/Images/Background.jpg new file mode 100644 index 0000000..03885ba Binary files /dev/null and b/public/Images/Background.jpg differ diff --git a/public/index.html b/public/index.html index 6652c7d..1626519 100644 --- a/public/index.html +++ b/public/index.html @@ -1,23 +1,84 @@ - + - - Plain HTML site using GitLab Pages - + Shipwreckt + + + + + + + + + - -

Hello World!

+ + +

+

+

+ + + + + + + +

+

+

+ + + + - diff --git a/public/logo.jpg b/public/logo.jpg new file mode 100644 index 0000000..5446c6c Binary files /dev/null and b/public/logo.jpg differ diff --git a/public/script.js b/public/script.js new file mode 100644 index 0000000..008cc05 --- /dev/null +++ b/public/script.js @@ -0,0 +1,29 @@ +// Wait for the document to load before running the script +(function ($) { + + // We use some Javascript and the URL #fragment to hide/show different parts of the page + // https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#Linking_to_an_element_on_the_same_page + $(window).on('load hashchange', function(){ + + // First hide all content regions, then show the content-region specified in the URL hash + // (or if no hash URL is found, default to first menu item) + $('.content-region').hide(); + + // Remove any active classes on the main-menu + $('.main-menu a').removeClass('active'); + var region = location.hash.toString() || $('.main-menu a:first').attr('href'); + + // Now show the region specified in the URL hash + $(region).show(); + + // Highlight the menu link associated with this region by adding the .active CSS class + $('.main-menu a[href="'+ region +'"]').addClass('active'); + + // Alternate method: Use AJAX to load the contents of an external file into a div based on URL fragment + // This will extract the region name from URL hash, and then load [region].html into the main #content div + // var region = location.hash.toString() || '#first'; + // $('#content').load(region.slice(1) + '.html') + + }); + +})(jQuery); 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