diff --git a/README.md b/README.md index 912f156..8dc0c89 100644 --- a/README.md +++ b/README.md @@ -19,6 +19,7 @@ It's very simple, follow these steps. file itself should be placed in `source/assets/images` - The `design` refers to the style of your page the currently available styles are: - [main](examples/images/main.png) + - [blurywhite](examples/images/blurywhite.png) - List as much links as you like in the `links` array: - With the `color` property you can give the link the color of the social media plaform of your choice, but this feature is optional, the link will diff --git a/examples/images/blurywhite.png b/examples/images/blurywhite.png new file mode 100644 index 0000000..e68a1d2 Binary files /dev/null and b/examples/images/blurywhite.png differ diff --git a/source/_assets/sass/blurywhite.scss b/source/_assets/sass/blurywhite.scss new file mode 100644 index 0000000..13e3dc9 --- /dev/null +++ b/source/_assets/sass/blurywhite.scss @@ -0,0 +1,98 @@ +@import "enoded-images"; + +// Colors +@import "global-colors"; +@import "brand-colors"; +$gradient1: #e0f3ff; +$gradient2: #d5efff; +$gradient3: #a6d0ff; +$gradient4: #c1dbff; + +body { + margin: 0; + padding: 0; + display: flex; + justify-content: center; + background-image: + linear-gradient(120deg, $gradient1, $gradient2, $gradient3, $gradient4, $gradient3, $gradient2, $gradient1); + min-height: 100vh; + font-family: sans-serif; + z-index: 10; +} + +body::before{ + content: ''; + background-image: url($noiseTexture); + opacity: 7.5%; + filter: blur(.5px); + position: absolute; + height: 100%; + width: 100%; +} + +.mainContainer { + z-index: 11; + margin-top: 3rem; + width: 95%; + display: flex; + flex-direction: column; + align-items: center; +} + + h1 { + z-index: 12; + text-align: center; + font-weight: 800; + font-size: 1.5rem; + color: $g_black; + } + + img { + height: 8rem; + width: 8rem; + border-radius: 50%; + object-fit: cover; + } + +.linkBox { + display: flex; + flex-direction: column; + width: 750px; + max-width: 90%; + align-items: center; + + a { + $height: 3rem; + $transitionDuration: 0.15s; + $timingFunction: cubic-bezier(0,1.5,1,1.5); + margin-top: 0.5rem; + margin-bottom: 0.5rem; + width: 100%; + height: $height; + line-height: $height; + text-align: center; + color: $g_black; + text-decoration: none; + font-size: 1rem; + font-weight: 600; + background-color: $g_white; + border-radius: .25rem; + box-shadow: 0px 5px 14px -2px rgba(0, 0, 0, 0.25); + transition: transform $transitionDuration $timingFunction, box-shadow $transitionDuration $timingFunction; + + &:hover{ + transform: scale(102%, 105%); + box-shadow: 0px 5px 14px -2px rgba(0, 0, 0, 0.35); + } + } + + @each $name, $color in $brandcolors { + .#{$name} { + border-color: $color; + color: $color; + &:hover { + background-color: $color; + } + } + } +} diff --git a/source/_assets/sass/enoded-images.scss b/source/_assets/sass/enoded-images.scss new file mode 100644 index 0000000..03cb348 --- /dev/null +++ b/source/_assets/sass/enoded-images.scss @@ -0,0 +1 @@ +$noiseTexture: "data:image/webp;base64,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"; \ No newline at end of file diff --git a/source/_assets/sass/main.scss b/source/_assets/sass/main.scss index 44d9377..931685b 100644 --- a/source/_assets/sass/main.scss +++ b/source/_assets/sass/main.scss @@ -77,13 +77,4 @@ body { } } } - - .link { - border-color: $g_black; - color: $g_black; - - &:hover { - background-color: $g_black; - } - } } diff --git a/webpack.mix.js b/webpack.mix.js index 3cc4ceb..c9b7df1 100644 --- a/webpack.mix.js +++ b/webpack.mix.js @@ -6,6 +6,7 @@ mix.setPublicPath('source/assets/build'); mix.jigsaw() .sass('source/_assets/sass/main.scss', 'css') + .sass('source/_assets/sass/blurywhite.scss', 'css') .options({ processCssUrls: false, })