diff --git a/README.md b/README.md index 0f0782d..12b98dd 100644 --- a/README.md +++ b/README.md @@ -14,9 +14,12 @@ Plans to add are: - More Social integration and show off my social pages - Faster loading (SVG Backgrounds are quite large) - ~~Responsive Image Loading~~ - - Async Image/Video loading for content (no point just yet) + - ~~Async Image/Video loading for content (no point just yet)~~ - ~~Async page offsetting,~~ as well as proper loading templates - Improved SEO - Reduce Divitis - Restore previously removed page transitions - - Convert some of the SVGs into responsive PNGs + - ~~Convert some of the SVGs into responsive PNGs~~ Unsure if I'll stick with this permanently + - Work on Async Sections + - Proper Server + - Adjust the order import order so to help CSS Overrides. diff --git a/public/components/section/Section.jsx b/public/components/section/Section.jsx index 7e128d3..8c13534 100644 --- a/public/components/section/Section.jsx +++ b/public/components/section/Section.jsx @@ -41,6 +41,7 @@ export default props => { import BodySection from './body/BodySection'; import ClearSection from './layout/ClearSection'; import ImageSection from './image/ImageSection'; +import BannerImageSection from './image/banner/BannerImageSection'; import SplitSection, { Split } from './layout/SplitSection'; import VideoSection from './video/VideoSection'; @@ -48,6 +49,7 @@ export { BodySection, ClearSection, ImageSection, + BannerImageSection, SplitSection, Split, VideoSection diff --git a/public/components/section/blog/article/FeaturedArticleSection.jsx b/public/components/section/blog/article/FeaturedArticleSection.jsx index 3e25c9e..debd8e3 100644 --- a/public/components/section/blog/article/FeaturedArticleSection.jsx +++ b/public/components/section/blog/article/FeaturedArticleSection.jsx @@ -24,7 +24,7 @@ import React from 'react'; -import Section from '@components/section/Section'; +import BannerImageSection from '@sections/image/banner/BannerImageSection'; import Image from '@objects/image/Image'; import ContentBox from '@objects/content/box/ContentBox'; @@ -36,11 +36,11 @@ export default props => { let { article } = props; return ( -
- + { article.title } @@ -48,6 +48,6 @@ export default props => { { article.shortDescription } -
+ ); }; diff --git a/public/components/section/image/banner/BannerImageSection.jsx b/public/components/section/image/banner/BannerImageSection.jsx new file mode 100644 index 0000000..f46ed48 --- /dev/null +++ b/public/components/section/image/banner/BannerImageSection.jsx @@ -0,0 +1,36 @@ +// Copyright (c) 2018 Dominic Masters +// +// MIT License +// +// Permission is hereby granted, free of charge, to any person obtaining +// a copy of this software and associated documentation files (the +// "Software"), to deal in the Software without restriction, including +// without limitation the rights to use, copy, modify, merge, publish, +// distribute, sublicense, and/or sell copies of the Software, and to +// permit persons to whom the Software is furnished to do so, subject to +// the following conditions: +// +// The above copyright notice and this permission notice shall be +// included in all copies or substantial portions of the Software. +// +// THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, +// EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF +// MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND +// NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE +// LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION +// OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION +// WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. + +import React from 'react'; + +import ImageSection from './../ImageSection'; +import Styles from './BannerImageSection.scss'; + +export default props => { + let { className, imageClassName } = props; + + return ; +}; diff --git a/public/components/section/image/banner/BannerImageSection.scss b/public/components/section/image/banner/BannerImageSection.scss new file mode 100644 index 0000000..fb3080c --- /dev/null +++ b/public/components/section/image/banner/BannerImageSection.scss @@ -0,0 +1,18 @@ +/* + * Banner Image Section + * Section that adjusts the image to better suit a banner, rather than using + * the annoying image size. + * + * Version: + * 1.0.0 - 2018/10/30 + */ +@import '~@styles/global'; + +.c-banner-section { + &__image { + display: block; + width: 100%; + height: 80vh; + object-fit: cover; + } +} diff --git a/public/pages/home/HomePage.scss b/public/pages/home/HomePage.scss index 35aa945..4928966 100644 --- a/public/pages/home/HomePage.scss +++ b/public/pages/home/HomePage.scss @@ -12,14 +12,6 @@ @import '~@styles/global'; .p-home-page { - &__banner { - &-image { - object-fit: cover; - - height: 80vh; - } - } - &__banner, &__promo { position: relative; diff --git a/public/pages/home/sections/BannerSection.jsx b/public/pages/home/sections/BannerSection.jsx index 543992f..31d90bc 100644 --- a/public/pages/home/sections/BannerSection.jsx +++ b/public/pages/home/sections/BannerSection.jsx @@ -24,7 +24,7 @@ import React from 'react'; import { withLanguage } from '@public/language/Language'; import { PageBoundary } from '@components/page/Page'; -import { ImageSection } from '@components/section/Section'; +import { BannerImageSection } from '@sections/Section'; import FloatingContentBox from '@objects/content/box/FloatingContentBox'; import { Title, Subtitle } from '@objects/typography/Typography'; @@ -33,14 +33,11 @@ export default withLanguage(props => { let { lang } = props; return ( - @@ -48,6 +45,6 @@ export default withLanguage(props => { { lang.pages.home.banner.subtitle } - + ); });