diff --git a/website/src/_data/mydata.json b/website/src/_data/mydata.json index 179f074..728599c 100644 --- a/website/src/_data/mydata.json +++ b/website/src/_data/mydata.json @@ -1,12 +1,29 @@ [ { - "title": "James Midzi", - "description": "A site to showcase Eleventy features by building a site.", - "keywords": "eleventy, 11ty, css, ssg" + "title": "Really cool stuff", + "description": "Doesn't get much cooler than this.", + "keywords": "stuff, things" }, { - "title": "Yolo", - "description": "description 2.", - "keywords": "eleventy" + "title": "Funky thang", + "description": "You know, stuff and things.", + "keywords": "things, thangs" + }, + { + "title": "Funky thang", + "description": "You know, stuff and other things.", + "keywords": "" + } + , + { + "title": "Another funky thang", + "description": "You know, stuff and different things.", + "keywords": "yolo" + } + , + { + "title": "Yet one more funky thang", + "description": "You know, stuff and whatever.", + "keywords": "sup?" } ] \ No newline at end of file diff --git a/website/src/_includes/partials/_header.njk b/website/src/_includes/partials/_header.njk index ea3ec03..c2f9cc7 100644 --- a/website/src/_includes/partials/_header.njk +++ b/website/src/_includes/partials/_header.njk @@ -1,13 +1,15 @@
- - - -
\ No newline at end of file + + + + \ No newline at end of file diff --git a/website/src/_layouts/base.njk b/website/src/_layouts/base.njk index e6ee0ce..5b1942c 100644 --- a/website/src/_layouts/base.njk +++ b/website/src/_layouts/base.njk @@ -6,11 +6,13 @@ KCD - {{ title }} - + {% include "partials/_header.njk" %} - {{content | safe}} +
+ {{content | safe}} +
\ No newline at end of file diff --git a/website/src/assets/css/style.css b/website/src/assets/css/style.css index ed425ab..f05940f 100644 --- a/website/src/assets/css/style.css +++ b/website/src/assets/css/style.css @@ -1,200 +1,196 @@ @import url('https://fonts.googleapis.com/css?family=Work+Sans:300,600'); :root { - --background: rgba(0, 214, 170, .85); + --background: rgb(0, 214, 170); } -*, -*::before, -*::after { - box-sizing: border-box; +*, *::before, *::after { + box-sizing: border-box; } body { - margin: 0; - background: #222; - font-family: 'Work Sans', sans-serif; - font-weight: 400; + margin: 0; + background: #222; + font-family: 'Work Sans', sans-serif; + font-weight: 400; + color: white; } .content { - height: 100vh; - background-image: url(https://images.photowall.com/products/53563/oslo-cityscape-by-night-norway.jpg?h=699&q=85); - background-color: #333; - background-blend-mode: multiply; - background-size: cover; - display: grid; - place-items: center; - color: white; + height: 100vh; + background-color: #333; + background-size: cover; + display: grid; + place-items: center; } /* navigation styles start here */ header { - background: var(--background); - text-align: center; - position: fixed; - z-index: 999; - width: 100%; + background: var(--background); + text-align: center; + position: fixed; + z-index: 999; + width: 100%; } /* changed this from the tutorial video to allow it to gain focus, making it tabbable */ .nav-toggle { - position: absolute !important; - top: -9999px !important; - left: -9999px !important; + position: absolute !important; + top: -9999px !important; + left: -9999px !important; +} + +.nav-toggle:focus ~ .nav-toggle-label { + outline: 3px solid rgba(lightblue, .75); } .nav-toggle-label { - position: absolute; - top: 0; - left: 0; - margin-left: 1em; - height: 100%; - display: flex; - align-items: center; + position: absolute; + top: 0; + left: 0; + margin-left: 1em; + height: 100%; + display: flex; + align-items: center; } .nav-toggle-label span, .nav-toggle-label span::before, .nav-toggle-label span::after { - display: block; - background: white; - height: 2px; - width: 2em; - border-radius: 2px; - position: relative; + display: block; + background: white; + height: 2px; + width: 2em; + border-radius: 2px; + position: relative; } .nav-toggle-label span::before, .nav-toggle-label span::after { - content: ''; - position: absolute; + content: ''; + position: absolute; } .nav-toggle-label span::before { - bottom: 7px; + bottom: 7px; } .nav-toggle-label span::after { - top: 7px; + top: 7px; } nav { - position: absolute; - text-align: left; - top: 100%; - left: 0; - background: var(--background); - width: 100%; - transform: scale(1, 0); - transform-origin: top; - transition: transform 400ms ease-in-out; + position: absolute; + text-align: left; + top: 100%; + left: 0; + background: var(--background); + width: 100%; + transform: scale(1, 0); + transform-origin: top; + transition: transform 400ms ease-in-out; } nav ul { - margin: 0; - padding: 0; - list-style: none; + margin: 0; + padding: 0; + list-style: none; } nav li { - margin-bottom: 1em; - margin-left: 1em; + margin-bottom: 1em; + margin-left: 1em; } nav a { - color: white; - text-decoration: none; - font-size: 1.2rem; - text-transform: uppercase; - opacity: 0; - transition: opacity 150ms ease-in-out; + color: white; + text-decoration: none; + font-size: 1.2rem; + text-transform: uppercase; + opacity: 0; + transition: opacity 150ms ease-in-out; } nav a:hover { - color: #000; -} - -.nav-toggle:checked~nav { - transform: scale(1, 1); + color: #000; } -.nav-toggle:checked~nav a { - opacity: 1; - transition: opacity 250ms ease-in-out 250ms; +.nav-toggle:checked ~ nav { + transform: scale(1,1); } -.navlogo { - height: 75px; - margin-left: 5em; +.nav-toggle:checked ~ nav a { + opacity: 1; + transition: opacity 250ms ease-in-out 250ms; } @media screen and (min-width: 800px) { - .nav-toggle-label { - display: none; - } - - header { - display: grid; - grid-template-columns: 1fr auto minmax(600px, 3fr) 1fr; - } - - .logo { - grid-column: 2 / 3; - } - - nav { - all: unset; - /* this causes issues with Edge, since it's unsupported */ - - /* the following lines are not from my video, but add Edge support */ - position: relative; - text-align: left; - transition: none; - transform: scale(1, 1); - background: none; - top: initial; - left: initial; - /* end Edge support stuff */ - - grid-column: 3 / 4; - display: flex; - justify-content: flex-end; - align-items: center; - } - - nav ul { - display: flex; - } - - nav li { - margin-left: 3em; - margin-bottom: 0; - } + .nav-toggle-label { + display: none; + } - nav a { - opacity: 1; - position: relative; - } - - nav a::before { - content: ''; - display: block; - height: 5px; - background: black; - position: absolute; - top: -.75em; - left: 0; - right: 0; - transform: scale(0, 1); - transition: transform ease-in-out 250ms; - } + header { + display: grid; + grid-template-columns: 1fr auto minmax(600px, 3fr) 1fr; + } + + .logo { + grid-column: 2 / 3; + } + + nav { + /* the following lines are not from my video, but add Edge support */ + position: relative; + text-align: left; + transition: none; + transform: scale(1,1); + background: none; + top: initial; + left: initial; + /* end Edge support stuff */ + + grid-column: 3 / 4; + display: flex; + justify-content: flex-end; + align-items: center; + } + + nav ul { + display: flex; + } + + nav li { + margin-left: 3em; + margin-bottom: 0; + } + + nav a { + opacity: 1; + position: relative; + } + + nav a::before { + content: ''; + display: block; + height: 5px; + background: black; + position: absolute; + top: -.75em; + left: 0; + right: 0; + transform: scale(0, 1); + transition: transform ease-in-out 250ms; + } + + nav a:hover::before { + transform: scale(1,1); + } +} - nav a:hover::before { - transform: scale(1, 1); - } +.navlogo { + height: 75px; } .hero { @@ -242,5 +238,3 @@ nav a:hover { } } - - diff --git a/website/src/program.md b/website/src/program.md index 1709306..84ff7e8 100644 --- a/website/src/program.md +++ b/website/src/program.md @@ -3,6 +3,10 @@ layout: base title: "Program" --- +# Program + +Stuff loaded from json file +