├── .gitignore ├── assets ├── images │ ├── day-1.png │ ├── day-10.png │ ├── day-100-verse.jpg │ ├── day-100-verse@2x.jpg │ ├── day-100.jpg │ ├── day-11.png │ ├── day-12.png │ ├── day-13.png │ ├── day-14.png │ ├── day-15.png │ ├── day-16.png │ ├── day-17.jpg │ ├── day-18.png │ ├── day-19.png │ ├── day-2.png │ ├── day-20.jpg │ ├── day-21.png │ ├── day-22.png │ ├── day-23.png │ ├── day-24.png │ ├── day-25.png │ ├── day-26.gif │ ├── day-27.png │ ├── day-28.png │ ├── day-29.png │ ├── day-3.png │ ├── day-30.png │ ├── day-31.png │ ├── day-32.png │ ├── day-33.png │ ├── day-34.png │ ├── day-35.png │ ├── day-36.gif │ ├── day-37.jpg │ ├── day-38.png │ ├── day-39.png │ ├── day-4.jpg │ ├── day-40.png │ ├── day-41.png │ ├── day-42.jpg │ ├── day-43.jpg │ ├── day-44.png │ ├── day-45.png │ ├── day-46.jpg │ ├── day-47.jpg │ ├── day-48.png │ ├── day-49.png │ ├── day-5.png │ ├── day-50.jpg │ ├── day-51.png │ ├── day-52.png │ ├── day-53.png │ ├── day-54.png │ ├── day-55.png │ ├── day-56.jpg │ ├── day-57.png │ ├── day-58.png │ ├── day-59.png │ ├── day-6.png │ ├── day-60.jpg │ ├── day-61.png │ ├── day-62.png │ ├── day-63.png │ ├── day-64.jpg │ ├── day-65.jpg │ ├── day-66.png │ ├── day-67.jpg │ ├── day-68.png │ ├── day-69.jpg │ ├── day-7.png │ ├── day-70.png │ ├── day-71.png │ ├── day-72.jpg │ ├── day-73.png │ ├── day-74.png │ ├── day-75.png │ ├── day-76.jpg │ ├── day-77.png │ ├── day-78.png │ ├── day-79.jpg │ ├── day-8.png │ ├── day-80.png │ ├── day-81.png │ ├── day-82.gif │ ├── day-83.png │ ├── day-84.jpg │ ├── day-85.png │ ├── day-86.png │ ├── day-87.png │ ├── day-88.png │ ├── day-89.png │ ├── day-9.png │ ├── day-90.png │ ├── day-91.png │ ├── day-92.jpg │ ├── day-93.png │ ├── day-94.png │ ├── day-95.jpg │ ├── day-96.png │ ├── day-97.png │ ├── day-98.png │ ├── day-99.png │ ├── homescreen.jpg │ ├── main.png │ ├── startup-1242x2148.png │ ├── startup-1536x2008.png │ ├── startup-320x460.png │ ├── startup-640x1096.png │ ├── startup-640x920.png │ ├── startup-750x1294.png │ └── startup-768x1004.png └── sass │ ├── core │ ├── _base.scss │ ├── _fonts.scss │ ├── _mixins.scss │ ├── _reset.scss │ ├── _settings.scss │ ├── _typography.scss │ └── _variables.scss │ ├── days │ ├── _001.scss │ ├── _002.scss │ ├── _003.scss │ ├── _004.scss │ ├── _005.scss │ ├── _006.scss │ ├── _007.scss │ ├── _008.scss │ ├── _009.scss │ ├── _010.scss │ ├── _011.scss │ ├── _012.scss │ ├── _013.scss │ ├── _014.scss │ ├── _015.scss │ ├── _016.scss │ ├── _017.scss │ ├── _018.scss │ ├── _019.scss │ ├── _020.scss │ ├── _021.scss │ ├── _022.scss │ ├── _023.scss │ ├── _024.scss │ ├── _025.scss │ ├── _026.scss │ ├── _027.scss │ ├── _028.scss │ ├── _029.scss │ ├── _030.scss │ ├── _031.scss │ ├── _032.scss │ ├── _033.scss │ ├── _034.scss │ ├── _035.scss │ ├── _036.scss │ ├── _037.scss │ ├── _038.scss │ ├── _039.scss │ ├── _040.scss │ ├── _041.scss │ ├── _042.scss │ ├── _043.scss │ ├── _044.scss │ ├── _045.scss │ ├── _046.scss │ ├── _047.scss │ ├── _048.scss │ ├── _049.scss │ ├── _050.scss │ ├── _051.scss │ ├── _052.scss │ ├── _053.scss │ ├── _054.scss │ ├── _055.scss │ ├── _056.scss │ ├── _057.scss │ ├── _058.scss │ ├── _059.scss │ ├── _060.scss │ ├── _061.scss │ ├── _062.scss │ ├── _063.scss │ ├── _064.scss │ ├── _065.scss │ ├── _066.scss │ ├── _067.scss │ ├── _068.scss │ ├── _069.scss │ ├── _070.scss │ ├── _071.scss │ ├── _072.scss │ ├── _073.scss │ ├── _074.scss │ ├── _075.scss │ ├── _076.scss │ ├── _077.scss │ ├── _078.scss │ ├── _079.scss │ ├── _080.scss │ ├── _081.scss │ ├── _082.scss │ ├── _083.scss │ ├── _084.scss │ ├── _085.scss │ ├── _086.scss │ ├── _087.scss │ ├── _088.scss │ ├── _089.scss │ ├── _090.scss │ ├── _091.scss │ ├── _092.scss │ ├── _093.scss │ ├── _094.scss │ ├── _095.scss │ ├── _096.scss │ ├── _097.scss │ ├── _098.scss │ ├── _099.scss │ └── _100.scss │ ├── modules │ ├── _about.scss │ ├── _carbon-ads.scss │ ├── _day.scss │ ├── _footer.scss │ ├── _layout.scss │ └── _paris.scss │ └── screen.scss ├── bower.json ├── favicon.ico ├── gulpfile.js ├── icon.png ├── index.html └── package.json /.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | _orig 3 | 4 | bower_components 5 | node_modules 6 | 7 | assets/css 8 | assets/js/*.js -------------------------------------------------------------------------------- /assets/images/day-1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jonsuh/100-days-of-scriptures/ff29094dbd15584f0d46a393e797a32b9f2a5037/assets/images/day-1.png -------------------------------------------------------------------------------- /assets/images/day-10.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jonsuh/100-days-of-scriptures/ff29094dbd15584f0d46a393e797a32b9f2a5037/assets/images/day-10.png -------------------------------------------------------------------------------- /assets/images/day-100-verse.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jonsuh/100-days-of-scriptures/ff29094dbd15584f0d46a393e797a32b9f2a5037/assets/images/day-100-verse.jpg -------------------------------------------------------------------------------- /assets/images/day-100-verse@2x.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jonsuh/100-days-of-scriptures/ff29094dbd15584f0d46a393e797a32b9f2a5037/assets/images/day-100-verse@2x.jpg -------------------------------------------------------------------------------- /assets/images/day-100.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jonsuh/100-days-of-scriptures/ff29094dbd15584f0d46a393e797a32b9f2a5037/assets/images/day-100.jpg -------------------------------------------------------------------------------- /assets/images/day-11.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jonsuh/100-days-of-scriptures/ff29094dbd15584f0d46a393e797a32b9f2a5037/assets/images/day-11.png -------------------------------------------------------------------------------- /assets/images/day-12.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jonsuh/100-days-of-scriptures/ff29094dbd15584f0d46a393e797a32b9f2a5037/assets/images/day-12.png -------------------------------------------------------------------------------- /assets/images/day-13.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jonsuh/100-days-of-scriptures/ff29094dbd15584f0d46a393e797a32b9f2a5037/assets/images/day-13.png -------------------------------------------------------------------------------- /assets/images/day-14.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jonsuh/100-days-of-scriptures/ff29094dbd15584f0d46a393e797a32b9f2a5037/assets/images/day-14.png -------------------------------------------------------------------------------- /assets/images/day-15.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jonsuh/100-days-of-scriptures/ff29094dbd15584f0d46a393e797a32b9f2a5037/assets/images/day-15.png -------------------------------------------------------------------------------- /assets/images/day-16.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jonsuh/100-days-of-scriptures/ff29094dbd15584f0d46a393e797a32b9f2a5037/assets/images/day-16.png -------------------------------------------------------------------------------- /assets/images/day-17.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jonsuh/100-days-of-scriptures/ff29094dbd15584f0d46a393e797a32b9f2a5037/assets/images/day-17.jpg -------------------------------------------------------------------------------- /assets/images/day-18.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jonsuh/100-days-of-scriptures/ff29094dbd15584f0d46a393e797a32b9f2a5037/assets/images/day-18.png -------------------------------------------------------------------------------- /assets/images/day-19.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jonsuh/100-days-of-scriptures/ff29094dbd15584f0d46a393e797a32b9f2a5037/assets/images/day-19.png -------------------------------------------------------------------------------- /assets/images/day-2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jonsuh/100-days-of-scriptures/ff29094dbd15584f0d46a393e797a32b9f2a5037/assets/images/day-2.png -------------------------------------------------------------------------------- /assets/images/day-20.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jonsuh/100-days-of-scriptures/ff29094dbd15584f0d46a393e797a32b9f2a5037/assets/images/day-20.jpg -------------------------------------------------------------------------------- /assets/images/day-21.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jonsuh/100-days-of-scriptures/ff29094dbd15584f0d46a393e797a32b9f2a5037/assets/images/day-21.png -------------------------------------------------------------------------------- /assets/images/day-22.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jonsuh/100-days-of-scriptures/ff29094dbd15584f0d46a393e797a32b9f2a5037/assets/images/day-22.png -------------------------------------------------------------------------------- /assets/images/day-23.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jonsuh/100-days-of-scriptures/ff29094dbd15584f0d46a393e797a32b9f2a5037/assets/images/day-23.png -------------------------------------------------------------------------------- /assets/images/day-24.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jonsuh/100-days-of-scriptures/ff29094dbd15584f0d46a393e797a32b9f2a5037/assets/images/day-24.png -------------------------------------------------------------------------------- /assets/images/day-25.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jonsuh/100-days-of-scriptures/ff29094dbd15584f0d46a393e797a32b9f2a5037/assets/images/day-25.png -------------------------------------------------------------------------------- /assets/images/day-26.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jonsuh/100-days-of-scriptures/ff29094dbd15584f0d46a393e797a32b9f2a5037/assets/images/day-26.gif -------------------------------------------------------------------------------- /assets/images/day-27.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jonsuh/100-days-of-scriptures/ff29094dbd15584f0d46a393e797a32b9f2a5037/assets/images/day-27.png -------------------------------------------------------------------------------- /assets/images/day-28.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jonsuh/100-days-of-scriptures/ff29094dbd15584f0d46a393e797a32b9f2a5037/assets/images/day-28.png -------------------------------------------------------------------------------- /assets/images/day-29.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jonsuh/100-days-of-scriptures/ff29094dbd15584f0d46a393e797a32b9f2a5037/assets/images/day-29.png -------------------------------------------------------------------------------- /assets/images/day-3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jonsuh/100-days-of-scriptures/ff29094dbd15584f0d46a393e797a32b9f2a5037/assets/images/day-3.png -------------------------------------------------------------------------------- /assets/images/day-30.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jonsuh/100-days-of-scriptures/ff29094dbd15584f0d46a393e797a32b9f2a5037/assets/images/day-30.png -------------------------------------------------------------------------------- /assets/images/day-31.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jonsuh/100-days-of-scriptures/ff29094dbd15584f0d46a393e797a32b9f2a5037/assets/images/day-31.png -------------------------------------------------------------------------------- /assets/images/day-32.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jonsuh/100-days-of-scriptures/ff29094dbd15584f0d46a393e797a32b9f2a5037/assets/images/day-32.png -------------------------------------------------------------------------------- /assets/images/day-33.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jonsuh/100-days-of-scriptures/ff29094dbd15584f0d46a393e797a32b9f2a5037/assets/images/day-33.png -------------------------------------------------------------------------------- /assets/images/day-34.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jonsuh/100-days-of-scriptures/ff29094dbd15584f0d46a393e797a32b9f2a5037/assets/images/day-34.png -------------------------------------------------------------------------------- /assets/images/day-35.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jonsuh/100-days-of-scriptures/ff29094dbd15584f0d46a393e797a32b9f2a5037/assets/images/day-35.png -------------------------------------------------------------------------------- /assets/images/day-36.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jonsuh/100-days-of-scriptures/ff29094dbd15584f0d46a393e797a32b9f2a5037/assets/images/day-36.gif -------------------------------------------------------------------------------- /assets/images/day-37.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jonsuh/100-days-of-scriptures/ff29094dbd15584f0d46a393e797a32b9f2a5037/assets/images/day-37.jpg -------------------------------------------------------------------------------- /assets/images/day-38.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jonsuh/100-days-of-scriptures/ff29094dbd15584f0d46a393e797a32b9f2a5037/assets/images/day-38.png -------------------------------------------------------------------------------- /assets/images/day-39.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jonsuh/100-days-of-scriptures/ff29094dbd15584f0d46a393e797a32b9f2a5037/assets/images/day-39.png -------------------------------------------------------------------------------- /assets/images/day-4.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jonsuh/100-days-of-scriptures/ff29094dbd15584f0d46a393e797a32b9f2a5037/assets/images/day-4.jpg -------------------------------------------------------------------------------- /assets/images/day-40.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jonsuh/100-days-of-scriptures/ff29094dbd15584f0d46a393e797a32b9f2a5037/assets/images/day-40.png -------------------------------------------------------------------------------- /assets/images/day-41.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jonsuh/100-days-of-scriptures/ff29094dbd15584f0d46a393e797a32b9f2a5037/assets/images/day-41.png -------------------------------------------------------------------------------- /assets/images/day-42.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jonsuh/100-days-of-scriptures/ff29094dbd15584f0d46a393e797a32b9f2a5037/assets/images/day-42.jpg -------------------------------------------------------------------------------- /assets/images/day-43.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jonsuh/100-days-of-scriptures/ff29094dbd15584f0d46a393e797a32b9f2a5037/assets/images/day-43.jpg -------------------------------------------------------------------------------- /assets/images/day-44.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jonsuh/100-days-of-scriptures/ff29094dbd15584f0d46a393e797a32b9f2a5037/assets/images/day-44.png -------------------------------------------------------------------------------- /assets/images/day-45.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jonsuh/100-days-of-scriptures/ff29094dbd15584f0d46a393e797a32b9f2a5037/assets/images/day-45.png -------------------------------------------------------------------------------- /assets/images/day-46.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jonsuh/100-days-of-scriptures/ff29094dbd15584f0d46a393e797a32b9f2a5037/assets/images/day-46.jpg -------------------------------------------------------------------------------- /assets/images/day-47.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jonsuh/100-days-of-scriptures/ff29094dbd15584f0d46a393e797a32b9f2a5037/assets/images/day-47.jpg -------------------------------------------------------------------------------- /assets/images/day-48.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jonsuh/100-days-of-scriptures/ff29094dbd15584f0d46a393e797a32b9f2a5037/assets/images/day-48.png -------------------------------------------------------------------------------- /assets/images/day-49.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jonsuh/100-days-of-scriptures/ff29094dbd15584f0d46a393e797a32b9f2a5037/assets/images/day-49.png -------------------------------------------------------------------------------- /assets/images/day-5.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jonsuh/100-days-of-scriptures/ff29094dbd15584f0d46a393e797a32b9f2a5037/assets/images/day-5.png -------------------------------------------------------------------------------- /assets/images/day-50.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jonsuh/100-days-of-scriptures/ff29094dbd15584f0d46a393e797a32b9f2a5037/assets/images/day-50.jpg -------------------------------------------------------------------------------- /assets/images/day-51.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jonsuh/100-days-of-scriptures/ff29094dbd15584f0d46a393e797a32b9f2a5037/assets/images/day-51.png -------------------------------------------------------------------------------- /assets/images/day-52.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jonsuh/100-days-of-scriptures/ff29094dbd15584f0d46a393e797a32b9f2a5037/assets/images/day-52.png -------------------------------------------------------------------------------- /assets/images/day-53.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jonsuh/100-days-of-scriptures/ff29094dbd15584f0d46a393e797a32b9f2a5037/assets/images/day-53.png -------------------------------------------------------------------------------- /assets/images/day-54.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jonsuh/100-days-of-scriptures/ff29094dbd15584f0d46a393e797a32b9f2a5037/assets/images/day-54.png -------------------------------------------------------------------------------- /assets/images/day-55.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jonsuh/100-days-of-scriptures/ff29094dbd15584f0d46a393e797a32b9f2a5037/assets/images/day-55.png -------------------------------------------------------------------------------- /assets/images/day-56.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jonsuh/100-days-of-scriptures/ff29094dbd15584f0d46a393e797a32b9f2a5037/assets/images/day-56.jpg -------------------------------------------------------------------------------- /assets/images/day-57.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jonsuh/100-days-of-scriptures/ff29094dbd15584f0d46a393e797a32b9f2a5037/assets/images/day-57.png -------------------------------------------------------------------------------- /assets/images/day-58.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jonsuh/100-days-of-scriptures/ff29094dbd15584f0d46a393e797a32b9f2a5037/assets/images/day-58.png -------------------------------------------------------------------------------- /assets/images/day-59.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jonsuh/100-days-of-scriptures/ff29094dbd15584f0d46a393e797a32b9f2a5037/assets/images/day-59.png -------------------------------------------------------------------------------- /assets/images/day-6.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jonsuh/100-days-of-scriptures/ff29094dbd15584f0d46a393e797a32b9f2a5037/assets/images/day-6.png -------------------------------------------------------------------------------- /assets/images/day-60.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jonsuh/100-days-of-scriptures/ff29094dbd15584f0d46a393e797a32b9f2a5037/assets/images/day-60.jpg -------------------------------------------------------------------------------- /assets/images/day-61.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jonsuh/100-days-of-scriptures/ff29094dbd15584f0d46a393e797a32b9f2a5037/assets/images/day-61.png -------------------------------------------------------------------------------- /assets/images/day-62.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jonsuh/100-days-of-scriptures/ff29094dbd15584f0d46a393e797a32b9f2a5037/assets/images/day-62.png -------------------------------------------------------------------------------- /assets/images/day-63.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jonsuh/100-days-of-scriptures/ff29094dbd15584f0d46a393e797a32b9f2a5037/assets/images/day-63.png -------------------------------------------------------------------------------- /assets/images/day-64.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jonsuh/100-days-of-scriptures/ff29094dbd15584f0d46a393e797a32b9f2a5037/assets/images/day-64.jpg -------------------------------------------------------------------------------- /assets/images/day-65.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jonsuh/100-days-of-scriptures/ff29094dbd15584f0d46a393e797a32b9f2a5037/assets/images/day-65.jpg -------------------------------------------------------------------------------- /assets/images/day-66.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jonsuh/100-days-of-scriptures/ff29094dbd15584f0d46a393e797a32b9f2a5037/assets/images/day-66.png -------------------------------------------------------------------------------- /assets/images/day-67.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jonsuh/100-days-of-scriptures/ff29094dbd15584f0d46a393e797a32b9f2a5037/assets/images/day-67.jpg -------------------------------------------------------------------------------- /assets/images/day-68.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jonsuh/100-days-of-scriptures/ff29094dbd15584f0d46a393e797a32b9f2a5037/assets/images/day-68.png -------------------------------------------------------------------------------- /assets/images/day-69.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jonsuh/100-days-of-scriptures/ff29094dbd15584f0d46a393e797a32b9f2a5037/assets/images/day-69.jpg -------------------------------------------------------------------------------- /assets/images/day-7.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jonsuh/100-days-of-scriptures/ff29094dbd15584f0d46a393e797a32b9f2a5037/assets/images/day-7.png -------------------------------------------------------------------------------- /assets/images/day-70.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jonsuh/100-days-of-scriptures/ff29094dbd15584f0d46a393e797a32b9f2a5037/assets/images/day-70.png -------------------------------------------------------------------------------- /assets/images/day-71.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jonsuh/100-days-of-scriptures/ff29094dbd15584f0d46a393e797a32b9f2a5037/assets/images/day-71.png -------------------------------------------------------------------------------- /assets/images/day-72.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jonsuh/100-days-of-scriptures/ff29094dbd15584f0d46a393e797a32b9f2a5037/assets/images/day-72.jpg -------------------------------------------------------------------------------- /assets/images/day-73.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jonsuh/100-days-of-scriptures/ff29094dbd15584f0d46a393e797a32b9f2a5037/assets/images/day-73.png -------------------------------------------------------------------------------- /assets/images/day-74.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jonsuh/100-days-of-scriptures/ff29094dbd15584f0d46a393e797a32b9f2a5037/assets/images/day-74.png -------------------------------------------------------------------------------- /assets/images/day-75.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jonsuh/100-days-of-scriptures/ff29094dbd15584f0d46a393e797a32b9f2a5037/assets/images/day-75.png -------------------------------------------------------------------------------- /assets/images/day-76.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jonsuh/100-days-of-scriptures/ff29094dbd15584f0d46a393e797a32b9f2a5037/assets/images/day-76.jpg -------------------------------------------------------------------------------- /assets/images/day-77.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jonsuh/100-days-of-scriptures/ff29094dbd15584f0d46a393e797a32b9f2a5037/assets/images/day-77.png -------------------------------------------------------------------------------- /assets/images/day-78.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jonsuh/100-days-of-scriptures/ff29094dbd15584f0d46a393e797a32b9f2a5037/assets/images/day-78.png -------------------------------------------------------------------------------- /assets/images/day-79.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jonsuh/100-days-of-scriptures/ff29094dbd15584f0d46a393e797a32b9f2a5037/assets/images/day-79.jpg -------------------------------------------------------------------------------- /assets/images/day-8.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jonsuh/100-days-of-scriptures/ff29094dbd15584f0d46a393e797a32b9f2a5037/assets/images/day-8.png -------------------------------------------------------------------------------- /assets/images/day-80.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jonsuh/100-days-of-scriptures/ff29094dbd15584f0d46a393e797a32b9f2a5037/assets/images/day-80.png -------------------------------------------------------------------------------- /assets/images/day-81.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jonsuh/100-days-of-scriptures/ff29094dbd15584f0d46a393e797a32b9f2a5037/assets/images/day-81.png -------------------------------------------------------------------------------- /assets/images/day-82.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jonsuh/100-days-of-scriptures/ff29094dbd15584f0d46a393e797a32b9f2a5037/assets/images/day-82.gif -------------------------------------------------------------------------------- /assets/images/day-83.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jonsuh/100-days-of-scriptures/ff29094dbd15584f0d46a393e797a32b9f2a5037/assets/images/day-83.png -------------------------------------------------------------------------------- /assets/images/day-84.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jonsuh/100-days-of-scriptures/ff29094dbd15584f0d46a393e797a32b9f2a5037/assets/images/day-84.jpg -------------------------------------------------------------------------------- /assets/images/day-85.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jonsuh/100-days-of-scriptures/ff29094dbd15584f0d46a393e797a32b9f2a5037/assets/images/day-85.png -------------------------------------------------------------------------------- /assets/images/day-86.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jonsuh/100-days-of-scriptures/ff29094dbd15584f0d46a393e797a32b9f2a5037/assets/images/day-86.png -------------------------------------------------------------------------------- /assets/images/day-87.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jonsuh/100-days-of-scriptures/ff29094dbd15584f0d46a393e797a32b9f2a5037/assets/images/day-87.png -------------------------------------------------------------------------------- /assets/images/day-88.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jonsuh/100-days-of-scriptures/ff29094dbd15584f0d46a393e797a32b9f2a5037/assets/images/day-88.png -------------------------------------------------------------------------------- /assets/images/day-89.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jonsuh/100-days-of-scriptures/ff29094dbd15584f0d46a393e797a32b9f2a5037/assets/images/day-89.png -------------------------------------------------------------------------------- /assets/images/day-9.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jonsuh/100-days-of-scriptures/ff29094dbd15584f0d46a393e797a32b9f2a5037/assets/images/day-9.png -------------------------------------------------------------------------------- /assets/images/day-90.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jonsuh/100-days-of-scriptures/ff29094dbd15584f0d46a393e797a32b9f2a5037/assets/images/day-90.png -------------------------------------------------------------------------------- /assets/images/day-91.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jonsuh/100-days-of-scriptures/ff29094dbd15584f0d46a393e797a32b9f2a5037/assets/images/day-91.png -------------------------------------------------------------------------------- /assets/images/day-92.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jonsuh/100-days-of-scriptures/ff29094dbd15584f0d46a393e797a32b9f2a5037/assets/images/day-92.jpg -------------------------------------------------------------------------------- /assets/images/day-93.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jonsuh/100-days-of-scriptures/ff29094dbd15584f0d46a393e797a32b9f2a5037/assets/images/day-93.png -------------------------------------------------------------------------------- /assets/images/day-94.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jonsuh/100-days-of-scriptures/ff29094dbd15584f0d46a393e797a32b9f2a5037/assets/images/day-94.png -------------------------------------------------------------------------------- /assets/images/day-95.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jonsuh/100-days-of-scriptures/ff29094dbd15584f0d46a393e797a32b9f2a5037/assets/images/day-95.jpg -------------------------------------------------------------------------------- /assets/images/day-96.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jonsuh/100-days-of-scriptures/ff29094dbd15584f0d46a393e797a32b9f2a5037/assets/images/day-96.png -------------------------------------------------------------------------------- /assets/images/day-97.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jonsuh/100-days-of-scriptures/ff29094dbd15584f0d46a393e797a32b9f2a5037/assets/images/day-97.png -------------------------------------------------------------------------------- /assets/images/day-98.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jonsuh/100-days-of-scriptures/ff29094dbd15584f0d46a393e797a32b9f2a5037/assets/images/day-98.png -------------------------------------------------------------------------------- /assets/images/day-99.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jonsuh/100-days-of-scriptures/ff29094dbd15584f0d46a393e797a32b9f2a5037/assets/images/day-99.png -------------------------------------------------------------------------------- /assets/images/homescreen.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jonsuh/100-days-of-scriptures/ff29094dbd15584f0d46a393e797a32b9f2a5037/assets/images/homescreen.jpg -------------------------------------------------------------------------------- /assets/images/main.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jonsuh/100-days-of-scriptures/ff29094dbd15584f0d46a393e797a32b9f2a5037/assets/images/main.png -------------------------------------------------------------------------------- /assets/images/startup-1242x2148.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jonsuh/100-days-of-scriptures/ff29094dbd15584f0d46a393e797a32b9f2a5037/assets/images/startup-1242x2148.png -------------------------------------------------------------------------------- /assets/images/startup-1536x2008.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jonsuh/100-days-of-scriptures/ff29094dbd15584f0d46a393e797a32b9f2a5037/assets/images/startup-1536x2008.png -------------------------------------------------------------------------------- /assets/images/startup-320x460.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jonsuh/100-days-of-scriptures/ff29094dbd15584f0d46a393e797a32b9f2a5037/assets/images/startup-320x460.png -------------------------------------------------------------------------------- /assets/images/startup-640x1096.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jonsuh/100-days-of-scriptures/ff29094dbd15584f0d46a393e797a32b9f2a5037/assets/images/startup-640x1096.png -------------------------------------------------------------------------------- /assets/images/startup-640x920.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jonsuh/100-days-of-scriptures/ff29094dbd15584f0d46a393e797a32b9f2a5037/assets/images/startup-640x920.png -------------------------------------------------------------------------------- /assets/images/startup-750x1294.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jonsuh/100-days-of-scriptures/ff29094dbd15584f0d46a393e797a32b9f2a5037/assets/images/startup-750x1294.png -------------------------------------------------------------------------------- /assets/images/startup-768x1004.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jonsuh/100-days-of-scriptures/ff29094dbd15584f0d46a393e797a32b9f2a5037/assets/images/startup-768x1004.png -------------------------------------------------------------------------------- /assets/sass/core/_base.scss: -------------------------------------------------------------------------------- 1 | // ================================================== 2 | // Base 3 | // ================================================== -------------------------------------------------------------------------------- /assets/sass/core/_fonts.scss: -------------------------------------------------------------------------------- 1 | @font-face { 2 | font-family: "KarlaLocal"; 3 | font-weight: 400; 4 | font-style: normal; 5 | src: local("Karla"), 6 | local("Karla-Regular"); 7 | } 8 | 9 | @font-face { 10 | font-family: "KarlaLocal"; 11 | font-weight: 700; 12 | font-style: normal; 13 | src: local("Karla"), 14 | local("Karla-Bold"); 15 | } 16 | 17 | @font-face { 18 | font-family: "PlayfairDisplayLocal"; 19 | font-weight: 400; 20 | font-style: normal; 21 | src: local("Playfair Display"), 22 | local("PlayfairDisplay-Regular"); 23 | } 24 | 25 | @font-face { 26 | font-family: "PlayfairDisplayLocal"; 27 | font-weight: 700; 28 | font-style: normal; 29 | src: local("Playfair Display"), 30 | local("PlayfairDisplay-Bold"); 31 | } 32 | 33 | @font-face { 34 | font-family: "PlayfairDisplayLocal"; 35 | font-weight: 700; 36 | font-style: italic; 37 | src: local("Playfair Display"), 38 | local("PlayfairDisplay-BoldItalic"); 39 | } -------------------------------------------------------------------------------- /assets/sass/core/_mixins.scss: -------------------------------------------------------------------------------- 1 | // ================================================== 2 | // Mixins 3 | // ================================================== 4 | 5 | // Font smoothing 6 | // ================================================== 7 | @mixin font-smoothing { 8 | -moz-osx-font-smoothing: grayscale; 9 | -webkit-font-smoothing : antialiased; 10 | } 11 | 12 | // em to px 13 | // ================================================== 14 | @function strip-unit($num) { 15 | @return $num / ($num * 0 + 1); 16 | } 17 | 18 | @function convert-to-em($value, $base-value: $em-base) { 19 | $value: strip-unit($value) / strip-unit($base-value) * 1em; 20 | @if ($value == 0em) { $value: 0; } // Turn 0em into 0 21 | @return $value; 22 | } 23 | 24 | @function em-calc($values, $base-value: $em-base) { 25 | $max: length($values); 26 | 27 | @if $max == 1 { @return convert-to-em(nth($values, 1), $base-value); } 28 | 29 | $emValues: (); 30 | @for $i from 1 through $max { 31 | $emValues: append($emValues, convert-to-em(nth($values, $i), $base-value)); 32 | } 33 | @return $emValues; 34 | } -------------------------------------------------------------------------------- /assets/sass/core/_reset.scss: -------------------------------------------------------------------------------- 1 | // ================================================== 2 | // Reset 3 | // ================================================== 4 | html, body, aside, div, footer, header, nav, section, 5 | h1, h2, h3, h4, h5, h6, p, 6 | a, b, blockquote, cite, em, figcaption, figure, i, img, li, ol, q, small, span, strong, sub, sup, time, ul { 7 | font-size: 100%; 8 | font: inherit; 9 | vertical-align: baseline; 10 | border: 0; 11 | padding: 0; 12 | margin: 0; 13 | } 14 | 15 | article, aside, details, figcaption, figure, footer, header, nav, section { 16 | display: block; 17 | } 18 | 19 | body { 20 | line-height: 1; 21 | } 22 | 23 | ol, ul { 24 | list-style: none; 25 | } 26 | 27 | blockquote, q { 28 | quotes: none; 29 | } 30 | 31 | blockquote:before, blockquote:after, 32 | q:before, q:after { 33 | content: ''; 34 | content: none; 35 | } -------------------------------------------------------------------------------- /assets/sass/core/_settings.scss: -------------------------------------------------------------------------------- 1 | // ================================================== 2 | // Settings 3 | // ================================================== 4 | $em-base: 16px; 5 | 6 | // ================================================== 7 | // Bourbon Settings 8 | // ================================================== 9 | $prefix-for-webkit : true; 10 | $prefix-for-mozilla : false; 11 | $prefix-for-microsoft: false; 12 | $prefix-for-opera : false; 13 | $prefix-for-spec : true; 14 | 15 | // ================================================== 16 | // mq Settings 17 | // ================================================== 18 | $mq-ems: true; 19 | $mq-breakpoints: ( 20 | iphone : 320px, 21 | iphone6 : 375px, 22 | iphone6p : 414px, 23 | small : 480px, 24 | medium : 640px, 25 | mid : 832px, 26 | large : 1024px, 27 | xlarge : 1280px, 28 | ); -------------------------------------------------------------------------------- /assets/sass/core/_typography.scss: -------------------------------------------------------------------------------- 1 | // ================================================== 2 | // Typography 3 | // ================================================== 4 | 5 | // Mixins 6 | // ================================================== 7 | @mixin sans-serif { 8 | font-family: $sans-serif-local; 9 | 10 | .fonts-loaded-100 & { 11 | font-family: $sans-serif; 12 | } 13 | 14 | .fonts-timeout-100 & { 15 | font-family: $sans-serif-fallback; 16 | } 17 | } 18 | 19 | @mixin serif { 20 | font-family: $serif-local; 21 | 22 | .fonts-loaded-100 & { 23 | font-family: $serif; 24 | } 25 | 26 | .fonts-timeout-100 & { 27 | font-family: $serif-fallback; 28 | } 29 | } 30 | 31 | // Body 32 | // ================================================== 33 | $body-font-color: $grey-darkest; 34 | 35 | body { 36 | @include sans-serif; 37 | color: $body-font-color; 38 | text-rendering: optimizeLegibility; 39 | font-variant-ligatures: common-ligatures; 40 | font-feature-settings: "liga"; 41 | } 42 | 43 | // Anchor 44 | // ================================================== 45 | a { 46 | color: $blue; 47 | text-decoration: none; 48 | 49 | &:hover { 50 | text-decoration: underline; 51 | } 52 | } 53 | 54 | // Emphasis 55 | // ================================================== 56 | em, 57 | i { 58 | font-style: italic; 59 | } 60 | 61 | // Strong 62 | // ================================================== 63 | strong, 64 | b { 65 | font-weight: 700; 66 | } -------------------------------------------------------------------------------- /assets/sass/core/_variables.scss: -------------------------------------------------------------------------------- 1 | // ================================================== 2 | // Variables 3 | // ================================================== 4 | 5 | // Fonts 6 | // ================================================== 7 | $sans-serif-stack : "Open Sans", Helvetica, Arial, sans-serif; 8 | $serif-stack : "Times New Roman", Times, serif; 9 | 10 | $sans-serif-local : KarlaLocal, $sans-serif-stack; 11 | $sans-serif : Karla, $sans-serif-local; 12 | $sans-serif-fallback: KarlaLocal, Karla, $sans-serif-stack; 13 | 14 | $serif-local : PlayfairDisplayLocal, $serif-stack; 15 | $serif : "Playfair Display", $serif-local; 16 | $serif-fallback : PlayfairDisplayLocal, "Playfair Display", $serif-stack; 17 | 18 | // Colors 19 | // ================================================== 20 | $black : #010203; 21 | $white : #fdfeff; 22 | 23 | $grey-lightest: #f2f3f4; 24 | $grey-lighter : #cfd0d1; 25 | $grey-light : #adaeaf; 26 | $grey : #8a8b8c; 27 | $grey-dark : #676869; 28 | $grey-darker : #454647; 29 | $grey-darkest : #222324; 30 | 31 | $blue : #3498db; 32 | $orange : #db4839; 33 | 34 | // Transition 35 | // ================================================== 36 | $transition-duration: 0.1s; -------------------------------------------------------------------------------- /assets/sass/days/_005.scss: -------------------------------------------------------------------------------- 1 | // ================================================== 2 | // Day 5 3 | // ================================================== 4 | $day-5-serif: "Abril Fatface", "Times New Roman", Times, serif; 5 | 6 | .day--5 { 7 | color: $white; 8 | font-weight: 400; 9 | background-color: $black; 10 | overflow: hidden; 11 | 12 | .day-number { 13 | @extend .day-number--white; 14 | } 15 | 16 | .day-scripture { 17 | @include font-smoothing; 18 | font-family: $day-5-serif; 19 | margin-top: em-calc(50); 20 | margin-bottom: em-calc(50); 21 | @include mq(small) { 22 | margin-top: em-calc(30); 23 | margin-bottom: em-calc(25); 24 | } 25 | @include mq(medium) { 26 | margin-top: em-calc(20); 27 | margin-bottom: em-calc(20); 28 | } 29 | @include mq(mid) { 30 | margin-top: 0; 31 | margin-bottom: 0; 32 | } 33 | } 34 | 35 | .day-reference { 36 | text-align: right; 37 | margin-left: auto; 38 | display: block; 39 | } 40 | 41 | .day-reference-link { 42 | color: $white; 43 | padding-left: 0.1em; 44 | padding-right: 0.1em; 45 | display: inline-block; 46 | margin-right: -0.1em; 47 | @include mq(small) { 48 | font-size: em-calc(17); 49 | } 50 | @include mq(medium) { 51 | font-size: em-calc(20); 52 | } 53 | @include mq(mid) { 54 | font-size: em-calc(23); 55 | } 56 | @include mq(large) { 57 | font-size: em-calc(26); 58 | } 59 | 60 | &:hover { 61 | color: $black; 62 | background-color: $white; 63 | text-decoration: none; 64 | } 65 | } 66 | 67 | .day-font-link { 68 | color: $grey; 69 | } 70 | } 71 | 72 | .day-5-first { 73 | $day-5-font-size: 35; 74 | 75 | font-size: em-calc($day-5-font-size); 76 | line-height: 1.1; 77 | max-width: em-calc(370, $day-5-font-size); 78 | display: block; 79 | margin-left: auto; 80 | margin-bottom: 0.2em; 81 | text-align: right; 82 | 83 | @include mq(small) { 84 | $day-5-font-size: 39; 85 | 86 | font-size: em-calc($day-5-font-size); 87 | max-width: em-calc(410, $day-5-font-size); 88 | } 89 | 90 | @include mq(medium) { 91 | $day-5-font-size: 50; 92 | 93 | font-size: em-calc($day-5-font-size); 94 | line-height: 1.05; 95 | max-width: em-calc(520, $day-5-font-size); 96 | } 97 | 98 | @include mq(mid) { 99 | $day-5-font-size: 65; 100 | 101 | font-size: em-calc($day-5-font-size); 102 | max-width: em-calc(670, $day-5-font-size); 103 | } 104 | 105 | @include mq(large) { 106 | $day-5-font-size: 80; 107 | 108 | font-size: em-calc($day-5-font-size); 109 | line-height: 1; 110 | max-width: em-calc(830, $day-5-font-size); 111 | } 112 | } -------------------------------------------------------------------------------- /assets/sass/days/_006.scss: -------------------------------------------------------------------------------- 1 | // ================================================== 2 | // Day 6 3 | // ================================================== 4 | $day-6-mono: "PT Mono", Consolas, "Liberation Mono", Courier, monospace; 5 | $day-6-tan: #ece7d8; 6 | $day-6-brown: #5d4037; 7 | 8 | .day--6 { 9 | background-color: $day-6-tan; 10 | 11 | .day-text { 12 | max-width: em-calc(500); 13 | margin-left: auto; 14 | margin-right: auto; 15 | } 16 | 17 | .day-scripture { 18 | font-family: $day-6-mono; 19 | } 20 | 21 | .day-font-link { 22 | color: $day-6-brown; 23 | } 24 | 25 | .day-reference-link { 26 | text-align: right; 27 | width: 50%; 28 | color: $grey-darkest; 29 | line-height: 2.5em; 30 | height: 2em; 31 | border-bottom: 3px solid transparent; 32 | display: inline-block; 33 | 34 | &:hover { 35 | border-bottom-color: $day-6-brown; 36 | text-decoration: none; 37 | } 38 | } 39 | } 40 | 41 | .day-6-wrap { 42 | letter-spacing: 0.05em; 43 | text-align: center; 44 | } 45 | 46 | .day-6-list li, 47 | .day--6 .day-reference { 48 | line-height: 3em; 49 | height: 2.5em; 50 | } 51 | 52 | .day-6-list { 53 | text-align: right; 54 | margin-bottom: 2em; 55 | 56 | li { 57 | border-bottom: 3px solid $day-6-brown; 58 | &:nth-child(1) { 59 | width: 35%; 60 | } 61 | &:nth-child(2) { 62 | width: 60%; 63 | } 64 | &:nth-child(3) { 65 | width: 80%; 66 | } 67 | &:nth-child(4) { 68 | width: 55%; 69 | } 70 | &:nth-child(5) { 71 | width: 70%; 72 | } 73 | &:nth-child(6) { 74 | width: 100%; 75 | } 76 | &:nth-child(7) { 77 | width: 40%; 78 | } 79 | &:nth-child(8) { 80 | width: 70%; 81 | } 82 | &:nth-child(9) { 83 | width: 90%; 84 | } 85 | } 86 | } 87 | 88 | @include mq(small) { 89 | .day-6-wrap, 90 | .day--6 .day-reference-link { 91 | letter-spacing: 0.1em; 92 | } 93 | } 94 | 95 | @include mq(medium) { 96 | .day-6-wrap, 97 | .day--6 .day-reference-link { 98 | font-size: 1.05em; 99 | } 100 | } 101 | 102 | @include mq(large) { 103 | .day-6-wrap, 104 | .day--6 .day-reference-link { 105 | font-size: 1.1em; 106 | } 107 | } -------------------------------------------------------------------------------- /assets/sass/days/_007.scss: -------------------------------------------------------------------------------- 1 | // ================================================== 2 | // Day 7 3 | // ================================================== 4 | $day-7-font : "Amatic SC"; 5 | $day-7-teal : #01a2a6; 6 | $day-7-grey : #2f2933; 7 | $day-7-yellow : #ffffa6; 8 | 9 | .day--7 { 10 | background-color: $day-7-teal; 11 | 12 | .day-scripture { 13 | font-family: $day-7-font; 14 | font-weight: 100; 15 | color: $day-7-grey; 16 | @include font-smoothing; 17 | } 18 | 19 | .day-reference { 20 | text-align: center; 21 | margin-top: em-calc(20); 22 | } 23 | 24 | .day-reference-link { 25 | text-transform: none; 26 | font-size: em-calc(30); 27 | color: $day-7-yellow; 28 | } 29 | 30 | .day-font-link { 31 | color: $black; 32 | } 33 | } 34 | 35 | .day-7-first, 36 | .day-7-next { 37 | text-align: center; 38 | width: em-calc(270); 39 | margin-left: auto; 40 | margin-right: auto; 41 | } 42 | 43 | .day-7-the { 44 | $font-size: 50; 45 | font-size: em-calc($font-size); 46 | line-height: 0.5; 47 | display: inline-block; 48 | text-align: left; 49 | width: em-calc(145, $font-size); 50 | } 51 | 52 | .day-7-lord { 53 | $font-size: 130; 54 | font-size: em-calc($font-size); 55 | letter-spacing: -0.01em; 56 | display: block; 57 | text-transform: uppercase; 58 | } 59 | 60 | .day-7-shield-path { 61 | fill: $day-7-yellow; 62 | } 63 | 64 | .day-7-next { 65 | color: $day-7-grey; 66 | position: relative; 67 | } 68 | 69 | .day-7-is, 70 | .day-7-strength, 71 | .day-7-and, 72 | .day-7-shield { 73 | display: block; 74 | position: absolute; 75 | width: 100%; 76 | top: 0; 77 | left: 0; 78 | } 79 | 80 | .day-7-is { 81 | $font-size: 40; 82 | font-size: em-calc($font-size); 83 | top: em-calc(22, $font-size); 84 | } 85 | 86 | .day-7-strength { 87 | $font-size: 90; 88 | font-size: em-calc($font-size); 89 | letter-spacing: -0.01em; 90 | top: em-calc(62, $font-size); 91 | text-transform: uppercase; 92 | } 93 | 94 | .day-7-and { 95 | $font-size: 32; 96 | font-size: em-calc($font-size); 97 | line-height: 0.8; 98 | top: em-calc(165, $font-size); 99 | text-align: right; 100 | width: em-calc(30, $font-size); 101 | left: em-calc(45, $font-size); 102 | } 103 | 104 | .day-7-shield { 105 | $font-size: 90; 106 | font-size: em-calc($font-size); 107 | letter-spacing: -0.01em; 108 | top: em-calc(148, $font-size); 109 | padding-left: em-calc(15, $font-size); 110 | text-transform: uppercase; 111 | } 112 | 113 | @include mq(medium) { 114 | .day--7 { 115 | .day-text { 116 | text-align: center; 117 | } 118 | 119 | .day-reference { 120 | padding-left: em-calc(230); 121 | } 122 | } 123 | 124 | .day-7-first, 125 | .day-7-next { 126 | display: inline-block; 127 | vertical-align: middle; 128 | } 129 | 130 | .day-7-first { 131 | text-align: left; 132 | width: em-calc(230); 133 | } 134 | 135 | .day-7-lord { 136 | font-size: em-calc(170); 137 | } 138 | } 139 | 140 | @include mq(mid) { 141 | .day-7-first, 142 | .day-7-next, 143 | .day--7 .day-reference { 144 | font-size: 1.1em; 145 | } 146 | } 147 | 148 | @include mq(large) { 149 | .day-7-first, 150 | .day-7-next, 151 | .day--7 .day-reference { 152 | font-size: 1.2em; 153 | } 154 | } -------------------------------------------------------------------------------- /assets/sass/days/_009.scss: -------------------------------------------------------------------------------- 1 | // ================================================== 2 | // Day 9 3 | // ================================================== 4 | $day-9-font : "Libre Baskerville", "Times New Roman", Times, serif; 5 | $day-9-grey : #333435; 6 | $day-9-yellow: #fad53e; 7 | 8 | .day--9 { 9 | position: relative; 10 | background-color: $day-9-yellow; 11 | 12 | .day-number { 13 | position: relative; 14 | z-index: 1; 15 | @extend .day-number--white; 16 | } 17 | 18 | .day-text { 19 | font-family: $day-9-font; 20 | font-style: italic; 21 | text-align: center; 22 | } 23 | 24 | .day-reference-link { 25 | font-size: em-calc(13); 26 | color: $day-9-grey; 27 | display: inline-block; 28 | position: relative; 29 | top: 0.25em; 30 | @include mq(small) { 31 | font-size: em-calc(14.5); 32 | } 33 | @include mq(medium) { 34 | font-size: em-calc(16); 35 | top: 0; 36 | } 37 | @include mq(mid) { 38 | font-size: em-calc(17); 39 | } 40 | @include mq(large) { 41 | font-size: em-calc(18); 42 | } 43 | left: 2.25em; 44 | 45 | &::before { 46 | content: ""; 47 | display: block; 48 | background-color: $day-9-grey; 49 | position: absolute; 50 | top: 50%; 51 | left: -4.5em; 52 | width: 4em; 53 | height: 2px; 54 | margin-top: -1px; 55 | } 56 | } 57 | 58 | .day-font-link { 59 | color: $day-9-grey; 60 | } 61 | } 62 | 63 | .day-9-top { 64 | background: $day-9-grey; 65 | position: absolute; 66 | top: 0; 67 | left: 0; 68 | width: 100%; 69 | height: 50%; 70 | z-index: 0; 71 | } 72 | 73 | .day-9-text { 74 | @include font-smoothing; 75 | margin-top: 2em; 76 | margin-bottom: 2em; 77 | position: relative; 78 | z-index: 2; 79 | top: em-calc(7); 80 | } 81 | 82 | .day-9-first, 83 | .day-9-next { 84 | font-size: em-calc(17); 85 | line-height: 1.5; 86 | } 87 | 88 | .day-9-first { 89 | color: $day-9-yellow; 90 | display: inline-block; 91 | } 92 | 93 | .day-9-next { 94 | color: $day-9-grey; 95 | display: block; 96 | letter-spacing: 0.007em; 97 | } 98 | 99 | @include mq(small) { 100 | .day-9-text { 101 | margin-top: 3em; 102 | margin-bottom: 3em; 103 | } 104 | 105 | .day-9-first, 106 | .day-9-next { 107 | font-size: em-calc(23); 108 | } 109 | } 110 | @include mq(medium) { 111 | .day-9-text { 112 | margin-top: 4em; 113 | margin-bottom: 4em; 114 | } 115 | 116 | .day-9-first, 117 | .day-9-next { 118 | font-size: em-calc(30); 119 | } 120 | } 121 | @include mq(mid) { 122 | .day-9-text { 123 | margin-top: 5em; 124 | margin-bottom: 5em; 125 | } 126 | 127 | .day-9-first, 128 | .day-9-next { 129 | font-size: em-calc(35); 130 | } 131 | } 132 | @include mq(large) { 133 | .day-9-text { 134 | margin-top: 6em; 135 | margin-bottom: 6em; 136 | } 137 | 138 | .day-9-first, 139 | .day-9-next { 140 | font-size: em-calc(45); 141 | } 142 | } -------------------------------------------------------------------------------- /assets/sass/days/_011.scss: -------------------------------------------------------------------------------- 1 | // ================================================== 2 | // Day 11 3 | // ================================================== 4 | $day-11-font: Ovo, "Times New Roman", Times, serif; 5 | $day-11-blue: #046380; 6 | $day-11-tan : #efecca; 7 | $day-11-sand: #969371; 8 | 9 | .day--11 { 10 | background-color: $day-11-tan; 11 | 12 | .day-scripture { 13 | text-align: center; 14 | } 15 | 16 | .day-text { 17 | font-family: $day-11-font; 18 | color: $day-11-blue; 19 | } 20 | 21 | .day-reference { 22 | margin-top: 2em; 23 | } 24 | 25 | .day-reference-link { 26 | color: $day-11-sand; 27 | } 28 | 29 | .day-font-link { 30 | color: $grey-darkest; 31 | } 32 | } 33 | 34 | .day-11-text { 35 | $font-size: 20; 36 | font-size: em-calc($font-size); 37 | line-height: 1.05; 38 | border: em-calc(3) solid $day-11-blue; 39 | padding: em-calc(25, $font-size); 40 | width: em-calc(185, $font-size); 41 | text-align: justify; 42 | display: inline-block; 43 | } 44 | 45 | @include mq(small) { 46 | .day--11 { 47 | .day-11-text { 48 | font-size: 1.4em; 49 | } 50 | } 51 | } 52 | 53 | @include mq(medium) { 54 | .day--11 { 55 | .day-11-text { 56 | font-size: 1.6em; 57 | } 58 | 59 | .day-reference-link { 60 | font-size: em-calc(17); 61 | } 62 | } 63 | } 64 | 65 | @include mq(mid) { 66 | .day--11 { 67 | .day-11-text { 68 | font-size: 1.8em; 69 | } 70 | } 71 | } 72 | 73 | @include mq(large) { 74 | .day--11 { 75 | .day-11-text { 76 | font-size: 2em; 77 | } 78 | 79 | .day-reference-link { 80 | font-size: em-calc(18); 81 | } 82 | } 83 | } -------------------------------------------------------------------------------- /assets/sass/days/_012.scss: -------------------------------------------------------------------------------- 1 | // ================================================== 2 | // Day 12 3 | // ================================================== 4 | $day-12-font : Oswald, sans-serif; 5 | $day-12-ivory: #fff8e3; 6 | $day-12-grey : #33332d; 7 | $day-12-blue : #9fb4cc; 8 | 9 | .day--12 { 10 | background-color: $day-12-blue; 11 | 12 | .day-text { 13 | font-family: $day-12-font; 14 | color: $day-12-grey; 15 | text-align: center; 16 | } 17 | 18 | .day-reference { 19 | margin-top: 3em; 20 | } 21 | 22 | .day-reference-link { 23 | color: $day-12-grey; 24 | border-bottom: 2px solid $day-12-ivory; 25 | 26 | &:hover { 27 | color: $day-12-ivory; 28 | border-bottom-color: $day-12-grey; 29 | text-decoration: none; 30 | } 31 | } 32 | } 33 | 34 | .day-12-line { 35 | font-size: em-calc(30); 36 | text-transform: lowercase; 37 | font-weight: 300; 38 | line-height: 1.4; 39 | display: block; 40 | position: relative; 41 | z-index: 1; 42 | 43 | &:first-child { 44 | margin-top: -1em; 45 | } 46 | } 47 | 48 | .day-12-em { 49 | font-size: 2.5em; 50 | font-style: normal; 51 | color: $day-12-ivory; 52 | margin-left: -0.2em; 53 | margin-right: -0.2em; 54 | position: relative; 55 | z-index: -1; 56 | top: 0.15em; 57 | } 58 | 59 | @include mq(small) { 60 | .day--12 { 61 | .day-reference { 62 | margin-top: 5.25em; 63 | } 64 | } 65 | 66 | .day-12-line { 67 | font-size: em-calc(40); 68 | } 69 | } 70 | 71 | @include mq(medium) { 72 | .day--12 { 73 | .day-reference { 74 | margin-top: 5.5em; 75 | } 76 | } 77 | 78 | .day-12-line { 79 | font-size: em-calc(50); 80 | } 81 | } 82 | 83 | @include mq(mid) { 84 | .day--12 { 85 | .day-reference { 86 | margin-top: 5.75em; 87 | } 88 | } 89 | 90 | .day-12-line { 91 | font-size: em-calc(60); 92 | } 93 | } -------------------------------------------------------------------------------- /assets/sass/days/_013.scss: -------------------------------------------------------------------------------- 1 | // ================================================== 2 | // Day 13 3 | // ================================================== 4 | $day-13-font : "Old Standard TT"; 5 | $day-13-green : #e8f0df; 6 | $day-13-green-dark: #2f3e4d; 7 | $day-13-orange : #fc4349; 8 | 9 | .day--13 { 10 | background-color: $day-13-green; 11 | 12 | .day-scripture { 13 | width: em-calc(290); 14 | padding-top: 0.5em; 15 | padding-bottom: 0.5em; 16 | } 17 | 18 | .day-text { 19 | font-family: $day-13-font; 20 | color: $day-13-green-dark; 21 | line-height: 1.2; 22 | } 23 | 24 | .day-reference { 25 | margin-top: 1em; 26 | width: 48%; 27 | float: right; 28 | } 29 | 30 | .day-reference-link { 31 | color: $day-13-orange; 32 | font-style: italic; 33 | } 34 | } 35 | 36 | .day-13-first { 37 | font-size: em-calc(25); 38 | color: $day-13-green-dark; 39 | text-transform: uppercase; 40 | margin-bottom: 1em; 41 | display: block; 42 | text-shadow: 1px 1px 0 $day-13-green, 43 | 2px 2px 0 $day-13-green, 44 | 3px 3px 0 $day-13-orange; 45 | } 46 | 47 | .day-13-next, 48 | .day-13-last { 49 | font-size: em-calc(17); 50 | width: 48%; 51 | float: left; 52 | } 53 | 54 | .day-13-next { 55 | margin-right: 4%; 56 | } 57 | 58 | @include mq(small) { 59 | .day--13 { 60 | .day-scripture { 61 | width: em-calc(410); 62 | } 63 | } 64 | 65 | .day-13-first { 66 | font-size: em-calc(27.5); 67 | } 68 | } 69 | 70 | @include mq(medium) { 71 | .day--13 { 72 | .day-scripture { 73 | font-size: 1.2em; 74 | padding-top: 1em; 75 | padding-bottom: 1em; 76 | } 77 | 78 | .day-text { 79 | line-height: 1.25; 80 | } 81 | 82 | .day-reference-link { 83 | font-size: 0.9em; 84 | } 85 | } 86 | } 87 | 88 | @include mq(mid) { 89 | .day--13 { 90 | .day-scripture { 91 | font-size: 1.4em; 92 | } 93 | 94 | .day-text { 95 | line-height: 1.3; 96 | } 97 | } 98 | } -------------------------------------------------------------------------------- /assets/sass/days/_014.scss: -------------------------------------------------------------------------------- 1 | // ================================================== 2 | // Day 14 3 | // ================================================== 4 | $day-14-font : Codystar, sans-serif; 5 | $day-14-purple-darker: #2b0f2c; 6 | $day-14-purple-dark : #530031; 7 | $day-14-purple : #820233; 8 | $day-14-purple-light : #cc2a41; 9 | $day-14-purple-mark : #351330; 10 | 11 | .day--14 { 12 | background-color: $day-14-purple-darker; 13 | 14 | .day-number { 15 | @extend .day-number--white; 16 | } 17 | 18 | .day-scripture { 19 | font-family: $day-14-font; 20 | color: $day-14-purple; 21 | text-transform: uppercase; 22 | text-align: center; 23 | padding-top: 1em; 24 | padding-bottom: 1em; 25 | 26 | @include mq(medium) { 27 | padding-top: 2em; 28 | padding-bottom: 2em; 29 | } 30 | } 31 | 32 | .day-reference { 33 | margin-top: 2em; 34 | 35 | @include mq(medium) { 36 | margin-top: 2.5em; 37 | } 38 | @include mq(large) { 39 | margin-top: 3em; 40 | } 41 | } 42 | 43 | .day-reference-link { 44 | color: $day-14-purple; 45 | letter-spacing: 0.05em; 46 | 47 | @include mq(small) { 48 | font-size: em-calc(17); 49 | } 50 | @include mq(medium) { 51 | font-size: em-calc(18); 52 | } 53 | @include mq(mid) { 54 | font-size: em-calc(19); 55 | } 56 | } 57 | 58 | .day-font-link { 59 | color: $day-14-purple-dark; 60 | } 61 | } 62 | 63 | .day-14-first, 64 | .day-14-next { 65 | font-size: em-calc(45); 66 | letter-spacing: 0.03em; 67 | line-height: 1.3; 68 | display: block; 69 | } 70 | 71 | .day-14-evil { 72 | color: $day-14-purple-dark; 73 | position: relative; 74 | 75 | &::before, 76 | &::after { 77 | content: ""; 78 | display: block; 79 | position: absolute; 80 | border: 0.08em solid $white; 81 | top: 50%; 82 | } 83 | 84 | &::before { 85 | left: -15%; 86 | width: 110%; 87 | height: 0.2em; 88 | margin-top: 0.15em; 89 | border-color: rgba(shade($day-14-purple-mark, 40%), 0.85) transparent transparent transparent; 90 | border-radius: 50%/0.08em 0.07em 0 0; 91 | transform: rotate(30deg) skewX(8deg) skewY(-4deg) scale(1,2.2); 92 | } 93 | 94 | &::after { 95 | left: -12%; 96 | width: 115%; 97 | height: 0.2em; 98 | margin-top: 0.15em; 99 | border-color: rgba(shade($day-14-purple-mark, 30%), 0.85) transparent transparent transparent; 100 | border-radius: 50%/0.1em 0.05em 0 0; 101 | transform: rotate(-15deg) skewX(10deg) skewY(-3deg) scale(1,2); 102 | } 103 | } 104 | 105 | .day-14-good { 106 | color: $day-14-purple-light; 107 | } 108 | 109 | @include mq(medium) { 110 | .day-14-first, 111 | .day-14-next { 112 | font-size: em-calc(60); 113 | } 114 | } 115 | 116 | @include mq(mid) { 117 | .day-14-first, 118 | .day-14-next { 119 | font-size: em-calc(75); 120 | } 121 | } 122 | 123 | @include mq(large) { 124 | .day-14-first, 125 | .day-14-next { 126 | font-size: em-calc(95); 127 | } 128 | } -------------------------------------------------------------------------------- /assets/sass/days/_015.scss: -------------------------------------------------------------------------------- 1 | // ================================================== 2 | // Day 15 3 | // ================================================== 4 | $day-15-font : Inconsolata, Consolas, "Liberation Mono", Courier, monospace; 5 | $day-15-green: #50e11f; 6 | 7 | .day--15 { 8 | background-color: $grey-darkest; 9 | 10 | .day-number { 11 | @extend .day-number--white; 12 | } 13 | 14 | .day-scripture, 15 | .day-15-pre { 16 | font-family: $day-15-font; 17 | } 18 | 19 | .day-scripture { 20 | font-weight: 700; 21 | color: $day-15-green; 22 | text-align: center; 23 | @include font-smoothing; 24 | } 25 | 26 | .day-text { 27 | text-align: left; 28 | line-height: 1.2; 29 | display: inline-block; 30 | @include mq(medium) { 31 | font-size: 1.1em; 32 | } 33 | @include mq(large) { 34 | font-size: 1.2em; 35 | } 36 | } 37 | 38 | .day-reference { 39 | margin-top: 1em; 40 | } 41 | 42 | .day-reference-link { 43 | color: $day-15-green; 44 | 45 | &::before { 46 | content: "> "; 47 | } 48 | } 49 | 50 | .day-font-link { 51 | color: $white; 52 | } 53 | } 54 | 55 | .day-15-pre { 56 | white-space: pre-wrap; 57 | } 58 | 59 | .day-15-first, 60 | .day-15-next { 61 | color: $white; 62 | } 63 | 64 | .day-15-first { 65 | display: block; 66 | } 67 | 68 | .day-15-next { 69 | position: relative; 70 | 71 | &::after { 72 | content: ""; 73 | display: inline-block; 74 | position: absolute; 75 | top: 0; 76 | right: em-calc(-8); 77 | width: em-calc(8); 78 | height: 100%; 79 | background: $day-15-green; 80 | animation: day-15-blink 1s step-end infinite; 81 | } 82 | } 83 | 84 | @keyframes day-15-blink { 85 | 0%, 100% { 86 | background: transparent; 87 | } 88 | 50% { 89 | background: $day-15-green; 90 | } 91 | } -------------------------------------------------------------------------------- /assets/sass/days/_016.scss: -------------------------------------------------------------------------------- 1 | // ================================================== 2 | // Day 16 3 | // ================================================== 4 | $day-16-font: Montserrat, Helvetica, sans-serif; 5 | $day-16-orange: #f75b5b; 6 | $day-16-purple: #662a6b; 7 | $day-16-yellow: #f9ed69; 8 | 9 | .day--16 { 10 | background-color: $day-16-orange; 11 | 12 | .day-scripture { 13 | font-family: $day-16-font; 14 | } 15 | 16 | .day-text { 17 | text-align: center; 18 | } 19 | 20 | .day-reference { 21 | margin-top: 2.5em; 22 | } 23 | 24 | .day-reference-link { 25 | color: $grey-darkest; 26 | padding: em-calc(10 15); 27 | background-color: $day-16-yellow; 28 | position: relative; 29 | box-shadow: em-calc(3 3) 0 $day-16-purple; 30 | 31 | &:hover { 32 | color: $white; 33 | background-color: $day-16-purple; 34 | box-shadow: em-calc(3 3) 0 $day-16-yellow; 35 | text-decoration: none; 36 | } 37 | } 38 | } 39 | 40 | $day-16-font-size: 21; 41 | 42 | .day-16-text { 43 | font-size: em-calc($day-16-font-size); 44 | line-height: 1.1; 45 | border: em-calc(2) solid $day-16-purple; 46 | padding: em-calc(20); 47 | display: block; 48 | margin-left: auto; 49 | margin-right: auto; 50 | max-width: em-calc(160, $day-16-font-size); 51 | box-shadow: em-calc(4 4) 0 $day-16-yellow; 52 | position: relative; 53 | } 54 | 55 | .day-16-text--first { 56 | left: em-calc(-30); 57 | } 58 | 59 | .day-16-text--next { 60 | max-width: em-calc(190, $day-16-font-size); 61 | margin-top: em-calc(-15); 62 | right: em-calc(-20); 63 | } 64 | 65 | @include mq(small) { 66 | .day-16-text { 67 | font-size: em-calc(25); 68 | } 69 | } 70 | 71 | @include mq(medium) { 72 | .day-16-text { 73 | font-size: em-calc(30); 74 | } 75 | 76 | .day-16-text--first { 77 | left: em-calc(-40); 78 | } 79 | 80 | .day-16-text--next { 81 | right: em-calc(-30); 82 | } 83 | } 84 | 85 | @include mq(mid) { 86 | .day-16-text { 87 | font-size: em-calc(35); 88 | } 89 | 90 | .day-16-text--first { 91 | left: em-calc(-50); 92 | } 93 | 94 | .day-16-text--next { 95 | right: em-calc(-40); 96 | } 97 | } 98 | 99 | @include mq(large) { 100 | .day-16-text { 101 | font-size: em-calc(40); 102 | } 103 | } -------------------------------------------------------------------------------- /assets/sass/days/_019.scss: -------------------------------------------------------------------------------- 1 | // ================================================== 2 | // Day 19 3 | // ================================================== 4 | $day-19-font: "Gentium Book Basic", "Times New Roman", Times, serif; 5 | 6 | .day--19 { 7 | background-color: $grey-darkest; 8 | 9 | .day-number { 10 | color: $grey; 11 | border-color: $grey; 12 | } 13 | 14 | .day-text { 15 | font-family: $day-19-font; 16 | color: $grey; 17 | margin-left: auto; 18 | margin-right: auto; 19 | max-width: em-calc(300); 20 | @include mq(medium) { 21 | max-width: em-calc(700); 22 | padding-top: 1em; 23 | padding-bottom: 1em; 24 | } 25 | @include mq(large) { 26 | max-width: em-calc(1160); 27 | padding-top: 2em; 28 | padding-bottom: 2em; 29 | } 30 | @include font-smoothing; 31 | } 32 | 33 | .day-reference { 34 | margin-top: 1em; 35 | 36 | @include mq(medium) { 37 | margin-top: 0; 38 | } 39 | float: right; 40 | } 41 | 42 | .day-reference-link { 43 | color: $grey-dark; 44 | } 45 | 46 | .day-font-link { 47 | color: $grey; 48 | } 49 | } 50 | 51 | .day-19-text { 52 | font-size: 1.05em; 53 | line-height: 1.25; 54 | display: inline-block; 55 | 56 | vertical-align: top; 57 | 58 | @include mq(medium) { 59 | font-size: 1.1em; 60 | line-height: 1.3; 61 | column-count: 2; 62 | column-gap: em-calc(50); 63 | column-rule-style: dotted; 64 | column-rule-width: 1px; 65 | column-rule-color: $grey-darker; 66 | } 67 | 68 | @include mq(large) { 69 | font-size: 1.2em; 70 | line-height: 1.35; 71 | column-count: 3; 72 | } 73 | } 74 | 75 | .day-19-title { 76 | font-size: 1.5em; 77 | font-weight: 700; 78 | font-style: italic; 79 | color: $grey-lighter; 80 | margin-bottom: 0.93em; 81 | padding-bottom: 0.93em; 82 | @include mq(large) { 83 | margin-bottom: 0.85em; 84 | padding-bottom: 0.85em; 85 | } 86 | position: relative; 87 | 88 | &::before { 89 | content: ""; 90 | position: absolute; 91 | bottom: 0; 92 | width: 2em; 93 | border-top: em-calc(1.5) dotted $grey-darker; 94 | } 95 | } -------------------------------------------------------------------------------- /assets/sass/days/_022.scss: -------------------------------------------------------------------------------- 1 | // ================================================== 2 | // Day 22 3 | // ================================================== 4 | $day-22-font: Amiri, "Times New Roman", Times, serif; 5 | 6 | .day--22 { 7 | .day-scripture { 8 | padding-top: 1.5em; 9 | padding-bottom: 1.5em; 10 | @include mq(small) { 11 | padding-top: 2em; 12 | padding-bottom: 2em; 13 | } 14 | @include mq(medium) { 15 | padding-top: 2.5em; 16 | padding-bottom: 2.5em; 17 | } 18 | } 19 | .day-text { 20 | font-size: 0.75em; 21 | @include mq(iphone6) { 22 | font-size: 0.85em; 23 | } 24 | @include mq(small) { 25 | font-size: 1em; 26 | } 27 | @include mq(medium) { 28 | font-size: 1.2em; 29 | } 30 | @include mq(mid) { 31 | font-size: 1.4em; 32 | } 33 | font-family: $day-22-font; 34 | width: em-calc(400); 35 | margin-left: auto; 36 | margin-right: auto; 37 | } 38 | 39 | .day-reference { 40 | text-align: right; 41 | margin-top: em-calc(15); 42 | } 43 | 44 | .day-reference-link { 45 | font-size: 1.3em; 46 | @include mq(small) { 47 | font-size: 1.2em; 48 | } 49 | @include mq(medium) { 50 | font-size: 1.05em; 51 | } 52 | @include mq(mid) { 53 | font-size: 0.9em; 54 | } 55 | color: $black; 56 | } 57 | } 58 | 59 | .day-22-text { 60 | $font-size: 30; 61 | 62 | font-size: em-calc($font-size); 63 | display: inline-block; 64 | 65 | &::first-letter { 66 | font-size: em-calc(77, $font-size); 67 | font-weight: 700; 68 | color: $white; 69 | line-height: 0.6; 70 | padding: em-calc(10 10 5, $font-size); 71 | text-align: center; 72 | background-color: $black; 73 | margin-right: em-calc(5, $font-size); 74 | display: inline-block; 75 | float: left; 76 | text-shadow: -1px 1px 0 shade($grey-darker, 20%), 77 | -2px 2px 0 rgba(shade($grey-darker, 20%), 0.95), 78 | -3px 3px 0 rgba(shade($grey-darker, 20%), 0.85), 79 | -4px 4px 0 rgba(shade($grey-darker, 20%), 0.75), 80 | -5px 5px 0 rgba(shade($grey-darker, 20%), 0.65), 81 | -6px 6px 0 rgba(shade($grey-darker, 20%), 0.55), 82 | -7px 7px 0 rgba(shade($grey-darker, 20%), 0.45), 83 | -8px 8px 0 rgba(shade($grey-darker, 20%), 0.35), 84 | -9px 9px 0 rgba(shade($grey-darker, 20%), 0.35), 85 | -10px 10px 0 rgba(shade($grey-darker, 20%), 0.2), 86 | -11px 11px 0 rgba(shade($grey-darker, 20%), 0.15), 87 | -12px 12px 0 rgba(shade($grey-darker, 20%), 0.1), 88 | -13px 13px 0 rgba(shade($grey-darker, 20%), 0.05); 89 | 90 | } 91 | } -------------------------------------------------------------------------------- /assets/sass/days/_024.scss: -------------------------------------------------------------------------------- 1 | // ================================================== 2 | // Day 24 3 | // ================================================== 4 | $day-24-font : Prata, "Times New Roman", Times, serif; 5 | 6 | .day--24 { 7 | background-color: #eeeff7; 8 | position: relative; 9 | overflow: hidden; 10 | 11 | .day-scripture { 12 | padding-top: 1em; 13 | padding-bottom: 1em; 14 | @include mq(small) { 15 | padding-top: 2em; 16 | padding-bottom: 2em; 17 | } 18 | @include mq(medium) { 19 | padding-top: 4em; 20 | padding-bottom: 4em; 21 | } 22 | } 23 | 24 | .day-number { 25 | position: relative; 26 | z-index: 2; 27 | } 28 | 29 | .day-text { 30 | font-family: $day-24-font; 31 | color: $black; 32 | text-align: center; 33 | } 34 | 35 | .day-reference { 36 | width: 100%; 37 | position: absolute; 38 | top: 50%; 39 | margin-top: em-calc(-140); 40 | left: 0; 41 | z-index: 1; 42 | } 43 | 44 | .day-reference-link { 45 | $font-size: 150; 46 | 47 | font-size: em-calc($font-size); 48 | width: 100%; 49 | margin-left: em-calc(-10, $font-size); 50 | color: tint(#92cdcf, 30%); 51 | display: inline-block; 52 | } 53 | 54 | .day-font { 55 | position: relative; 56 | z-index: 2; 57 | } 58 | } 59 | 60 | .day-24-text { 61 | $font-size: 18; 62 | 63 | font-size: em-calc($font-size); 64 | line-height: 1.3; 65 | padding: em-calc(30, $font-size); 66 | border: 2px solid $black; 67 | width: em-calc(290, $font-size); 68 | box-sizing: border-box; 69 | display: inline-block; 70 | position: relative; 71 | z-index: 2; 72 | } 73 | 74 | @include mq(small) { 75 | .day--24 { 76 | .day-reference { 77 | margin-top: em-calc(-180); 78 | } 79 | 80 | .day-reference-link { 81 | $font-size: 190; 82 | 83 | font-size: em-calc($font-size); 84 | width: em-calc(530, $font-size); 85 | } 86 | } 87 | 88 | .day-24-text { 89 | $font-size: 20; 90 | 91 | font-size: em-calc($font-size); 92 | padding: em-calc(30, $font-size); 93 | width: em-calc(350, $font-size); 94 | } 95 | } 96 | 97 | @include mq(medium) { 98 | .day--24 { 99 | .day-reference { 100 | margin-top: em-calc(-200); 101 | } 102 | 103 | .day-reference-link { 104 | $font-size: 220; 105 | 106 | font-size: em-calc($font-size); 107 | width: em-calc(530, $font-size); 108 | } 109 | } 110 | } 111 | 112 | @include mq(medium) { 113 | .day--24 { 114 | .day-reference { 115 | margin-top: em-calc(-263); 116 | } 117 | 118 | .day-reference-link { 119 | $font-size: 280; 120 | 121 | font-size: em-calc($font-size); 122 | width: em-calc(700, $font-size); 123 | } 124 | } 125 | } -------------------------------------------------------------------------------- /assets/sass/days/_025.scss: -------------------------------------------------------------------------------- 1 | // ================================================== 2 | // Day 25 3 | // ================================================== 4 | $day-25-font-script : "League Script", serif; 5 | $day-25-font-sans-serif: Quicksand, Helvetica, Arial, sans-serif; 6 | $day-25-blue : #002d40; 7 | $day-25-yellow : #f2e394; 8 | 9 | .day--25 { 10 | background-color: $day-25-blue; 11 | 12 | .day-number { 13 | color: $white; 14 | border-color: $white; 15 | } 16 | 17 | .day-scripture { 18 | padding-top: 1em; 19 | padding-bottom: 1em; 20 | @include mq(small) { 21 | padding-top: 1.5em; 22 | padding-bottom: 1.5em; 23 | } 24 | @include mq(medium) { 25 | padding-top: 2em; 26 | padding-bottom: 2em; 27 | } 28 | @include mq(mid) { 29 | padding-top: 3em; 30 | padding-bottom: 3em; 31 | } 32 | } 33 | 34 | .day-text { 35 | text-align: right; 36 | color: $day-25-yellow; 37 | max-width: em-calc(440); 38 | margin-left: auto; 39 | margin-right: auto; 40 | } 41 | 42 | .day-reference { 43 | margin-top: 1em; 44 | } 45 | 46 | .day-reference-link { 47 | color: tint($day-25-blue, 20%); 48 | } 49 | 50 | .day-font-link { 51 | color: $white; 52 | } 53 | } 54 | 55 | .day-25-first { 56 | font-size: 3em; 57 | font-family: $day-25-font-script; 58 | display: block; 59 | } 60 | 61 | .day-25-next { 62 | font-family: $day-25-font-sans-serif; 63 | font-size: 1.1em; 64 | line-height: 1.3; 65 | letter-spacing: 0.017em; 66 | display: block; 67 | margin-top: 0.6em; 68 | color: tint($day-25-blue, 50%); 69 | } 70 | 71 | @include mq(medium) { 72 | .day--25 { 73 | .day-text { 74 | max-width: em-calc(575); 75 | } 76 | } 77 | 78 | .day-25-first { 79 | font-size: 4em; 80 | } 81 | 82 | .day-25-next { 83 | font-size: 1.5em; 84 | letter-spacing: 0.008em; 85 | line-height: 1; 86 | margin-top: 0.8em; 87 | } 88 | } -------------------------------------------------------------------------------- /assets/sass/days/_028.scss: -------------------------------------------------------------------------------- 1 | // ================================================== 2 | // Day 28 3 | // ================================================== 4 | $day-28-font : "Arimo", Helvetica, Arial, sans-serif; 5 | $day-28-font-handwriting: "Londrina Sketch", Helvetica, sans-serif; 6 | $day-28-blue : #3f51b5; 7 | $day-28-green : #4caf50; 8 | $day-28-grey : #212223; 9 | $day-28-grey-light : #dddedf; 10 | $day-28-pink : #e91e63; 11 | $day-28-yellow : #f9ce1d; 12 | 13 | .day--28 { 14 | background-color: $day-28-grey; 15 | 16 | .day-number { 17 | color: $white; 18 | border-color: $white; 19 | } 20 | 21 | .day-text { 22 | font-family: $day-28-font; 23 | color: $day-28-grey-light; 24 | } 25 | 26 | .day-reference { 27 | text-align: center; 28 | margin-top: em-calc(30); 29 | } 30 | 31 | .day-reference-link { 32 | color: $day-28-green; 33 | } 34 | 35 | .day-font-link { 36 | color: $white; 37 | } 38 | } 39 | 40 | .day-28-text, 41 | .day-28-bold { 42 | text-align: center; 43 | display: block; 44 | } 45 | 46 | .day-28-text { 47 | font-size: em-calc(18); 48 | letter-spacing: 0.01em; 49 | line-height: 1.3; 50 | } 51 | 52 | .day-28-bold { 53 | $font-size: 110; 54 | 55 | font-family: $day-28-font-handwriting; 56 | font-size: em-calc($font-size); 57 | line-height: 0.85; 58 | text-transform: uppercase; 59 | @include font-smoothing; 60 | 61 | &--all { 62 | color: $day-28-blue; 63 | } 64 | 65 | &--your { 66 | color: $day-28-yellow; 67 | } 68 | 69 | &--need { 70 | color: $day-28-pink; 71 | margin-bottom: em-calc(5, $font-size); 72 | } 73 | } 74 | 75 | .day-28-bold--all { 76 | $font-size: 155; 77 | 78 | font-size: em-calc($font-size); 79 | margin-top: em-calc(5, $font-size); 80 | margin-bottom: em-calc(-5, $font-size); 81 | } 82 | 83 | @include mq(small) { 84 | .day-28-text { 85 | font-size: em-calc(19); 86 | line-height: 1.4; 87 | } 88 | 89 | .day-28-bold { 90 | $font-size: 140; 91 | 92 | font-size: em-calc($font-size); 93 | 94 | &--need { 95 | margin-bottom: em-calc(8, $font-size); 96 | } 97 | } 98 | 99 | .day-28-bold--all { 100 | $font-size: 200; 101 | 102 | font-size: em-calc($font-size); 103 | margin-top: em-calc(8, $font-size); 104 | margin-bottom: em-calc(-5, $font-size); 105 | } 106 | } 107 | 108 | @include mq(medium) { 109 | .day-28-text { 110 | font-size: em-calc(20); 111 | } 112 | 113 | .day-28-bold { 114 | $font-size: 170; 115 | 116 | font-size: em-calc($font-size); 117 | 118 | &--need { 119 | margin-bottom: em-calc(10, $font-size); 120 | } 121 | } 122 | 123 | .day-28-bold--all { 124 | $font-size: 240; 125 | 126 | font-size: em-calc($font-size); 127 | margin-top: em-calc(10, $font-size); 128 | margin-bottom: em-calc(-5, $font-size); 129 | } 130 | } 131 | 132 | @include mq(mid) { 133 | .day-28-text { 134 | font-size: em-calc(21); 135 | } 136 | 137 | .day-28-bold { 138 | $font-size: 200; 139 | 140 | font-size: em-calc($font-size); 141 | 142 | &--need { 143 | margin-bottom: em-calc(10, $font-size); 144 | } 145 | } 146 | 147 | .day-28-bold--all { 148 | $font-size: 280; 149 | 150 | font-size: em-calc($font-size); 151 | margin-top: em-calc(10, $font-size); 152 | margin-bottom: em-calc(-5, $font-size); 153 | } 154 | } -------------------------------------------------------------------------------- /assets/sass/days/_029.scss: -------------------------------------------------------------------------------- 1 | // ================================================== 2 | // Day 29 3 | // ================================================== 4 | $day-29-text : Vollkorn, Georgia, "Times New Roman", Times, serif; 5 | $day-29-purple : #685c79; 6 | $day-29-pink : #da727e; 7 | $day-29-pink-dark: #ac6c82; 8 | 9 | .day--29 { 10 | background-color: $day-29-purple; 11 | 12 | .day-text { 13 | text-align: center; 14 | font-family: $day-29-text; 15 | } 16 | 17 | .day-reference-link { 18 | color: $day-29-pink-dark; 19 | position: relative; 20 | } 21 | 22 | .day-font { 23 | position: relative; 24 | } 25 | } 26 | 27 | $day-29-font-size: 400; 28 | 29 | .day-29-o { 30 | font-size: em-calc($day-29-font-size); 31 | color: $day-29-pink; 32 | display: inline-block; 33 | position: relative; 34 | height: em-calc(335, $day-29-font-size); 35 | } 36 | 37 | .day-29-sc { 38 | font-variant: small-caps; 39 | } 40 | 41 | .day-29-text { 42 | font-size: em-calc(20, $day-29-font-size); 43 | line-height: 1.1; 44 | text-align: justify; 45 | display: block; 46 | position: absolute; 47 | width: em-calc(110); 48 | top: 50%; 49 | left: 50%; 50 | margin-left: em-calc(-55); 51 | margin-top: em-calc(-41); 52 | } 53 | 54 | @include mq(small) { 55 | $day-29-font-size: 500; 56 | 57 | .day-29-o { 58 | font-size: em-calc($day-29-font-size); 59 | height: em-calc(420, $day-29-font-size); 60 | } 61 | 62 | .day-29-text { 63 | font-size: em-calc(23, $day-29-font-size); 64 | margin-top: em-calc(-42); 65 | } 66 | } 67 | 68 | @include mq(medium) { 69 | $day-29-font-size: 700; 70 | 71 | .day-29-o { 72 | font-size: em-calc($day-29-font-size); 73 | height: em-calc(580, $day-29-font-size); 74 | } 75 | 76 | .day-29-text { 77 | font-size: em-calc(30, $day-29-font-size); 78 | margin-top: em-calc(-42); 79 | } 80 | } -------------------------------------------------------------------------------- /assets/sass/days/_033.scss: -------------------------------------------------------------------------------- 1 | // ================================================== 2 | // Day 33 3 | // ================================================== 4 | $day-33-font: "Droid Serif", "Times New Roman", Times, serif; 5 | $day-33-blue: #303f9f; 6 | 7 | .day--33 { 8 | .day-scripture { 9 | padding-top: 1em; 10 | padding-bottom: 1em; 11 | @include mq(small) { 12 | padding-top: 2em; 13 | padding-bottom: 2em; 14 | } 15 | } 16 | 17 | .day-text { 18 | font-family: $day-33-font; 19 | text-align: center; 20 | } 21 | 22 | .day-reference { 23 | margin-top: em-calc(30); 24 | @include mq(medium) { 25 | margin-top: em-calc(50); 26 | } 27 | @include mq(medium) { 28 | margin-top: em-calc(60); 29 | } 30 | } 31 | 32 | .day-reference-link { 33 | font-size: em-calc(14); 34 | color: $day-33-blue; 35 | @include mq(small) { 36 | font-size: em-calc(15); 37 | } 38 | @include mq(medium) { 39 | font-size: 1em; 40 | } 41 | } 42 | } 43 | 44 | .day-33-fortune { 45 | background: linear-gradient(to right, $white 50%, tint($white, 10%)); 46 | padding: em-calc(40 50); 47 | @include mq(small) { 48 | padding: em-calc(40 75); 49 | } 50 | @include mq(medium) { 51 | padding: em-calc(40 100); 52 | } 53 | @include mq(large) { 54 | padding: em-calc(40 125); 55 | } 56 | display: inline-block; 57 | position: relative; 58 | 59 | &::before, 60 | &::after { 61 | content: ""; 62 | position: absolute; 63 | width: em-calc(50); 64 | background: $day-33-blue; 65 | left: 0; 66 | } 67 | 68 | &::before { 69 | height: em-calc(15); 70 | top: 0; 71 | } 72 | 73 | &::after { 74 | height: em-calc(10); 75 | bottom: 0; 76 | } 77 | } 78 | 79 | .day-33-text { 80 | @include mq(small) { 81 | font-size: em-calc(17); 82 | } 83 | @include mq(medium) { 84 | font-size: em-calc(18); 85 | } 86 | &::before { 87 | content: ""; 88 | width: em-calc(18); 89 | height: em-calc(20); 90 | background: $day-33-blue; 91 | position: absolute; 92 | top: 0; 93 | right: 0; 94 | } 95 | 96 | &::after { 97 | content: ""; 98 | background: linear-gradient(to right, rgba($black, 0.5) 50%, rgba($black, 0.2)); 99 | position: absolute; 100 | top: em-calc(8); 101 | right: em-calc(-5); 102 | bottom: em-calc(1); 103 | left: em-calc(5); 104 | z-index: -1; 105 | transform: skewY(1deg); 106 | filter: blur(2px); 107 | } 108 | } 109 | 110 | .day-33-smiley { 111 | font-size: 1.2em; 112 | font-family: serif; 113 | position: relative; 114 | bottom: 0.03em; 115 | } -------------------------------------------------------------------------------- /assets/sass/days/_038.scss: -------------------------------------------------------------------------------- 1 | // ================================================== 2 | // Day 38 3 | // ================================================== 4 | $day-38-font: Neuton, Georgia, "Times New Roman", Times, serif; 5 | 6 | .day--38 { 7 | position: relative; 8 | 9 | .day-scripture { 10 | padding-top: 1em; 11 | padding-bottom: 1em; 12 | @include mq(small) { 13 | padding-top: 1.5em; 14 | padding-bottom: 1.5em; 15 | } 16 | @include mq(medium) { 17 | padding-top: 2em; 18 | padding-bottom: 2em; 19 | } 20 | @include mq(mid) { 21 | padding-top: 2.5em; 22 | padding-bottom: 2.5em; 23 | } 24 | @include mq(large) { 25 | padding-top: 3em; 26 | padding-bottom: 3em; 27 | } 28 | } 29 | 30 | .day-text { 31 | font-family: $day-38-font; 32 | @include mq(small) { 33 | font-size: 1.1em; 34 | } 35 | @include mq(medium) { 36 | font-size: 1.2em; 37 | } 38 | text-align: center; 39 | } 40 | 41 | .day-reference { 42 | margin-top: 2em; 43 | } 44 | 45 | .day-reference-link { 46 | font-size: em-calc(18); 47 | color: $grey-darkest; 48 | } 49 | } 50 | 51 | .day-38-text { 52 | $font-size: 18; 53 | 54 | font-size: em-calc($font-size); 55 | line-height: 1.2; 56 | text-align: left; 57 | display: inline-block; 58 | width: em-calc(260, $font-size); 59 | // padding: em-calc(20 15, $font-size); 60 | // background: $white; 61 | position: relative; 62 | // height: em-calc(400, $font-size); 63 | // margin-bottom: em-calc(-400, $font-size); 64 | } -------------------------------------------------------------------------------- /assets/sass/days/_040.scss: -------------------------------------------------------------------------------- 1 | // ================================================== 2 | // Day 40 3 | // ================================================== 4 | $day-40-font: Vidaloka, "Times New Roman", Times, serif; 5 | $day-40-purple: #730046; 6 | 7 | .day--40 { 8 | background-color: $day-40-purple; 9 | background-color: #bfbb11; 10 | 11 | .day-text { 12 | font-family: $day-40-font; 13 | color: $white; 14 | text-align: center; 15 | } 16 | 17 | .day-reference { 18 | text-align: center; 19 | background-color: #fac300; 20 | border-radius: 100%; 21 | display: table; 22 | width: em-calc(100); 23 | height: em-calc(100); 24 | margin-left: auto; 25 | margin-right: auto; 26 | margin-top: em-calc(-60); 27 | position: relative; 28 | left: em-calc(75); 29 | } 30 | 31 | .day-reference-link { 32 | color: $day-40-purple; 33 | height: em-calc(100); 34 | padding-left: 0.5em; 35 | padding-right: 0.5em; 36 | vertical-align: middle; 37 | display: table-cell; 38 | } 39 | } 40 | 41 | .day-40-circle { 42 | width: em-calc(280); 43 | height: em-calc(280); 44 | margin-left: auto; 45 | margin-right: auto; 46 | background-color: $day-40-purple; 47 | border-radius: 100%; 48 | display: table; 49 | } 50 | 51 | .day-40-text { 52 | font-size: em-calc(18); 53 | line-height: 1.3; 54 | padding-left: 2em; 55 | padding-right: 2em; 56 | vertical-align: middle; 57 | display: table-cell; 58 | } 59 | 60 | @include mq(small) { 61 | .day--40 { 62 | .day-reference { 63 | width: em-calc(120); 64 | height: em-calc(120); 65 | margin-top: em-calc(-80); 66 | left: em-calc(100); 67 | } 68 | 69 | .day-reference-link { 70 | height: em-calc(120); 71 | padding-left: 2em; 72 | padding-right: 2em; 73 | } 74 | } 75 | 76 | .day-40-circle { 77 | width: em-calc(350); 78 | height: em-calc(350); 79 | } 80 | 81 | .day-40-text { 82 | font-size: em-calc(22); 83 | padding-left: 2em; 84 | padding-right: 2em; 85 | } 86 | } 87 | 88 | @include mq(medium) { 89 | .day--40 { 90 | .day-reference { 91 | margin-top: em-calc(-100); 92 | left: em-calc(150); 93 | } 94 | 95 | .day-reference-link { 96 | font-size: em-calc(17); 97 | } 98 | } 99 | 100 | .day-40-circle { 101 | width: em-calc(420); 102 | height: em-calc(420); 103 | } 104 | 105 | .day-40-text { 106 | font-size: em-calc(26); 107 | padding-left: 2.5em; 108 | padding-right: 2.5em; 109 | } 110 | } 111 | 112 | @include mq(mid) { 113 | .day--40 { 114 | .day-reference-link { 115 | font-size: em-calc(18); 116 | } 117 | } 118 | 119 | .day-40-circle { 120 | width: em-calc(500); 121 | height: em-calc(500); 122 | } 123 | 124 | .day-40-text { 125 | font-size: em-calc(30); 126 | padding-left: 2.5em; 127 | padding-right: 2.5em; 128 | } 129 | } -------------------------------------------------------------------------------- /assets/sass/days/_041.scss: -------------------------------------------------------------------------------- 1 | // ================================================== 2 | // Day 41 3 | // ================================================== 4 | $day-41-font : Questrial; 5 | $day-41-font-script: Sacramento; 6 | $day-41-grey-light : #eaebec; 7 | $day-41-grey : #222c33; 8 | $day-41-teal : #b2dfdb; 9 | 10 | .day--41 { 11 | background-color: $day-41-grey-light; 12 | position: relative; 13 | 14 | .day-text { 15 | font-family: $day-41-font; 16 | color: $day-41-grey; 17 | width: em-calc(280); 18 | margin-left: auto; 19 | margin-right: auto; 20 | 21 | @include mq(small) { 22 | font-size: 1.1em; 23 | } 24 | 25 | @include mq(medium) { 26 | font-size: 1.2em; 27 | } 28 | } 29 | 30 | .day-number, 31 | .day-reference, 32 | .day-font { 33 | position: relative; 34 | z-index: 2; 35 | } 36 | 37 | .day-reference { 38 | margin-top: 2em; 39 | text-align: center; 40 | } 41 | 42 | .day-reference-link { 43 | color: $day-41-grey; 44 | } 45 | 46 | .day-font { 47 | color: $day-41-teal; 48 | } 49 | } 50 | 51 | .day-41-blessed { 52 | $font-size: 400; 53 | 54 | font-family: $day-41-font-script; 55 | font-size: em-calc($font-size); 56 | color: $day-41-teal; 57 | position: absolute; 58 | transform: rotate(-90deg); 59 | top: 50%; 60 | left: 50%; 61 | margin-top: em-calc(-150, $font-size); 62 | margin-left: em-calc(-500, $font-size); 63 | z-index: 1; 64 | } 65 | 66 | .day-41-text { 67 | line-height: 1.3; 68 | position: relative; 69 | z-index: 2; 70 | 71 | li { 72 | margin-bottom: 1em; 73 | } 74 | } -------------------------------------------------------------------------------- /assets/sass/days/_042.scss: -------------------------------------------------------------------------------- 1 | // ================================================== 2 | // Day 42 3 | // ================================================== 4 | $day-42-font: "Istok Web"; 5 | $day-42-cyan: #80deea; 6 | $day-42-pink: #f06292; 7 | 8 | .day--42 { 9 | background: linear-gradient(30deg, rgba($day-42-pink, 0.6), $white, rgba($day-42-cyan, 0.6)); 10 | 11 | .day-text { 12 | font-family: $day-42-font; 13 | width: em-calc(290); 14 | margin-left: auto; 15 | margin-right: auto; 16 | } 17 | 18 | .day-reference { 19 | padding-right: 0.25em; 20 | margin-top: 0.5em; 21 | text-align: right; 22 | position: relative; 23 | } 24 | 25 | .day-reference-link { 26 | color: $grey-darker; 27 | background-color: rgba($day-42-cyan, 0.6); 28 | padding: 0.2em 0.5em; 29 | 30 | &:hover { 31 | background-color: rgba($day-42-pink, 0.6); 32 | text-decoration: none; 33 | } 34 | } 35 | } 36 | 37 | .day-42-first, 38 | .day-42-next { 39 | position: relative; 40 | display: inline-block; 41 | } 42 | 43 | .day-42-strong { 44 | font-size: em-calc(62); 45 | font-weight: 700; 46 | text-transform: uppercase; 47 | } 48 | 49 | .day-42-text { 50 | color: $grey-darker; 51 | padding: 0.1em 0.5em; 52 | position: absolute; 53 | top: 50%; 54 | right: 0; 55 | } 56 | 57 | .day-42-first { 58 | .day-42-strong { 59 | color: $day-42-cyan; 60 | } 61 | 62 | .day-42-text { 63 | background-color: rgba($day-42-pink, 0.6); 64 | margin-top: em-calc(-15); 65 | } 66 | } 67 | 68 | .day-42-next { 69 | .day-42-strong { 70 | color: $day-42-pink; 71 | } 72 | 73 | .day-42-text { 74 | width: em-calc(157); 75 | background-color: rgba($day-42-cyan, 0.6); 76 | margin-top: em-calc(-22); 77 | } 78 | } 79 | 80 | @include mq(small) { 81 | .day--42 { 82 | .day-text { 83 | width: em-calc(400); 84 | } 85 | } 86 | 87 | .day-42-strong { 88 | font-size: em-calc(86); 89 | } 90 | 91 | .day-42-next { 92 | .day-42-text { 93 | width: auto; 94 | margin-top: em-calc(-15); 95 | } 96 | } 97 | } 98 | 99 | @include mq(medium) { 100 | .day--42 { 101 | .day-text { 102 | width: em-calc(510); 103 | } 104 | } 105 | 106 | .day-42-strong { 107 | font-size: em-calc(110); 108 | } 109 | 110 | .day-42-text { 111 | font-size: em-calc(18); 112 | } 113 | 114 | .day-42-first, 115 | .day-42-next { 116 | .day-42-text { 117 | margin-top: em-calc(-17); 118 | } 119 | } 120 | } 121 | 122 | @include mq(mid) { 123 | .day--42 { 124 | .day-text { 125 | width: em-calc(650); 126 | } 127 | } 128 | 129 | .day-42-strong { 130 | font-size: em-calc(140); 131 | } 132 | 133 | .day-42-text { 134 | font-size: em-calc(20); 135 | } 136 | 137 | .day-42-first, 138 | .day-42-next { 139 | .day-42-text { 140 | margin-top: em-calc(-18.5); 141 | } 142 | } 143 | } -------------------------------------------------------------------------------- /assets/sass/days/_043.scss: -------------------------------------------------------------------------------- 1 | // ================================================== 2 | // Day 43 3 | // ================================================== 4 | $day-43-font: "Montserrat Alternates", sans-serif; 5 | 6 | .day--43 { 7 | background-color: $black; 8 | position: relative; 9 | 10 | .day-scripture { 11 | text-align: center; 12 | } 13 | 14 | .day-number, 15 | .day-text, 16 | .day-reference, 17 | .day-font { 18 | position: relative; 19 | z-index: 2; 20 | } 21 | 22 | .day-number { 23 | color: $grey-darker; 24 | border-color: $grey-darker; 25 | } 26 | 27 | .day-text { 28 | font-family: $day-43-font; 29 | color: $white; 30 | text-transform: uppercase; 31 | display: inline-block; 32 | width: em-calc(265); 33 | } 34 | 35 | &::before, 36 | &::after { 37 | content: ""; 38 | position: absolute; 39 | width: 100%; 40 | height: em-calc(1200); 41 | left: 0; 42 | background-size: 70px 60px, 70px 60px, 1px 60px; 43 | z-index: 1; 44 | } 45 | 46 | &::before { 47 | top: 0; 48 | background-image: 49 | repeating-linear-gradient(120deg, shade($white, 75%), shade($white, 75%) 1px, transparent 1px, transparent 30px), 50 | repeating-linear-gradient(60deg, shade($white, 75%), shade($white, 75%) 1px, transparent 1px, transparent 30px), 51 | repeating-linear-gradient(0deg, shade($white, 75%), shade($white, 75%) 1px, transparent 1px, transparent 30px); 52 | } 53 | 54 | &::after { 55 | bottom: 0; 56 | background-image: 57 | linear-gradient(to bottom, transparent, rgba($black, 0.8)), 58 | repeating-linear-gradient(120deg, shade($white, 75%), shade($white, 75%) 1px, transparent 1px, transparent 30px), 59 | repeating-linear-gradient(60deg, shade($white, 75%), shade($white, 75%) 1px, transparent 1px, transparent 30px), 60 | repeating-linear-gradient(175deg, shade($white, 75%), shade($white, 75%) 1px, transparent 1px, transparent 30px); 61 | background-size: 100% 100%, 70px 60px, 70px 60px, 1px 60px; 62 | } 63 | 64 | .day-reference { 65 | margin-top: em-calc(60); 66 | } 67 | 68 | .day-reference-link { 69 | color: $grey-dark; 70 | } 71 | 72 | .day-font-link { 73 | color: $grey-darker; 74 | } 75 | } 76 | 77 | .day-43-text { 78 | text-align: justify; 79 | display: block; 80 | } -------------------------------------------------------------------------------- /assets/sass/days/_044.scss: -------------------------------------------------------------------------------- 1 | // ================================================== 2 | // Day 44 3 | // ================================================== 4 | $day-44-font: Yantramanav, Helvetica, Arial, sans-serif; 5 | $day-44-blue: #1a237e; 6 | 7 | .day--44 { 8 | .day-text { 9 | font-family: $day-44-font; 10 | font-weight: 900; 11 | color: $black; 12 | text-transform: uppercase; 13 | 14 | @include mq(small) { 15 | font-size: 1.1em; 16 | } 17 | @include mq(medium) { 18 | font-size: 1.3em; 19 | } 20 | @include mq(mid) { 21 | font-size: 1.5em; 22 | } 23 | } 24 | 25 | .day-reference { 26 | 27 | } 28 | 29 | .day-reference-link { 30 | $font-size: 30; 31 | 32 | font-size: em-calc($font-size); 33 | margin-top: em-calc(-6, $font-size); 34 | margin-left: 3.7em; 35 | color: $day-44-blue; 36 | display: inline-block; 37 | } 38 | } 39 | 40 | .day-44-text { 41 | $font-size: 60; 42 | 43 | font-size: em-calc($font-size); 44 | line-height: 0.64; 45 | display: block; 46 | 47 | &--1, 48 | &--3, 49 | &--4, 50 | &--6 { 51 | color: $day-44-blue; 52 | } 53 | 54 | &--1, 55 | &--3, 56 | &--6 { 57 | margin-left: 0.5em; 58 | } 59 | 60 | &--4 { 61 | margin-left: 0.74em; 62 | } 63 | } -------------------------------------------------------------------------------- /assets/sass/days/_045.scss: -------------------------------------------------------------------------------- 1 | // ================================================== 2 | // Day 45 3 | // ================================================== 4 | $day-45-font : Suranna, "Times New Roman", Times, serif; 5 | $day-45-blue : #046380; 6 | $day-45-blue-dark: #012e2e; 7 | $day-45-ivory : #efecca; 8 | 9 | .day--45 { 10 | background-color: $day-45-blue; 11 | 12 | .day-scripture { 13 | padding-bottom: em-calc(50); 14 | @include mq(mid) { 15 | padding-bottom: em-calc(73); 16 | } 17 | } 18 | 19 | .day-text { 20 | font-family: $day-45-font; 21 | color: $day-45-ivory; 22 | width: em-calc(300); 23 | @include mq(mid) { 24 | width: em-calc(670); 25 | } 26 | margin-left: auto; 27 | margin-right: auto; 28 | } 29 | 30 | .day-reference { 31 | display: block; 32 | margin-top: em-calc(39); 33 | @include mq(mid) { 34 | margin-top: em-calc(59); 35 | } 36 | } 37 | 38 | .day-reference-link { 39 | @include mq(mid) { 40 | font-size: em-calc(18); 41 | } 42 | color: $day-45-blue; 43 | padding: 0.2em 0.4em; 44 | background-color: $day-45-blue-dark; 45 | display: inline-block; 46 | 47 | &:hover { 48 | color: $day-45-blue-dark; 49 | background-color: $day-45-ivory; 50 | text-decoration: none; 51 | } 52 | } 53 | } 54 | 55 | .day-45-first { 56 | $font-size: 50; 57 | 58 | font-size: em-calc($font-size); 59 | line-height: 1.2; 60 | max-width: em-calc(300, $font-size); 61 | display: inline-block; 62 | 63 | &::before { 64 | content: "“"; 65 | display: block; 66 | } 67 | } 68 | 69 | .day-45-first, 70 | .day-45-next { 71 | vertical-align: bottom; 72 | } 73 | 74 | .day-45-next { 75 | $font-size: 23; 76 | 77 | font-size: em-calc($font-size); 78 | line-height: 1.3; 79 | max-width: em-calc(290, $font-size); 80 | margin-top: em-calc(20, $font-size); 81 | display: block; 82 | position: relative; 83 | 84 | &::after { 85 | font-size: em-calc(50, $font-size); 86 | content: "”"; 87 | text-align: right; 88 | display: block; 89 | position: absolute; 90 | bottom: em-calc(-45, $font-size); 91 | right: 0; 92 | } 93 | } 94 | 95 | @include mq(mid) { 96 | .day-45-next { 97 | $font-size: 23; 98 | 99 | font-size: em-calc($font-size); 100 | max-width: em-calc(290, $font-size); 101 | margin-left: em-calc(70, $font-size); 102 | top: em-calc(23, $font-size); 103 | display: inline-block; 104 | } 105 | } -------------------------------------------------------------------------------- /assets/sass/days/_046.scss: -------------------------------------------------------------------------------- 1 | // ================================================== 2 | // Day 46 3 | // ================================================== 4 | $day-46-sans-serif: "Work Sans", Helvetica, Arial, sans-serif; 5 | $day-46-serif : Domine, "Times New Roman", Times, serif; 6 | $day-46-yellow : #fcfcce; 7 | $day-46-pink : #af7575; 8 | $day-46-grey : #272f32; 9 | 10 | .day--46 { 11 | background-color: $day-46-yellow; 12 | position: relative; 13 | 14 | .day-text { 15 | font-family: $day-46-serif; 16 | color: $day-46-grey; 17 | text-align: center; 18 | line-height: 1.4; 19 | max-width: em-calc(415); 20 | @include mq(small) { 21 | max-width: em-calc(445); 22 | } 23 | @include mq(medium) { 24 | max-width: em-calc(475); 25 | } 26 | margin-left: auto; 27 | margin-right: auto; 28 | } 29 | 30 | .day-scripture { 31 | @include mq(small) { 32 | padding-top: 1em; 33 | padding-bottom: 1em; 34 | } 35 | @include mq(medium) { 36 | padding-top: 2em; 37 | padding-bottom: 2em; 38 | } 39 | } 40 | 41 | .day-number, 42 | .day-reference, 43 | .day-font { 44 | position: relative; 45 | z-index: 2; 46 | } 47 | 48 | .day-reference { 49 | margin-top: 2em; 50 | } 51 | 52 | .day-reference-link { 53 | color: $day-46-grey; 54 | } 55 | 56 | .day-font { 57 | color: $day-46-pink; 58 | } 59 | } 60 | 61 | .day-46-text { 62 | position: relative; 63 | z-index: 2; 64 | @include mq(small) { 65 | font-size: em-calc(17); 66 | } 67 | @include mq(medium) { 68 | font-size: em-calc(18); 69 | } 70 | } 71 | 72 | .day-46-strong { 73 | font-family: $day-46-sans-serif; 74 | font-size: em-calc(40); 75 | @include mq(small) { 76 | font-size: em-calc(50); 77 | } 78 | @include mq(medium) { 79 | font-size: em-calc(60); 80 | } 81 | @include mq(mid) { 82 | font-size: em-calc(70); 83 | } 84 | font-weight: 600; 85 | letter-spacing: -0.01em; 86 | color: rgba($day-46-pink, 0.3); 87 | line-height: 1; 88 | position: absolute; 89 | display: inline-block; 90 | z-index: 1; 91 | 92 | &--f { 93 | top: -0.2em; 94 | left: 3%; 95 | } 96 | 97 | &--v { 98 | top: 36%; 99 | left: 9%; 100 | } 101 | 102 | &--k { 103 | top: 6%; 104 | right: 4%; 105 | } 106 | 107 | &--t { 108 | top: 20%; 109 | right: 22%; 110 | } 111 | 112 | &--p { 113 | top: 40%; 114 | right: -0.2em; 115 | } 116 | 117 | &--g { 118 | bottom: 27%; 119 | left: 17%; 120 | } 121 | 122 | &--b { 123 | bottom: -0.2em; 124 | left: 5%; 125 | } 126 | 127 | &--c { 128 | bottom: 17%; 129 | right: 18%; 130 | } 131 | } 132 | 133 | .day-46-hr { 134 | width: 3em; 135 | border: 0; 136 | border-top: 3px dashed $day-46-grey; 137 | margin-top: 1.5em; 138 | margin-bottom: 1.5em; 139 | } -------------------------------------------------------------------------------- /assets/sass/days/_047.scss: -------------------------------------------------------------------------------- 1 | // ================================================== 2 | // Day 47 3 | // ================================================== 4 | $day-47-font : Cinzel, Ramaraja, "Times New Roman", Times, serif; 5 | $day-47-iron-dark : #51504c; 6 | $day-47-iron-light: #817f80; 7 | 8 | .day--47 { 9 | background-color: $day-47-iron-dark; 10 | background: radial-gradient(ellipse at top left, tint($day-47-iron-dark, 17%), $day-47-iron-dark); 11 | 12 | .day-scripture { 13 | padding-top: 1em; 14 | padding-bottom: 1em; 15 | @include mq(medium) { 16 | padding-top: 2em; 17 | padding-bottom: 2em; 18 | } 19 | @include mq(large) { 20 | padding-top: 3em; 21 | padding-bottom: 3em; 22 | } 23 | } 24 | 25 | .day-text { 26 | font-family: $day-47-font; 27 | color: $day-47-iron-light; 28 | max-width: em-calc(570); 29 | margin-left: auto; 30 | margin-right: auto; 31 | } 32 | 33 | .day-reference { 34 | text-align: left; 35 | margin-top: 2em; 36 | } 37 | 38 | @include mq(691) { 39 | .day-reference { 40 | text-align: center; 41 | } 42 | } 43 | 44 | .day-reference-link { 45 | color: shade($day-47-iron-light, 10%); 46 | letter-spacing: 0.05em; 47 | text-transform: uppercase; 48 | } 49 | } 50 | 51 | .day-47-first { 52 | font-size: em-calc(46); 53 | text-transform: lowercase; 54 | } 55 | 56 | .day-47-next { 57 | font-size: em-calc(19); 58 | letter-spacing: 0.007em; 59 | line-height: 1.3; 60 | display: block; 61 | } 62 | 63 | @include mq(mid) { 64 | .day--47 { 65 | .day-text { 66 | max-width: em-calc(670); 67 | } 68 | } 69 | 70 | .day-47-first { 71 | font-size: em-calc(54); 72 | } 73 | 74 | .day-47-next { 75 | font-size: em-calc(22); 76 | letter-spacing: 0.015em; 77 | } 78 | } 79 | 80 | @include mq(large) { 81 | .day--47 { 82 | .day-text { 83 | max-width: em-calc(780); 84 | } 85 | } 86 | 87 | .day-47-first { 88 | font-size: em-calc(63); 89 | } 90 | 91 | .day-47-next { 92 | font-size: em-calc(26); 93 | letter-spacing: 0.008em; 94 | } 95 | } -------------------------------------------------------------------------------- /assets/sass/days/_048.scss: -------------------------------------------------------------------------------- 1 | // ================================================== 2 | // Day 48 3 | // ================================================== 4 | $day-48-font: Poppins, sans-serif; 5 | $day-48-orange-light: #fd823b; 6 | $day-48-orange-dark: #ef5411; 7 | 8 | .day--48 { 9 | background-color: $day-48-orange-light; 10 | 11 | .day-text { 12 | font-family: $day-48-font; 13 | color: $grey-darker; 14 | text-shadow: 2px 2px 0 $day-48-orange-dark; 15 | width: em-calc(280); 16 | @include mq(small) { 17 | width: em-calc(390); 18 | } 19 | @include mq(medium) { 20 | width: em-calc(530); 21 | } 22 | } 23 | 24 | .day-reference { 25 | margin-top: 2em; 26 | @include mq(small) { 27 | margin-top: 2.5em; 28 | } 29 | @include mq(medium) { 30 | margin-top: 3em; 31 | } 32 | } 33 | 34 | .day-reference-link { 35 | font-size: em-calc(16); 36 | color: $grey-darker; 37 | @include mq(small) { 38 | font-size: em-calc(18); 39 | } 40 | @include mq(medium) { 41 | font-size: em-calc(20); 42 | } 43 | } 44 | } 45 | 46 | .day-48-text { 47 | font-size: em-calc(20); 48 | @include mq(small) { 49 | font-size: em-calc(30); 50 | } 51 | @include mq(medium) { 52 | font-size: em-calc(40); 53 | } 54 | line-height: 1.7; 55 | } -------------------------------------------------------------------------------- /assets/sass/days/_049.scss: -------------------------------------------------------------------------------- 1 | // ================================================== 2 | // Day 49 3 | // ================================================== 4 | $day-49-font : "Playfair Display SC", "Times New Roman", Times, serif; 5 | $day-49-cyan : #46cdcf; 6 | $day-49-teal : #9ce3cf; 7 | $day-49-blue : #6a7ff5; 8 | $day-49-purple: #574b9b; 9 | 10 | .day--49 { 11 | .day-scripture { 12 | padding-top: 1em; 13 | padding-bottom: 1em; 14 | 15 | @include mq(small) { 16 | padding-top: 1.75em; 17 | padding-bottom: 1.75em; 18 | } 19 | @include mq(medium) { 20 | padding-top: 2.5em; 21 | padding-bottom: 2.5em; 22 | } 23 | @include mq(mid) { 24 | padding-top: 3.25em; 25 | padding-bottom: 3.25em; 26 | } 27 | @include mq(large) { 28 | padding-top: 4em; 29 | padding-bottom: 4em; 30 | } 31 | } 32 | 33 | .day-text { 34 | font-family: $day-49-font; 35 | font-weight: 700; 36 | font-style: italic; 37 | font-variant-property: small-caps; 38 | text-align: center; 39 | } 40 | 41 | .day-reference { 42 | margin-top: 1.75em; 43 | 44 | @include mq(medium) { 45 | margin-top: 2.5em; 46 | } 47 | } 48 | 49 | .day-reference-link { 50 | color: $white; 51 | padding: 0em 0.3em 0.2em; 52 | text-transform: lowercase; 53 | background: linear-gradient(90deg, $day-49-teal -10%, $day-49-cyan, $day-49-blue, $day-49-purple 110%); 54 | display: inline-block; 55 | 56 | @include mq(small) { 57 | font-size: em-calc(17); 58 | } 59 | @include mq(medium) { 60 | font-size: em-calc(18); 61 | } 62 | @include mq(mid) { 63 | font-size: em-calc(19); 64 | } 65 | 66 | &:hover { 67 | background: linear-gradient(90deg, $day-49-purple -10%, $day-49-blue, $day-49-cyan, $day-49-teal 110%); 68 | text-decoration: none; 69 | } 70 | } 71 | } 72 | 73 | .day-49-text { 74 | font-size: 2.7em; 75 | @include mq(small) { 76 | font-size: 3.7em; 77 | } 78 | @include mq(medium) { 79 | font-size: 4.7em; 80 | } 81 | @include mq(mid) { 82 | font-size: 6em; 83 | } 84 | @include mq(large) { 85 | font-size: 7em; 86 | } 87 | 88 | @include mq(small) { 89 | font-size: 10vw; 90 | } 91 | } 92 | 93 | .day-49 { 94 | &-1 { color: $day-49-teal; } 95 | &-2 { color: #7fdccf; } 96 | &-3 { color: #63d4cf; } 97 | &-4 { color: $day-49-cyan; } 98 | &-5 { color: #52b3dc; } 99 | &-6 { color: #5e99e8; } 100 | &-7 { color: $day-49-blue; } 101 | &-8 { color: #646ed7; } 102 | &-9 { color: #5d5cb9; } 103 | &-10 { color: $day-49-purple; } 104 | } 105 | 106 | @media screen and (-webkit-min-device-pixel-ratio: 0) { 107 | .day-49-text { 108 | background: -webkit-linear-gradient(0deg, $day-49-teal, $day-49-cyan, $day-49-blue, $day-49-purple 95%); 109 | -webkit-background-clip: text; 110 | -webkit-text-fill-color: transparent; 111 | } 112 | } -------------------------------------------------------------------------------- /assets/sass/days/_051.scss: -------------------------------------------------------------------------------- 1 | // ================================================== 2 | // Day 51 3 | // ================================================== 4 | $day-51-font : "Rock Salt", sans-serif; 5 | $day-51-blue-light : #bee7eb; 6 | $day-51-brown-light: #d1b48c; 7 | $day-51-red : #e53935; 8 | 9 | .day--51 { 10 | background-color: $day-51-brown-light; 11 | 12 | .day-text { 13 | font-size: 0.8em; 14 | font-family: $day-51-font; 15 | text-transform: lowercase; 16 | text-align: center; 17 | @include font-smoothing; 18 | } 19 | 20 | .day-reference { 21 | margin-top: em-calc(-62); 22 | margin-bottom: em-calc(62); 23 | position: relative; 24 | } 25 | 26 | .day-reference-link { 27 | color: $day-51-red; 28 | } 29 | } 30 | 31 | .day-51-text { 32 | text-align: left; 33 | width: em-calc(280); 34 | height: em-calc(522); 35 | line-height: em-calc(20); 36 | padding: em-calc(60 20 0 50); 37 | padding-bottom: 0; 38 | border: 1px solid $grey-lightest; 39 | 40 | background: linear-gradient(to top, $day-51-blue-light 0%, $white 8%) 0 em-calc(4); 41 | background-size: 100% em-calc(20); 42 | background-position: 0 0; 43 | border-radius: em-calc(3); 44 | box-shadow: 0 em-calc(1 2) rgba($black, 0.05); 45 | display: inline-block; 46 | position: relative; 47 | overflow: hidden; 48 | 49 | &::before, 50 | &::after { 51 | content: ""; 52 | position: absolute; 53 | top: 0; 54 | } 55 | 56 | &::before { 57 | width: 100%; 58 | height: em-calc(50); 59 | background: $white; 60 | left: 0; 61 | } 62 | 63 | &::after { 64 | left: em-calc(30); 65 | bottom: 0; 66 | border: 1px solid; 67 | border-color: transparent rgba($day-51-red, 0.3); 68 | } 69 | } 70 | 71 | .day-51-holes { 72 | top: em-calc(70); 73 | left: em-calc(15); 74 | 75 | &, 76 | &::before, 77 | &::after { 78 | border-radius: 100%; 79 | width: em-calc(20); 80 | height: em-calc(20); 81 | background-color: $day-51-brown-light; 82 | box-shadow: inset 0 em-calc(1 2) rgba($black, 0.15); 83 | position: absolute; 84 | } 85 | 86 | &::before, 87 | &::after { 88 | content: ""; 89 | left: 0; 90 | display: block; 91 | } 92 | 93 | &::before { 94 | bottom: em-calc(-215); 95 | } 96 | 97 | &::after { 98 | bottom: em-calc(-415); 99 | } 100 | } 101 | 102 | @include mq(small) { 103 | .day--51 { 104 | .day-text { 105 | font-size: 0.9em; 106 | } 107 | } 108 | 109 | .day-51-text { 110 | width: em-calc(350); 111 | padding-left: em-calc(80); 112 | 113 | &::after { 114 | left: em-calc(60); 115 | } 116 | } 117 | 118 | .day-51-holes { 119 | left: em-calc(20); 120 | } 121 | } 122 | 123 | @include mq(medium) { 124 | .day--51 { 125 | .day-text { 126 | font-size: 1em; 127 | } 128 | } 129 | } 130 | 131 | @include mq(mid) { 132 | .day--51 { 133 | .day-text { 134 | font-size: 1.1em; 135 | } 136 | } 137 | } -------------------------------------------------------------------------------- /assets/sass/days/_053.scss: -------------------------------------------------------------------------------- 1 | // ================================================== 2 | // Day 53 3 | // ================================================== 4 | $day-53-font : "Trocchi", serif; 5 | $day-53-yellow: #ffc045; 6 | $day-53-blue : #065471; 7 | 8 | .day--53 { 9 | background-color: $day-53-yellow; 10 | 11 | .day-scripture { 12 | padding-top: 1em; 13 | padding-bottom: 1em; 14 | @include mq(small) { 15 | padding-top: 1.5em; 16 | padding-bottom: 1.5em; 17 | } 18 | @include mq(medium) { 19 | padding-top: 2em; 20 | padding-bottom: 2em; 21 | } 22 | @include mq(mid) { 23 | padding-top: 2.5em; 24 | padding-bottom: 2.5em; 25 | } 26 | } 27 | 28 | .day-text { 29 | font-family: $day-53-font; 30 | color: $day-53-blue; 31 | text-align: center; 32 | @include font-smoothing; 33 | } 34 | 35 | .day-reference { 36 | margin-top: 2em; 37 | @include mq(medium) { 38 | margin-top: 3em; 39 | } 40 | } 41 | 42 | .day-reference-link { 43 | font-size: em-calc(17); 44 | color: $day-53-blue; 45 | line-height: 1.4; 46 | background-color: $white; 47 | transform: rotate(3deg); 48 | box-shadow: 1px 2px 3px rgba($black, 0.15); 49 | display: inline-block; 50 | margin-left: 7em; 51 | 52 | &:hover { 53 | transform: rotate(-5deg); 54 | text-decoration: none; 55 | } 56 | } 57 | } 58 | 59 | .day-53-text { 60 | $font-size: 24; 61 | 62 | font-size: em-calc($font-size); 63 | line-height: 1.3; 64 | width: em-calc(290, $font-size); 65 | display: inline-block; 66 | 67 | > span { 68 | background-color: $white; 69 | position: relative; 70 | display: inline-block; 71 | margin-top: 0.15em; 72 | margin-bottom: 0.15em; 73 | box-shadow: 1px 2px 3px rgba($black, 0.15); 74 | 75 | &:nth-child(2) { transform: rotate(2deg) } 76 | &:nth-child(3) { transform: rotate(-4deg) } 77 | &:nth-child(4) { transform: rotate(-8deg) } 78 | &:nth-child(5) { transform: rotate(5deg) } 79 | &:nth-child(6) { transform: rotate(2deg) } 80 | &:nth-child(7) { transform: rotate(-5deg) } 81 | &:nth-child(8) { transform: rotate(-5deg) } 82 | &:nth-child(9) { transform: rotate(1deg) } 83 | &:nth-child(10) { transform: rotate(-4deg) } 84 | &:nth-child(11) { transform: rotate(7deg) } 85 | &:nth-child(12) { transform: rotate(-2deg) } 86 | &:nth-child(13) { transform: rotate(1deg) } 87 | &:nth-child(14) { transform: rotate(2deg) } 88 | &:nth-child(15) { transform: rotate(-5deg) } 89 | &:nth-child(17) { transform: rotate(4deg) } 90 | } 91 | } 92 | 93 | @include mq(small) { 94 | .day-53-text { 95 | $font-size: 30; 96 | 97 | font-size: em-calc($font-size); 98 | width: em-calc(360, $font-size); 99 | } 100 | } 101 | 102 | @include mq(medium) { 103 | .day-53-text { 104 | $font-size: 30; 105 | 106 | font-size: em-calc($font-size); 107 | width: em-calc(520, $font-size); 108 | } 109 | } 110 | 111 | @include mq(mid) { 112 | .day--53 { 113 | .day-text { 114 | font-size: 1.3em; 115 | } 116 | } 117 | } 118 | 119 | @include mq(large) { 120 | .day--53 { 121 | .day-text { 122 | font-size: 1.5em; 123 | } 124 | } 125 | } -------------------------------------------------------------------------------- /assets/sass/days/_054.scss: -------------------------------------------------------------------------------- 1 | // ================================================== 2 | // Day 54 3 | // ================================================== 4 | $day-54-font: "Cutive Mono", Consolas, "Liberation Mono", Courier, monospace; 5 | $day-54-pink: #fbaad0; 6 | 7 | .day--54 { 8 | background-color: $day-54-pink; 9 | 10 | .day-text { 11 | @include mq(small) { 12 | font-size: 1.1em; 13 | } 14 | @include mq(small) { 15 | font-size: 1.2em; 16 | } 17 | font-family: $day-54-font; 18 | color: $black; 19 | line-height: 1.2; 20 | text-align: center; 21 | } 22 | 23 | .day-reference { 24 | position: relative; 25 | margin-top: em-calc(-125); 26 | margin-bottom: em-calc(125); 27 | } 28 | 29 | .day-reference-link { 30 | color: $black; 31 | } 32 | } 33 | 34 | .day-54-text { 35 | $font-size: 15; 36 | 37 | font-size: em-calc($font-size); 38 | text-align: left; 39 | background-color: $white; 40 | width: em-calc(280, $font-size); 41 | padding: em-calc(70 30 140); 42 | @include mq(small) { 43 | width: em-calc(310, $font-size); 44 | padding-left: em-calc(40); 45 | padding-right: em-calc(40); 46 | } 47 | box-sizing: border-box; 48 | position: relative; 49 | display: inline-block; 50 | filter: drop-shadow(2px 2px 0 shade($day-54-pink, 30%)); 51 | 52 | &::before, 53 | &::after { 54 | content: ""; 55 | position: absolute; 56 | height: em-calc(6); 57 | left: 0; 58 | width: 100%; 59 | background-size: em-calc(6 10); 60 | } 61 | 62 | &::before { 63 | top: em-calc(-5); 64 | background-image: linear-gradient(45deg, transparent 33.333%, $white 33.333%, $white 66.667%, transparent 66.667%), 65 | linear-gradient(-45deg, transparent 33.333%, $white 33.333%, $white 66.667%, transparent 66.667%); 66 | } 67 | 68 | &::after { 69 | bottom: em-calc(-5); 70 | background-image: linear-gradient(45deg, $white 33.333%, transparent 33.333%, transparent 66.667%, $white 66.667%), 71 | linear-gradient(-45deg, $white 33.333%, transparent 33.333%, transparent 66.667%, $white 66.667%); 72 | } 73 | } 74 | 75 | .day-54-asterisks { 76 | text-align: center; 77 | margin: em-calc(25 0); 78 | overflow: hidden; 79 | } -------------------------------------------------------------------------------- /assets/sass/days/_055.scss: -------------------------------------------------------------------------------- 1 | // ================================================== 2 | // Day 55 3 | // ================================================== 4 | $day-55-font: Chivo, sans-serif; 5 | $day-55-silver: #7d7d7d; 6 | $day-55-grey: #788691; 7 | 8 | .day--55 { 9 | background-color: $day-55-grey; 10 | 11 | .day-text { 12 | font-family: $day-55-font; 13 | text-align: center; 14 | @include font-smoothing; 15 | } 16 | 17 | .day-reference { 18 | margin-top: em-calc(40); 19 | @include mq(medium) { 20 | margin-top: em-calc(60); 21 | } 22 | } 23 | 24 | .day-reference-link { 25 | color: $white; 26 | } 27 | } 28 | 29 | .day-55-envelope { 30 | @include mq(small) { 31 | font-size: 1.1em; 32 | } 33 | @include mq(medium) { 34 | font-size: 1.2em; 35 | } 36 | width: em-calc(280); 37 | height: em-calc(210); 38 | margin-top: em-calc(110); 39 | display: inline-block; 40 | position: relative; 41 | background: $day-55-silver; 42 | background: linear-gradient(135deg, tint($day-55-silver, 70%), $day-55-silver); 43 | border-bottom-left-radius: em-calc(4); 44 | border-bottom-right-radius: em-calc(4); 45 | 46 | &::before, 47 | &::after { 48 | content: ""; 49 | position: absolute; 50 | width: 0; 51 | height: 0; 52 | border: 0 solid transparent; 53 | border-width: em-calc(105 140); 54 | } 55 | 56 | &::before { 57 | border-bottom-color: $white; 58 | top: -100%; 59 | left: 0; 60 | } 61 | 62 | &::after { 63 | border-right-color: shade($white, 6%); 64 | border-left-color: shade($white, 2%); 65 | border-bottom-color: shade($white, 4%); 66 | border-bottom-left-radius: em-calc(4); 67 | border-bottom-right-radius: em-calc(4); 68 | top: 0; 69 | left: 0; 70 | filter: drop-shadow(2px 2px 1px rgba($black, 0.25)); 71 | } 72 | } 73 | 74 | .day-55-paper { 75 | text-align: left; 76 | box-sizing: border-box; 77 | padding: em-calc(35 35 0); 78 | background: $white; 79 | background: linear-gradient(155deg, $white 40%, shade($white, 10%)); 80 | width: 85%; 81 | height: em-calc(300); 82 | margin-left: auto; 83 | margin-right: auto; 84 | margin-top: em-calc(-110); 85 | position: relative; 86 | box-shadow: 1px 1px 1px rgba($black, 0.2); 87 | } 88 | 89 | .day-55-text { 90 | color: $grey-darker; 91 | line-height: 1.1; 92 | } -------------------------------------------------------------------------------- /assets/sass/days/_056.scss: -------------------------------------------------------------------------------- 1 | // ================================================== 2 | // Day 56 3 | // ================================================== 4 | $day-56-font: "Kaushan Script", sans-serif; 5 | $day-56-red-1: #a12224; 6 | $day-56-red-2: #7a2828; 7 | 8 | .day--56 { 9 | background-color: $day-56-red-1; 10 | background: linear-gradient(156deg, $day-56-red-1, $day-56-red-2 80%); 11 | 12 | .day-scripture { 13 | padding-top: 1em; 14 | padding-bottom: 1em; 15 | @include mq(small) { 16 | padding-top: 2em; 17 | padding-bottom: 2em; 18 | } 19 | @include mq(medium) { 20 | padding-top: 3em; 21 | padding-bottom: 3em; 22 | } 23 | @include mq(mid) { 24 | padding-top: 4em; 25 | padding-bottom: 4em; 26 | } 27 | @include mq(large) { 28 | padding-top: 5em; 29 | padding-bottom: 5em; 30 | } 31 | } 32 | 33 | .day-text { 34 | font-family: $day-56-font; 35 | color: $white; 36 | text-align: center; 37 | width: em-calc(280); 38 | 39 | @include mq(small) { 40 | width: em-calc(420); 41 | } 42 | @include mq(medium) { 43 | width: em-calc(520); 44 | } 45 | @include mq(mid) { 46 | width: em-calc(670); 47 | } 48 | margin-left: auto; 49 | margin-right: auto; 50 | text-align: right; 51 | @include font-smoothing; 52 | } 53 | 54 | .day-reference { 55 | margin-top: 1em; 56 | @include mq(medium) { 57 | margin-top: 1.5em; 58 | } 59 | @include mq(large) { 60 | margin-top: 2em; 61 | } 62 | } 63 | 64 | .day-reference-link { 65 | color: $grey-darkest; 66 | 67 | @include mq(medium) { 68 | font-size: em-calc(17); 69 | } 70 | @include mq(mid) { 71 | font-size: em-calc(20); 72 | } 73 | @include mq(large) { 74 | font-size: em-calc(23); 75 | } 76 | } 77 | } 78 | 79 | .day-56-text { 80 | font-size: em-calc(23); 81 | line-height: 1.1; 82 | display: block; 83 | 84 | @include mq(small) { 85 | font-size: em-calc(35); 86 | } 87 | 88 | @include mq(medium) { 89 | font-size: em-calc(43); 90 | } 91 | 92 | @include mq(mid) { 93 | font-size: em-calc(56); 94 | } 95 | } -------------------------------------------------------------------------------- /assets/sass/days/_057.scss: -------------------------------------------------------------------------------- 1 | // ================================================== 2 | // Day 57 3 | // ================================================== 4 | $day-57-font : Rubik, Helvetica, Arial, sans-serif; 5 | $day-57-teal : #9be8cb; 6 | $day-57-teal-dark: #228291; 7 | $day-57-blue : #6796e5; 8 | 9 | .day--57 { 10 | background-color: $day-57-teal; 11 | 12 | .day-scripture { 13 | padding-top: 1em; 14 | padding-bottom: 1em; 15 | @include mq(small) { 16 | padding-top: 2em; 17 | padding-bottom: 2em; 18 | } 19 | } 20 | 21 | .day-text { 22 | font-family: $day-57-font; 23 | position: relative; 24 | } 25 | 26 | .day-reference { 27 | margin-top: 2em; 28 | text-align: center; 29 | } 30 | 31 | .day-reference-link { 32 | color: $day-57-blue; 33 | margin-left: em-calc(40); 34 | @include mq(small) { 35 | margin-left: em-calc(90); 36 | } 37 | @include mq(medium) { 38 | margin-left: em-calc(130); 39 | } 40 | 41 | &:hover { 42 | color: $day-57-teal-dark; 43 | text-decoration: none; 44 | } 45 | } 46 | } 47 | 48 | .day-57-first, 49 | .day-57-next { 50 | line-height: 1.2; 51 | color: $white; 52 | border: 6px solid black; 53 | border-radius: 100%; 54 | width: em-calc(200); 55 | height: em-calc(200); 56 | margin-left: auto; 57 | margin-right: auto; 58 | position: relative; 59 | display: table; 60 | } 61 | 62 | .day-57-first { 63 | border-color: $day-57-blue; 64 | border-color: rgba($day-57-blue, 0.5); 65 | left: em-calc(-70); 66 | } 67 | 68 | .day-57-next { 69 | border-color: $day-57-teal-dark; 70 | border-color: rgba($day-57-teal-dark, 0.5); 71 | left: em-calc(20); 72 | top: em-calc(-75); 73 | margin-bottom: em-calc(-75); 74 | } 75 | 76 | .day-57-text { 77 | text-align: center; 78 | padding: em-calc(30); 79 | display: table-cell; 80 | vertical-align: middle; 81 | } 82 | 83 | @include mq(small) { 84 | .day-57-first, 85 | .day-57-next { 86 | font-size: 1.1em; 87 | } 88 | 89 | .day-57-first { 90 | left: em-calc(-40); 91 | } 92 | 93 | .day-57-next { 94 | left: em-calc(40); 95 | } 96 | } 97 | 98 | @include mq(medium) { 99 | .day-57-first, 100 | .day-57-next { 101 | font-size: 1.2em; 102 | } 103 | 104 | .day-57-first { 105 | left: em-calc(-50); 106 | } 107 | 108 | .day-57-next { 109 | left: em-calc(50); 110 | } 111 | } 112 | 113 | @include mq(mid) { 114 | .day-57-first, 115 | .day-57-next { 116 | font-size: 1.3em; 117 | width: em-calc(225); 118 | height: em-calc(225); 119 | } 120 | 121 | .day-57-text { 122 | padding: em-calc(42); 123 | } 124 | } -------------------------------------------------------------------------------- /assets/sass/days/_058.scss: -------------------------------------------------------------------------------- 1 | // ================================================== 2 | // Day 58 3 | // ================================================== 4 | $day-58-font : Vollkorn, "Times New Roman", Times, serif; 5 | $day-58-cream: #e7e1d9; 6 | $day-58-red : #d01d1f; 7 | 8 | .day--58 { 9 | background-color: $day-58-cream; 10 | 11 | .day-scripture { 12 | padding-top: 1em; 13 | padding-bottom: 1em; 14 | @include mq(small) { 15 | padding-top: 2em; 16 | padding-bottom: 2em; 17 | } 18 | } 19 | 20 | .day-text { 21 | font-family: $day-58-font; 22 | color: shade($grey-darker, 15%); 23 | font-style: italic; 24 | text-align: center; 25 | } 26 | 27 | .day-reference { 28 | margin-top: 2em; 29 | } 30 | 31 | .day-reference-link { 32 | color: $day-58-red; 33 | @include mq(small) { 34 | font-size: em-calc(17); 35 | } 36 | @include mq(medium) { 37 | font-size: em-calc(18); 38 | } 39 | 40 | &::before { 41 | content: "—"; 42 | } 43 | } 44 | } 45 | 46 | .day-58-text { 47 | $font-size: 18; 48 | 49 | font-size: em-calc($font-size); 50 | line-height: 1.3; 51 | text-align: left; 52 | width: em-calc(280, $font-size); 53 | display: inline-block; 54 | 55 | &::before { 56 | content: "“ "; 57 | } 58 | 59 | &::after { 60 | content: " ”"; 61 | } 62 | } 63 | 64 | @include mq(small) { 65 | .day-58-text { 66 | $font-size: 19; 67 | 68 | font-size: em-calc($font-size); 69 | width: em-calc(324, $font-size); 70 | } 71 | } 72 | 73 | @include mq(medium) { 74 | .day-58-text { 75 | $font-size: 20; 76 | 77 | font-size: em-calc($font-size); 78 | } 79 | } -------------------------------------------------------------------------------- /assets/sass/days/_059.scss: -------------------------------------------------------------------------------- 1 | // ================================================== 2 | // Day 59 3 | // ================================================== 4 | $day-59-font: "Titillium Web", Helvetica, sans-serif; 5 | 6 | .day--59 { 7 | background: linear-gradient(to bottom, $grey-lighter, $white); 8 | position: relative; 9 | 10 | .day-scripture { 11 | padding-top: 1em; 12 | padding-bottom: 1em; 13 | @include mq(small) { 14 | padding-top: 2.5em; 15 | padding-bottom: 2.5em; 16 | } 17 | @include mq(medium) { 18 | padding-top: 4em; 19 | padding-bottom: 4em; 20 | } 21 | @include mq(mid) { 22 | padding-top: 5.5em; 23 | padding-bottom: 5.5em; 24 | } 25 | @include mq(large) { 26 | padding-top: 7em; 27 | padding-bottom: 7em; 28 | } 29 | } 30 | 31 | .day-text { 32 | font-family: $day-59-font; 33 | font-weight: 900; 34 | text-transform: uppercase; 35 | @include font-smoothing; 36 | } 37 | 38 | .day-reference { 39 | width: em-calc(274); 40 | @include mq(small) { 41 | width: em-calc(383); 42 | } 43 | @include mq(medium) { 44 | width: em-calc(492); 45 | } 46 | @include mq(mid) { 47 | width: em-calc(600); 48 | } 49 | @include mq(large) { 50 | width: em-calc(710); 51 | } 52 | margin-left: auto; 53 | margin-right: auto; 54 | text-align: right; 55 | position: relative; 56 | } 57 | 58 | .day-reference-link { 59 | color: $white; 60 | } 61 | } 62 | 63 | .day-59-overlay { 64 | background: black; 65 | background: linear-gradient(-45deg, $black, $grey); 66 | width: 150%; 67 | height: 300%; 68 | position: absolute; 69 | top: -100%; 70 | left: -25%; 71 | transform: rotate(45deg) translateY(-50%); 72 | overflow: hidden; 73 | } 74 | 75 | $day-59-font-size: 50; 76 | 77 | .day-59-first, 78 | .day-59-next { 79 | font-size: em-calc($day-59-font-size); 80 | } 81 | 82 | .day-59-first { 83 | color: $black; 84 | text-align: center; 85 | display: block; 86 | } 87 | 88 | .day-59-next { 89 | text-align: center; 90 | color: $white; 91 | transform: rotate(-45deg) translateY(50%); 92 | transform: rotate(-45deg) translateY(calc(50% - #{em-calc(25, $day-59-font-size)})); 93 | display: inline-block; 94 | left: 50%; 95 | top: 100%; 96 | width: em-calc(284, $day-59-font-size); 97 | margin-top: em-calc(-28, $day-59-font-size); 98 | margin-left: em-calc(-146, $day-59-font-size); 99 | position: relative; 100 | } 101 | 102 | @include mq(small) { 103 | $day-59-font-size: 70; 104 | 105 | .day-59-first, 106 | .day-59-next { 107 | font-size: em-calc($day-59-font-size); 108 | } 109 | } 110 | 111 | @include mq(medium) { 112 | $day-59-font-size: 90; 113 | 114 | .day-59-first, 115 | .day-59-next { 116 | font-size: em-calc($day-59-font-size); 117 | } 118 | 119 | .day-59-next { 120 | margin-top: em-calc(-50, $day-59-font-size); 121 | margin-left: em-calc(-261, $day-59-font-size); 122 | } 123 | } 124 | 125 | @include mq(mid) { 126 | $day-59-font-size: 110; 127 | 128 | .day-59-first, 129 | .day-59-next { 130 | font-size: em-calc($day-59-font-size); 131 | } 132 | 133 | .day-59-next { 134 | margin-top: em-calc(-59, $day-59-font-size); 135 | margin-left: em-calc(-318, $day-59-font-size); 136 | } 137 | } 138 | 139 | @include mq(large) { 140 | $day-59-font-size: 130; 141 | 142 | .day-59-first, 143 | .day-59-next { 144 | font-size: em-calc($day-59-font-size); 145 | } 146 | } -------------------------------------------------------------------------------- /assets/sass/days/_060.scss: -------------------------------------------------------------------------------- 1 | // ================================================== 2 | // Day 60 3 | // ================================================== 4 | $day-60-font : Megrim, sans-serif; 5 | $day-60-purple: #3c2573; 6 | $day-60-pink : #f33375; 7 | $day-60-red : #d20d00; 8 | $day-60-yellow: #f9cb27; 9 | $day-60-green : #029f4c; 10 | $day-60-teal : #00678d; 11 | $day-60-blue : #04659a; 12 | 13 | .day--60 { 14 | background-color: $black; 15 | position: relative; 16 | 17 | .day-scripture { 18 | padding-top: 1em; 19 | padding-bottom: 1em; 20 | @include mq(small) { 21 | padding-top: 2em; 22 | padding-bottom: 2em; 23 | } 24 | @include mq(medium) { 25 | padding-top: 3em; 26 | padding-bottom: 3em; 27 | } 28 | @include mq(mid) { 29 | padding-top: 4em; 30 | padding-bottom: 4em; 31 | } 32 | @include mq(large) { 33 | padding-top: 5em; 34 | padding-bottom: 5em; 35 | } 36 | } 37 | 38 | .day-number, 39 | .day-reference, 40 | .day-font { 41 | position: relative; 42 | } 43 | 44 | .day-number { 45 | color: rgba($white, 0.2); 46 | border-color: rgba($white, 0.2); 47 | z-index: 2; 48 | } 49 | 50 | .day-text { 51 | font-family: $day-60-font; 52 | color: $white; 53 | text-transform: uppercase; 54 | text-align: center; 55 | } 56 | 57 | .day-reference { 58 | margin-top: 2em; 59 | @include mq(mid) { 60 | margin-top: 3em; 61 | } 62 | position: relative; 63 | } 64 | 65 | .day-reference-link { 66 | @include mq(small) { 67 | font-size: em-calc(17); 68 | } 69 | @include mq(medium) { 70 | font-size: em-calc(18); 71 | } 72 | @include mq(mid) { 73 | font-size: em-calc(19); 74 | } 75 | color: rgba($white, 0.6); 76 | } 77 | 78 | .day-font-link { 79 | color: rgba($white, 0.2); 80 | } 81 | } 82 | 83 | .day-60-color { 84 | width: 60%; 85 | height: 100%; 86 | position: absolute; 87 | top: 0; 88 | } 89 | 90 | .day-60-color--1 { 91 | left: -15%; 92 | background-image: radial-gradient(ellipse at top, rgba($day-60-purple, 0.6), transparent 80%); 93 | } 94 | 95 | .day-60-color--2 { 96 | left: 0%; 97 | background-image: radial-gradient(ellipse at top, rgba($day-60-pink, 0.5), transparent 70%); 98 | } 99 | 100 | .day-60-color--3 { 101 | left: 15%; 102 | background-image: radial-gradient(ellipse at top, rgba($day-60-red, 0.6), transparent 60%); 103 | } 104 | 105 | .day-60-color--4 { 106 | left: 30%; 107 | background-image: radial-gradient(ellipse at top, rgba($day-60-yellow, 0.6), transparent 70%); 108 | } 109 | 110 | .day-60-color--5 { 111 | left: 45%; 112 | background-image: radial-gradient(ellipse at top, rgba($day-60-green, 0.6), transparent 60%); 113 | } 114 | 115 | .day-60-color--6 { 116 | left: 60%; 117 | background-image: radial-gradient(ellipse at top, rgba($day-60-teal, 0.6), transparent 70%); 118 | } 119 | 120 | .day-60-color--7 { 121 | left: 75%; 122 | background-image: radial-gradient(ellipse at top, rgba($day-60-blue, 0.6), transparent 60%); 123 | } 124 | 125 | .day-60-text { 126 | font-size: em-calc(20); 127 | line-height: 1.2; 128 | position: relative; 129 | max-width: em-calc(320); 130 | display: inline-block; 131 | } 132 | 133 | @include mq(medium) { 134 | .day-60-text { 135 | font-size: em-calc(26); 136 | } 137 | } 138 | 139 | @include mq(mid) { 140 | .day-60-text { 141 | font-size: em-calc(32); 142 | } 143 | } 144 | 145 | @include mq(large) { 146 | .day-60-text { 147 | font-size: em-calc(38); 148 | } 149 | } -------------------------------------------------------------------------------- /assets/sass/days/_061.scss: -------------------------------------------------------------------------------- 1 | // ================================================== 2 | // Day 61 3 | // ================================================== 4 | $day-61-font: "Unica One", sans-serif; 5 | $day-61-grey: #37474f; 6 | 7 | .day--61 { 8 | background-color: $day-61-grey; 9 | 10 | .day-scripture { 11 | padding-top: 1em; 12 | padding-bottom: 1em; 13 | @include mq(small) { 14 | padding-top: 2em; 15 | padding-bottom: 2em; 16 | } 17 | @include mq(medium) { 18 | padding-top: 3em; 19 | padding-bottom: 3em; 20 | } 21 | @include mq(mid) { 22 | padding-top: 4em; 23 | padding-bottom: 4em; 24 | } 25 | } 26 | 27 | .day-text { 28 | font-family: $day-61-font; 29 | text-align: center; 30 | @include font-smoothing; 31 | } 32 | 33 | .day-reference { 34 | margin-top: 2em; 35 | @include mq(mid) { 36 | margin-top: 3em; 37 | } 38 | } 39 | 40 | .day-reference-link { 41 | @include mq(small) { 42 | font-size: em-calc(17); 43 | } 44 | @include mq(medium) { 45 | font-size: em-calc(18); 46 | } 47 | color: $white; 48 | } 49 | } 50 | 51 | .day-61-container { 52 | @include mq(small) { 53 | font-size: 1.3em; 54 | } 55 | @include mq(medium) { 56 | font-size: 1.5em; 57 | } 58 | @include mq(mid) { 59 | font-size: 1.7em; 60 | } 61 | @include mq(large) { 62 | font-size: 1.9em; 63 | } 64 | width: em-calc(280); 65 | display: inline-block; 66 | position: relative; 67 | } 68 | 69 | $day-61-text-height: 24; 70 | $day-61-font-size: 25; 71 | 72 | .day-61-text-wrap { 73 | font-size: em-calc($day-61-font-size); 74 | color: $white; 75 | line-height: 0.8; 76 | width: 100%; 77 | height: em-calc($day-61-text-height, $day-61-font-size); 78 | position: absolute; 79 | left: 0; 80 | overflow: hidden; 81 | } 82 | 83 | .day-61-text { 84 | display: block; 85 | position: relative; 86 | } 87 | 88 | .day-61-text-wrap--1 { 89 | position: relative; 90 | overflow: inherit; 91 | height: auto; 92 | } 93 | 94 | .day-61-text-wrap--2 { 95 | top: em-calc($day-61-text-height, $day-61-font-size); 96 | 97 | .day-61-text { 98 | top: em-calc($day-61-text-height * -1, $day-61-font-size); 99 | } 100 | } 101 | 102 | .day-61-text-wrap--3 { 103 | top: em-calc($day-61-text-height * 2, $day-61-font-size); 104 | 105 | .day-61-text { 106 | top: em-calc($day-61-text-height * 2 * -1, $day-61-font-size); 107 | } 108 | } 109 | 110 | .day-61-text-wrap--4 { 111 | top: em-calc($day-61-text-height * 3, $day-61-font-size); 112 | 113 | .day-61-text { 114 | top: em-calc($day-61-text-height * 3 * -1, $day-61-font-size); 115 | } 116 | } 117 | 118 | .day-61-text-wrap--2, 119 | .day-61-text-wrap--4 { 120 | .day-61-text { 121 | background-color: $white; 122 | color: $day-61-grey; 123 | } 124 | } -------------------------------------------------------------------------------- /assets/sass/days/_062.scss: -------------------------------------------------------------------------------- 1 | // ================================================== 2 | // Day 62 3 | // ================================================== 4 | $day-62-font: Catamaran, sans-serif; 5 | 6 | .day--62 { 7 | .day-scripture { 8 | padding-top: 2em; 9 | padding-bottom: 2em; 10 | @include mq(small) { 11 | padding-top: 3em; 12 | padding-bottom: 3em; 13 | } 14 | @include mq(medium) { 15 | padding-top: 4em; 16 | padding-bottom: 4em; 17 | } 18 | @include mq(mid) { 19 | padding-top: 5em; 20 | padding-bottom: 5em; 21 | } 22 | } 23 | 24 | .day-text { 25 | font-family: $day-62-font; 26 | font-weight: 600; 27 | color: $black; 28 | text-align: center; 29 | @include font-smoothing; 30 | } 31 | 32 | .day-reference { 33 | margin-top: 3em; 34 | @include mq(medium) { 35 | margin-top: 4em; 36 | } 37 | } 38 | 39 | .day-reference-link { 40 | color: $black; 41 | letter-spacing: 0.75em; 42 | @include mq(small) { 43 | font-size: em-calc(17); 44 | } 45 | @include mq(medium) { 46 | font-size: em-calc(18); 47 | letter-spacing: 1em; 48 | } 49 | @include mq(mid) { 50 | font-size: em-calc(19); 51 | letter-spacing: 1.5em; 52 | } 53 | } 54 | } 55 | 56 | .day-62-text { 57 | $font-size: 16; 58 | 59 | font-size: em-calc($font-size); 60 | line-height: 2; 61 | letter-spacing: 0.75em; 62 | width: em-calc(250, $font-size); 63 | display: inline-block; 64 | } 65 | 66 | @include mq(small) { 67 | .day-62-text { 68 | $font-size: 26; 69 | 70 | font-size: em-calc($font-size); 71 | letter-spacing: 0.75em; 72 | width: em-calc(410, $font-size); 73 | } 74 | } 75 | 76 | @include mq(medium) { 77 | .day-62-text { 78 | $font-size: 27; 79 | 80 | font-size: em-calc($font-size); 81 | letter-spacing: 1em; 82 | width: em-calc(520, $font-size); 83 | } 84 | } 85 | 86 | @include mq(mid) { 87 | .day-62-text { 88 | $font-size: 27; 89 | 90 | font-size: em-calc($font-size); 91 | letter-spacing: 1.5em; 92 | width: em-calc(690, $font-size); 93 | } 94 | } -------------------------------------------------------------------------------- /assets/sass/days/_063.scss: -------------------------------------------------------------------------------- 1 | // ================================================== 2 | // Day 63 3 | // ================================================== 4 | $day-63-font: UnifrakturMaguntia, serif; 5 | $day-63-tan : #dec7a8; 6 | $day-63-grey: #2b271e; 7 | 8 | .day--63 { 9 | background-color: $day-63-tan; 10 | 11 | .day-scripture { 12 | padding-top: 2em; 13 | padding-bottom: 2em; 14 | @include mq(small) { 15 | padding-top: 3em; 16 | padding-bottom: 3em; 17 | } 18 | @include mq(medium) { 19 | padding-top: 4em; 20 | padding-bottom: 4em; 21 | } 22 | } 23 | 24 | .day-text { 25 | font-family: $day-63-font; 26 | color: $day-63-grey; 27 | text-align: center; 28 | } 29 | 30 | .day-reference { 31 | margin-top: 2em; 32 | @include mq(medium) { 33 | margin-top: 2em; 34 | } 35 | } 36 | 37 | .day-reference-link { 38 | color: $day-63-grey; 39 | @include mq(small) { 40 | font-size: em-calc(17); 41 | } 42 | @include mq(medium) { 43 | font-size: em-calc(18); 44 | } 45 | @include mq(mid) { 46 | font-size: em-calc(19); 47 | } 48 | } 49 | } 50 | 51 | .day-63-text-container { 52 | padding: 1em; 53 | border: 2px solid $day-63-grey; 54 | display: inline-block; 55 | } 56 | 57 | .day-63-text { 58 | text-align: left; 59 | width: em-calc(200); 60 | padding-left: 3.3em; 61 | display: block; 62 | position: relative; 63 | 64 | em { 65 | font-size: 3.3em; 66 | position: absolute; 67 | top: 0; 68 | left: 0; 69 | } 70 | } 71 | 72 | @include mq(small) { 73 | .day-63-text-container { 74 | padding: 1.5em; 75 | } 76 | 77 | .day-63-text { 78 | $font-size: 20; 79 | 80 | font-size: em-calc($font-size); 81 | width: em-calc(250, $font-size); 82 | } 83 | } 84 | 85 | @include mq(medium) { 86 | .day-63-text-container { 87 | font-size: 1.3em; 88 | padding: 2em; 89 | border-width: 3px; 90 | } 91 | } 92 | 93 | @include mq(mid) { 94 | .day-63-text-container { 95 | font-size: 1.5em; 96 | border-width: 4px; 97 | } 98 | } -------------------------------------------------------------------------------- /assets/sass/days/_064.scss: -------------------------------------------------------------------------------- 1 | // ================================================== 2 | // Day 64 3 | // ================================================== 4 | $day-64-font : "Gravitas One", serif; 5 | $day-64-blue : #2e8fc6; 6 | $day-64-teal : #56cfd2; 7 | $day-64-yellow: #f3ff92; 8 | 9 | .day--64 { 10 | background-color: $day-64-blue; 11 | background: linear-gradient(30deg, $day-64-blue, $day-64-teal); 12 | 13 | .day-scripture { 14 | padding-top: 1em; 15 | padding-bottom: 1em; 16 | @include mq(small) { 17 | padding-top: 2em; 18 | padding-bottom: 2em; 19 | } 20 | @include mq(medium) { 21 | padding-top: 3em; 22 | padding-bottom: 3em; 23 | } 24 | } 25 | 26 | .day-text { 27 | font-family: $day-64-font; 28 | text-align: center; 29 | text-transform: uppercase; 30 | @include font-smoothing; 31 | } 32 | 33 | .day-reference { 34 | margin-top: 0.3em; 35 | } 36 | 37 | .day-reference-link { 38 | letter-spacing: 0.32em; 39 | color: $day-64-teal; 40 | padding-left: 0.35em; 41 | } 42 | } 43 | 44 | .day-64-text { 45 | font-size: em-calc(50); 46 | color: $day-64-yellow; 47 | display: block; 48 | } 49 | 50 | .day-64-text--i-am { 51 | letter-spacing: 0.26em; 52 | padding-left: 0.28em; 53 | } 54 | 55 | .day-64-text + .day-64-text--i-am { 56 | transform: scale(-1, 1) rotate(180deg); 57 | margin-top: -0.1em; 58 | } 59 | 60 | @include mq(small) { 61 | .day--64 { 62 | .day-text { 63 | font-size: 1.4em; 64 | } 65 | } 66 | } 67 | 68 | @include mq(medium) { 69 | .day--64 { 70 | .day-text { 71 | font-size: 1.8em; 72 | } 73 | } 74 | } 75 | 76 | @include mq(mid) { 77 | .day--64 { 78 | .day-text { 79 | font-size: 2em; 80 | } 81 | } 82 | } 83 | 84 | @include mq(large) { 85 | .day--64 { 86 | .day-text { 87 | font-size: 2.25em; 88 | } 89 | } 90 | } -------------------------------------------------------------------------------- /assets/sass/days/_065.scss: -------------------------------------------------------------------------------- 1 | // ================================================== 2 | // Day 65 3 | // ================================================== 4 | $day-65-font : Raleway, sans-serif; 5 | $day-65-blue-darkest: #06040a; 6 | $day-65-blue-dark : #0b0e17; 7 | $day-65-blue-light : #2e2d50; 8 | 9 | .day--65 { 10 | background-color: $day-65-blue-dark; 11 | background: radial-gradient(at bottom right, $day-65-blue-light, $day-65-blue-dark 80%, $day-65-blue-darkest); 12 | position: relative; 13 | 14 | .day-scripture { 15 | padding-top: 5em; 16 | @include mq(small) { 17 | padding-top: 7em; 18 | padding-bottom: 1em; 19 | } 20 | @include mq(medium) { 21 | padding-top: 9em; 22 | padding-bottom: 2em; 23 | } 24 | @include mq(large) { 25 | padding-top: 11em; 26 | padding-bottom: 3em; 27 | } 28 | } 29 | 30 | .day-number { 31 | color: rgba($white, 0.2); 32 | border-color: rgba($white, 0.2); 33 | } 34 | 35 | .day-text { 36 | font-family: $day-65-font; 37 | font-weight: 200; 38 | color: $white; 39 | text-align: center; 40 | @include font-smoothing; 41 | } 42 | 43 | .day-reference { 44 | margin-top: 1em; 45 | @include mq(medium) { 46 | margin-top: 1.5em; 47 | } 48 | transform: rotate(-2deg); 49 | backface-visibility: hidden; 50 | } 51 | 52 | .day-reference-link { 53 | color: rgba($white, 0.7); 54 | text-shadow: 0 0 1px rgba($day-65-blue-dark, 0.9), 55 | 0 0 3px rgba($day-65-blue-light, 0.4), 56 | 0 0 4px rgba($day-65-blue-light, 0.3), 57 | 0 0 5px rgba($day-65-blue-light, 0.2), 58 | 0 0 6px rgba($day-65-blue-light, 0.1); 59 | } 60 | 61 | .day-font-link { 62 | color: rgba($white, 0.1); 63 | } 64 | } 65 | 66 | .day-65-star { 67 | width: em-calc(7); 68 | height: em-calc(7); 69 | display: block; 70 | position: absolute; 71 | top: 10%; 72 | left: 35%; 73 | background-color: rgba($white, 0.6); 74 | border-radius: 100%; 75 | filter: blur(4px); 76 | animation: day-65-star 7s infinite; 77 | } 78 | 79 | @keyframes day-65-star { 80 | 0%, 100% { 81 | background-color: $white; 82 | filter: blur(4px); 83 | } 84 | 50% { 85 | background-color: rgba($white, 0.6); 86 | filter: blur(2px); 87 | } 88 | } 89 | 90 | .day-65-text { 91 | $font-size: 20; 92 | 93 | font-size: em-calc($font-size); 94 | line-height: 1.3; 95 | max-width: em-calc(350, $font-size); 96 | display: inline-block; 97 | transform: rotate(-2deg); 98 | backface-visibility: hidden; 99 | text-shadow: 0 0 1px rgba($day-65-blue-dark, 0.9), 100 | 0 0 2px rgba($white, 0.4), 101 | 0 0 3px rgba($white, 0.3), 102 | 0 0 4px rgba($white, 0.2), 103 | 0 0 5px rgba($white, 0.1); 104 | } 105 | 106 | @include mq(medium) { 107 | .day-65-text { 108 | $font-size: 25; 109 | 110 | font-size: em-calc($font-size); 111 | max-width: em-calc(420, $font-size); 112 | max-width: em-calc(580, $font-size); 113 | } 114 | } 115 | 116 | @include mq(large) { 117 | .day-65-text { 118 | $font-size: 30; 119 | 120 | font-size: em-calc($font-size); 121 | max-width: em-calc(700, $font-size); 122 | } 123 | } 124 | 125 | @include mq(xlarge) { 126 | .day-65-text { 127 | $font-size: 35; 128 | 129 | font-size: em-calc($font-size); 130 | max-width: em-calc(800, $font-size); 131 | } 132 | } -------------------------------------------------------------------------------- /assets/sass/days/_066.scss: -------------------------------------------------------------------------------- 1 | // ================================================== 2 | // Day 66 3 | // ================================================== 4 | $day-66-font: Satisfy, serif; 5 | $day-66-grey: #dedede; 6 | 7 | .day--66 { 8 | background-color: $day-66-grey; 9 | 10 | .day-scripture { 11 | padding-top: 2em; 12 | padding-bottom: 2em; 13 | @include mq(small) { 14 | padding-top: 3em; 15 | padding-bottom: 3em; 16 | } 17 | @include mq(medium) { 18 | padding-top: 4em; 19 | padding-bottom: 4em; 20 | } 21 | @include mq(large) { 22 | padding-top: 5em; 23 | padding-bottom: 5em; 24 | } 25 | } 26 | 27 | .day-text { 28 | font-family: $day-66-font; 29 | line-height: 1.1; 30 | text-align: center; 31 | @include font-smoothing; 32 | } 33 | 34 | .day-reference { 35 | margin-top: 2em; 36 | @include mq(medium) { 37 | margin-top: 3em; 38 | } 39 | } 40 | 41 | .day-reference-link { 42 | font-size: em-calc(17); 43 | color: $grey-darkest; 44 | @include mq(small) { 45 | font-size: em-calc(18); 46 | } 47 | @include mq(medium) { 48 | font-size: em-calc(19); 49 | } 50 | } 51 | } 52 | 53 | .day-66-text { 54 | $font-size: 25; 55 | 56 | font-size: em-calc($font-size); 57 | width: em-calc(200, $font-size); 58 | display: inline-block; 59 | } 60 | 61 | @include mq(small) { 62 | .day-66-text { 63 | $font-size: 30; 64 | 65 | font-size: em-calc($font-size); 66 | width: em-calc(240, $font-size); 67 | } 68 | } 69 | 70 | @include mq(medium) { 71 | .day-66-text { 72 | $font-size: 35; 73 | 74 | font-size: em-calc($font-size); 75 | width: em-calc(280, $font-size); 76 | } 77 | } -------------------------------------------------------------------------------- /assets/sass/days/_067.scss: -------------------------------------------------------------------------------- 1 | // ================================================== 2 | // Day 67 3 | // ================================================== 4 | $day-67-serif: "Julius Sans One", serif; 5 | $day-67-slab : "Josefin Slab", serif; 6 | $day-67-teal : #0b8793; 7 | $day-67-green: #43cea2; 8 | 9 | .day--67 { 10 | background-color: $day-67-teal; 11 | background: linear-gradient(to right, $day-67-teal 5%, $day-67-green 95%); 12 | 13 | .day-scripture { 14 | padding-bottom: 3em; 15 | } 16 | 17 | .day-text { 18 | font-family: $day-67-slab; 19 | color: $white; 20 | text-shadow: 2px 2px 0 rgba($day-67-teal, 0.7); 21 | text-align: center; 22 | text-transform: uppercase; 23 | } 24 | 25 | .day-reference-link { 26 | letter-spacing: 0.5em; 27 | color: tint($day-67-green, 30%); 28 | 29 | &::before { 30 | content: "\00a0"; 31 | } 32 | } 33 | 34 | .day-font { 35 | color: $grey-lighter; 36 | } 37 | } 38 | 39 | .day-67-text { 40 | line-height: 1.5; 41 | letter-spacing: 0.25em; 42 | margin-bottom: 1em; 43 | width: em-calc(290); 44 | @include font-smoothing; 45 | display: inline-block; 46 | 47 | strong { 48 | font-size: 1.5em; 49 | font-family: $day-67-serif; 50 | letter-spacing: 0.1em; 51 | margin-top: 0.75em; 52 | margin-bottom: 0.75em; 53 | display: block; 54 | } 55 | } 56 | 57 | .day-67-hr { 58 | border: 0; 59 | border-top: 2px solid $white; 60 | width: em-calc(200); 61 | margin: 4em auto; 62 | box-shadow: 2px 2px 0 rgba($day-67-teal, 0.7); 63 | } 64 | 65 | @include mq(small) { 66 | .day-67-text { 67 | font-size: 1.2em; 68 | } 69 | } 70 | 71 | @include mq(medium) { 72 | .day-67-text { 73 | font-size: 1.2em; 74 | letter-spacing: 0.3em; 75 | margin-bottom: 1.25em; 76 | width: auto; 77 | 78 | strong { 79 | font-size: 2em; 80 | letter-spacing: 0.15em; 81 | margin-top: 0.5em; 82 | margin-bottom: 0.5em; 83 | } 84 | } 85 | } 86 | 87 | @include mq(mid) { 88 | .day-67-text { 89 | letter-spacing: 0.4em; 90 | margin-bottom: 1.5em; 91 | 92 | strong { 93 | font-size: 3em; 94 | letter-spacing: 0.1em; 95 | margin-top: 0.3em; 96 | margin-bottom: 0.3em; 97 | } 98 | } 99 | } -------------------------------------------------------------------------------- /assets/sass/days/_068.scss: -------------------------------------------------------------------------------- 1 | // ================================================== 2 | // Day 68 3 | // ================================================== 4 | $day-68-font: Tinos, serif; 5 | $day-68-tan : #d0ccc0; 6 | $day-68-blue: #1037a3; 7 | 8 | .day--68 { 9 | background-color: $day-68-tan; 10 | 11 | .day-scripture { 12 | padding-top: 1em; 13 | padding-bottom: 1em; 14 | @include mq(small) { 15 | padding-top: 2em; 16 | padding-bottom: 2em; 17 | } 18 | } 19 | 20 | .day-text { 21 | font-family: $day-68-font; 22 | font-size: 1.05em; 23 | @include mq(small) { 24 | font-size: 1.1em; 25 | } 26 | @include mq(medium) { 27 | font-size: 1.15em; 28 | } 29 | text-align: center; 30 | } 31 | 32 | .day-reference { 33 | margin-top: 1.25em; 34 | } 35 | 36 | .day-reference-link { 37 | color: $day-68-tan; 38 | background-color: $day-68-blue; 39 | background: linear-gradient(25deg, tint($day-68-blue, 10%), $day-68-blue); 40 | padding: 0.25em 0.5em; 41 | display: inline-block; 42 | } 43 | } 44 | 45 | .day-68-text { 46 | $font-size: 16; 47 | 48 | font-size: em-calc($font-size); 49 | color: $day-68-blue; 50 | line-height: 1.3; 51 | text-align: justify; 52 | width: em-calc(250, $font-size); 53 | display: inline-block; 54 | } 55 | 56 | .day-68-title { 57 | font-size: 5em; 58 | font-weight: 700; 59 | height: 1em; 60 | line-height: 0.9; 61 | text-align: center; 62 | color: $day-68-tan; 63 | background-color: $day-68-blue; 64 | background: linear-gradient(25deg, tint($day-68-blue, 10%), $day-68-blue); 65 | margin-bottom: 0.2em; 66 | display: block; 67 | } -------------------------------------------------------------------------------- /assets/sass/days/_069.scss: -------------------------------------------------------------------------------- 1 | // ================================================== 2 | // Day 69 3 | // ================================================== 4 | $day-69-font : Abel, sans-serif; 5 | $day-69-grey-light: #5e7c88; 6 | $day-69-grey : #4b5f6d; 7 | $day-69-grey-dark : #363f45; 8 | $day-69-yellow : #feb41c; 9 | 10 | .day--69 { 11 | background-color: $day-69-grey; 12 | background: linear-gradient(130deg, $day-69-grey-dark, $day-69-grey); 13 | 14 | .day-scripture { 15 | padding-top: 1em; 16 | padding-bottom: 1em; 17 | @include mq(small) { 18 | padding-top: 2em; 19 | padding-bottom: 2em; 20 | } 21 | @include mq(medium) { 22 | padding-top: 3em; 23 | padding-bottom: 3em; 24 | } 25 | } 26 | 27 | .day-text { 28 | font-family: $day-69-font; 29 | color: $day-69-yellow; 30 | @include font-smoothing; 31 | } 32 | 33 | .day-reference { 34 | margin-top: 1em; 35 | @include mq(medium) { 36 | margin-top: 1.5em; 37 | } 38 | @include mq(mid) { 39 | margin-top: 2em; 40 | } 41 | } 42 | 43 | .day-reference-link { 44 | @include mq(small) { 45 | font-size: em-calc(17); 46 | } 47 | @include mq(medium) { 48 | font-size: em-calc(18); 49 | } 50 | @include mq(large) { 51 | font-size: em-calc(19); 52 | } 53 | color: $day-69-grey-light; 54 | } 55 | } 56 | 57 | .day-69-text { 58 | font-size: em-calc(30); 59 | @include mq(small) { 60 | font-size: em-calc(40); 61 | } 62 | @include mq(medium) { 63 | font-size: em-calc(50); 64 | } 65 | @include mq(mid) { 66 | font-size: em-calc(60); 67 | } 68 | @include mq(large) { 69 | font-size: em-calc(70); 70 | } 71 | line-height: 2; 72 | text-transform: uppercase; 73 | } 74 | 75 | .day-69-no-break { 76 | white-space: nowrap; 77 | } -------------------------------------------------------------------------------- /assets/sass/days/_070.scss: -------------------------------------------------------------------------------- 1 | // ================================================== 2 | // Day 70 3 | // ================================================== 4 | $day-70-font : "Playfair Display"; 5 | $day-70-blue : #002c6a; 6 | $day-70-salmon : #e45171; 7 | $day-70-salmon-light: #f8a79b; 8 | 9 | .day--70 { 10 | .day-scripture { 11 | padding-top: 2em; 12 | padding-bottom: 2em; 13 | @include mq(small) { 14 | padding-top: 3em; 15 | padding-bottom: 3em; 16 | } 17 | @include mq(medium) { 18 | padding-top: 4em; 19 | padding-bottom: 4em; 20 | } 21 | @include mq(mid) { 22 | padding-top: 5em; 23 | padding-bottom: 5em; 24 | } 25 | } 26 | 27 | .day-text { 28 | font-family: "Playfair Display"; 29 | text-align: center; 30 | @include font-smoothing; 31 | } 32 | 33 | .day-reference { 34 | margin-top: 2em; 35 | } 36 | 37 | .day-reference-link { 38 | color: $day-70-salmon; 39 | @include mq(small) { 40 | font-size: 1.05em; 41 | } 42 | @include mq(medium) { 43 | font-size: 1.1em; 44 | } 45 | &:hover { 46 | color: $day-70-blue; 47 | } 48 | } 49 | } 50 | 51 | .day-70-text { 52 | font-size: em-calc(35); 53 | color: $day-70-blue; 54 | @include mq(small) { 55 | font-size: em-calc(40); 56 | } 57 | @include mq(medium) { 58 | font-size: em-calc(50); 59 | } 60 | @include mq(mid) { 61 | font-size: em-calc(60); 62 | } 63 | @include mq(large) { 64 | font-size: em-calc(70); 65 | } 66 | @include mq(xlarge) { 67 | font-size: em-calc(80); 68 | } 69 | text-align: center; 70 | line-height: 1.2; 71 | display: inline-block; 72 | 73 | em { 74 | font-size: 2.35em; 75 | color: $white; 76 | line-height: 1; 77 | float: left; 78 | background: linear-gradient(to bottom, $day-70-blue, $day-70-salmon 80%, $day-70-salmon-light 100%); 79 | position: relative; 80 | width: 0.8em; 81 | height: 0.92em; 82 | top: 0.1em; 83 | margin-right: 0.05em; 84 | } 85 | 86 | strong { 87 | font-weight: 700; 88 | display: inline-block; 89 | position: absolute; 90 | top: -0.15em; 91 | left: 0.0em; 92 | } 93 | } -------------------------------------------------------------------------------- /assets/sass/days/_072.scss: -------------------------------------------------------------------------------- 1 | // ================================================== 2 | // Day 72 3 | // ================================================== 4 | $day-72-font : Caveat, sans-serif; 5 | $day-72-blue-light: #2aebfd; 6 | $day-72-blue-dark : #02c9f0; 7 | 8 | .day--72 { 9 | background-color: $grey-darker; 10 | 11 | .day-text { 12 | font-family: $day-72-font; 13 | } 14 | 15 | .day-reference { 16 | margin-top: 3em; 17 | @include mq(small) { 18 | margin-top: 4em; 19 | } 20 | text-align: center; 21 | } 22 | 23 | .day-reference-link { 24 | font-size: em-calc(18); 25 | color: $day-72-blue-dark; 26 | @include mq(small) { 27 | font-size: em-calc(19); 28 | } 29 | @include mq(medium) { 30 | font-size: em-calc(20); 31 | } 32 | @include mq(mid) { 33 | font-size: em-calc(21); 34 | } 35 | } 36 | } 37 | 38 | .day-72-container { 39 | width: em-calc(250); 40 | height: em-calc(250); 41 | display: block; 42 | margin-left: auto; 43 | margin-right: auto; 44 | @include mq(small) { 45 | width: em-calc(300); 46 | height: em-calc(300); 47 | margin-left: 30%; 48 | } 49 | position: relative; 50 | transform: rotate(-12deg) translate3d(0,0,0); 51 | 52 | &::before { 53 | content: ""; 54 | position: absolute; 55 | top: 0.2em; 56 | bottom: -0.01em; 57 | left: 0em; 58 | right: 0.2em; 59 | background-color: rgba($grey-darkest, 0.4); 60 | filter: blur(1px); 61 | transform: skew(-1deg) skewY(-1deg); 62 | } 63 | } 64 | 65 | .day-72-post { 66 | background-color: $day-72-blue-light; 67 | background: linear-gradient(45deg, $day-72-blue-dark, $day-72-blue-light); 68 | position: absolute; 69 | width: 100%; 70 | height: 100%; 71 | } 72 | 73 | .day-72-note { 74 | font-size: em-calc(28); 75 | line-height: 0.9; 76 | display: block; 77 | margin-top: 1.4em; 78 | margin-left: 1.3em; 79 | margin-right: 1.7em; 80 | @include mq(small) { 81 | font-size: em-calc(32); 82 | margin-top: 1.6em; 83 | margin-left: 1.5em; 84 | margin-right: 1.9em; 85 | } 86 | transform: rotate(4deg); 87 | backface-visibility: hidden; 88 | } -------------------------------------------------------------------------------- /assets/sass/days/_073.scss: -------------------------------------------------------------------------------- 1 | // ================================================== 2 | // Day 73 3 | // ================================================== 4 | $day-73-font : Jaldi, sans-serif; 5 | $day-73-red : #e53935; 6 | $day-73-pink : #d81b60; 7 | $day-73-purple : #8e24aa; 8 | $day-73-indigo : #3949ab; 9 | $day-73-blue : #1e88e5; 10 | $day-73-cyan : #01acc1; 11 | $day-73-green : #43a047; 12 | $day-73-green-light: #7cb342; 13 | $day-73-yellow : #f6be1a; 14 | $day-73-orange : #fb8c07; 15 | 16 | .day--73 { 17 | background-color: $grey-darkest; 18 | 19 | .day-number, 20 | .day-font-link { 21 | color: $grey-dark; 22 | border-color: $grey-dark; 23 | } 24 | 25 | .day-scripture { 26 | padding-top: 1em; 27 | padding-bottom: 1em; 28 | @include mq(small) { 29 | padding-top: 2em; 30 | padding-bottom: 2em; 31 | } 32 | } 33 | 34 | .day-text { 35 | font-family: $day-73-font; 36 | width: em-calc(240); 37 | @include mq(small) { 38 | width: em-calc(300); 39 | } 40 | @include mq(medium) { 41 | width: em-calc(360); 42 | } 43 | @include mq(medium) { 44 | width: em-calc(420); 45 | } 46 | display: block; 47 | margin-left: auto; 48 | margin-right: auto; 49 | @include font-smoothing; 50 | } 51 | 52 | .day-reference { 53 | margin-top: 2em; 54 | } 55 | 56 | .day-reference-link { 57 | font-size: em-calc(18); 58 | color: $grey; 59 | @include mq(small) { 60 | font-size: em-calc(19); 61 | } 62 | @include mq(medium) { 63 | font-size: em-calc(20); 64 | } 65 | } 66 | } 67 | 68 | .day-73-text { 69 | font-size: em-calc(20); 70 | @include mq(small) { 71 | font-size: em-calc(25); 72 | } 73 | @include mq(medium) { 74 | font-size: em-calc(30); 75 | } 76 | @include mq(mid) { 77 | font-size: em-calc(35); 78 | } 79 | line-height: 1.4; 80 | color: $white; 81 | background: linear-gradient(to right, red, $day-73-red, $day-73-pink, $day-73-purple, $day-73-indigo, $day-73-blue, $day-73-cyan, $day-73-green, $day-73-green-light, $day-73-yellow, $day-73-orange); 82 | } -------------------------------------------------------------------------------- /assets/sass/days/_074.scss: -------------------------------------------------------------------------------- 1 | // ================================================== 2 | // Day 74 3 | // ================================================== 4 | $day-74-font: Lora, serif; 5 | $day-74-blue : #bee1e2; 6 | 7 | .day--74 { 8 | background-color: $day-74-blue; 9 | 10 | .day-scripture { 11 | padding-top: 1em; 12 | padding-bottom: 1em; 13 | @include mq(small) { 14 | padding-top: 2em; 15 | padding-bottom: 2em; 16 | } 17 | @include mq(medium) { 18 | padding-top: 3em; 19 | padding-bottom: 3em; 20 | } 21 | } 22 | 23 | .day-text { 24 | font-family: $day-74-font; 25 | color: $black; 26 | } 27 | 28 | .day-text, 29 | .day-reference { 30 | width: em-calc(210); 31 | @include mq(small) { 32 | width: em-calc(280); 33 | } 34 | @include mq(medium) { 35 | width: em-calc(350); 36 | } 37 | @include mq(medium) { 38 | width: em-calc(420); 39 | } 40 | margin-left: auto; 41 | margin-right: auto; 42 | } 43 | 44 | .day-reference { 45 | text-align: center; 46 | padding-top: 0.5em; 47 | padding-bottom: 0.5em; 48 | border-top: 2px solid $black; 49 | border-bottom: 2px solid $black; 50 | } 51 | 52 | .day-reference-link { 53 | font-style: italic; 54 | color: $black; 55 | letter-spacing: 0.1em; 56 | text-transform: uppercase; 57 | } 58 | } 59 | 60 | .day-74-text { 61 | font-size: em-calc(30); 62 | @include mq(small) { 63 | font-size: em-calc(40); 64 | } 65 | @include mq(medium) { 66 | font-size: em-calc(50); 67 | } 68 | @include mq(mid) { 69 | font-size: em-calc(60); 70 | } 71 | font-weight: 700; 72 | margin-bottom: 0.7em; 73 | display: block; 74 | } -------------------------------------------------------------------------------- /assets/sass/days/_075.scss: -------------------------------------------------------------------------------- 1 | // ================================================== 2 | // Day 75 3 | // ================================================== 4 | $day-75-font: "Arbutus Slab", "Times New Roman", Times, serif; 5 | $day-75-salmon: #c1867b; 6 | $day-75-ivory: #ebedc8; 7 | $day-75-purple: #74698c; 8 | 9 | .day--75 { 10 | background-color: $day-75-salmon; 11 | 12 | .day-scripture { 13 | padding-top: 1em; 14 | padding-bottom: 1em; 15 | @include mq(small) { 16 | padding-top: 2em; 17 | padding-bottom: 2em; 18 | } 19 | @include mq(medium) { 20 | padding-top: 3em; 21 | padding-bottom: 3em; 22 | } 23 | @include mq(mid) { 24 | padding-top: 4em; 25 | padding-bottom: 4em; 26 | } 27 | @include mq(large) { 28 | padding-top: 5em; 29 | padding-bottom: 5em; 30 | } 31 | } 32 | 33 | .day-text { 34 | font-family: $day-75-font; 35 | text-align: center; 36 | @include font-smoothing; 37 | } 38 | 39 | .day-reference { 40 | margin-top: 1em; 41 | @include mq(small) { 42 | margin-top: 1.25em; 43 | } 44 | @include mq(medium) { 45 | margin-top: 1.5em; 46 | } 47 | } 48 | 49 | .day-reference-link { 50 | color: $day-75-ivory; 51 | } 52 | } 53 | 54 | .day-75-text { 55 | font-size: em-calc(23); 56 | @include mq(small) { 57 | font-size: em-calc(30); 58 | } 59 | @include mq(medium) { 60 | font-size: em-calc(40); 61 | } 62 | @include mq(mid) { 63 | font-size: em-calc(50); 64 | } 65 | @include mq(large) { 66 | font-size: em-calc(60); 67 | } 68 | 69 | em { 70 | font-style: normal; 71 | color: $day-75-purple; 72 | background-color: $day-75-ivory; 73 | padding: 0.1em; 74 | margin: 0.125em -0.05em; 75 | display: inline-block; 76 | } 77 | 78 | .day-75-em { 79 | color: $day-75-ivory; 80 | background-color: $day-75-purple; 81 | } 82 | } -------------------------------------------------------------------------------- /assets/sass/days/_076.scss: -------------------------------------------------------------------------------- 1 | // ================================================== 2 | // Day 76 3 | // ================================================== 4 | $day-76-font : Cousine, mono; 5 | $day-76-pink : #ff19af; 6 | $day-76-magenta: #ba1bc7; 7 | $day-76-purple : #8e24aa; 8 | 9 | .day--76 { 10 | background-color: $day-76-pink; 11 | background: linear-gradient(130deg, $day-76-pink, $day-76-magenta 70%, $day-76-purple); 12 | 13 | .day-scripture { 14 | padding-top: 1em; 15 | padding-bottom: 1em; 16 | @include mq(small) { 17 | padding-top: 2em; 18 | padding-bottom: 2em; 19 | } 20 | @include mq(medium) { 21 | padding-top: 3em; 22 | padding-bottom: 3em; 23 | } 24 | @include mq(mid) { 25 | padding-top: 3em; 26 | padding-bottom: 3em; 27 | } 28 | } 29 | 30 | .day-text { 31 | font-family: $day-76-font; 32 | @include font-smoothing; 33 | } 34 | 35 | .day-reference { 36 | margin-top: 2em; 37 | @include mq(mid) { 38 | margin-top: 3em; 39 | } 40 | text-align: center; 41 | } 42 | 43 | .day-reference-link { 44 | color: rgba($white, 0.3); 45 | } 46 | } 47 | 48 | .day-76-pre { 49 | font-size: 3px; 50 | width: 280px; 51 | margin-left: auto; 52 | margin-right: auto; 53 | @include mq(small) { 54 | font-size: 4px; 55 | width: 370px; 56 | } 57 | @include mq(medium) { 58 | font-size: 5px; 59 | width: 460px; 60 | } 61 | @include mq(mid) { 62 | font-size: 7px; 63 | width: 640px; 64 | } 65 | font-weight: 700; 66 | white-space: pre-wrap; 67 | 68 | @for $i from 1 through 51 { 69 | $x: (80 - $i) * 0.012; 70 | 71 | &-#{$i} { 72 | color: rgba($white, $x); 73 | text-shadow: 0 0 1px rgba($white, $x * 0.6), 74 | 0 0 2px rgba($white, $x * 0.5), 75 | 0 0 3px rgba($white, $x * 0.4); 76 | } 77 | } 78 | } -------------------------------------------------------------------------------- /assets/sass/days/_077.scss: -------------------------------------------------------------------------------- 1 | // ================================================== 2 | // Day 77 3 | // ================================================== 4 | $day-77-font: Montserrat, sans-serif; 5 | $day-77-red: #f63e38; 6 | 7 | .day--77 { 8 | background-color: $day-77-red; 9 | 10 | .day-scripture { 11 | padding-top: 2em; 12 | padding-bottom: 2em; 13 | @include mq(small) { 14 | padding-top: 3.25em; 15 | padding-bottom: 3.25em; 16 | } 17 | @include mq(medium) { 18 | padding-top: 4.5em; 19 | padding-bottom: 4.5em; 20 | } 21 | @include mq(large) { 22 | padding-top: 6em; 23 | padding-bottom: 6em; 24 | } 25 | } 26 | 27 | .day-text { 28 | font-family: $day-77-font; 29 | color: $white; 30 | text-align: center; 31 | text-transform: uppercase; 32 | @include font-smoothing; 33 | } 34 | 35 | .day-reference { 36 | margin-top: 2em; 37 | } 38 | 39 | .day-reference-link { 40 | font-size: em-calc(12); 41 | letter-spacing: 0.1em; 42 | @include mq(small) { 43 | font-size: em-calc(14); 44 | letter-spacing: 0.25em; 45 | } 46 | color: shade($day-77-red, 15%); 47 | } 48 | } 49 | 50 | .day-77-text { 51 | $font-size: 12; 52 | 53 | font-size: em-calc($font-size); 54 | line-height: 1.3; 55 | display: inline-block; 56 | letter-spacing: 0.1em; 57 | padding: em-calc(15, $font-size); 58 | border: 1px solid $white; 59 | max-width: em-calc(255, $font-size); 60 | } 61 | 62 | @include mq(small) { 63 | .day-77-text { 64 | $font-size: 14; 65 | 66 | font-size: em-calc($font-size); 67 | letter-spacing: 0.25em; 68 | padding: em-calc(20, $font-size); 69 | max-width: em-calc(360, $font-size); 70 | } 71 | } 72 | 73 | @include mq(medium) { 74 | .day-77-text { 75 | $font-size: 14; 76 | 77 | max-width: em-calc(460, $font-size); 78 | } 79 | } 80 | 81 | @include mq(mid) { 82 | .day-77-text { 83 | padding-left: em-calc(50); 84 | padding-right: em-calc(50); 85 | } 86 | } 87 | 88 | @include mq(large) { 89 | .day-77-text { 90 | padding-left: em-calc(100); 91 | padding-right: em-calc(100); 92 | } 93 | } -------------------------------------------------------------------------------- /assets/sass/days/_079.scss: -------------------------------------------------------------------------------- 1 | // ================================================== 2 | // Day 79 3 | // ================================================== 4 | $day-79-font : "Racing Sans One", sans-serif; 5 | $day-79-pink : #950856; 6 | $day-79-purple : #450331; 7 | $day-79-blue : #0e427c; 8 | $day-79-blue-glow-1: #1d8fb4; 9 | $day-79-blue-glow-2: #3a1040; 10 | 11 | .day--79 { 12 | background-color: #950856; 13 | background: radial-gradient(ellipse farthest-corner at 0px 0px, $day-79-pink, $day-79-purple, $day-79-blue); 14 | 15 | .day-number { 16 | color: $day-79-purple; 17 | border-color: $day-79-purple; 18 | } 19 | 20 | .day-font-link { 21 | color: $day-79-blue; 22 | } 23 | 24 | .day-scripture { 25 | padding-top: 3em; 26 | padding-bottom: 3em; 27 | @include mq(small) { 28 | padding-top: 4em; 29 | padding-bottom: 4em; 30 | } 31 | @include mq(medium) { 32 | padding-top: 5em; 33 | padding-bottom: 5em; 34 | } 35 | @include mq(mid) { 36 | padding-top: 6.5em; 37 | padding-bottom: 6.5em; 38 | } 39 | @include mq(large) { 40 | padding-top: 8em; 41 | padding-bottom: 8em; 42 | } 43 | } 44 | 45 | .day-text { 46 | font-family: $day-79-font; 47 | text-transform: uppercase; 48 | } 49 | 50 | .day-reference { 51 | text-align: center; 52 | margin-top: 2em; 53 | } 54 | 55 | .day-reference-link { 56 | color: rgba($white, 0.1); 57 | @include mq(small) { 58 | font-size: em-calc(17); 59 | } 60 | @include mq(medium) { 61 | font-size: em-calc(18); 62 | } 63 | @include mq(mid) { 64 | font-size: em-calc(19); 65 | } 66 | @include font-smoothing; 67 | } 68 | } 69 | 70 | $day-79-font-size: 30; 71 | 72 | .day-79-svg { 73 | width: 100%; 74 | text-align: center; 75 | height: em-calc($day-79-font-size); 76 | } 77 | 78 | .day-79-text { 79 | font-size: em-calc($day-79-font-size - 5); 80 | width: 100%; 81 | paint-order: stroke; 82 | stroke: $black; 83 | stroke-width: 1px; 84 | stroke-linecap: butt; 85 | stroke-linejoin: miter; 86 | text-shadow: $black 0px 0px 1px, 87 | rgba($white, 0.4) 0px 0px 1px, 88 | $day-79-blue-glow-1 0px 0px 3px, 89 | $day-79-blue-glow-2 0px 0px 6px; 90 | } 91 | 92 | @include mq(small) { 93 | $day-79-font-size: 40; 94 | 95 | .day-79-svg { 96 | height: em-calc($day-79-font-size); 97 | } 98 | 99 | .day-79-text { 100 | font-size: em-calc($day-79-font-size - 5); 101 | stroke-width: 2px; 102 | text-shadow: $black 0px 0px 1px, 103 | rgba($white, 0.4) 0px 0px 1px, 104 | $day-79-blue-glow-1 0px 0px 4px, 105 | $day-79-blue-glow-2 0px 0px 8px; 106 | } 107 | } 108 | 109 | @include mq(medium) { 110 | $day-79-font-size: 50; 111 | 112 | .day-79-svg { 113 | height: em-calc($day-79-font-size); 114 | } 115 | 116 | .day-79-text { 117 | font-size: em-calc($day-79-font-size - 5); 118 | text-shadow: $black 0px 0px 1px, 119 | rgba($white, 0.4) 0px 0px 1px, 120 | $day-79-blue-glow-1 0px 0px 5px, 121 | $day-79-blue-glow-2 0px 0px 12px; 122 | } 123 | } 124 | 125 | @include mq(mid) { 126 | $day-79-font-size: 63; 127 | 128 | .day-79-svg { 129 | height: em-calc($day-79-font-size); 130 | } 131 | 132 | .day-79-text { 133 | font-size: em-calc($day-79-font-size - 5); 134 | } 135 | } 136 | 137 | @include mq(large) { 138 | $day-79-font-size: 78; 139 | 140 | .day-79-svg { 141 | height: em-calc($day-79-font-size); 142 | } 143 | 144 | .day-79-text { 145 | font-size: em-calc($day-79-font-size - 5); 146 | } 147 | } -------------------------------------------------------------------------------- /assets/sass/days/_080.scss: -------------------------------------------------------------------------------- 1 | // ================================================== 2 | // Day 80 3 | // ================================================== 4 | $day-80-serif : Radley, serif; 5 | $day-80-sans-serif: Oswald, sans-serif; 6 | $day-80-grey-dark : #26282e; 7 | $day-80-grey-light: #545A66; 8 | 9 | .day--80 { 10 | background-color: $day-80-grey-dark; 11 | 12 | .day-number { 13 | color: $grey-darker; 14 | border-color: $grey-darker; 15 | } 16 | 17 | .day-scripture { 18 | padding-top: 1em; 19 | padding-bottom: 1em; 20 | @include mq(small) { 21 | padding-top: 2.5em; 22 | padding-bottom: 2.5em; 23 | } 24 | @include mq(medium) { 25 | padding-top: 4em; 26 | padding-bottom: 4em; 27 | } 28 | @include mq(mid) { 29 | padding-top: 5.5em; 30 | padding-bottom: 5.5em; 31 | } 32 | } 33 | 34 | .day-text { 35 | font-family: $day-80-serif; 36 | color: $day-80-grey-light; 37 | text-align: center; 38 | } 39 | 40 | .day-reference { 41 | margin-top: 1em; 42 | } 43 | 44 | .day-reference-link { 45 | color: $day-80-grey-light; 46 | } 47 | 48 | .day-font { 49 | color: shade($grey-darker, 20%); 50 | } 51 | 52 | .day-font-link { 53 | color: $grey-darker; 54 | } 55 | } 56 | 57 | .day-80-text { 58 | font-size: 0.9em; 59 | } 60 | 61 | .day-80-first { 62 | $font-size: 18; 63 | 64 | font-size: em-calc($font-size); 65 | text-align: right; 66 | width: em-calc(270, $font-size); 67 | line-height: 1.3; 68 | display: block; 69 | margin-left: auto; 70 | margin-right: auto; 71 | margin-bottom: em-calc(2, $font-size); 72 | vertical-align: top; 73 | position: relative; 74 | top: 0.2em; 75 | z-index: 2; 76 | } 77 | 78 | .day-80-next { 79 | $font-size: 70; 80 | 81 | font-size: em-calc($font-size); 82 | font-family: $day-80-sans-serif; 83 | font-weight: 300; 84 | text-align: right; 85 | text-transform: uppercase; 86 | width: em-calc(295, $font-size); 87 | margin-left: em-calc(-20, $font-size); 88 | display: inline-block; 89 | position: relative; 90 | z-index: 1; 91 | 92 | &::before { 93 | content: ""; 94 | width: em-calc(250, $font-size); 95 | height: em-calc(50, $font-size); 96 | background: $day-80-grey-dark; 97 | border-bottom: em-calc(2, $font-size) solid $day-80-grey-light; 98 | display: block; 99 | transform: rotate(-60deg); 100 | transform-origin: top left; 101 | position: absolute; 102 | top: em-calc(120, $font-size); 103 | left: em-calc(-75, $font-size); 104 | } 105 | } 106 | 107 | @include mq(small) { 108 | .day-80-text { 109 | font-size: 1em; 110 | } 111 | } 112 | 113 | @include mq(695) { 114 | .day--80 { 115 | .day-reference { 116 | width: em-calc(560); 117 | text-align: right; 118 | margin-left: auto; 119 | margin-right: auto; 120 | } 121 | } 122 | 123 | .day-80-first { 124 | display: inline-block; 125 | } 126 | 127 | .day-80-next { 128 | margin-left: 0; 129 | } 130 | } 131 | 132 | @include mq(850) { 133 | .day--80 { 134 | .day-reference { 135 | width: em-calc(675); 136 | } 137 | } 138 | 139 | .day-80-text { 140 | font-size: 1.2em; 141 | } 142 | } -------------------------------------------------------------------------------- /assets/sass/days/_081.scss: -------------------------------------------------------------------------------- 1 | // ================================================== 2 | // Day 81 3 | // ================================================== 4 | $day-81-font-sans-serif: Raleway, sans-serif; 5 | $day-81-font-script : Sacramento, serif; 6 | $day-81-blue : #2e8fc6; 7 | $day-81-yellow : #fbffa3; 8 | 9 | .day--81 { 10 | background-color: $day-81-yellow; 11 | 12 | .day-scripture { 13 | padding-top: 4em; 14 | padding-bottom: 4em; 15 | @include mq(small) { 16 | padding-top: 5em; 17 | padding-bottom: 5em; 18 | } 19 | @include mq(medium) { 20 | padding-top: 6em; 21 | padding-bottom: 6em; 22 | } 23 | @include mq(mid) { 24 | padding-top: 7em; 25 | padding-bottom: 7em; 26 | } 27 | @include mq(large) { 28 | padding-top: 8em; 29 | padding-bottom: 8em; 30 | } 31 | } 32 | 33 | .day-text { 34 | font-family: $day-81-font-sans-serif; 35 | color: $day-81-blue; 36 | text-transform: uppercase; 37 | @include font-smoothing; 38 | } 39 | 40 | .day-reference { 41 | text-align: center; 42 | margin-top: 2em; 43 | } 44 | 45 | .day-reference { 46 | font-size: em-calc(14); 47 | letter-spacing: 0.1em; 48 | } 49 | 50 | .day-reference-link { 51 | color: $day-81-yellow; 52 | background-color: $day-81-blue; 53 | padding: 0.2em 0.4em; 54 | } 55 | } 56 | 57 | .day-81-text { 58 | font-size: em-calc(25); 59 | @include mq(small) { 60 | font-size: em-calc(30); 61 | letter-spacing: 0.1em; 62 | } 63 | @include mq(medium) { 64 | font-size: em-calc(35); 65 | } 66 | @include mq(mid) { 67 | font-size: em-calc(40); 68 | } 69 | @include mq(large) { 70 | font-size: em-calc(50); 71 | } 72 | text-align: center; 73 | display: block; 74 | } 75 | 76 | .day-81-between { 77 | font-family: $day-81-font-script; 78 | font-size: 1.2em; 79 | letter-spacing: 0; 80 | text-transform: lowercase; 81 | } -------------------------------------------------------------------------------- /assets/sass/days/_082.scss: -------------------------------------------------------------------------------- 1 | // ================================================== 2 | // Day 82 3 | // ================================================== 4 | $day-82-font: "Alegreya Sans", sans-serif; 5 | 6 | .day--82 { 7 | background-color: $black; 8 | 9 | .day-text { 10 | font-family: $day-82-font; 11 | color: $black; 12 | @include font-smoothing; 13 | text-align: center; 14 | } 15 | 16 | .day-reference { 17 | margin-top: 1em; 18 | } 19 | 20 | .day-reference-link { 21 | color: $black; 22 | text-transform: uppercase; 23 | } 24 | } 25 | 26 | @mixin day-82-loop { 27 | $shadow: ""; 28 | 29 | @for $i from 1 through 400 { 30 | @if $i > 1 { 31 | $shadow: $shadow + ","; 32 | } 33 | $shadow: #{$shadow} -#{$i}px #{$i}px $white #{","} #{$i}px #{$i}px $grey-lighter; 34 | } 35 | 36 | text-shadow: $shadow; 37 | } 38 | 39 | .day-82-text-wrap { 40 | @include mq(small) { 41 | font-size: 1.3em; 42 | } 43 | @include mq(medium) { 44 | font-size: 1.6em; 45 | } 46 | @include mq(mid) { 47 | font-size: 1.9em; 48 | } 49 | } 50 | 51 | .day-82-text { 52 | $font-size: 26; 53 | 54 | font-size: em-calc($font-size); 55 | font-weight: 800; 56 | width: em-calc(280, $font-size); 57 | text-align: justify; 58 | display: inline-block; 59 | @include day-82-loop; 60 | } -------------------------------------------------------------------------------- /assets/sass/days/_083.scss: -------------------------------------------------------------------------------- 1 | // ================================================== 2 | // Day 83 3 | // ================================================== 4 | $day-83-font : BenchNine, sans-serif; 5 | $day-83-yellow: #ffeb3b; 6 | 7 | .day--83 { 8 | background-color: $day-83-yellow; 9 | 10 | .day-scripture { 11 | padding-top: 3em; 12 | padding-bottom: 3em; 13 | @include mq(small) { 14 | padding-top: 4em; 15 | padding-bottom: 4em; 16 | } 17 | @include mq(medium) { 18 | padding-top: 5em; 19 | padding-bottom: 5em; 20 | } 21 | @include mq(mid) { 22 | padding-top: 6em; 23 | padding-bottom: 6em; 24 | } 25 | } 26 | 27 | .day-text { 28 | font-family: $day-83-font; 29 | color: $grey-darker; 30 | text-align: center; 31 | text-transform: uppercase; 32 | @include font-smoothing; 33 | } 34 | 35 | .day-reference { 36 | margin-top: 2em; 37 | } 38 | 39 | .day-reference-link { 40 | font-size: em-calc(20); 41 | color: $grey-darker; 42 | background-color: $white; 43 | text-decoration: none; 44 | 45 | &:hover { 46 | color: $white; 47 | background-color: $grey-darker; 48 | } 49 | } 50 | } 51 | 52 | .day-83-text { 53 | $font-size: 27; 54 | 55 | font-size: em-calc($font-size); 56 | font-weight: 300; 57 | line-height: 1.5; 58 | letter-spacing: -0.02em; 59 | text-align: left; 60 | width: em-calc(275, $font-size); 61 | display: inline-block; 62 | 63 | em { 64 | font-style: normal; 65 | background-color: $white; 66 | } 67 | } 68 | 69 | .day-83-text-wrap { 70 | @include mq(small) { 71 | font-size: 1.2em; 72 | } 73 | @include mq(medium) { 74 | font-size: 1.4em; 75 | } 76 | @include mq(mid) { 77 | font-size: 1.6em; 78 | } 79 | @include mq(large) { 80 | font-size: 1.8em; 81 | } 82 | } -------------------------------------------------------------------------------- /assets/sass/days/_084.scss: -------------------------------------------------------------------------------- 1 | // ================================================== 2 | // Day 84 3 | // ================================================== 4 | $day-84-font: "Fanwood Text", serif; 5 | 6 | .day--84 { 7 | background: linear-gradient(to bottom, #3271bd, #87c2de 25%, #e9ebde 45%, #e5e0c1 55%, #f0c48a 70%, #f8974d 85%, #a42c08); 8 | position: relative; 9 | 10 | &::before { 11 | content: ""; 12 | display: block; 13 | position: absolute; 14 | top: 0; 15 | left: 0; 16 | width: 100%; 17 | height: 100%; 18 | background-image: radial-gradient(ellipse at center, rgba(0,0,0,0) 0%,rgba(0,0,0,0) 70%,rgba(0,0,0,0.2)); 19 | } 20 | 21 | .day-scripture { 22 | padding-top: 1em; 23 | padding-bottom: 1em; 24 | @include mq(small) { 25 | padding-top: 2em; 26 | padding-bottom: 2em; 27 | } 28 | @include mq(medium) { 29 | padding-top: 3em; 30 | padding-bottom: 3em; 31 | } 32 | @include mq(mid) { 33 | padding-top: 4em; 34 | padding-bottom: 4em; 35 | } 36 | } 37 | 38 | .day-number, 39 | .day-text, 40 | .day-reference, 41 | .day-font { 42 | position: relative; 43 | } 44 | 45 | .day-text { 46 | font-family: $day-84-font; 47 | color: $white; 48 | color: $grey-darkest; 49 | text-align: center; 50 | @include font-smoothing; 51 | } 52 | 53 | .day-reference { 54 | text-align: right; 55 | width: em-calc(230); 56 | @include mq(small) { 57 | width: em-calc(300); 58 | } 59 | @include mq(medium) { 60 | width: em-calc(370); 61 | } 62 | @include mq(mid) { 63 | width: em-calc(420); 64 | } 65 | @include mq(large) { 66 | width: em-calc(470); 67 | } 68 | margin-top: 2em; 69 | display: inline-block; 70 | } 71 | 72 | .day-reference-link { 73 | color: $grey-darker; 74 | @include mq(small) { 75 | font-size: em-calc(17); 76 | } 77 | @include mq(medium) { 78 | font-size: em-calc(18); 79 | } 80 | @include mq(mid) { 81 | font-size: em-calc(19); 82 | } 83 | } 84 | } 85 | 86 | .day-84-text { 87 | $font-size: 17; 88 | 89 | font-size: em-calc($font-size); 90 | text-align: right; 91 | line-height: 1.1; 92 | display: inline-block; 93 | width: em-calc(235, $font-size); 94 | 95 | em { 96 | font-size: 3.5em; 97 | line-height: 0.8; 98 | font-style: normal; 99 | text-shadow: 0 0 3px $white, 100 | 0 0 5px $white, 101 | 0 0 7px $white, 102 | 0 0 10px rgba($white, 0.7), 103 | 0 0 13px rgba($white, 0.5), 104 | 0 0 16px rgba($white, 0.3); 105 | } 106 | } 107 | 108 | .day-84-text-wrap { 109 | @include mq(small) { 110 | font-size: 1.3em; 111 | } 112 | @include mq(medium) { 113 | font-size: 1.6em; 114 | } 115 | @include mq(mid) { 116 | font-size: 1.8em; 117 | } 118 | @include mq(large) { 119 | font-size: 2em; 120 | } 121 | } -------------------------------------------------------------------------------- /assets/sass/days/_085.scss: -------------------------------------------------------------------------------- 1 | // ================================================== 2 | // Day 85 3 | // ================================================== 4 | $day-85-font: "Archivo Black", sans-serif; 5 | 6 | .day--85 { 7 | background-color: $black; 8 | 9 | .day-text { 10 | font-family: $day-85-font; 11 | color: $black; 12 | text-transform: uppercase; 13 | text-align: center; 14 | @include font-smoothing; 15 | } 16 | 17 | .day-reference { 18 | margin-top: 1em; 19 | } 20 | 21 | .day-reference-link { 22 | color: $white; 23 | } 24 | } 25 | 26 | .day-85-text-wrap { 27 | text-align: left; 28 | background-color: $white; 29 | width: em-calc(280); 30 | display: inline-block; 31 | overflow: hidden; 32 | } 33 | 34 | .day-85-text { 35 | font-size: em-calc(76); 36 | line-height: 0.9; 37 | text-align: left; 38 | margin-top: -0.22em; 39 | margin-bottom: -0.12em; 40 | margin-left: -0.2em; 41 | margin-right: -0.2em; 42 | display: block; 43 | transform: rotate(4deg) translate3d(0,0,0); 44 | backface-visibility: hidden; 45 | } 46 | 47 | @include mq(small) { 48 | .day-85-text-wrap { 49 | width: em-calc(410); 50 | } 51 | .day-85-text { 52 | font-size: em-calc(112); 53 | } 54 | } 55 | @include mq(medium) { 56 | .day-85-text-wrap { 57 | width: em-calc(520); 58 | } 59 | .day-85-text { 60 | font-size: em-calc(141); 61 | } 62 | } 63 | @include mq(mid) { 64 | .day-85-text-wrap { 65 | width: em-calc(670); 66 | } 67 | .day-85-text { 68 | font-size: em-calc(182); 69 | } 70 | } 71 | @include mq(large) { 72 | .day-85-text-wrap { 73 | width: em-calc(830); 74 | } 75 | .day-85-text { 76 | font-size: em-calc(226); 77 | } 78 | } -------------------------------------------------------------------------------- /assets/sass/days/_086.scss: -------------------------------------------------------------------------------- 1 | // ================================================== 2 | // Day 86 3 | // ================================================== 4 | $day-86-font: "Crimson Text", serif; 5 | 6 | .day--86 { 7 | background-color: #f0750f; 8 | 9 | .day-scripture { 10 | padding-top: 1em; 11 | padding-bottom: 1em; 12 | @include mq(small) { 13 | padding-top: 2em; 14 | padding-bottom: 2em; 15 | } 16 | @include mq(medium) { 17 | padding-top: 3em; 18 | padding-bottom: 3em; 19 | } 20 | } 21 | 22 | .day-text { 23 | font-family: $day-86-font; 24 | text-transform: uppercase; 25 | color: $white; 26 | @include font-smoothing; 27 | } 28 | 29 | .day-reference { 30 | margin-left: 10%; 31 | margin-top: em-calc(30); 32 | padding-left: 5.5%; 33 | padding-left: calc(5% + 5px); 34 | 35 | @include mq(small) { 36 | margin-left: 20%; 37 | } 38 | @include mq(medium) { 39 | margin-left: 25%; 40 | } 41 | @include mq(mid) { 42 | margin-left: 30%; 43 | } 44 | } 45 | 46 | .day-reference-link { 47 | color: $white; 48 | } 49 | } 50 | 51 | .day-86-text { 52 | $font-size: 20; 53 | 54 | font-size: em-calc(25); 55 | line-height: 1.2; 56 | padding-left: 5%; 57 | padding-top: em-calc(14, $font-size); 58 | padding-bottom: em-calc(14, $font-size); 59 | border-left: 5px solid $white; 60 | margin-left: 10%; 61 | text-align: left; 62 | display: inline-block; 63 | 64 | @include mq(small) { 65 | font-size: em-calc(30); 66 | margin-left: 20%; 67 | } 68 | @include mq(medium) { 69 | font-size: em-calc(35); 70 | margin-left: 25%; 71 | } 72 | @include mq(mid) { 73 | font-size: em-calc(40); 74 | margin-left: 30%; 75 | } 76 | } -------------------------------------------------------------------------------- /assets/sass/days/_088.scss: -------------------------------------------------------------------------------- 1 | // ================================================== 2 | // Day 88 3 | // ================================================== 4 | $day-88-font : "Roboto Condensed", sans-serif; 5 | $day-88-purple: #e1bee7; 6 | $day-88-blue : #03a9f4; 7 | 8 | .day--88 { 9 | background-color: $day-88-purple; 10 | 11 | .day-scripture { 12 | padding-top: 1em; 13 | padding-bottom: 1em; 14 | @include mq(small) { 15 | padding-top: 2em; 16 | padding-bottom: 2em; 17 | } 18 | @include mq(medium) { 19 | padding-top: 3em; 20 | padding-bottom: 3em; 21 | } 22 | @include mq(mid) { 23 | padding-top: 4em; 24 | padding-bottom: 4em; 25 | } 26 | } 27 | 28 | .day-text { 29 | font-family: $day-88-font; 30 | color: $white; 31 | text-align: center; 32 | } 33 | 34 | .day-reference { 35 | margin-top: 2em; 36 | @include mq(medium) { 37 | margin-top: 3em; 38 | } 39 | } 40 | 41 | .day-reference-link { 42 | color: $white; 43 | } 44 | } 45 | 46 | $day-88-font-size: 40; 47 | 48 | .day-88-text-wrap { 49 | width: em-calc(280); 50 | display: inline-block; 51 | } 52 | 53 | .day-88-text { 54 | font-size: em-calc($day-88-font-size); 55 | font-weight: 300; 56 | line-height: 1.5; 57 | text-align: left; 58 | box-sizing: border-box; 59 | position: relative; 60 | 61 | span { 62 | position: relative; 63 | display: block; 64 | 65 | &::before { 66 | content: ""; 67 | position: absolute; 68 | bottom: 0.5em; 69 | left: 0; 70 | width: 100%; 71 | background: rgba($day-88-blue, 0.15); 72 | height: 0.2em; 73 | } 74 | } 75 | } 76 | 77 | .day-88-text--first { 78 | span { 79 | padding-left: 0.2em; 80 | } 81 | } 82 | 83 | .day-88-text--middle { 84 | padding-left: em-calc(60, $day-88-font-size); 85 | 86 | span { 87 | padding-left: 0.2em; 88 | } 89 | } 90 | 91 | .day-88-text--last { 92 | text-align: right; 93 | 94 | span { 95 | padding-right: 0.2em; 96 | } 97 | } 98 | 99 | @include mq(small) { 100 | $day-88-font-size: 50; 101 | 102 | .day-88-text-wrap { 103 | width: em-calc(410); 104 | } 105 | 106 | .day-88-text { 107 | font-size: em-calc($day-88-font-size); 108 | } 109 | 110 | .day-88-text--middle { 111 | padding-left: em-calc(107, $day-88-font-size); 112 | } 113 | } 114 | 115 | @include mq(medium) { 116 | $day-88-font-size: 60; 117 | 118 | .day-88-text-wrap { 119 | width: em-calc(520); 120 | } 121 | 122 | .day-88-text { 123 | font-size: em-calc($day-88-font-size); 124 | } 125 | 126 | .day-88-text--middle { 127 | padding-left: em-calc(140, $day-88-font-size); 128 | } 129 | } 130 | 131 | @include mq(mid) { 132 | $day-88-font-size: 80; 133 | 134 | .day-88-text-wrap { 135 | width: em-calc(670); 136 | } 137 | 138 | .day-88-text { 139 | font-size: em-calc($day-88-font-size); 140 | } 141 | 142 | .day-88-text--middle { 143 | padding-left: em-calc(175, $day-88-font-size); 144 | } 145 | } 146 | 147 | @include mq(large) { 148 | $day-88-font-size: 100; 149 | 150 | .day-88-text-wrap { 151 | width: em-calc(800); 152 | } 153 | 154 | .day-88-text { 155 | font-size: em-calc($day-88-font-size); 156 | } 157 | 158 | .day-88-text--middle { 159 | padding-left: em-calc(250, $day-88-font-size); 160 | } 161 | } -------------------------------------------------------------------------------- /assets/sass/days/_089.scss: -------------------------------------------------------------------------------- 1 | // ================================================== 2 | // Day 89 3 | // ================================================== 4 | $day-89-font : Alegreya, serif; 5 | $day-89-blue : #353b6e; 6 | $day-89-light: #ecf0f1; 7 | 8 | .day--89 { 9 | background-color: $day-89-blue; 10 | 11 | .day-number, 12 | .day-font-link { 13 | color: rgba($day-89-light, 0.1); 14 | border-color: rgba($day-89-light, 0.1); 15 | } 16 | 17 | .day-scripture { 18 | padding-top: 2em; 19 | padding-bottom: 2em; 20 | @include mq(small) { 21 | padding-top: 3.5em; 22 | padding-bottom: 3.5em; 23 | } 24 | @include mq(medium) { 25 | padding-top: 5em; 26 | padding-bottom: 5em; 27 | } 28 | @include mq(mid) { 29 | padding-top: 7em; 30 | padding-bottom: 7em; 31 | } 32 | } 33 | 34 | .day-text { 35 | font-family: $day-89-font; 36 | color: $day-89-light; 37 | font-style: italic; 38 | text-align: center; 39 | @include font-smoothing; 40 | } 41 | 42 | .day-reference { 43 | text-align: right; 44 | width: em-calc(265); 45 | margin-top: 1em; 46 | margin-left: auto; 47 | margin-right: auto; 48 | display: block; 49 | } 50 | 51 | .day-reference-link { 52 | color: $day-89-light; 53 | @include mq(small) { 54 | font-size: em-calc(17); 55 | } 56 | @include mq(medium) { 57 | font-size: em-calc(19); 58 | } 59 | @include mq(mid) { 60 | font-size: em-calc(21); 61 | } 62 | @include mq(large) { 63 | font-size: em-calc(23); 64 | } 65 | } 66 | } 67 | 68 | .day-89-text { 69 | $font-size: 18; 70 | 71 | font-size: em-calc($font-size); 72 | line-height: 1.3; 73 | text-align: left; 74 | width: em-calc(265, $font-size); 75 | display: inline-block; 76 | position: relative; 77 | 78 | &::before { 79 | content: "“"; 80 | position: absolute; 81 | left: -0.5em; 82 | } 83 | 84 | &::after { 85 | content: "”"; 86 | } 87 | } 88 | 89 | @include mq(small) { 90 | .day--89 { 91 | .day-reference { 92 | width: em-calc(357); 93 | } 94 | } 95 | 96 | .day-89-text { 97 | $font-size: 24; 98 | 99 | font-size: em-calc($font-size); 100 | width: em-calc(357, $font-size); 101 | } 102 | } 103 | 104 | @include mq(medium) { 105 | .day--89 { 106 | .day-reference { 107 | width: em-calc(445); 108 | } 109 | } 110 | 111 | .day-89-text { 112 | $font-size: 30; 113 | 114 | font-size: em-calc($font-size); 115 | width: em-calc(445, $font-size); 116 | } 117 | } 118 | 119 | @include mq(mid) { 120 | .day--89 { 121 | .day-reference { 122 | width: em-calc(640); 123 | } 124 | } 125 | 126 | .day-89-text { 127 | $font-size: 30; 128 | 129 | font-size: em-calc($font-size); 130 | width: em-calc(640, $font-size); 131 | } 132 | } 133 | 134 | @include mq(large) { 135 | .day--89 { 136 | .day-reference { 137 | width: em-calc(750); 138 | } 139 | } 140 | 141 | .day-89-text { 142 | $font-size: 35; 143 | 144 | font-size: em-calc($font-size); 145 | width: em-calc(750, $font-size); 146 | } 147 | } -------------------------------------------------------------------------------- /assets/sass/days/_090.scss: -------------------------------------------------------------------------------- 1 | // ================================================== 2 | // Day 90 3 | // ================================================== 4 | $day-90-font: Bitter, serif; 5 | $day-90-pink: #9f096c; 6 | 7 | .day--90 { 8 | background-color: $day-90-pink; 9 | 10 | .day-scripture { 11 | padding-top: 1em; 12 | padding-bottom: 1em; 13 | @include mq(small) { 14 | padding-top: 2em; 15 | padding-bottom: 2em; 16 | } 17 | @include mq(medium) { 18 | padding-top: 3em; 19 | padding-bottom: 3em; 20 | } 21 | @include mq(mid) { 22 | padding-top: 4em; 23 | padding-bottom: 4em; 24 | } 25 | } 26 | 27 | .day-text { 28 | font-family: $day-90-font; 29 | text-align: center; 30 | @include font-smoothing; 31 | } 32 | 33 | .day-reference { 34 | margin-top: 2em; 35 | } 36 | 37 | .day-reference-link { 38 | font-size: em-calc(14); 39 | @include mq(small) { 40 | font-size: em-calc(15); 41 | } 42 | @include mq(medium) { 43 | font-size: 1em; 44 | } 45 | color: $white; 46 | background-color: $day-90-pink; 47 | } 48 | } 49 | 50 | @mixin day-90-loop { 51 | $shadow : ""; 52 | $counter: 0.00018; 53 | 54 | @for $i from 1 through 460 { 55 | $alpha: $counter * $i; 56 | 57 | @if $i > 1 { 58 | $shadow: $shadow + ","; 59 | } 60 | $shadow: #{$shadow} 0px #{$i}px rgba($white, $alpha); 61 | } 62 | 63 | text-shadow: $shadow; 64 | } 65 | 66 | .day-90-first { 67 | font-size: em-calc(50); 68 | color: $black; 69 | text-align: center; 70 | margin-bottom: 0.2em; 71 | display: block; 72 | @include day-90-loop; 73 | } 74 | 75 | .day-90-next { 76 | $font-size: 16; 77 | 78 | font-size: em-calc($font-size); 79 | color: $white; 80 | line-height: 1.3; 81 | text-shadow: em-calc(1 1, $font-size) 0 rgba($black, 0.7); 82 | width: em-calc(200, $font-size); 83 | display: inline-block; 84 | } 85 | 86 | @include mq(small) { 87 | .day-90-first { 88 | font-size: em-calc(65); 89 | } 90 | 91 | .day-90-next { 92 | $font-size: 20; 93 | 94 | font-size: em-calc($font-size); 95 | text-shadow: em-calc(1 1, $font-size) 0 rgba($black, 0.7); 96 | } 97 | } 98 | 99 | @include mq(medium) { 100 | .day-90-first { 101 | font-size: em-calc(80); 102 | } 103 | 104 | .day-90-next { 105 | $font-size: 20; 106 | 107 | font-size: em-calc($font-size); 108 | text-shadow: em-calc(1 1, $font-size) 0 rgba($black, 0.7); 109 | } 110 | } 111 | 112 | @include mq(mid) { 113 | .day-90-first { 114 | font-size: em-calc(115); 115 | } 116 | 117 | .day-90-next { 118 | $font-size: 20; 119 | 120 | font-size: em-calc($font-size); 121 | width: auto; 122 | text-shadow: em-calc(1 1, $font-size) 0 rgba($black, 0.7); 123 | } 124 | } -------------------------------------------------------------------------------- /assets/sass/days/_092.scss: -------------------------------------------------------------------------------- 1 | // ================================================== 2 | // Day 92 3 | // ================================================== 4 | $day-92-font: "News Cycle", sans-serif; 5 | $day-92-purple: #5c4d78; 6 | $day-92-blue: #6191e2; 7 | 8 | .day--92 { 9 | background-color: $day-92-purple; 10 | background: linear-gradient(to bottom, $day-92-purple, $day-92-blue); 11 | 12 | .day-scripture { 13 | padding-top: 1em; 14 | padding-bottom: 1em; 15 | @include mq(small) { 16 | padding-top: 2em; 17 | padding-bottom: 2em; 18 | } 19 | @include mq(medium) { 20 | padding-top: 3em; 21 | padding-bottom: 3em; 22 | } 23 | @include mq(mid) { 24 | padding-top: 4em; 25 | padding-bottom: 4em; 26 | } 27 | } 28 | 29 | .day-text { 30 | font-family: $day-92-font; 31 | color: #fff; 32 | text-align: center; 33 | text-transform: uppercase; 34 | } 35 | 36 | .day-reference-link { 37 | letter-spacing: 0.05em; 38 | color: $white; 39 | } 40 | } 41 | 42 | .day-92-text { 43 | $font-size: 20; 44 | 45 | font-size: em-calc($font-size); 46 | width: em-calc(280, $font-size); 47 | margin-left: auto; 48 | margin-right: auto; 49 | display: block; 50 | position: relative; 51 | cursor: default; 52 | 53 | em, 54 | strong { 55 | transition-property: -webkit-filter, filter, opacity, letter-spacing; 56 | transition-duration: 0.4s; 57 | transition-timing-function: ease; 58 | } 59 | 60 | em { 61 | font-style: normal; 62 | } 63 | 64 | strong { 65 | font-size: 3.75em; 66 | letter-spacing: 0.1em; 67 | position: absolute; 68 | left: 0; 69 | top: -0.415em; 70 | width: 100%; 71 | opacity: 0.75; 72 | filter: blur(5px); 73 | } 74 | 75 | &:hover { 76 | em { 77 | filter: blur(2px); 78 | } 79 | 80 | strong { 81 | letter-spacing: 0.05em; 82 | opacity: 1; 83 | filter: blur(0); 84 | } 85 | } 86 | } 87 | 88 | .day-92-text + .day-92-text { 89 | margin-top: 3.5em; 90 | } 91 | 92 | .day-92-text--last { 93 | margin-bottom: 3.5em; 94 | } 95 | 96 | @include mq(small) { 97 | .day-92-text-wrap { 98 | font-size: 1.2em; 99 | } 100 | } 101 | 102 | @include mq(medium) { 103 | .day-92-text-wrap { 104 | font-size: 1.4em; 105 | } 106 | } -------------------------------------------------------------------------------- /assets/sass/days/_093.scss: -------------------------------------------------------------------------------- 1 | // ================================================== 2 | // Day 93 3 | // ================================================== 4 | $day-93-font: Arimo; 5 | 6 | .day--93 { 7 | .day-scripture { 8 | padding-top: 1em; 9 | padding-bottom: 1em; 10 | @include mq(small) { 11 | padding-top: 1em; 12 | padding-bottom: 1em; 13 | } 14 | @include mq(medium) { 15 | padding-top: 2em; 16 | padding-bottom: 2em; 17 | } 18 | @include mq(mid) { 19 | padding-top: 3em; 20 | padding-bottom: 3em; 21 | } 22 | } 23 | 24 | .day-text { 25 | font-family: $day-93-font; 26 | font-weight: 700; 27 | color: $black; 28 | text-align: center; 29 | } 30 | 31 | .day-reference { 32 | margin-top: 2em; 33 | } 34 | 35 | .day-reference-link { 36 | color: $black; 37 | } 38 | } 39 | 40 | .day-93-text-wrap { 41 | font-size: em-calc(30); 42 | @include mq(small) { 43 | font-size: em-calc(40); 44 | } 45 | @include mq(medium) { 46 | font-size: em-calc(50); 47 | } 48 | @include mq(mid) { 49 | font-size: em-calc(60); 50 | } 51 | text-align: left; 52 | background: repeating-linear-gradient( 53 | -45deg, 54 | $white, 55 | $white 25%, 56 | $black 25%, 57 | $black 50%, 58 | $white 50% 59 | ) top left fixed; 60 | background-size: 3.4em 3.4em; 61 | background-position: center; 62 | display: inline-block; 63 | width: em-calc(150); 64 | transform: translate3d(0,0,0); 65 | } 66 | 67 | .day-93-text { 68 | color: $white; 69 | line-height: 1.1; 70 | mix-blend-mode: difference; 71 | } -------------------------------------------------------------------------------- /assets/sass/days/_094.scss: -------------------------------------------------------------------------------- 1 | // ================================================== 2 | // Day 94 3 | // ================================================== 4 | $day-94-font : Dosis, sans-serif; 5 | $day-94-blue : #1e88e5; 6 | $day-94-red : #e53935; 7 | $day-94-yellow: #fdd835; 8 | 9 | .day--94 { 10 | background-color: $grey-darkest; 11 | 12 | .day-number, 13 | .day-font-link { 14 | color: $grey-darker; 15 | border-color: $grey-darker; 16 | } 17 | 18 | .day-text { 19 | font-family: $day-94-font; 20 | text-align: center; 21 | } 22 | 23 | .day-reference { 24 | margin-top: 1.5em; 25 | @include mq(small) { 26 | margin-top: 2em; 27 | } 28 | } 29 | 30 | .day-reference-link { 31 | color: $grey; 32 | 33 | @include mq(small) { 34 | font-size: 1.05em; 35 | } 36 | @include mq(medium) { 37 | font-size: 1.1em; 38 | } 39 | @include mq(mid) { 40 | font-size: 1.15em; 41 | } 42 | @include mq(large) { 43 | font-size: 1.2em; 44 | } 45 | } 46 | } 47 | 48 | .day-94-diagram { 49 | @include mq(small) { 50 | font-size: 1.2em; 51 | } 52 | @include mq(medium) { 53 | font-size: 1.4em; 54 | } 55 | @include mq(mid) { 56 | font-size: 1.6em; 57 | } 58 | @include mq(large) { 59 | font-size: 1.8em; 60 | } 61 | position: relative; 62 | margin-bottom: em-calc(100); 63 | display: inline-block; 64 | 65 | &, 66 | &::before, 67 | &::after { 68 | width: em-calc(170); 69 | height: em-calc(170); 70 | border-radius: 100%; 71 | } 72 | 73 | &::before, 74 | &::after { 75 | content: ""; 76 | display: block; 77 | top: em-calc(100); 78 | position: absolute; 79 | } 80 | 81 | background-color: rgba($day-94-blue, 0.35); 82 | 83 | &::before { 84 | background-color: rgba($day-94-red, 0.35); 85 | left: em-calc(-55); 86 | } 87 | 88 | &::after { 89 | background-color: rgba($day-94-yellow, 0.35); 90 | right: em-calc(-55); 91 | } 92 | } 93 | 94 | .day-94-text { 95 | $font-size: 20; 96 | 97 | font-size: em-calc($font-size); 98 | color: $grey-lightest; 99 | line-height: 1.2; 100 | text-shadow: 1px 1px 0 $grey-darkest; 101 | width: em-calc(230, $font-size); 102 | margin-top: em-calc(96, $font-size); 103 | margin-left: em-calc(-30, $font-size); 104 | display: inline-block; 105 | position: relative; 106 | z-index: 1; 107 | } -------------------------------------------------------------------------------- /assets/sass/days/_096.scss: -------------------------------------------------------------------------------- 1 | // ================================================== 2 | // Day 96 3 | // ================================================== 4 | $day-96-font-slab : "Roboto Slab", serif; 5 | $day-96-font-sans-serif: "Roboto Condensed", sans-serif; 6 | $day-96-sea-dark : #00b9b9; 7 | $day-96-sea-light : #00cdb4; 8 | 9 | .day--96 { 10 | background-color: $day-96-sea-dark; 11 | overflow: hidden; 12 | 13 | .day-scripture { 14 | padding-top: 1em; 15 | padding-bottom: 1em; 16 | 17 | @include mq(small) { 18 | padding-top: 2em; 19 | padding-bottom: 2em; 20 | } 21 | @include mq(medium) { 22 | padding-top: 3em; 23 | padding-bottom: 3em; 24 | } 25 | @include mq(mid) { 26 | padding-top: 4em; 27 | padding-bottom: 4em; 28 | } 29 | @include mq(large) { 30 | padding-top: 5em; 31 | padding-bottom: 5em; 32 | } 33 | } 34 | 35 | .day-text { 36 | font-family: $day-96-font-slab; 37 | } 38 | 39 | .day-reference { 40 | text-align: center; 41 | padding-top: 2em; 42 | position: relative; 43 | } 44 | 45 | .day-reference-link { 46 | color: $white; 47 | color: rgba($white, 0.4); 48 | } 49 | 50 | .day-font { 51 | color: rgba($white, 0.3); 52 | } 53 | } 54 | 55 | .day-96-jesus { 56 | font-family: $day-96-font-sans-serif; 57 | font-weight: 700; 58 | font-size: em-calc(110); 59 | color: $day-96-sea-light; 60 | color: rgba($day-96-sea-light, 0.7); 61 | text-transform: uppercase; 62 | position: absolute; 63 | left: 0; 64 | right: 0; 65 | text-align: center; 66 | } 67 | 68 | .day-96-text { 69 | letter-spacing: 0.02em; 70 | line-height: 1.3; 71 | color: $white; 72 | text-align: center; 73 | width: em-calc(220); 74 | margin-left: auto; 75 | margin-right: auto; 76 | top: em-calc(22); 77 | margin-bottom: em-calc(22); 78 | display: block; 79 | position: relative; 80 | } 81 | 82 | @include mq(small) { 83 | .day-96-jesus { 84 | font-size: em-calc(170); 85 | } 86 | 87 | .day-96-text { 88 | $font-size: 17; 89 | 90 | font-size: em-calc($font-size); 91 | width: em-calc(340, $font-size); 92 | top: em-calc(57, $font-size); 93 | margin-bottom: em-calc(100, $font-size); 94 | } 95 | } 96 | 97 | @include mq(medium) { 98 | .day-96-jesus { 99 | font-size: em-calc(230); 100 | } 101 | 102 | .day-96-text { 103 | $font-size: 19; 104 | 105 | font-size: em-calc($font-size); 106 | width: em-calc(380, $font-size); 107 | top: em-calc(83, $font-size); 108 | margin-bottom: em-calc(147, $font-size); 109 | } 110 | } 111 | 112 | @include mq(mid) { 113 | .day-96-jesus { 114 | font-size: em-calc(270); 115 | } 116 | 117 | .day-96-text { 118 | $font-size: 20; 119 | 120 | font-size: em-calc($font-size); 121 | width: em-calc(400, $font-size); 122 | top: em-calc(100, $font-size); 123 | margin-bottom: em-calc(178, $font-size); 124 | } 125 | } 126 | 127 | @include mq(large) { 128 | .day-96-jesus { 129 | font-size: em-calc(330); 130 | } 131 | 132 | .day-96-text { 133 | $font-size: 22; 134 | 135 | font-size: em-calc($font-size); 136 | width: em-calc(440, $font-size); 137 | top: em-calc(127, $font-size); 138 | margin-bottom: em-calc(224, $font-size); 139 | } 140 | } -------------------------------------------------------------------------------- /assets/sass/days/_098.scss: -------------------------------------------------------------------------------- 1 | // ================================================== 2 | // Day 98 3 | // ================================================== 4 | $day-98-font: "Playfair Display", "Times New Roman", Times, serif; 5 | $day-98-red : #d40d25; 6 | 7 | .day--98 { 8 | background-color: $day-98-red; 9 | 10 | .day-scripture { 11 | padding-top: 1em; 12 | padding-bottom: 1em; 13 | @include mq(small) { 14 | padding-top: 2.5em; 15 | padding-bottom: 2.5em; 16 | } 17 | @include mq(medium) { 18 | padding-top: 4em; 19 | padding-bottom: 4em; 20 | } 21 | @include mq(mid) { 22 | padding-top: 5.5em; 23 | padding-bottom: 5.5em; 24 | } 25 | } 26 | 27 | .day-text { 28 | font-family: $day-98-font; 29 | font-weight: 700; 30 | text-align: center; 31 | text-transform: uppercase; 32 | @include font-smoothing; 33 | } 34 | 35 | .day-reference { 36 | position: relative; 37 | } 38 | 39 | .day-reference-link { 40 | color: $grey-darkest; 41 | } 42 | } 43 | 44 | .day-98-text { 45 | @include mq(small) { 46 | font-size: 1.5em; 47 | } 48 | @include mq(medium) { 49 | font-size: 2.1em; 50 | } 51 | @include mq(mid) { 52 | font-size: 2.7em; 53 | } 54 | @include mq(large) { 55 | font-size: 2.7em; 56 | } 57 | } 58 | 59 | .day-98-first, 60 | .day-98-next, 61 | .day-98-last { 62 | display: inline-block; 63 | position: relative; 64 | } 65 | 66 | .day-98-first { 67 | font-size: em-calc(20); 68 | line-height: 0.8; 69 | 70 | &::before { 71 | font-size: 4.3em; 72 | color: $white; 73 | content: "“"; 74 | position: absolute; 75 | left: -0.45em; 76 | bottom: -0.43em; 77 | } 78 | } 79 | 80 | .day-98-next { 81 | font-size: em-calc(17.3); 82 | line-height: 0.8; 83 | position: relative; 84 | left: -0.1em; 85 | } 86 | 87 | .day-98-last { 88 | font-size: em-calc(26.7); 89 | line-height: 0.75; 90 | position: relative; 91 | left: -0.05em; 92 | 93 | &::before { 94 | font-size: 4.47em; 95 | color: $white; 96 | content: "”"; 97 | position: absolute; 98 | right: -0.42em; 99 | top: -0.045em; 100 | } 101 | } -------------------------------------------------------------------------------- /assets/sass/days/_099.scss: -------------------------------------------------------------------------------- 1 | // ================================================== 2 | // Day 99 3 | // ================================================== 4 | $day-99-text-sans-serif: "Pragati Narrow"; 5 | $day-99-text-serif: "Old Standard TT"; 6 | $day-99-grey: #e5e5e5; 7 | 8 | .day--99 { 9 | background-color: $day-99-grey; 10 | 11 | .day-scripture { 12 | padding-top: 1em; 13 | padding-bottom: 1em; 14 | @include mq(small) { 15 | padding-top: 2em; 16 | padding-bottom: 2em; 17 | } 18 | @include mq(medium) { 19 | padding-top: 3em; 20 | padding-bottom: 3em; 21 | } 22 | } 23 | 24 | .day-text { 25 | font-family: $day-99-text-serif; 26 | font-style: italic; 27 | text-align: center; 28 | text-transform: uppercase; 29 | } 30 | 31 | .day-reference { 32 | margin-top: 1.5em; 33 | } 34 | 35 | .day-reference-link { 36 | color: $grey-darkest; 37 | } 38 | } 39 | 40 | .day-99-text-wrap { 41 | text-align: left; 42 | width: em-calc(240); 43 | @include mq(small) { 44 | width: em-calc(300); 45 | } 46 | @include mq(medium) { 47 | width: em-calc(400); 48 | } 49 | display: inline-block; 50 | position: relative; 51 | 52 | &, 53 | &::before, 54 | &::after { 55 | border: 1px dashed $black; 56 | } 57 | 58 | &::before, 59 | &::after { 60 | background-color: rgba($white, 0.4); 61 | width: 100%; 62 | height: 100%; 63 | content: ""; 64 | position: absolute; 65 | display: block; 66 | } 67 | 68 | &::before { 69 | top: em-calc(-20); 70 | left: em-calc(-20); 71 | } 72 | 73 | &::after { 74 | top: em-calc(-10); 75 | left: em-calc(-10); 76 | } 77 | } 78 | 79 | .day-99-text { 80 | padding: em-calc(80 50 50 0); 81 | @include mq(small) { 82 | padding-top: em-calc(120); 83 | } 84 | @include mq(medium) { 85 | padding: em-calc(150 75 75 0); 86 | } 87 | @include mq(large) { 88 | padding-top: em-calc(175); 89 | } 90 | position: relative; 91 | z-index: 2; 92 | } 93 | 94 | .day-99-text-serif, 95 | .day-99-text-sans-serif { 96 | text-align: right; 97 | display: block; 98 | } 99 | 100 | .day-99-text-serif { 101 | @include mq(medium) { 102 | font-size: 1.1em; 103 | } 104 | } 105 | 106 | .day-99-text-sans-serif { 107 | font-family: $day-99-text-sans-serif; 108 | font-style: normal; 109 | font-size: 1.75em; 110 | @include font-smoothing; 111 | 112 | @include mq(small) { 113 | font-size: 2em; 114 | } 115 | @include mq(medium) { 116 | font-size: 2.5em; 117 | } 118 | letter-spacing: 0.15em; 119 | position: relative; 120 | right: -0.2em; 121 | } 122 | 123 | .day-99-text-sans-serif--comma { 124 | &::after { 125 | content: ","; 126 | position: absolute; 127 | right: -0.35em; 128 | } 129 | } 130 | 131 | .day-99-text-sans-serif + .day-99-text-serif { 132 | margin-top: 1em; 133 | } -------------------------------------------------------------------------------- /assets/sass/days/_100.scss: -------------------------------------------------------------------------------- 1 | // ================================================== 2 | // Day 100 3 | // ================================================== 4 | .day--100 { 5 | background-color: #34374a; 6 | position: relative; 7 | 8 | .day-number { 9 | position: relative; 10 | z-index: 2; 11 | } 12 | } 13 | 14 | .day-100-column--verse { 15 | height: em-calc(500); 16 | width: 100%; 17 | position: absolute; 18 | top: 0; 19 | background: url(../images/day-100-verse.jpg) center; 20 | @include mq(xlarge) { 21 | background-image: url(../images/day-100-verse@2x.jpg); 22 | } 23 | background-size: cover; 24 | left: 0; 25 | } 26 | 27 | .day-100-column--text { 28 | color: $white; 29 | margin-top: em-calc(415); 30 | } 31 | 32 | @include mq(mid) { 33 | .day--100 { 34 | height: em-calc(550); 35 | } 36 | 37 | .day-100-column { 38 | height: auto; 39 | width: 50%; 40 | position: absolute; 41 | bottom: 0; 42 | top: 0; 43 | } 44 | 45 | .day-100-column--text { 46 | margin-top: 0; 47 | left: 50%; 48 | } 49 | } 50 | 51 | @include mq(large) { 52 | .day--100 { 53 | height: em-calc(600); 54 | } 55 | } 56 | 57 | .day-100-text { 58 | @extend .day; 59 | $font-size: 15; 60 | 61 | font-size: em-calc($font-size); 62 | line-height: 1.3; 63 | max-width: em-calc(400, 15); 64 | margin-left: auto; 65 | margin-right: auto; 66 | @include font-smoothing; 67 | 68 | p + p { 69 | margin-top: 1.5em; 70 | } 71 | 72 | a { 73 | color: #6d839a; 74 | } 75 | 76 | @include mq(medium) { 77 | $font-size: 16; 78 | 79 | font-size: em-calc(16); 80 | max-width: em-calc(400, $font-size); 81 | } 82 | 83 | @include mq(large) { 84 | $font-size: 17; 85 | 86 | font-size: em-calc(17); 87 | max-width: em-calc(400, $font-size); 88 | margin-left: 0; 89 | margin-right: 0; 90 | } 91 | } -------------------------------------------------------------------------------- /assets/sass/modules/_about.scss: -------------------------------------------------------------------------------- 1 | // ================================================== 2 | // About 3 | // ================================================== 4 | .about { 5 | @extend .day; 6 | background-color: $grey-lightest; 7 | } 8 | 9 | // Header 10 | // ================================================== 11 | .about-header { 12 | 13 | } 14 | 15 | // Title 16 | // ================================================== 17 | .about-title-wrap { 18 | text-align: center; 19 | } 20 | 21 | .about-title { 22 | @include serif; 23 | margin-bottom: em-calc(20); 24 | } 25 | 26 | .about-title-head { 27 | font-size: 2.5em; 28 | font-style: italic; 29 | font-weight: 700; 30 | display: block 31 | } 32 | 33 | .about-title-tail { 34 | font-size: 1em; 35 | font-style: italic; 36 | letter-spacing: 0.22em; 37 | text-transform: uppercase; 38 | position: relative; 39 | left: em-calc(1); 40 | } 41 | 42 | // Description 43 | // ================================================== 44 | .about-description { 45 | color: $grey-darker; 46 | line-height: 1.3; 47 | letter-spacing: -0.02em; 48 | max-width: em-calc(500); 49 | margin-left: auto; 50 | margin-right: auto; 51 | 52 | p:first-child { 53 | margin-bottom: 0.5em; 54 | } 55 | } 56 | 57 | // Responsive 58 | // ================================================== 59 | @include mq(medium) { 60 | .container--about { 61 | display: flex; 62 | justify-content: center; 63 | } 64 | 65 | .about-title-wrap { 66 | text-align: right; 67 | flex: 0 0 em-calc(210); 68 | margin-right: em-calc(50); 69 | } 70 | 71 | .about-description { 72 | flex: 1; 73 | max-width: em-calc(400); 74 | margin-left: 0; 75 | margin-right: 0; 76 | } 77 | 78 | .about-title { 79 | margin-top: em-calc(-15); 80 | margin-bottom: 0; 81 | } 82 | 83 | .about-title-head { 84 | font-size: em-calc(48); 85 | } 86 | 87 | .about-title-tail { 88 | $font-size: 19; 89 | 90 | font-size: em-calc($font-size); 91 | letter-spacing: 0.23em; 92 | left: em-calc(3.5, $font-size); 93 | } 94 | } 95 | 96 | @include mq(mid) { 97 | .about-title-head { 98 | font-size: em-calc(64); 99 | } 100 | 101 | .about-title-tail { 102 | $font-size: 22; 103 | 104 | font-size: em-calc($font-size); 105 | letter-spacing: 0.355em; 106 | left: em-calc(6, $font-size); 107 | } 108 | 109 | .about-title-wrap { 110 | flex-basis: em-calc(270); 111 | margin-right: em-calc(70); 112 | } 113 | } -------------------------------------------------------------------------------- /assets/sass/modules/_carbon-ads.scss: -------------------------------------------------------------------------------- 1 | // ================================================== 2 | // Carbon Ads 3 | // ================================================== 4 | #carbonads { 5 | background-color: $grey-lightest; 6 | padding-top: em-calc(20); 7 | padding-bottom: em-calc(40); 8 | @include mq(medium) { 9 | padding-top: em-calc(30); 10 | padding-bottom: em-calc(50); 11 | } 12 | @include mq(large) { 13 | padding-top: em-calc(40); 14 | padding-bottom: em-calc(60); 15 | } 16 | 17 | > span { 18 | width: 100%; 19 | max-width: em-calc(300); 20 | margin-left: auto; 21 | margin-right: auto; 22 | display: block; 23 | position: relative; 24 | } 25 | } 26 | 27 | .carbon-wrap { 28 | width: 100%; 29 | display: table; 30 | position: relative; 31 | } 32 | 33 | .carbon-img, 34 | .carbon-text { 35 | display: table-cell; 36 | vertical-align: middle; 37 | text-align: left; 38 | } 39 | 40 | .carbon-img { 41 | background-color: $white; 42 | 43 | img { 44 | display: block; 45 | } 46 | } 47 | 48 | $carbon-text-font-size: 12; 49 | 50 | .carbon-text { 51 | font-size: em-calc($carbon-text-font-size); 52 | color: $grey-dark; 53 | line-height: 1.2; 54 | padding-left: em-calc(15, $carbon-text-font-size); 55 | } 56 | 57 | $carbon-poweredby-font-size: 11; 58 | 59 | .carbon-poweredby { 60 | @include serif; 61 | font-size: em-calc($carbon-poweredby-font-size); 62 | color: $grey; 63 | text-align: center; 64 | width: em-calc(130, $carbon-poweredby-font-size); 65 | position: absolute; 66 | bottom: em-calc(-20, $carbon-poweredby-font-size); 67 | left: 0; 68 | } 69 | 70 | @include mq(1200) { 71 | #carbonads { 72 | padding-bottom: 0; 73 | padding-top: 0; 74 | position: absolute; 75 | top: em-calc(20); 76 | right: em-calc(30); 77 | 78 | > span { 79 | max-width: em-calc(130); 80 | position: static; 81 | } 82 | } 83 | 84 | .carbon-img, 85 | .carbon-text { 86 | display: block; 87 | } 88 | 89 | .carbon-text { 90 | padding-top: em-calc(7, $carbon-poweredby-font-size); 91 | padding-left: 0; 92 | } 93 | 94 | a.carbon-text { 95 | color: $grey-dark; 96 | } 97 | 98 | .carbon-poweredby { 99 | // bottom: em-calc(-20, $carbon-poweredby-font-size); 100 | } 101 | } -------------------------------------------------------------------------------- /assets/sass/modules/_day.scss: -------------------------------------------------------------------------------- 1 | // ================================================== 2 | // Day 3 | // ================================================== 4 | .day { 5 | overflow: hidden; 6 | } 7 | 8 | // Number 9 | // ================================================== 10 | .day-number { 11 | font-weight: 700; 12 | color: $grey-darkest; 13 | text-align: center; 14 | border-bottom: 3px solid $grey-darkest; 15 | display: inline-block; 16 | width: em-calc(35); 17 | padding-bottom: em-calc(10); 18 | } 19 | 20 | .day-number--white { 21 | color: $white; 22 | border-bottom-color: $white; 23 | } 24 | 25 | // Scripture 26 | // ================================================== 27 | .day-scripture { 28 | max-width: em-calc(map-get($mq-breakpoints, xlarge)); 29 | margin-left: auto; 30 | margin-right: auto; 31 | @include clearfix; 32 | } 33 | 34 | // Info 35 | // ================================================== 36 | $day-info-font-size: 12; 37 | 38 | .day-info { 39 | font-size: em-calc($day-info-font-size); 40 | font-weight: 700; 41 | letter-spacing: 0.1em; 42 | text-transform: uppercase; 43 | text-align: center; 44 | } 45 | 46 | // Scripture 47 | // ================================================== 48 | .day-scripture { 49 | 50 | } 51 | 52 | // Text 53 | // ================================================== 54 | .day-text { 55 | 56 | } 57 | 58 | // Reference 59 | // ================================================== 60 | .day-reference { 61 | display: block; 62 | } 63 | 64 | .day-reference-link { 65 | 66 | } 67 | 68 | // Font 69 | // ================================================== 70 | .day-font { 71 | color: $grey; 72 | line-height: 1.4; 73 | } 74 | 75 | .day-font-link { 76 | color: $grey-darkest; 77 | } 78 | 79 | // Responsive 80 | // ================================================== 81 | $day-spacing-y: 40; 82 | 83 | .day { 84 | padding: em-calc($day-spacing-y 15); 85 | } 86 | .day-number { 87 | margin-bottom: em-calc($day-spacing-y * 1.4); 88 | } 89 | .day-info { 90 | margin-top: em-calc($day-spacing-y * 1.6, $day-info-font-size); 91 | } 92 | 93 | @include mq(small) { 94 | $day-spacing-y: 50; 95 | 96 | .day { 97 | padding: em-calc($day-spacing-y 30); 98 | } 99 | .day-number { 100 | margin-bottom: em-calc($day-spacing-y * 1.3); 101 | } 102 | .day-info { 103 | margin-top: em-calc($day-spacing-y * 1.5, $day-info-font-size); 104 | } 105 | } 106 | @include mq(medium) { 107 | $day-spacing-y: 60; 108 | 109 | .day { 110 | padding: em-calc($day-spacing-y 55) 111 | } 112 | .day-number { 113 | $font-size: 17; 114 | 115 | font-size: em-calc($font-size); 116 | margin-bottom: em-calc($day-spacing-y * 1.2, $font-size); 117 | } 118 | .day-info { 119 | margin-top: em-calc($day-spacing-y * 1.4, $day-info-font-size); 120 | } 121 | } 122 | @include mq(mid) { 123 | $day-spacing-y: 70; 124 | 125 | .day { 126 | padding: em-calc($day-spacing-y 75) 127 | } 128 | .day-number { 129 | margin-bottom: em-calc($day-spacing-y * 1.1); 130 | } 131 | .day-info { 132 | margin-top: em-calc($day-spacing-y * 1.3, $day-info-font-size); 133 | } 134 | } 135 | @include mq(large) { 136 | $day-spacing-y: 80; 137 | 138 | .day { 139 | padding: em-calc($day-spacing-y 90); 140 | } 141 | .day-number { 142 | $font-size: 18; 143 | 144 | font-size: em-calc($font-size); 145 | margin-bottom: em-calc($day-spacing-y, $font-size); 146 | } 147 | .day-info { 148 | margin-top: em-calc($day-spacing-y * 1.2, $day-info-font-size); 149 | } 150 | } -------------------------------------------------------------------------------- /assets/sass/modules/_footer.scss: -------------------------------------------------------------------------------- 1 | // ================================================== 2 | // Footer 3 | // ================================================== 4 | .footer { 5 | $font-size: 14; 6 | 7 | font-size: em-calc($font-size); 8 | color: $white; 9 | text-align: center; 10 | background-color: $grey-darkest; 11 | padding-top: em-calc(25); 12 | padding-bottom: em-calc(25); 13 | 14 | @include mq(medium) { 15 | padding-top: em-calc(30); 16 | padding-bottom: em-calc(30); 17 | } 18 | 19 | @include mq(mid) { 20 | padding-top: em-calc(40); 21 | padding-bottom: em-calc(40); 22 | } 23 | 24 | a { 25 | color: $white; 26 | } 27 | } -------------------------------------------------------------------------------- /assets/sass/modules/_layout.scss: -------------------------------------------------------------------------------- 1 | // ================================================== 2 | // Layout 3 | // ================================================== 4 | .container { 5 | max-width: em-calc(map-get($mq-breakpoints, large)); 6 | margin-left: auto; 7 | margin-right: auto; 8 | } -------------------------------------------------------------------------------- /assets/sass/modules/_paris.scss: -------------------------------------------------------------------------------- 1 | .paris { 2 | text-align: center; 3 | background: linear-gradient(to right, #002395 33.3%, #fff 33.3%, #fff 66.6%, #e72837 66.6%, #e72837); 4 | padding-top: em-calc(75); 5 | @include mq(small) { 6 | padding-top: em-calc(100); 7 | } 8 | @include mq(medium) { 9 | padding-top: em-calc(125); 10 | } 11 | @include mq(large) { 12 | padding-top: em-calc(150); 13 | } 14 | } 15 | 16 | .paris-text { 17 | $font-size: 14; 18 | 19 | font-size: em-calc($font-size); 20 | font-family: Roboto; 21 | color: $grey-darker; 22 | text-transform: uppercase; 23 | background-color: rgba($white, 0.7); 24 | padding: em-calc(10, $font-size); 25 | margin-bottom: em-calc(10, $font-size); 26 | display: inline-block; 27 | } -------------------------------------------------------------------------------- /assets/sass/screen.scss: -------------------------------------------------------------------------------- 1 | @charset "UTF-8"; 2 | // ================================================== 3 | // Core 4 | // ================================================== 5 | @import "core/reset"; 6 | @import "core/settings"; 7 | @import "bourbon"; 8 | @import "mq-sass"; 9 | @import "core/fonts"; 10 | @import "core/mixins"; 11 | @import "core/variables"; 12 | @import "core/typography"; 13 | @import "core/base"; 14 | 15 | // ================================================== 16 | // Modules 17 | // ================================================== 18 | @import "modules/layout"; 19 | @import "modules/paris"; 20 | @import "modules/footer"; 21 | @import "modules/day"; 22 | @import "modules/about"; 23 | 24 | // ================================================== 25 | // Days 26 | // ================================================== 27 | @import "days/100"; 28 | @import "days/099"; 29 | @import "days/098"; 30 | @import "days/097"; 31 | @import "days/096"; 32 | @import "days/095"; 33 | @import "days/094"; 34 | @import "days/093"; 35 | @import "days/092"; 36 | @import "days/091"; 37 | @import "days/090"; 38 | @import "days/089"; 39 | @import "days/088"; 40 | @import "days/087"; 41 | @import "days/086"; 42 | @import "days/085"; 43 | @import "days/084"; 44 | @import "days/083"; 45 | @import "days/082"; 46 | @import "days/081"; 47 | @import "days/080"; 48 | @import "days/079"; 49 | @import "days/078"; 50 | @import "days/077"; 51 | @import "days/076"; 52 | @import "days/075"; 53 | @import "days/074"; 54 | @import "days/073"; 55 | @import "days/072"; 56 | @import "days/071"; 57 | @import "days/070"; 58 | @import "days/069"; 59 | @import "days/068"; 60 | @import "days/067"; 61 | @import "days/066"; 62 | @import "days/065"; 63 | @import "days/064"; 64 | @import "days/063"; 65 | @import "days/062"; 66 | @import "days/061"; 67 | @import "days/060"; 68 | @import "days/059"; 69 | @import "days/058"; 70 | @import "days/057"; 71 | @import "days/056"; 72 | @import "days/055"; 73 | @import "days/054"; 74 | @import "days/053"; 75 | @import "days/052"; 76 | @import "days/051"; 77 | @import "days/050"; 78 | @import "days/049"; 79 | @import "days/048"; 80 | @import "days/047"; 81 | @import "days/046"; 82 | @import "days/045"; 83 | @import "days/044"; 84 | @import "days/043"; 85 | @import "days/042"; 86 | @import "days/041"; 87 | @import "days/040"; 88 | @import "days/039"; 89 | @import "days/038"; 90 | @import "days/037"; 91 | @import "days/036"; 92 | @import "days/035"; 93 | @import "days/034"; 94 | @import "days/033"; 95 | @import "days/032"; 96 | @import "days/031"; 97 | @import "days/030"; 98 | @import "days/029"; 99 | @import "days/028"; 100 | @import "days/027"; 101 | @import "days/026"; 102 | @import "days/025"; 103 | @import "days/024"; 104 | @import "days/023"; 105 | @import "days/022"; 106 | @import "days/021"; 107 | @import "days/020"; 108 | @import "days/019"; 109 | @import "days/018"; 110 | @import "days/017"; 111 | @import "days/016"; 112 | @import "days/015"; 113 | @import "days/014"; 114 | @import "days/013"; 115 | @import "days/012"; 116 | @import "days/011"; 117 | @import "days/010"; 118 | @import "days/009"; 119 | @import "days/008"; 120 | @import "days/007"; 121 | @import "days/006"; 122 | @import "days/005"; 123 | @import "days/004"; 124 | @import "days/003"; 125 | @import "days/002"; 126 | @import "days/001"; 127 | 128 | // ================================================== 129 | // Carbon Ads 130 | // ================================================== 131 | @import "modules/carbon-ads"; -------------------------------------------------------------------------------- /bower.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "100-days", 3 | "version": "0.0.1", 4 | "description": "100 Days", 5 | "dependencies": {}, 6 | "devDependencies": { 7 | "bourbon": "~4.2.3", 8 | "mq-sass": "~0.2.0" 9 | } 10 | } 11 | -------------------------------------------------------------------------------- /favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jonsuh/100-days-of-scriptures/ff29094dbd15584f0d46a393e797a32b9f2a5037/favicon.ico -------------------------------------------------------------------------------- /gulpfile.js: -------------------------------------------------------------------------------- 1 | var gulp = require('gulp'); 2 | var autoprefixer = require('gulp-autoprefixer'); 3 | var browserSync = require('browser-sync'); 4 | var concat = require('gulp-concat'); 5 | var filter = require('gulp-filter'); 6 | var jshint = require('gulp-jshint'); 7 | var minifycss = require('gulp-minify-css'); 8 | var newer = require('gulp-newer'); 9 | var notify = require('gulp-notify'); 10 | var plumber = require('gulp-plumber'); 11 | var reload = browserSync.reload; 12 | var sass = require('gulp-sass'); 13 | 14 | var onError = function(err) { 15 | notify.onError({ 16 | title: "Error", 17 | message: "<%= error %>", 18 | })(err); 19 | this.emit('end'); 20 | }; 21 | 22 | var plumberOptions = { 23 | errorHandler: onError, 24 | }; 25 | 26 | gulp.task('minifycss', function() { 27 | return gulp.src('assets/css/**/*.css') 28 | .pipe(minifycss()) 29 | .pipe(gulp.dest('assets/css')) 30 | }); 31 | 32 | gulp.task('sass', function() { 33 | var autoprefixerOptions = { 34 | browsers: ['last 2 versions'], 35 | }; 36 | 37 | var filterOptions = '**/*.css'; 38 | 39 | var reloadOptions = { 40 | stream: true, 41 | }; 42 | 43 | var sassOptions = { 44 | includePaths: [ 45 | 'bower_components/bourbon/app/assets/stylesheets', 46 | 'bower_components/mq-sass/stylesheets' 47 | ] 48 | }; 49 | 50 | return gulp.src('assets/sass/**/*.scss') 51 | .pipe(plumber(plumberOptions)) 52 | .pipe(sass(sassOptions)) 53 | .pipe(autoprefixer(autoprefixerOptions)) 54 | .pipe(gulp.dest('assets/css')) 55 | .pipe(filter(filterOptions)) 56 | .pipe(reload(reloadOptions)); 57 | }); 58 | 59 | gulp.task('watch', function() { 60 | gulp.watch('assets/sass/**/*.scss', ['sass']); 61 | }); 62 | 63 | gulp.task('browsersync', function() { 64 | browserSync({ 65 | server: { 66 | baseDir: './' 67 | }, 68 | open: false, 69 | online: false, 70 | notify: false, 71 | }); 72 | }); 73 | 74 | gulp.task('build', ['sass']); 75 | gulp.task('default', ['sass', 'browsersync', 'watch']); 76 | gulp.task('production', ['build'], function() { 77 | gulp.start('minifycss'); 78 | }); -------------------------------------------------------------------------------- /icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jonsuh/100-days-of-scriptures/ff29094dbd15584f0d46a393e797a32b9f2a5037/icon.png -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "100-days", 3 | "version": "0.0.1", 4 | "description": "100 Days", 5 | "dependencies": {}, 6 | "devDependencies": { 7 | "browser-sync": "^2.8.0", 8 | "gulp": "^3.9.0", 9 | "gulp-autoprefixer": "^2.3.1", 10 | "gulp-concat": "^2.6.0", 11 | "gulp-filter": "^3.0.0", 12 | "gulp-jshint": "^1.11.2", 13 | "gulp-minify-css": "^1.2.0", 14 | "gulp-newer": "^0.5.1", 15 | "gulp-notify": "^2.2.0", 16 | "gulp-plumber": "^1.0.1", 17 | "gulp-sass": "^2.0.4", 18 | "jshint-stylish": "^2.0.1" 19 | } 20 | } 21 | --------------------------------------------------------------------------------