First commit
This commit is contained in:
100
Lab 6/cards.css
Executable file
100
Lab 6/cards.css
Executable file
@@ -0,0 +1,100 @@
|
||||
/* Use this file to control the layout of cards (articles) within the
|
||||
* main region of the page. */
|
||||
|
||||
/* TODO: Map the articles to grid areas */
|
||||
main > h2 {
|
||||
grid-area: heading;
|
||||
}
|
||||
main > article:nth-of-type(1) {
|
||||
grid-area: article1;
|
||||
}
|
||||
main > article:nth-of-type(2) {
|
||||
grid-area: article2;
|
||||
}
|
||||
main > article:nth-of-type(3) {
|
||||
grid-area: article3;
|
||||
}
|
||||
main > article:nth-of-type(4) {
|
||||
grid-area: article4;
|
||||
}
|
||||
main > article:nth-of-type(5) {
|
||||
grid-area: article5;
|
||||
}
|
||||
main > article:nth-of-type(6) {
|
||||
grid-area: article6;
|
||||
}
|
||||
|
||||
/* TODO: Make the main element into a grid to hold the cards */
|
||||
main {
|
||||
display: grid;
|
||||
}
|
||||
|
||||
/* TODO: Tiny and small layouts:
|
||||
* All articles in a vertical column using grid-template-areas with
|
||||
* the main h2 title at the top. */
|
||||
|
||||
@media (max-width: 699px) {
|
||||
main {
|
||||
grid-template-columns: 1fr;
|
||||
grid-template-areas:
|
||||
"heading"
|
||||
"article1"
|
||||
"article2"
|
||||
"article3"
|
||||
"article4"
|
||||
"article5"
|
||||
"article6";
|
||||
}
|
||||
}
|
||||
|
||||
/* TODO: Medium layouts:
|
||||
* Article cards are displayed 2 per row (articles 1 and 2 in the top row,
|
||||
* 3 and 4 in the second, 5 and 6 in the third). Use 1vh for row gaps and
|
||||
* 2vw for column gaps. Both columns should have the same width. Again,
|
||||
* place the main h2 title at the top. */
|
||||
@media (min-width: 700px) {
|
||||
main {
|
||||
grid-template-columns: 1fr 1fr;
|
||||
grid-template-areas:
|
||||
"heading heading"
|
||||
"article1 article2"
|
||||
"article3 article4"
|
||||
"article5 article6";
|
||||
}
|
||||
}
|
||||
|
||||
/* TODO: Large layouts:
|
||||
* Article cards are now in 3 equal-width columns with the main h2 title
|
||||
* at the top. */
|
||||
@media (min-width: 1000px) {
|
||||
main {
|
||||
grid-template-columns: 1fr 1fr 1fr;
|
||||
grid-template-areas:
|
||||
"heading heading heading"
|
||||
"article1 article2 article3"
|
||||
"article4 article5 article6";
|
||||
}
|
||||
}
|
||||
|
||||
@media print {
|
||||
main {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
}
|
||||
article h3,
|
||||
p {
|
||||
padding-top: 0;
|
||||
padding-bottom: 0;
|
||||
}
|
||||
main > h2 {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
/* TODO: Print formatting:
|
||||
* Make the main content into a flex-box with the articles
|
||||
* in a column with space between the items vertically. Get rid
|
||||
* of the vertical padding on the p and h3 elements inside
|
||||
* the articles (keeping 1vw padding on the sides).
|
||||
* Remove the main h2 title from the display. */
|
||||
52
Lab 6/dark.css
Executable file
52
Lab 6/dark.css
Executable file
@@ -0,0 +1,52 @@
|
||||
:root {
|
||||
--dark: #333;
|
||||
--mid: #555;
|
||||
--light: #ddd;
|
||||
--white: #fff;
|
||||
}
|
||||
|
||||
/* Set default to light mode */
|
||||
body {
|
||||
background-color: var(--white);
|
||||
color: var(--dark);
|
||||
}
|
||||
|
||||
/* TODO: In light stealth mode, set font colors to light. This should
|
||||
* all text, including the buttons. */
|
||||
.stealth {
|
||||
color: var(--light);
|
||||
}
|
||||
|
||||
/* TODO: Dark mode:
|
||||
* Switch the background color to dark and switch the article
|
||||
* border to white. Any text on a gray background should become
|
||||
* dark while text on the new dark background becomes light.
|
||||
*/
|
||||
@media (prefers-color-scheme: dark) {
|
||||
body {
|
||||
background-color: var(--dark);
|
||||
color: var(--light);
|
||||
}
|
||||
article {
|
||||
border-color: var(--white);
|
||||
}
|
||||
main h2,
|
||||
main h3 {
|
||||
color: var(--dark);
|
||||
}
|
||||
|
||||
body.stealth {
|
||||
color: var(--mid);
|
||||
}
|
||||
|
||||
body.stealth > main h2,
|
||||
body.stealth > main h3,
|
||||
body.stealth > nav button {
|
||||
color: var(--light);
|
||||
}
|
||||
}
|
||||
|
||||
/* TODO: Stealth dark mode:
|
||||
* Set the font colors to mid, except for those that are on a gray
|
||||
* background. Make that text have a light font color.
|
||||
*/
|
||||
82
Lab 6/index.html
Executable file
82
Lab 6/index.html
Executable file
@@ -0,0 +1,82 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Grids and Dark Mode</title>
|
||||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap-reboot.css">
|
||||
<link rel="stylesheet" href="styles.css">
|
||||
<link rel="stylesheet" href="layout.css">
|
||||
<link rel="stylesheet" href="cards.css">
|
||||
<link rel="stylesheet" href="dark.css">
|
||||
</head>
|
||||
|
||||
<!-- To check your layout, you can add class="debug" to the body element to
|
||||
add colors and borders to the major sections -->
|
||||
|
||||
<body>
|
||||
<header>
|
||||
<h1>Header</h1>
|
||||
</header>
|
||||
<nav>
|
||||
<ul>
|
||||
<li><button type="button" id="mode-print">Print Layout</button></li>
|
||||
<li><button type="button" id="theme-stealth">Stealth Mode</button></li>
|
||||
</ul>
|
||||
</nav>
|
||||
|
||||
<main>
|
||||
<h2>Main Content</h2>
|
||||
<article id="article-1">
|
||||
<h3>Main</h3>
|
||||
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque dapibus mi sed
|
||||
facilisis finibus. Cras ut mollis eros. Aliquam commodo quis purus et tempus.
|
||||
</article>
|
||||
|
||||
<article id="article-2">
|
||||
<h3>Second</h3>
|
||||
<p>Fusce nisi enim, interdum efficitur magna quis, feugiat ornare sapien. Quisque
|
||||
molestie maximus diam, in egestas elit elementum vel. Morbi in faucibus odio.
|
||||
</article>
|
||||
|
||||
<article id="article-3">
|
||||
<h3>Third</h3>
|
||||
<p> In consectetur, odio id malesuada venenatis, diam dolor consequat erat, sed
|
||||
blandit nisi nunc ac libero.
|
||||
</article>
|
||||
|
||||
<article id="article-4">
|
||||
<h3>Fourth</h3>
|
||||
<p> Etiam consequat, sem sit amet volutpat tempus, justo mi dapibus erat, in
|
||||
maximus odio metus id ex. Pellentesque finibus eleifend tempor.
|
||||
</article>
|
||||
|
||||
<article id="article-5">
|
||||
<h3>Fifth</h3>
|
||||
<p> Morbi in imperdiet sem, at ultrices ligula. Curabitur bibendum quis leo non
|
||||
lacinia. In hac habitasse platea dictumst. Nullam malesuada consequat efficitur.
|
||||
</article>
|
||||
|
||||
<article id="article-6">
|
||||
<h3>Sixth</h3>
|
||||
<p> Nulla laoreet vestibulum hendrerit. Aenean ut velit eget lectus molestie
|
||||
bibendum. In ac elit a eros iaculis scelerisque dictum in nulla.
|
||||
</article>
|
||||
|
||||
</main>
|
||||
|
||||
<aside id="side">
|
||||
<h2>Sidebar</h2>
|
||||
</aside>
|
||||
<aside id="ad">
|
||||
<h2>Advertising</h2>
|
||||
</aside>
|
||||
<footer>
|
||||
<h2>The footer</h2>
|
||||
</footer>
|
||||
|
||||
<script src="script.js"></script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
107
Lab 6/layout.css
Executable file
107
Lab 6/layout.css
Executable file
@@ -0,0 +1,107 @@
|
||||
/* Map the semantic elements to grid area names: */
|
||||
|
||||
header {
|
||||
grid-area: header;
|
||||
}
|
||||
main {
|
||||
grid-area: content;
|
||||
}
|
||||
nav {
|
||||
grid-area: nav;
|
||||
}
|
||||
#side {
|
||||
grid-area: sidebar;
|
||||
}
|
||||
#ad {
|
||||
grid-area: ad;
|
||||
}
|
||||
footer {
|
||||
grid-area: footer;
|
||||
}
|
||||
|
||||
/* Set default values for the body and list */
|
||||
body {
|
||||
display: grid;
|
||||
gap: 20px;
|
||||
}
|
||||
|
||||
nav ul {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
display: flex;
|
||||
list-style: none;
|
||||
flex-direction: row;
|
||||
justify-content: space-around;
|
||||
}
|
||||
|
||||
/* (Default) Tiny screen */
|
||||
@media (max-width: 499px) {
|
||||
body {
|
||||
grid-template-columns: 1fr;
|
||||
grid-template-areas:
|
||||
"header"
|
||||
"nav"
|
||||
"content"
|
||||
"footer";
|
||||
}
|
||||
#ad,
|
||||
#side {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
/* (Default) Tiny screen */
|
||||
|
||||
/* Small screen */
|
||||
@media (min-width: 500px) {
|
||||
body {
|
||||
padding-right: 2vw;
|
||||
grid-template-columns: 1fr 3fr;
|
||||
grid-template-areas:
|
||||
"header header"
|
||||
"nav nav"
|
||||
"sidebar content"
|
||||
"ad footer";
|
||||
}
|
||||
}
|
||||
/* Small screen */
|
||||
|
||||
/* Medium & Large screens */
|
||||
@media (min-width: 700px) {
|
||||
body {
|
||||
grid-template-columns: 1fr 4fr 1fr;
|
||||
grid-template-areas:
|
||||
"header header header"
|
||||
"nav content sidebar"
|
||||
"nav content ad"
|
||||
"footer footer footer";
|
||||
}
|
||||
nav ul {
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
nav ul > li {
|
||||
margin-bottom: 3vh;
|
||||
}
|
||||
}
|
||||
|
||||
@media print {
|
||||
body {
|
||||
grid-template-columns: 1fr 9fr;
|
||||
grid-template-areas:
|
||||
"header header"
|
||||
". content"
|
||||
"footer footer";
|
||||
}
|
||||
nav,
|
||||
#side,
|
||||
#ad {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
/* TODO: Print formatting:
|
||||
* Make two columns with the right taking up 90% width.
|
||||
* The header and footer span both columns at the top and
|
||||
* bottom, respectively. The main content is only in the
|
||||
* right. Do not show the #side, #ad, or nav bar.
|
||||
*/
|
||||
31
Lab 6/script.js
Executable file
31
Lab 6/script.js
Executable file
@@ -0,0 +1,31 @@
|
||||
(function () {
|
||||
const modePrint = document.querySelector("#mode-print");
|
||||
modePrint.addEventListener("click", () => window.print());
|
||||
|
||||
const themeStealth = document.querySelector("#theme-stealth");
|
||||
const header = document.querySelector("body > header > h1");
|
||||
const body = document.querySelector("body");
|
||||
themeStealth.addEventListener("click", () => {
|
||||
body.classList.toggle("stealth");
|
||||
if (body.classList.contains("stealth")) {
|
||||
header.innerText += "(Stealth Mode)";
|
||||
} else {
|
||||
header.innerText = "Header";
|
||||
}
|
||||
});
|
||||
|
||||
const articleH3s = document.querySelectorAll("article > h3");
|
||||
articleH3s.forEach((element) => {
|
||||
element.addEventListener("click", (event) => {
|
||||
event.target.nextElementSibling.hidden =
|
||||
!event.target.nextElementSibling.hidden;
|
||||
});
|
||||
});
|
||||
/* TODO: Add a click event listener to the article h3 titles. When
|
||||
* clicked, make the text of the associated p element hidden. HINT:
|
||||
* event listener callback functions receive an event parameter
|
||||
* object. event.target will refer to the object clicked (i.e., the
|
||||
* h3 title). If you print that element out to the console, you can
|
||||
* examine its fields to find how to access the p element that
|
||||
* follows. */
|
||||
})();
|
||||
52
Lab 6/styles.css
Executable file
52
Lab 6/styles.css
Executable file
@@ -0,0 +1,52 @@
|
||||
/* Create rounded-corner buttons */
|
||||
nav button {
|
||||
border: 2px black solid;
|
||||
border-radius: 5px;
|
||||
width: 80px;
|
||||
}
|
||||
|
||||
/* Make the articles into cards */
|
||||
article {
|
||||
border: 1px solid black;
|
||||
border-radius: 5px;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
article > h3, main > h2 {
|
||||
background: lightgray;
|
||||
padding: 1vh 1vw;
|
||||
font-size: 1.6em;
|
||||
}
|
||||
|
||||
article > p {
|
||||
padding: 1vh 1vw;
|
||||
}
|
||||
|
||||
/* Set the debug class on body to view outlines of the regions */
|
||||
.debug {
|
||||
header {
|
||||
background-color: red;
|
||||
border: 5px dashed #450085;
|
||||
}
|
||||
main {
|
||||
background-color: orange;
|
||||
border: 5px dashed #333333;
|
||||
}
|
||||
nav {
|
||||
background-color: yellow;
|
||||
border: 5px dashed #009698;
|
||||
}
|
||||
#side {
|
||||
background-color: green;
|
||||
border: 5px dashed #8EE4D7 ;
|
||||
}
|
||||
#ad {
|
||||
background-color: #F4EFE1;
|
||||
border: 5px dashed blue;
|
||||
}
|
||||
footer {
|
||||
background-color: #cbb677;
|
||||
border: 5px dashed #b599ce;
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user