DEBD58E1-C67E-47F7-9E3A-38AE64FC1AC1

├── .gitignore ├── assets ├── img │ ├── bg-people.png │ ├── bg-people.@2x.png │ ├── pope-francis.png │ ├── pope-francis.@2x.png │ ├── hamburger.svg │ ├── close.svg │ ├── search.svg │ ├── facebook.svg │ ├── twitter.svg │ ├── thumbs-up.svg │ ├── thumbs-down.svg │ └── wikipedia.svg └── data.json ├── README.md ├── index.html └── css └── main.css /.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | node_modules 3 | -------------------------------------------------------------------------------- /assets/img/bg-people.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zemoga/ui-test/HEAD/assets/img/bg-people.png -------------------------------------------------------------------------------- /assets/img/bg-people.@2x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zemoga/ui-test/HEAD/assets/img/bg-people.@2x.png -------------------------------------------------------------------------------- /assets/img/pope-francis.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zemoga/ui-test/HEAD/assets/img/pope-francis.png -------------------------------------------------------------------------------- /assets/img/pope-francis.@2x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zemoga/ui-test/HEAD/assets/img/pope-francis.@2x.png -------------------------------------------------------------------------------- /assets/img/hamburger.svg: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /assets/img/close.svg: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /assets/img/search.svg: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /assets/img/facebook.svg: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /assets/img/twitter.svg: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /assets/img/thumbs-up.svg: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /assets/img/thumbs-down.svg: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /assets/data.json: -------------------------------------------------------------------------------- 1 | { 2 | "data": [ 3 | { 4 | "name": "Kanye West", 5 | "description": "Born in Atlanta and raised in Chicago, West was first known as a producer for Roc-A-Fella Records in the early 2000s, producing singles for several mainstream artists.", 6 | "category": "entertainment", 7 | "picture": "kanye.png", 8 | "lastUpdated": "2020-03-10T23:08:57.892Z", 9 | "votes": { 10 | "positive": 23, 11 | "negative": 36 12 | } 13 | }, 14 | { 15 | "name": "Mark Zuckerberg", 16 | "description": "Born in White Plains, New York, Zuckerberg attended Harvard University, where he launched the Facebook social networking service from his dormitory room on February 4, 2004.", 17 | "category": "business", 18 | "picture": "mark.png", 19 | "lastUpdated": "2021-02-14T23:10:19.134Z", 20 | "votes": { 21 | "positive": 418, 22 | "negative": 324 23 | } 24 | }, 25 | { 26 | "name": "Cristina Fernández de Kirchner", 27 | "description": "Her first term of office started with a conflict with the agricultural sector, and her proposed taxation system was rejected.", 28 | "category": "politics", 29 | "picture": "cristina.png", 30 | "lastUpdated": "2020-12-10T23:41:07.120Z", 31 | "votes": { 32 | "positive": 45, 33 | "negative": 97 34 | } 35 | }, 36 | { 37 | "name": "Malala Yousafzai", 38 | "description": "The daughter of educational activist Ziauddin, Yousafzai was born to a Pashtun family in Mingora, Khyber Pakhtunkhwa, Pakistan. Her family came to run a chain of schools in the region.", 39 | "category": "politics", 40 | "picture": "malala.png", 41 | "lastUpdated": "2020-12-10T23:41:07.120Z", 42 | "votes": { 43 | "positive": 18, 44 | "negative": 3 45 | } 46 | }, 47 | { 48 | "name": "Elon Musk", 49 | "description": "In 2002, Musk founded SpaceX, an aerospace manufacturer and space transport services company, of which he is CEO, CTO, and lead designer.", 50 | "category": "business", 51 | "picture": "elon.png", 52 | "lastUpdated": "2020-12-20T23:43:38.041Z", 53 | "votes": { 54 | "positive": 1237, 55 | "negative": 894 56 | } 57 | }, 58 | { 59 | "name": "Greta Thumberg", 60 | "description": "Thunberg's activism started after convincing her parents to adopt several lifestyle choices to reduce their own carbon footprint.", 61 | "category": "environment", 62 | "picture": "greta.png", 63 | "lastUpdated": "2021-02-26T23:44:50.326Z", 64 | "votes": { 65 | "positive": 118, 66 | "negative": 45 67 | } 68 | } 69 | ] 70 | } -------------------------------------------------------------------------------- /assets/img/wikipedia.svg: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | Zemoga Front End Development - Candidate Test v2.1 2 | ================================================== 3 | 4 | 👋 Welcome! Are you ready to become a Zemogian FED? 5 | -------------------------------------------------- 6 | 7 | ### Overview 8 | 9 | Our client's app Rule of Thumb™️ tracks the sentiment of their users on trending and controversial people from different fields, including politics, business, media and entertainment, etc. The website has the following requirement: they need to present their users with an easy way to share their opinion on each presented celebrity, using votes (thumbs up and down), and display the results to the user while the poll is open. These features should be available to all users, regardless of where they're accessing the website from, whether it's a smartphone, a tablet or a desktop computer. 10 | 11 | > 👉 **The challenge**: Build a responsive display component for the data provided, and add it to the Rule of Thumb™️ website, complying with the design specifications. 12 | 13 | ### Acceptance Criteria 14 | 15 | Below you will find the minimum requirements we need to consider this challenge as completed 🎉 16 | 17 | 1. [ ] The interactive component should meet the design criteria, which you can find below in the different required resolutions: 18 | - [Mobile Prototype](https://www.figma.com/proto/NlQ6PjfanVO2YyuDUaohjx/Rule-of-Thumb---FED-Challenge?node-id=6%3A43&scaling=min-zoom) 19 | - [Tablet Prototype](https://www.figma.com/proto/NlQ6PjfanVO2YyuDUaohjx/Rule-of-Thumb---FED-Challenge?node-id=84%3A1033&scaling=min-zoom) 20 | - [Desktop Prototype](https://www.figma.com/proto/NlQ6PjfanVO2YyuDUaohjx/Rule-of-Thumb---FED-Challenge?node-id=84%3A2401&scaling=min-zoom) 21 | - [Design Handoff (Figma)](https://www.figma.com/file/NlQ6PjfanVO2YyuDUaohjx/Rule-of-Thumb---FED-Challenge) 22 | 2. [ ] In mobile version, cards **should only** be displayed as a list of cards, with horizontal scrolling and overflow. 23 | 3. [ ] In tablet and desktop versions, user **should be able to switch views** between _list view_ and _grid view_, using the dropdown menu, which should be located at the top right section of the component. 24 | 1. If the _list view_ is selected, all cards should be stacked vertically, according to the design specs. 25 | 2. If the _grid view_ is selected, all cards should be positioned as a grid of elements, according to the design specs. 26 | 4. [ ] Each card should contain a **gauge bar** at the bottom, which will display the distribution of positive and negative votes **as a percentage**. (See `assets/data.json` for reference). 27 | 5. [ ] Each card should contain three buttons: a **"thumbs down" (yellow)**, a **"thumbs up" (teal)** and a "Vote now" button **which should be disabled** by default. 28 | 1. If either "thumbs up" or "thumbs down" button is pressed, it should **toggle the selected state of that button** (denoted as a white border, see design specs for reference), and enable the "Vote Now" button. 29 | 2. If "Vote Now" button is pressed, **that vote should be posted**, and three other things should happen: 30 | 1. Eyebrow text should change to the copy "Thank you for your vote!" 31 | 2. "Vote now" text should change to the copy "Vote Again" 32 | 3. The **gauge bar** below should reflect the changes in the registered data and **percentage should be updated**. 33 | 3. If "Vote Again" button is pressed, all buttons should return to the initial state, and all modified copy texts should be reverted to their original state. The gauge bar, however, should persist the votes already posted. 34 | 6. [ ] **All posted votes should be persisted** by any means, and should be exactly the same count, even if the page is refreshed. Use _any_ persistance mechanisms you prefer: LocalStorage, Cookies, IndexedDB, URL params, a Back End service (Firebase, DynamoDB, Redis, etc). 35 | 36 | > ✅ You won't start from scratch! In this repository you can find the file `index.html` which contains the source code of the website, and the section in which you should include the interactive component. Feel free to use, reuse, refactor and/or vandalize any CSS variables, class names and markup as a starting point. 37 | 38 | Tips on Delivery 39 | ---------------- 40 | 41 | Whew! that was a lot of requirements, wasn't it? 😬 42 | 43 | Here are some tips to make this challenge truly enjoyable: 44 | 45 | - **Use any framework/library/tool you like.** Anything goes! React freak? Angular nerd? Vue believer? Svelte/Ember/Mithril/_younameit_ hipster? _jQuery ninja_? (Still relevant this days, go figure 😅). Even if you are a purist Vanilla HTML/CSS/ECMAScript user, please use whichever tool you need to showcase the best of your work. 46 | - **We don't care about IE** and neither should you. We'll test in Chromium, like all cool people do. 47 | - **Please send us the manual** or at least instructions in a README.md file on how to run your code, if we need to compile/transpile/serve the code you send us. We'll try our best to figure out issues if any problem arises, but a good developer should always ensure that their code works in places other that their own machine. We suggest using the [_engines_ property](https://medium.com/@faith__ngetich/locking-down-a-project-to-a-specific-node-version-using-nvmrc-and-or-engines-e5fd19144245) in a `package.json`, an `.nvmrc` file or [Volta](https://docs.volta.sh/guide/), if you need to lockdown specific tool versions (such as Node.js, yarn, etc). 48 | - **Cleanup your boilerplate**. Useless files, empty tests, commented out code and everything alike hinders our ability to see your real code. So, if you're using CLIs, generators or code boilerplate of any sort, please be kind and cleanup anything that's not adding value to the result. 49 | - **We value your time.** There's no time limit on this challenge (well, reasonably speaking, we don't expect you to take more than **three days** on it), and as long as you send us working code that meets the criteria described above, we're happy. Don't overthink it though, find an easy way to achieve a good result and stick to it. 50 | - **No copypasta, please.** You can find anything on GitHub and StackOverflow these days, can't you? Well, _so can we_. We won't blame you if you forgot how to use the LocalStorage API. Just don't copypaste big chunks of code. 51 | 52 | 53 | ### Going above and beyond 🚀 54 | 55 | If you feel that covering the basic acceptance criteria isn't enough to showcase the best of your abilities feel free to add a little extra. **This is by no means mandatory** but if there are any valuable additional skills you'd like to show off go right ahead. These are just a few ideas of things you could add: 56 | 57 | - Implement any sort of _state management solution_, that deals with data updates in a coherent manner. 58 | - Write some tests. Unit, Integration, E2E, anything that ensures that your code is unbreakable. 59 | - Do you know any back end language? Does _serverless_ ring a bell? Build some basic back end that deals with persistance. 60 | - Implement some level of accessibility for impaired people reviewing your code. 61 | - _Containerize_ the entire website and make it run flawlessly on any machine. 62 | - Cleanup your commit history and show us your thought process with atomic commits. 63 | - Document your code. Use any format you know of to generate documentation that allow us to peek under the hood. 64 | - Include any SEO strategy, and show off your score in any popular tool. 65 | - Create configuration for different environments, and optimize your code for production usage. 66 | 67 | > ⚠️ The sky is the limit, but so is your time. Remember that any of these is **entirely optional**. We want our heads blown by your code, but we won't wait three months for your masterpiece. Be reasonable and stick to what you can achieve in **three days tops**. 68 | 69 | Challenge complete? 70 | ------------------- 71 | 72 | Send a link to your recruiter pointing to your repository (Github or Bitbucket). The **master** branch should contain the entire result, along with the instructions to run your code on the README.md file (if apples). 73 | 74 | Happy coding! 🙌 75 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Rule of Thumb 8 | 9 | 10 | 11 | 12 | 39 |

40 |

46 |

47 |

48 |

49 |

50 |

What's your opinion on

51 |

Pope Francis?

52 |

53 | He’s talking tough on clergy sexual abuse, or is he just another pervert protector? (thumbs down) or a true pedophile punishing pontiff? (thumbs up) 54 |

55 |

56 | 57 | More information 58 | 59 |

60 |

61 | What’s Your Veredict? 62 |

63 |

64 | 67 | 70 |

71 |

72 |

73 |

74 |

75 |

76 | closing in 77 |

78 |

79 | 22 80 | days 81 |

82 |

83 |

84 |

85 | 99 |

100 | 101 | 👉 Your code goes here 👈 102 | 103 |

104 | 120 |

121 | 151 |

152 | 153 | -------------------------------------------------------------------------------- /css/main.css: -------------------------------------------------------------------------------- 1 | :root { 2 | --color-green-positive: 60, 187, 180; 3 | --color-yellow-negative: 249, 173, 29; 4 | --color-dark-background: rgba(0, 0, 0, .4); 5 | --color-darker-background: rgba(0, 0, 0, .6); 6 | --color-darker-gray: rgba(51, 51, 51, 1); 7 | --color-dark-gray: rgba(70, 70, 70, 1); 8 | --color-light-gray: rgba(235, 235, 235, 1); 9 | --color-light-background: rgba(255, 255, 255, .4); 10 | --color-lighter-background: rgba(255, 255, 255, .8); 11 | --color-white: rgba(255, 255, 255, 1); 12 | } 13 | 14 | html, body { 15 | width: 100%; 16 | margin: 0; 17 | background-color: var(--color-white); 18 | font-family: 'Lato', sans-serif; 19 | font-size: 12px; 20 | font-weight: 400; 21 | } 22 | 23 | body { 24 | position: relative; 25 | } 26 | 27 | a, a:visited { 28 | color: var(--color-white); 29 | } 30 | 31 | button { 32 | font-family: 'Lato', sans-serif; 33 | } 34 | 35 | ul { 36 | padding: 0; 37 | margin: 0; 38 | list-style: none; 39 | } 40 | 41 | hr[role="separator"] { 42 | border: 0 none; 43 | border-bottom: 2px dotted var(--color-dark-gray); 44 | margin: 1.5rem 1rem; 45 | } 46 | 47 | .nav { 48 | position: fixed; 49 | z-index: 2; 50 | top: 0; 51 | display: flex; 52 | width: calc(100vw - 2rem); 53 | min-height: 10rem; 54 | justify-content: space-between; 55 | padding: 0 1rem; 56 | background: linear-gradient( 57 | to bottom, 58 | rgba(0, 0, 0, .8) 0%, 59 | rgba(0, 0, 0, 0) 80% 60 | ); 61 | } 62 | 63 | .icon-button { 64 | padding: 0; 65 | border: 0; 66 | background-color: transparent; 67 | } 68 | 69 | .icon-button[aria-label="thumbs up"] { 70 | background-color: rgba(var(--color-green-positive), .8); 71 | } 72 | 73 | .icon-button[aria-label="thumbs up"]:hover { 74 | background-color: rgba(var(--color-green-positive), 1); 75 | } 76 | 77 | .icon-button[aria-label="thumbs down"] { 78 | background-color: rgba(var(--color-yellow-negative), .8); 79 | } 80 | 81 | .icon-button[aria-label="thumbs down"]:hover { 82 | background-color: rgba(var(--color-yellow-negative), 1); 83 | } 84 | 85 | .icon-button > img { 86 | width: 100%; 87 | height: 100%; 88 | } 89 | 90 | .nav__logo { 91 | margin: 2.5rem 0 0; 92 | color: var(--color-white); 93 | font-size: 2rem; 94 | font-weight: 400; 95 | line-height: 2.5rem; 96 | } 97 | 98 | .nav__hamburger { 99 | position: relative; 100 | top: 2rem; 101 | right: 1rem; 102 | width: 25px; 103 | height: 20px; 104 | } 105 | 106 | .nav__links { 107 | position: fixed; 108 | top: 0; 109 | right: 0; 110 | left: 0; 111 | display: flex; 112 | width: 100vw; 113 | height: calc(100vh - 4rem); 114 | flex-direction: column; 115 | padding: 4rem 0 2rem; 116 | background-color: var(--color-darker-background); 117 | transform: translateX(100vw); 118 | } 119 | 120 | .nav__links li { 121 | width: 100%; 122 | margin: 3rem 0; 123 | font-size: 2rem; 124 | text-align: center; 125 | } 126 | 127 | .nav__links a { 128 | color: var(--color-white); 129 | text-decoration: none; 130 | } 131 | 132 | .nav__hamburger:focus + .nav__links, 133 | .nav__links:focus-within { 134 | transform: translateX(0); 135 | } 136 | 137 | .nav__links li:last-child { 138 | order: -1; 139 | } 140 | 141 | .nav__search { 142 | width: 24px; 143 | height: 24px; 144 | margin-left: .5rem; 145 | } 146 | 147 | .nav__search-input { 148 | width: 25vw; 149 | border: 0; 150 | border-bottom: 2px solid var(--color-white); 151 | background-color: transparent; 152 | border-radius: 0; 153 | color: var(--color-white); 154 | font-family: 'Lato', sans-serif; 155 | font-size: 1.5rem; 156 | transition: width .2s ease-in; 157 | } 158 | 159 | .nav__search-input:focus { 160 | width: 60vw; 161 | outline: 0 none; 162 | } 163 | 164 | .hero { 165 | position: relative; 166 | overflow: hidden; 167 | height: 80vw; 168 | min-height: 35rem; 169 | max-height: 38rem; 170 | margin-bottom: 2rem; 171 | } 172 | 173 | .hero__background { 174 | position: absolute; 175 | left: -35vw; 176 | width: 160vw; 177 | height: 100%; 178 | object-fit: cover; 179 | } 180 | 181 | .hero__featured-card { 182 | position: relative; 183 | top: 5.5rem; 184 | left: 1rem; 185 | overflow: hidden; 186 | width: 55vw; 187 | max-height: 25rem; 188 | } 189 | 190 | .hero__closing-gauge { 191 | position: absolute; 192 | bottom: 0; 193 | display: flex; 194 | width: 100%; 195 | height: 3rem; 196 | background-color: var(--color-light-background); 197 | } 198 | 199 | .featured-card__glass-background { 200 | position: absolute; 201 | top: -20%; 202 | left: -20%; 203 | width: 140%; 204 | height: 140%; 205 | background: 206 | center no-repeat linear-gradient( 207 | var(--color-dark-background), 208 | var(--color-dark-background) 209 | ), 210 | -25vw 0/160vw no-repeat url('../assets/img/pope-francis.png'); 211 | filter: blur(1rem); 212 | } 213 | 214 | .featured-card__content { 215 | position: relative; 216 | padding: 1rem; 217 | color: var(--color-white); 218 | } 219 | 220 | .featured-card__hairline { 221 | margin: 0; 222 | font-weight: 300; 223 | white-space: nowrap; 224 | } 225 | 226 | .featured-card__title { 227 | margin: 0; 228 | font-size: 3rem; 229 | font-weight: 400; 230 | line-height: 1; 231 | } 232 | 233 | .featured-card__desc { 234 | display: -webkit-box; 235 | overflow: hidden; 236 | max-height: 10.5rem; 237 | margin: 1rem 0; 238 | -webkit-box-orient: vertical; 239 | font-size: 1.25rem; 240 | font-weight: 300; 241 | -webkit-line-clamp: 6; 242 | text-overflow: ellipsis; 243 | } 244 | 245 | .featured-card__cta { 246 | font-weight: 700; 247 | } 248 | 249 | .featured-card__buttons { 250 | display: flex; 251 | justify-content: space-between; 252 | margin: 0 -1rem -1rem; 253 | } 254 | 255 | .featured-card__buttons > .icon-button { 256 | width: 50%; 257 | height: 2.75rem; 258 | } 259 | 260 | .featured-card__buttons > .icon-button > img { 261 | max-width: 1.25rem; 262 | } 263 | 264 | .closing-gauge__left { 265 | position: relative; 266 | display: flex; 267 | width: 30%; 268 | align-items: center; 269 | justify-content: flex-end; 270 | padding: 0 .25rem 0 0; 271 | background-color: var(--color-dark-background); 272 | color: var(--color-white); 273 | font-weight: 300; 274 | text-transform: uppercase; 275 | } 276 | 277 | .closing-gauge__left:after { 278 | position: absolute; 279 | right: -.5rem; 280 | display: block; 281 | width: 0; 282 | height: 0; 283 | border-top: 0.25rem solid transparent; 284 | border-bottom: 0.25rem solid transparent; 285 | border-left: 0.5rem solid var(--color-dark-background); 286 | content: ' '; 287 | } 288 | 289 | .closing-gauge__right { 290 | display: flex; 291 | align-items: center; 292 | justify-content: flex-end; 293 | padding: 0 0 0 .75rem; 294 | } 295 | 296 | .closing-gauge__number { 297 | color: var(--color-dark-gray); 298 | font-size: 1.5rem; 299 | font-weight: 400; 300 | } 301 | 302 | .closing-gauge__desc { 303 | color: var(--color-dark-gray); 304 | font-size: 1.5rem; 305 | font-weight: 300; 306 | } 307 | 308 | .banner { 309 | position: relative; 310 | display: flex; 311 | overflow: hidden; 312 | align-items: center; 313 | justify-content: space-between; 314 | padding: 1rem; 315 | margin: 1rem; 316 | background-color: var(--color-light-gray); 317 | } 318 | 319 | .banner__background { 320 | position: absolute; 321 | top: 0; 322 | left: 0; 323 | width: 100%; 324 | object-fit: cover; 325 | opacity: .2; 326 | pointer-events: none; 327 | } 328 | 329 | .banner-top .banner__left { 330 | flex-basis: 40%; 331 | padding-right: 1rem; 332 | } 333 | 334 | .banner-top .banner__left > .banner__hairline { 335 | color: var(--color-dark-gray); 336 | font-size: 1.25rem; 337 | font-weight: 300; 338 | letter-spacing: -.07rem; 339 | } 340 | 341 | .banner-top .banner__left > .banner__title { 342 | display: block; 343 | color: var(--color-dark-gray); 344 | font-size: 2rem; 345 | font-weight: 700; 346 | letter-spacing: -.05rem; 347 | } 348 | 349 | .banner-top .banner__right { 350 | flex-basis: 60%; 351 | } 352 | 353 | .banner-top .banner__text { 354 | margin: 0; 355 | color: var(--color-dark-gray); 356 | font-size: 1.25rem; 357 | font-weight: 300; 358 | letter-spacing: -.05rem; 359 | } 360 | 361 | .banner-bottom { 362 | flex-direction: column; 363 | padding: 1rem 3rem; 364 | margin-top: 2rem; 365 | } 366 | 367 | .banner-bottom .banner__heading { 368 | position: relative; 369 | margin: 0 0 1rem; 370 | color: var(--color-dark-gray); 371 | font-size: 2rem; 372 | font-weight: 400; 373 | text-align: center; 374 | } 375 | 376 | .banner-bottom .banner__right { 377 | width: 100%; 378 | } 379 | 380 | .banner-bottom .banner__cta { 381 | position: relative; 382 | display: block; 383 | width: 100%; 384 | padding: 1rem 0; 385 | border: 2px solid var(--color-darker-background); 386 | background: transparent; 387 | color: var(--color-darker-gray); 388 | font-size: 1.5rem; 389 | } 390 | 391 | main[role="main"] { 392 | padding: 0 1rem; 393 | margin-top: 2rem; 394 | } 395 | 396 | main h2, 397 | main h3, 398 | main h4 { 399 | color: var(--color-dark-gray); 400 | font-weight: 300; 401 | } 402 | 403 | main h2 { 404 | margin: 0 0 2rem; 405 | font-size: 2rem; 406 | } 407 | 408 | .footer { 409 | display: flex; 410 | align-items: flex-end; 411 | justify-content: space-between; 412 | margin: 0 1rem 3rem; 413 | } 414 | 415 | .footer__links li { 416 | padding: .5rem 0; 417 | font-size: 1.25rem; 418 | } 419 | 420 | .footer__links li a { 421 | color: var(--color-dark-gray); 422 | text-decoration: none; 423 | } 424 | 425 | .footer__links li a:hover { 426 | color: var(--color-darker-gray); 427 | text-decoration: underline; 428 | } 429 | 430 | .footer__social > span { 431 | color: var(--color-darker-gray); 432 | font-size: 1.25rem; 433 | text-align: right; 434 | } 435 | 436 | .footer__social > ul { 437 | display: flex; 438 | margin-top: 1rem; 439 | } 440 | 441 | .footer__social > ul > li { 442 | margin-right: 1rem; 443 | } 444 | 445 | .featured-card__more-info { 446 | display: none; 447 | } 448 | 449 | .featured-card__more-info-icon { 450 | width: 1.5rem; 451 | height: 1rem; 452 | margin-right: .5rem; 453 | } 454 | 455 | .banner-top .icon-button { 456 | display: none; 457 | } 458 | 459 | .max-centered { 460 | display: contents; 461 | } 462 | 463 | @media all and (min-width: 500px) { 464 | .banner-top .banner__left { 465 | flex-basis: 30%; 466 | } 467 | 468 | .banner-top .banner__right { 469 | flex-basis: 70%; 470 | } 471 | } 472 | 473 | @media all and (min-width: 768px) { 474 | html, body { 475 | font-size: 14px; 476 | } 477 | 478 | .hero { 479 | max-height: 38rem; 480 | } 481 | 482 | .hero__background { 483 | top: -6.5rem; 484 | left: 0; 485 | width: 110vw; 486 | height: auto; 487 | } 488 | 489 | .featured-card__glass-background { 490 | background: 491 | center no-repeat linear-gradient(var(--color-dark-background), var(--color-dark-background)), 492 | 7vw -6.5rem/115vw auto no-repeat url(../assets/img/pope-francis.png); 493 | } 494 | 495 | .featured-card__content { 496 | padding: 2rem 1.5rem; 497 | } 498 | 499 | .featured-card__more-info { 500 | display: inline-block; 501 | margin: 0; 502 | font-weight: 300; 503 | } 504 | 505 | .featured-card__buttons { 506 | margin: 0 -1.5rem -2rem; 507 | } 508 | 509 | .banner-top .banner__left { 510 | flex-basis: 20%; 511 | } 512 | 513 | .banner-top .banner__right { 514 | flex-basis: 80%; 515 | } 516 | 517 | .banner-bottom { 518 | flex-direction: row; 519 | justify-content: space-between; 520 | padding: 1rem 2rem; 521 | } 522 | 523 | .banner-bottom .banner__background { 524 | top: -230%; 525 | } 526 | 527 | .banner-bottom .banner__right { 528 | width: auto; 529 | } 530 | 531 | .banner-bottom .banner__heading { 532 | margin-bottom: 0; 533 | font-size: 1.5rem; 534 | } 535 | 536 | .banner-bottom .banner__cta { 537 | width: 16rem; 538 | } 539 | 540 | .footer { 541 | align-items: flex-start; 542 | } 543 | 544 | .footer__links ul, 545 | .footer__social { 546 | display: flex; 547 | } 548 | 549 | .footer__links ul li { 550 | padding: 0; 551 | margin-right: 2rem; 552 | font-size: 1rem; 553 | } 554 | 555 | .footer__social { 556 | align-items: center; 557 | } 558 | 559 | .footer__social span { 560 | margin-right: 1rem; 561 | color: var(--color-dark-gray); 562 | font-size: 0.833rem; 563 | } 564 | 565 | .footer__social > ul { 566 | margin-top: 3px; 567 | } 568 | } 569 | 570 | @media all and (min-width: 1100px) { 571 | html, body { 572 | font-size: 18px; 573 | } 574 | 575 | .max-centered { 576 | position: relative; 577 | display: block; 578 | width: 100vw; 579 | max-width: 1100px; 580 | margin-right: auto; 581 | margin-left: auto; 582 | } 583 | 584 | .max-centered > *, 585 | .max-centered > hr[role="separator"] { 586 | margin-right: 0; 587 | margin-left: 0; 588 | } 589 | 590 | .max-centered main { 591 | padding: 0; 592 | } 593 | 594 | .nav { 595 | min-height: 22vh; 596 | } 597 | 598 | .nav__logo { 599 | margin-top: 3rem; 600 | } 601 | 602 | .nav__hamburger { 603 | display: none; 604 | } 605 | 606 | .nav__links { 607 | position: absolute; 608 | top: 3rem; 609 | right: 0; 610 | left: auto; 611 | width: 40vw; 612 | height: auto; 613 | flex-direction: row; 614 | align-items: center; 615 | justify-content: flex-end; 616 | padding: 0; 617 | background-color: transparent; 618 | transform: translateX(0); 619 | } 620 | 621 | .nav__links li { 622 | width: fit-content; 623 | margin: 0 1rem 0 0; 624 | font-size: 1rem; 625 | font-weight: 300; 626 | text-align: right; 627 | } 628 | 629 | .nav__links li:last-child { 630 | order: 0; 631 | } 632 | 633 | .nav__search { 634 | width: 2rem; 635 | height: 2rem; 636 | } 637 | 638 | .nav__search-input { 639 | display: none; 640 | } 641 | 642 | .hero { 643 | min-height: 700px; 644 | } 645 | 646 | .hero__background { 647 | top: -2.5rem; 648 | left: 0; 649 | width: 100vw; 650 | height: auto; 651 | } 652 | 653 | .hero__featured-card { 654 | left: 0; 655 | width: 50%; 656 | min-width: 600px; 657 | max-height: unset; 658 | margin-top: 2.5rem; 659 | } 660 | 661 | .featured-card__glass-background { 662 | background: 663 | center no-repeat linear-gradient(var(--color-dark-background), var(--color-dark-background)), 664 | calc(-50vw + 650px) -6rem/105vw auto no-repeat url(../assets/img/pope-francis.png); 665 | } 666 | 667 | .featured-card__content { 668 | padding: 2rem 1.5rem; 669 | } 670 | 671 | .featured-card__desc { 672 | max-width: 85%; 673 | margin: 2rem 0 1rem; 674 | } 675 | 676 | .featured-card__cta { 677 | margin: 1rem 0 2rem; 678 | font-size: 1.5rem; 679 | } 680 | 681 | .featured-card__buttons { 682 | margin: 0 -1.5rem -2rem; 683 | } 684 | 685 | .featured-card__buttons > .icon-button { 686 | height: auto; 687 | } 688 | 689 | .featured-card__buttons > .icon-button > img { 690 | max-width: 2rem; 691 | height: 2rem; 692 | margin: 1.3rem 0; 693 | } 694 | 695 | .closing-gauge__left { 696 | padding-right: 1rem; 697 | } 698 | 699 | .closing-gauge__right { 700 | padding-left: 1rem; 701 | } 702 | 703 | .closing-gauge__title { 704 | font-size: 1.25rem; 705 | } 706 | 707 | .closing-gauge__number, 708 | .closing-gauge__desc { 709 | font-size: 2rem; 710 | } 711 | 712 | .closing-gauge__left:after { 713 | border-top-width: 0.33rem; 714 | border-bottom-width: 0.33rem; 715 | } 716 | 717 | .banner-top .banner__text, 718 | .banner-top .banner__left > .banner__hairline { 719 | font-size: 1rem; 720 | } 721 | 722 | .banner-top .banner__left > .banner__title { 723 | font-size: 1.5rem; 724 | letter-spacing: 0; 725 | } 726 | 727 | .banner-top .icon-button { 728 | display: block; 729 | margin-left: 2rem; 730 | } 731 | 732 | .banner-bottom .banner__cta { 733 | width: 20rem; 734 | } 735 | 736 | main h2 { 737 | font-size: 2.5rem; 738 | } 739 | 740 | hr[role="separator"] { 741 | margin: 2rem 0; 742 | } 743 | } 744 | --------------------------------------------------------------------------------