Skip to content

Commit

Permalink
fixes
Browse files Browse the repository at this point in the history
  • Loading branch information
matkat99 committed Nov 22, 2024
1 parent ecd6eb5 commit f9924f0
Show file tree
Hide file tree
Showing 4 changed files with 40 additions and 9 deletions.
10 changes: 4 additions & 6 deletions src/content/prove/nps-6.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -51,15 +51,15 @@ You were given some of the code for the navigation already. If you look in the `
</nav>
```

Notice that each major link category is made up of an anchor and a button. On mobile click the button will toggle the list of links open and closed. On wide screens the button will be hidden and the links all shown. It would be worth opening up one of the official NPS sites to look at the rest of the structure in the HTML for those menus. The major thing that we are missing in our page is the actual list of links.
Notice that each major link category is made up of an anchor and a button. On mobile click the button will toggle the list of links open and closed. On wide screens the button will be hidden and the links are all shown. It would be worth opening up one of the official NPS sites to look at the rest of the structure in the HTML for those menus. The major thing that we are missing in our page is the actual list of links.

It was mentioned above that we will focus on the Second section, so we won't add any more HTML for the first. If we do our classnames and styling correct however the first section should get styled correctly when we style the second.

Remember to type `npm run start` to start up your development server.

## **02** Write the HTML to build the menus

Working in the `index.html` file, add the HTML to build out the menus in the "Explore the National Park Service" section of the navigation. You can use the markup that is already there as a model for this new section. Pay close attnetion to the screenshots above to make sure that you get all the elements necessary for both the small screen and wide screen.
Working in the `index.html` file, add the HTML to build out the menus in the "Explore the National Park Service" section of the navigation. You can use the markup that is already there as a model for this new section. Pay close attention to the screenshots above to make sure that you get all the elements necessary for both the small screen and wide screen.

There are a lot of links under some of the sections. You only need to include the first 4 in each section.

Expand Down Expand Up @@ -114,26 +114,24 @@ There are a lot of links under some of the sections. You only need to include th
<li><a href="#" >Trip Ideas</a></li>
</ul>
</li>
<!-- ... duplicate the section above for the rest of the link list items ... -->
<!-- ... duplicate the li above for the rest of the link list items ... -->
</ul>
</nav>
```

</details>


## **03** Style

It would be worth making a list of what needs to happen for our menu to function correctly. We will be approaching this mobile first, so lets first make a list of what needs to happen for that to look right


1. Hide the submenus by default.
2. Style the menu as a single column list that spans the entire width of the screen.
3. The h2 titles should be colored blue and green. Try and use the defined colors we were given that are defined as custom properties in our CSS, but make sure that your contrast is high enough for accessibility! (It's interesting that the actual colors used in the official page are not listed in the custom properties...)
4. The words of the submenu category should take up most of the width, be given a lighter background, and the button should be a square at the end
5. When the submenu button (`global-nav__split-button__toggle`) is clicked, the submenu should slide down to open...with a transition.
6. The links should be white on the dark background with no underline until hovered.
7. the Background of the button should darken slightly when hovered.
7. The Background of the button should darken slightly when hovered.

Begin writing the CSS that will style the menu. I would recommend skipping step one at first. You will want it to show while you work out the CSS. Once you have it styled correctly then hide it by default.

Expand Down
1 change: 1 addition & 0 deletions src/content/prove/team-1.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -66,6 +66,7 @@ After settling on your app idea, your team should prepare a proposal together wi
- Description of the project
- Target audience
- Features and functionalities
- At least two wireframes for the main page (mobile, wide screen)
- How the project requirements listed below will be met.
- What will the detailed form be used for? What other forms might you need?
- What data would you need to store in Local storage for persistence?
Expand Down
32 changes: 32 additions & 0 deletions src/content/prove/team-2.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -24,6 +24,38 @@ By the end of this unit (Unit 3) it is recommended that you have most of the HTM

Keep the requirements list above in mind as you code up the HTML and CSS of your application.

>### Divide and conquer
>
>As a team you should talk about how you will divide up the work. Should one person do all of the HTML and one all of the CSS? That could work but the CSS person will not be able to do much until the HTML is done.
>
>Should one person work on one page and one another? Again this can work but some of the HTML and CSS should be the same across both pages. Think Header and Footer for example, or fonts and colors.
>
>One other plan would be for one person to work on the parts of the pages that should be the same across the whole site, and the other work on the content areas. In this case we have removed most of the blockers and no one is stuck waiting on someone else.
>
>Before moving forward it is highly recommended that each team take a few minutes and write down all of the tasks that need to be done in order to complete the project. Try and make each task about 5-30 minutes in scope. Any task that takes longer than 30 min should be broken into smaller tasks.
>
> You could use a tool like [Trello](https://trello.com) to help organize your tasks. Create three columns to start: Backlog, Doing, and Done.
>One last thought. Remember that you can have more than one CSS file as part of your project...you can either `link` them all in, or check out [@import](https://developer.mozilla.org/en-US/docs/Web/CSS/@import)
>
>What might this look like? Let's say that you decided to break your CSS up into the following parts:
>- variables
>- global styles
>- header/navigation styles
>- footer styles
>- page specific styles
>
>You might then create a `base.css` file and the contents would be the following:
>```css
>@import 'variables.css';
>@import 'global.css';
>@import 'header.css';
>@import 'footer.css';
>```
>Then in your `index.html` file you could add two `link` elements. One would bring in the `base.css` and the other a file that contained all the styles for the main content area of the home page called `home.css`
>
>This breaks up the work across multiple files to make it easier to collaborate on with your team. For more details on this...check out [Organizing your CSS](https://byui-cit.github.io/learning-modules/modules/css/@import/)
## Meet with the instructor
Each unit your team should meet with the instructor to review progress and discuss potential problems. Your instructor will give you more details about how this is to happen. It is your responsibility to make sure this meeting does occur!
6 changes: 3 additions & 3 deletions src/styles/global.css
Original file line number Diff line number Diff line change
Expand Up @@ -153,15 +153,15 @@ pre {
border-radius: 8px;
}

pre>code {
pre > code {
all: unset;
}

blockquote {
border-left: 4px solid var(--accent);
padding: 0 0 0 20px;
margin: 0px;
font-size: 1.333em;
font-size: 1.1em;
}

hr {
Expand Down Expand Up @@ -201,4 +201,4 @@ details {
clip-path: inset(50%);
/* added line to stop words getting smushed together (as they go onto separate lines and some screen readers do not understand line feeds as a space */
white-space: nowrap;
}
}

0 comments on commit f9924f0

Please sign in to comment.