├── .gitignore ├── .new-component-config.json ├── LICENSE.md ├── README.md ├── docs ├── desktop-dividers.png ├── desktop-mockup.png ├── dividers.png ├── footer-diagonals.png ├── footer-link-alignment.png ├── footer-main-nav-desktop.png ├── footer-main-nav-tablet.png ├── header-cutout.png ├── mobile-avatar-position.png ├── opinion-row.png ├── secondary-mobile.png ├── secondary-tablet.png ├── specialty-grid-desktop.png ├── sports-overflow.gif ├── text-truncation-mobile.png └── text-truncation-tablet.png ├── package-lock.json ├── package.json ├── public ├── ads │ ├── monkey.png │ └── monkey@2x.png ├── favicon.ico ├── fonts │ ├── chomsky.woff2 │ ├── crimson-pro-italic.woff2 │ └── crimson-pro.woff2 ├── images │ ├── avatar-alice-smith.jpg │ ├── avatar-mario-deluciano.jpg │ ├── avatar-rocko-pierce-stanley.jpg │ ├── avatar-stephen-abebe.jpg │ ├── bicycles.jpg │ ├── bicycles@2x.jpg │ ├── coach.jpg │ ├── coach@2x.jpg │ ├── decathlon.jpg │ ├── decathlon@2x.jpg │ ├── fashion.jpg │ ├── fashion@2x.jpg │ ├── football.jpg │ ├── football@2x.jpg │ ├── gamepad.jpg │ ├── gamepad.png │ ├── gamepad@2x.jpg │ ├── habs.jpg │ ├── habs@2x.jpg │ ├── old-car.jpg │ ├── old-car@2x.jpg │ ├── politicians.jpg │ ├── politicians.png │ ├── politicians@2x.jpg │ ├── politicians@2x.png │ ├── stock-graph-down-1.svg │ ├── stock-graph-down-2.svg │ ├── stock-graph-down-3.svg │ ├── stock-graph-up-1.svg │ ├── stock-graph-up-2.svg │ └── stock-graph-up-3.svg ├── index.html ├── logo192.png ├── logo512.png ├── manifest.json └── robots.txt └── src ├── components ├── Advertisement │ ├── Advertisement.js │ └── index.js ├── App │ ├── App.js │ └── index.js ├── Button │ ├── Button.js │ └── index.js ├── Footer │ ├── Footer.js │ └── index.js ├── GlobalStyles │ ├── GlobalStyles.js │ └── index.js ├── Header │ ├── Header.js │ └── index.js ├── Logo │ ├── Logo.js │ └── index.js ├── MainStory │ ├── MainStory.js │ └── index.js ├── MainStoryGrid │ ├── MainStoryGrid.js │ └── index.js ├── MarketCard │ ├── MarketCard.js │ └── index.js ├── MaxWidthWrapper │ ├── MaxWidthWrapper.js │ └── index.js ├── MiniStory │ ├── MiniStory.js │ └── index.js ├── OpinionStory │ ├── OpinionStory.js │ └── index.js ├── SecondaryStory │ ├── SecondaryStory.js │ └── index.js ├── SectionTitle │ ├── SectionTitle.js │ └── index.js ├── Spacer │ ├── Spacer.js │ └── index.js ├── SpecialtyStoryGrid │ ├── SpecialtyStoryGrid.js │ └── index.js └── VisuallyHidden │ ├── VisuallyHidden.js │ └── index.js ├── constants.js ├── data.js ├── index.js └── utils.js /.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | /node_modules 5 | /.pnp 6 | .pnp.js 7 | 8 | # testing 9 | /coverage 10 | 11 | # production 12 | /build 13 | 14 | # misc 15 | .DS_Store 16 | .env.local 17 | .env.development.local 18 | .env.test.local 19 | .env.production.local 20 | 21 | npm-debug.log* 22 | yarn-debug.log* 23 | yarn-error.log* 24 | 25 | .eslintcache 26 | -------------------------------------------------------------------------------- /.new-component-config.json: -------------------------------------------------------------------------------- 1 | { 2 | "type": "functional", 3 | "prettierConfig": { 4 | "semi": true, 5 | "singleQuote": true, 6 | "trailingComma": "es5" 7 | } 8 | } 9 | -------------------------------------------------------------------------------- /LICENSE.md: -------------------------------------------------------------------------------- 1 | # Josh's Course Materials License 2 | 3 | Version 1, November 2020 4 | Copyright (c) Josh Comeau, 2020 5 | 6 | The files in this repository are meant to be used as part of a paid course, and are not intended for public distribution. They're open-source because it's the simplest form of distribution, and provides the best experience for students enrolled in the course. 7 | 8 | All are welcome to create personal copies of this repository, and modify its contents for educational use. Please experiment with the code, and see what you can build! 9 | 10 | It is forbidden to use these contents in any sort of commercial endeavour, including but not limited to: 11 | 12 | • Reselling its contents as part of a different course 13 | • Incorporating the code into a pre-existing business or project 14 | • Selling your solution to students enrolled in the course 15 | 16 | Exemptions can be made, on a case-by-case basis. Contact Josh Comeau (me@joshwcomeau.com) for more information. 17 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # New Grid Times — Module 7 workshop 2 | 3 | In this workshop, our goal is to build a sophisticated, responsive grid layout for an online newspaper, the New Grid Times: 4 | 5 | ![Desktop-sized mockup](/docs/desktop-mockup.png) 6 | 7 | ## Code structure 8 | 9 | Like the last few workshops, this is a React / styled-components application. 10 | 11 | This application is built using a **mobile-first methodology**. We're starting from a place of having almost-finished mobile styles; your mission is to add that last bit of polish on mobile, and then implement the tablet/laptop layouts specified in the designs. 12 | 13 | Some design tokens, including colors, fonts, and media queries have been provided in `src/constants.js`. The colors and fonts have also been applied as global CSS variables in `src/components/GlobalStyles`. 14 | 15 | Here's the full list of available CSS variables: 16 | 17 | ``` 18 | --color-white 19 | --color-offblack 20 | --color-gray-100 21 | --color-gray-300 22 | --color-gray-500 23 | --color-gray-700 24 | --color-gray-900 25 | --color-primary <-- dark blue 26 | --color-secondary <-- green 27 | --color-urgent <-- red 28 | 29 | --font-weight-normal 30 | --font-weight-medium 31 | --font-weight-bold 32 | 33 | --font-family-serif 34 | --font-family-sans-serif 35 | --font-family-logo 36 | ``` 37 | 38 | --- 39 | 40 | The app is broken into 4 main compartments: 41 | 42 | - The header 43 | - The main story grid 44 | - The "specialty" story grid 45 | - The footer 46 | 47 | The main story grid holds the big featured story, the secondary stories, and the opinion/editorial stories. The "specialty" story grid holds the market and sports sections. 48 | 49 | The data for the stories is held in a JS file, `src/data.js`. In a real app, this would be read from a database. 50 | 51 | ## Troubleshooting 52 | 53 | If you run into problems running a local development server, check out our [Troubleshooting Guide](https://courses.joshwcomeau.com/troubleshooting) on the course platform. 54 | 55 | This guide addresses the common `Digital Envelope Routine` error you may have seen. 56 | 57 | --- 58 | 59 | ## Exercise 1: Header 60 | 61 | Like in the Sole&Ankle workshop, this workshop features a two-step header that changes between desktop and mobile. 62 | 63 | This workshop has been created with a "Mobile-first" methodology, and so your goal this time is to create a desktop variant of the header, and ensure the right header is used at both viewport sizes. 64 | 65 | ![Highlighted screenshot showing the header of the mockup](/docs/header-cutout.png) 66 | 67 | --- 68 | 69 | ## Exercise 2: Prep and Polish 70 | 71 | Before we start working on the tablet and laptop grid layouts, we need to add a bit of missing polish to the mobile implementation, and prep certain elements to make it easier to create our tablet/laptop grids. 72 | 73 | This exercise is split into a few mini-parts: 74 | 75 | ### Text truncation 76 | 77 | In the mockup, our main story's preview text is truncated on mobile after 8 lines of text: 78 | 79 | ![Close-up of the preview text on mobile](/docs/text-truncation-mobile.png) 80 | 81 | The exact # of lines shown depends on the viewport size. For example, the amount of lines doubles on tablet: 82 | 83 | ![Close-up of the preview text on mobile](/docs/text-truncation-tablet.png) 84 | 85 | > **Note:** on certain screen sizes, you may see an ellipsis alone on its own line. Don't worry about trying to solve for this. 86 | 87 | The syntax for multi-line ellipsis is difficult to remember, so you might wish to [review the lesson from Module 6](https://courses.joshwcomeau.com/css-for-js/06-typography-and-media/03-text-overflow#multi-line-ellipsis). 88 | 89 | ### Story borders 90 | 91 | There are also dividers between the stories that are in lists, like the secondary and opinion stories: 92 | 93 | ![Close-up showing the thin dividers between stories on mobile](/docs/dividers.png) 94 | 95 | Critically, the borders only run _between_ stories. Not above the top story, or below the last story. 96 | 97 | A good place to start is in `MainStoryGrid.js`. That's where all of these stories are laid out. 98 | 99 | ### Opinion avatar placement 100 | 101 | Opinion stories show a picture of the journalist. On mobile, this image is meant to be shifted off to the side: 102 | 103 | ![Close-up of the Opinion section on mobile, highlighting the avatars](/docs/mobile-avatar-position.png) 104 | 105 | This same layout is used on laptop, but not on tablet. Update it across all relevant viewport sizes. 106 | 107 | --- 108 | 109 | ## Exercise 3: Main story grid 110 | 111 | Alright, time to create our first responsive grid! 112 | 113 | Update the `MainStoryGrid` component to support the layouts shown in Figma for tablet and laptop. 114 | 115 | There are some interesting details that are easy to miss: 116 | 117 | ### Swapped OpinionStory styles 118 | 119 | In the last exercise, we updated our "Opinion" stories so that the avatar was shifted off to the side on mobile and laptop sizes. 120 | 121 | In our new tablet grid, the opinion section itself takes on a different layout: 122 | 123 | ![Close-up of the Opinion section on tablet, showing the new layout](/docs/opinion-row.png) 124 | 125 | Our stories are arranged horizontally in a row, instead of vertically in a column. The borders between stories disappear. 126 | 127 | We'll need to dip into `OpinionStory.js` and make some changes based on the viewport size. A `TabletOnly` query can be used for this case. 128 | 129 | ### Swapped SecondaryStory styles 130 | 131 | Similarly, on tablet, our `SecondaryStory` switches to a new layout. 132 | 133 | On mobile/laptop: 134 | 135 | ![Close-up of a "secondary" story on mobile](/docs/secondary-mobile.png) 136 | 137 | On tablet: 138 | 139 | ![Close-up of a "secondary" story on tablet](/docs/secondary-tablet.png) 140 | 141 | ### Grid dividers 142 | 143 | When our grid grows to have multiple columns, we want to add a thin grey line between the columns: 144 | 145 | ![Highlighted screenshot of the dividers between rows and columns on the desktop grid](/docs/desktop-dividers.png) 146 | 147 | We discuss strategies for this situation in the [“Grid Dividers” lesson](https://courses.joshwcomeau.com/css-for-js/07-css-grid/11-grid-dividers). 148 | 149 | ### Optional: Optical alignment 150 | 151 | After creating the grid, you may find that certain things don't sit completely right. Compare the output to the design, and look for opportunities to shift things around to match a bit more perfectly. 152 | 153 | --- 154 | 155 | ## Exercise 4: Specialty Story grid 156 | 157 | Underneath the main grid we've been working on, we have another grid, with specialized items about markets and sports. 158 | 159 | On mobile, we can use the [“World Famous” grid snippet](https://courses.joshwcomeau.com/css-for-js/07-css-grid/09-fluid-grids) to arrange both the market cards and the sports stories. 160 | 161 | When we get to the larger viewports, though, the sports stories operate a little bit differently: they form a single long line, with overflow to allow us to scroll horizontally: 162 | 163 | ![Highlighted screenshot of the dividers between rows and columns on the desktop grid](/docs/sports-overflow.gif) 164 | 165 | Finally, on large viewports, we want the market and sports sections to sit side-by-side, with a divider: 166 | 167 | ![Highlighted screenshot of the dividers between rows and columns on the desktop grid](/docs/specialty-grid-desktop.png) 168 | 169 | --- 170 | 171 | ## Exercise 5: Footer 172 | 173 | Last but not least, the footer! 174 | 175 | There are some alignment changes between different viewport sizes, like the `TopRow` and `SubFooter`: 176 | 177 | ![Highlighted screenshot of the alignment of the top/bottom elements in the footer on desktop](/docs/footer-diagonals.png) 178 | 179 | We also need to switch from a vertical list to a dynamic grid, for the main nav links: 180 | 181 | ![Screenshot of the footer's main nav on tablet](/docs/footer-main-nav-tablet.png) 182 | 183 | Finally, we want the columns on desktop to be equally-spaced: 184 | 185 | ![Screenshot of the footer's main nav on desktop](/docs/footer-link-alignment.png) 186 | 187 | --- 188 | 189 | ## Solution 190 | 191 | View the solution on the course platform: 192 | https://courses.joshwcomeau.com/css-for-js/07-css-grid/19-workshop-solution 193 | -------------------------------------------------------------------------------- /docs/desktop-dividers.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/css-for-js/new-grid-times/6380953f2dd384a4b2386fe2db80fd89aefd9018/docs/desktop-dividers.png -------------------------------------------------------------------------------- /docs/desktop-mockup.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/css-for-js/new-grid-times/6380953f2dd384a4b2386fe2db80fd89aefd9018/docs/desktop-mockup.png -------------------------------------------------------------------------------- /docs/dividers.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/css-for-js/new-grid-times/6380953f2dd384a4b2386fe2db80fd89aefd9018/docs/dividers.png -------------------------------------------------------------------------------- /docs/footer-diagonals.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/css-for-js/new-grid-times/6380953f2dd384a4b2386fe2db80fd89aefd9018/docs/footer-diagonals.png -------------------------------------------------------------------------------- /docs/footer-link-alignment.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/css-for-js/new-grid-times/6380953f2dd384a4b2386fe2db80fd89aefd9018/docs/footer-link-alignment.png -------------------------------------------------------------------------------- /docs/footer-main-nav-desktop.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/css-for-js/new-grid-times/6380953f2dd384a4b2386fe2db80fd89aefd9018/docs/footer-main-nav-desktop.png -------------------------------------------------------------------------------- /docs/footer-main-nav-tablet.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/css-for-js/new-grid-times/6380953f2dd384a4b2386fe2db80fd89aefd9018/docs/footer-main-nav-tablet.png -------------------------------------------------------------------------------- /docs/header-cutout.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/css-for-js/new-grid-times/6380953f2dd384a4b2386fe2db80fd89aefd9018/docs/header-cutout.png -------------------------------------------------------------------------------- /docs/mobile-avatar-position.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/css-for-js/new-grid-times/6380953f2dd384a4b2386fe2db80fd89aefd9018/docs/mobile-avatar-position.png -------------------------------------------------------------------------------- /docs/opinion-row.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/css-for-js/new-grid-times/6380953f2dd384a4b2386fe2db80fd89aefd9018/docs/opinion-row.png -------------------------------------------------------------------------------- /docs/secondary-mobile.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/css-for-js/new-grid-times/6380953f2dd384a4b2386fe2db80fd89aefd9018/docs/secondary-mobile.png -------------------------------------------------------------------------------- /docs/secondary-tablet.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/css-for-js/new-grid-times/6380953f2dd384a4b2386fe2db80fd89aefd9018/docs/secondary-tablet.png -------------------------------------------------------------------------------- /docs/specialty-grid-desktop.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/css-for-js/new-grid-times/6380953f2dd384a4b2386fe2db80fd89aefd9018/docs/specialty-grid-desktop.png -------------------------------------------------------------------------------- /docs/sports-overflow.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/css-for-js/new-grid-times/6380953f2dd384a4b2386fe2db80fd89aefd9018/docs/sports-overflow.gif -------------------------------------------------------------------------------- /docs/text-truncation-mobile.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/css-for-js/new-grid-times/6380953f2dd384a4b2386fe2db80fd89aefd9018/docs/text-truncation-mobile.png -------------------------------------------------------------------------------- /docs/text-truncation-tablet.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/css-for-js/new-grid-times/6380953f2dd384a4b2386fe2db80fd89aefd9018/docs/text-truncation-tablet.png -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "new-grid-times", 3 | "version": "0.1.0", 4 | "private": true, 5 | "dependencies": { 6 | "@reach/dialog": "0.15.0", 7 | "date-fns": "2.16.1", 8 | "react": "17.0.1", 9 | "react-dom": "17.0.1", 10 | "react-feather": "2.0.9", 11 | "react-scripts": "4.0.1", 12 | "styled-components": "5.2.1" 13 | }, 14 | "scripts": { 15 | "start": "react-scripts start", 16 | "build": "react-scripts build", 17 | "test": "react-scripts test", 18 | "eject": "react-scripts eject" 19 | }, 20 | "eslintConfig": { 21 | "extends": [ 22 | "react-app", 23 | "react-app/jest" 24 | ] 25 | }, 26 | "browserslist": { 27 | "production": [ 28 | ">0.2%", 29 | "not dead", 30 | "not op_mini all" 31 | ], 32 | "development": [ 33 | "last 1 chrome version", 34 | "last 1 firefox version", 35 | "last 1 safari version" 36 | ] 37 | } 38 | } 39 | -------------------------------------------------------------------------------- /public/ads/monkey.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/css-for-js/new-grid-times/6380953f2dd384a4b2386fe2db80fd89aefd9018/public/ads/monkey.png -------------------------------------------------------------------------------- /public/ads/monkey@2x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/css-for-js/new-grid-times/6380953f2dd384a4b2386fe2db80fd89aefd9018/public/ads/monkey@2x.png -------------------------------------------------------------------------------- /public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/css-for-js/new-grid-times/6380953f2dd384a4b2386fe2db80fd89aefd9018/public/favicon.ico -------------------------------------------------------------------------------- /public/fonts/chomsky.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/css-for-js/new-grid-times/6380953f2dd384a4b2386fe2db80fd89aefd9018/public/fonts/chomsky.woff2 -------------------------------------------------------------------------------- /public/fonts/crimson-pro-italic.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/css-for-js/new-grid-times/6380953f2dd384a4b2386fe2db80fd89aefd9018/public/fonts/crimson-pro-italic.woff2 -------------------------------------------------------------------------------- /public/fonts/crimson-pro.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/css-for-js/new-grid-times/6380953f2dd384a4b2386fe2db80fd89aefd9018/public/fonts/crimson-pro.woff2 -------------------------------------------------------------------------------- /public/images/avatar-alice-smith.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/css-for-js/new-grid-times/6380953f2dd384a4b2386fe2db80fd89aefd9018/public/images/avatar-alice-smith.jpg -------------------------------------------------------------------------------- /public/images/avatar-mario-deluciano.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/css-for-js/new-grid-times/6380953f2dd384a4b2386fe2db80fd89aefd9018/public/images/avatar-mario-deluciano.jpg -------------------------------------------------------------------------------- /public/images/avatar-rocko-pierce-stanley.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/css-for-js/new-grid-times/6380953f2dd384a4b2386fe2db80fd89aefd9018/public/images/avatar-rocko-pierce-stanley.jpg -------------------------------------------------------------------------------- /public/images/avatar-stephen-abebe.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/css-for-js/new-grid-times/6380953f2dd384a4b2386fe2db80fd89aefd9018/public/images/avatar-stephen-abebe.jpg -------------------------------------------------------------------------------- /public/images/bicycles.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/css-for-js/new-grid-times/6380953f2dd384a4b2386fe2db80fd89aefd9018/public/images/bicycles.jpg -------------------------------------------------------------------------------- /public/images/bicycles@2x.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/css-for-js/new-grid-times/6380953f2dd384a4b2386fe2db80fd89aefd9018/public/images/bicycles@2x.jpg -------------------------------------------------------------------------------- /public/images/coach.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/css-for-js/new-grid-times/6380953f2dd384a4b2386fe2db80fd89aefd9018/public/images/coach.jpg -------------------------------------------------------------------------------- /public/images/coach@2x.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/css-for-js/new-grid-times/6380953f2dd384a4b2386fe2db80fd89aefd9018/public/images/coach@2x.jpg -------------------------------------------------------------------------------- /public/images/decathlon.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/css-for-js/new-grid-times/6380953f2dd384a4b2386fe2db80fd89aefd9018/public/images/decathlon.jpg -------------------------------------------------------------------------------- /public/images/decathlon@2x.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/css-for-js/new-grid-times/6380953f2dd384a4b2386fe2db80fd89aefd9018/public/images/decathlon@2x.jpg -------------------------------------------------------------------------------- /public/images/fashion.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/css-for-js/new-grid-times/6380953f2dd384a4b2386fe2db80fd89aefd9018/public/images/fashion.jpg -------------------------------------------------------------------------------- /public/images/fashion@2x.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/css-for-js/new-grid-times/6380953f2dd384a4b2386fe2db80fd89aefd9018/public/images/fashion@2x.jpg -------------------------------------------------------------------------------- /public/images/football.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/css-for-js/new-grid-times/6380953f2dd384a4b2386fe2db80fd89aefd9018/public/images/football.jpg -------------------------------------------------------------------------------- /public/images/football@2x.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/css-for-js/new-grid-times/6380953f2dd384a4b2386fe2db80fd89aefd9018/public/images/football@2x.jpg -------------------------------------------------------------------------------- /public/images/gamepad.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/css-for-js/new-grid-times/6380953f2dd384a4b2386fe2db80fd89aefd9018/public/images/gamepad.jpg -------------------------------------------------------------------------------- /public/images/gamepad.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/css-for-js/new-grid-times/6380953f2dd384a4b2386fe2db80fd89aefd9018/public/images/gamepad.png -------------------------------------------------------------------------------- /public/images/gamepad@2x.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/css-for-js/new-grid-times/6380953f2dd384a4b2386fe2db80fd89aefd9018/public/images/gamepad@2x.jpg -------------------------------------------------------------------------------- /public/images/habs.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/css-for-js/new-grid-times/6380953f2dd384a4b2386fe2db80fd89aefd9018/public/images/habs.jpg -------------------------------------------------------------------------------- /public/images/habs@2x.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/css-for-js/new-grid-times/6380953f2dd384a4b2386fe2db80fd89aefd9018/public/images/habs@2x.jpg -------------------------------------------------------------------------------- /public/images/old-car.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/css-for-js/new-grid-times/6380953f2dd384a4b2386fe2db80fd89aefd9018/public/images/old-car.jpg -------------------------------------------------------------------------------- /public/images/old-car@2x.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/css-for-js/new-grid-times/6380953f2dd384a4b2386fe2db80fd89aefd9018/public/images/old-car@2x.jpg -------------------------------------------------------------------------------- /public/images/politicians.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/css-for-js/new-grid-times/6380953f2dd384a4b2386fe2db80fd89aefd9018/public/images/politicians.jpg -------------------------------------------------------------------------------- /public/images/politicians.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/css-for-js/new-grid-times/6380953f2dd384a4b2386fe2db80fd89aefd9018/public/images/politicians.png -------------------------------------------------------------------------------- /public/images/politicians@2x.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/css-for-js/new-grid-times/6380953f2dd384a4b2386fe2db80fd89aefd9018/public/images/politicians@2x.jpg -------------------------------------------------------------------------------- /public/images/politicians@2x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/css-for-js/new-grid-times/6380953f2dd384a4b2386fe2db80fd89aefd9018/public/images/politicians@2x.png -------------------------------------------------------------------------------- /public/images/stock-graph-down-1.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | -------------------------------------------------------------------------------- /public/images/stock-graph-down-2.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | -------------------------------------------------------------------------------- /public/images/stock-graph-down-3.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | -------------------------------------------------------------------------------- /public/images/stock-graph-up-1.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | -------------------------------------------------------------------------------- /public/images/stock-graph-up-2.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | -------------------------------------------------------------------------------- /public/images/stock-graph-up-3.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | -------------------------------------------------------------------------------- /public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 10 | 11 | 34 | 35 | The New Grid Times — CSS for JavaScript Developers 36 | 37 | 38 | 41 |
42 | 52 | 53 | 54 | -------------------------------------------------------------------------------- /public/logo192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/css-for-js/new-grid-times/6380953f2dd384a4b2386fe2db80fd89aefd9018/public/logo192.png -------------------------------------------------------------------------------- /public/logo512.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/css-for-js/new-grid-times/6380953f2dd384a4b2386fe2db80fd89aefd9018/public/logo512.png -------------------------------------------------------------------------------- /public/manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "short_name": "React App", 3 | "name": "Create React App Sample", 4 | "icons": [ 5 | { 6 | "src": "favicon.ico", 7 | "sizes": "64x64 32x32 24x24 16x16", 8 | "type": "image/x-icon" 9 | }, 10 | { 11 | "src": "logo192.png", 12 | "type": "image/png", 13 | "sizes": "192x192" 14 | }, 15 | { 16 | "src": "logo512.png", 17 | "type": "image/png", 18 | "sizes": "512x512" 19 | } 20 | ], 21 | "start_url": ".", 22 | "display": "standalone", 23 | "theme_color": "#000000", 24 | "background_color": "#ffffff" 25 | } 26 | -------------------------------------------------------------------------------- /public/robots.txt: -------------------------------------------------------------------------------- 1 | # https://www.robotstxt.org/robotstxt.html 2 | User-agent: * 3 | Disallow: 4 | -------------------------------------------------------------------------------- /src/components/Advertisement/Advertisement.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import styled from 'styled-components/macro'; 3 | import { QUERIES } from '../../constants'; 4 | 5 | const Advertisement = (props) => { 6 | return ( 7 | 8 | Advertisement 9 | {/* 10 | In a real app, this would be created by a third-party script 11 | or something. This is merely a placeholder. 12 | */} 13 | 14 | 15 | ); 16 | }; 17 | 18 | const Wrapper = styled.div` 19 | display: flex; 20 | flex-direction: column; 21 | align-items: center; 22 | gap: 8px; 23 | `; 24 | 25 | const Prefix = styled.p` 26 | margin-bottom: 0; 27 | font-size: 1rem; 28 | font-style: italic; 29 | color: var(--color-gray-700); 30 | 31 | &::before, 32 | &::after { 33 | content: '—'; 34 | margin: 0 8px; 35 | } 36 | `; 37 | 38 | const Box = styled.div` 39 | width: 100%; 40 | height: 382px; 41 | background: var(--color-gray-300); 42 | 43 | @media ${QUERIES.tabletAndUp} { 44 | height: 120px; 45 | } 46 | `; 47 | 48 | export default Advertisement; 49 | -------------------------------------------------------------------------------- /src/components/Advertisement/index.js: -------------------------------------------------------------------------------- 1 | export { default } from './Advertisement'; 2 | -------------------------------------------------------------------------------- /src/components/App/App.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | 3 | import Header from '../Header'; 4 | import MaxWidthWrapper from '../MaxWidthWrapper'; 5 | import Footer from '../Footer'; 6 | import Spacer from '../Spacer'; 7 | import MainStoryGrid from '../MainStoryGrid'; 8 | import SpecialtyStoryGrid from '../SpecialtyStoryGrid'; 9 | 10 | const App = () => { 11 | return ( 12 | <> 13 |
14 | 15 | 16 | 17 | 18 | 19 |