diff --git a/public/images/branding/mysql/mysql-logo.svg b/public/images/branding/mysql/mysql-logo.svg index 557da75..98ebde9 100644 --- a/public/images/branding/mysql/mysql-logo.svg +++ b/public/images/branding/mysql/mysql-logo.svg @@ -1 +1,47 @@ - \ No newline at end of file + + + + + + + + + diff --git a/public/images/branding/opengl/opengl-logo.svg b/public/images/branding/opengl/opengl-logo.svg index 9acc5f0..9943adf 100644 --- a/public/images/branding/opengl/opengl-logo.svg +++ b/public/images/branding/opengl/opengl-logo.svg @@ -1,3 +1,18 @@ - - -image/svg+xml \ No newline at end of file + + + + + + + diff --git a/public/images/hills-night.svg b/public/images/hills-night.svg new file mode 100644 index 0000000..ed87f4b --- /dev/null +++ b/public/images/hills-night.svg @@ -0,0 +1,2335 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/public/styles/pages/_about-page.scss b/public/styles/pages/_about-page.scss index a3f132f..b627342 100644 --- a/public/styles/pages/_about-page.scss +++ b/public/styles/pages/_about-page.scss @@ -21,8 +21,27 @@ } &-platforms { - //background-image: url('./../images/patterns/game-show.svg'); - background: #FFD6DE; + background-image: url('./../images/hills-night.svg'); + background-size: cover; + background-position: center; + + //Image is a bit bright, so we're going to darken it here + position: relative; + + &::before { + content:""; + position: absolute; + left: 0; + top: 0; + width: 100%; + height: 100%; + background: rgba(0, 0, 0, 0.3); + z-index: 0; + } + + > .c-page__boundary { + position: relative;//This is to Z-Index fight the background just a bit. + } } &-programming { @@ -41,13 +60,12 @@ &__brands { @extend %t-flexbox; - @include t-align-items(center); + @include t-align-items(stretch); @include t-justify-content(space-between); @include t-flex-wrap(wrap); &-brand { width: 50%; - padding: 1em; } &-image { @@ -59,10 +77,18 @@ max-height: 5em; object-fit: contain; object-position: center; + + transition: all 0.2s $s-animation--ease-out; } &-link { + padding: 1em; display: block; + height: 100%; + + &:hover .p-about-page__brands-image { + @include t-transform(rotate(10deg)); + } } &-title { @@ -80,7 +106,7 @@ @include t-media-query($s-small-up) { &__brands { - &-brand { + &-link { padding: 2em; }