diff --git a/assets/style/_components.scss b/assets/style/_components.scss index dac8ace..9c9fc2a 100644 --- a/assets/style/_components.scss +++ b/assets/style/_components.scss @@ -3,39 +3,33 @@ } .btn { - font-size: 16px; - box-shadow: 1px 2px 3px 0 rgba(0, 0, 0, 0.5); + margin-top: 25px; + + background-color: #000000; + border: 0; + border-radius: 0; + color: #ffffff; + display: inline-block; + font-weight: 700; + padding: 1rem 3rem; + position: relative; text-transform: uppercase; + transition: none; - &.btn-primary { - width: 284px; - height: 54px; - line-height: 54px; - padding: 0; - vertical-align: middle; - background: #df0067; - border-color: #df0067; - - &:hover, - &:active, - &:focus { - background: #ff3a95; - border-color: #ff3a95; - } + &:after { + padding-left: .3em; + content: '►'; + font-size: .8em; + } + + &:hover { + color: #ffffff; } - &.btn-outline-info { - font-size: 14px; - border-width: 2px; - box-shadow: 1px 1px 3px 0 rgba(0, 0, 0, 0.5), - inset 1px 1px 3px 0 rgba(0, 0, 0, 0.5); - - &:hover, - &:active, - &:focus { - box-shadow: 1px 1px 3px 0 rgba(0, 0, 0, 0.5); - background: #23b9d6; - border-color: #23b9d6; + &.large-padding { + padding: { + left: 2rem; + right: 2rem; } } } diff --git a/assets/style/_footer.scss b/assets/style/_footer.scss index e9da31d..d643aa0 100644 --- a/assets/style/_footer.scss +++ b/assets/style/_footer.scss @@ -1,27 +1,23 @@ footer { padding-bottom: 95px; + font-family: 'IBM Plex Sans', Arial, sans-serif; - .white-title { + .black-title { margin-top: 45px; line-height: 30px; + font-family: Prestafont, sans-serif; + font-size: 28px; + max-width: 200px; } - .white-text { - margin-top: 18px; - } - .btn { - margin-top: 25px; - &.large-padding { - padding: { - left: 2rem; - right: 2rem; - } - } + .black-text { + margin-top: 18px; + font-weight: bold; } .share, .build-link { - font-family: 'Montserrat', sans-serif; + font-family: 'IBM Plex Sans', Arial, sans-serif; font-weight: 300; font-size: 16px; color: #fff; @@ -39,35 +35,20 @@ footer { } } } +} - .build-link { - text-decoration: underline; - - &:hover, - &:visited, - &:active { - color: #fff; - } - } - - #badge { - position: relative; - > img { - position: absolute; - left: 50%; - margin-left: -95px; - top: 75px; - z-index: 1; - } +.footer-list a { + display: block; + padding: 5px 0; + font-size: 16px; + font-weight: bold; + color: #000000; + margin: 8px 12px 8px 0; - > hr { - margin: { - top: 190px; - bottom: 105px; - } - opacity: 0.7; - border-top: solid 1px #ffffff; - } + &:after { + padding-left: .3em; + content: '►'; + font-size: .8em; } } diff --git a/assets/style/_header.scss b/assets/style/_header.scss index 5aa470b..600ca55 100644 --- a/assets/style/_header.scss +++ b/assets/style/_header.scss @@ -1,5 +1,9 @@ header { - height: 32.5rem; + + h1 { + font-family: Prestafont, sans-serif; + font-size: 95px; + } .gradient { width: 100%; @@ -7,22 +11,22 @@ header { background: $primary; } - .white-text { + .black-text { + font-family: 'IBM Plex Sans', Arial, sans-serif; + font-size: 18px; + max-width: 800px; margin: { top: 18px; bottom: 18px; } } - .btn { - margin-top: 12px; + #header-section { + padding-top: 50px; + padding-left: 100px; + padding-bottom: 50px; + padding-right: 100px; + background-color: #decde7; } } - -.main-content:first-child { - margin-top: -85px; -} -.gray-text { - color: #797979; -} diff --git a/assets/style/_section_1.scss b/assets/style/_section_1.scss index eda2fae..77632f4 100644 --- a/assets/style/_section_1.scss +++ b/assets/style/_section_1.scss @@ -1,5 +1,5 @@ #arrow { - @include gradient-y(#f100a0, #23b9d6); + background-color: #000000; position: relative; height: 1000px; @@ -29,12 +29,14 @@ .count, .words { - color: #fff; + color: #a4dbe8; + font-family: Prestafont, sans-serif; } .count { font-size: 24px; } .words { + font-family: 'IBM Plex Sans', Arial, sans-serif; margin-top: -8px; font-size: 12px; } @@ -53,14 +55,16 @@ #top-contributors { h2 { + font-family: Prestafont, sans-serif; padding-bottom: 0; margin-bottom: 4px; } .date { + font-family: 'IBM Plex Sans', Arial, sans-serif; margin-bottom: 23px; - color: #797979; letter-spacing: 0.2px; - font-size: 14px; + font-size: 20px; + font-weight: bold; strong { font-weight: 600; @@ -68,9 +72,10 @@ } } -$color-expert: #df0067; -$color-enthusiasts: #280f44; -$color-beginners: #23b9d6; +$color-expert: #000000; +$color-enthusiasts: #000000; +$color-beginners: #000000; +$background-expert: #ffffff; .contributor { .avatar { @@ -242,11 +247,13 @@ $color-beginners: #23b9d6; .details { float: right; text-align: right; + font-family: 'IBM Plex Sans', Arial, sans-serif; .position { - color: #df0067; + color: #000000; font-size: 24px; margin-top: 0; + font-family: Prestafont, sans-serif; } .name { font-size: 16px; @@ -337,15 +344,24 @@ $color-beginners: #23b9d6; } } +.contributors-section { + border-top: solid; + border-top-width: 1px; +} + +#all-contributors-outer { + border-top: solid; +} + #all-contributors { .title { - font-family: 'Montserrat', sans-serif; + font-family: Prestafont, sans-serif; height: 34px; line-height: 34px; vertical-align: middle; font-size: 16px; text-align: center; - color: #fff; + color: #000; box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.25); margin-bottom: 10px; } @@ -369,6 +385,7 @@ $color-beginners: #23b9d6; } .rank-experts { + font-family: Prestafont, sans-serif; color: $color-expert; } .rank-enthusiasts { @@ -384,7 +401,7 @@ $color-beginners: #23b9d6; } } .experts { - background: $color-expert; + background: $background-expert; .position { color: $color-expert; } diff --git a/assets/style/_titles.scss b/assets/style/_titles.scss index c4332c3..30f4345 100644 --- a/assets/style/_titles.scss +++ b/assets/style/_titles.scss @@ -6,7 +6,7 @@ h4 { } h1 { - color: #ffffff; + color: #000000; text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.56); font-size: 36px; margin: { @@ -27,7 +27,7 @@ h4 { } h2 { - font-size: 20px; + font-size: 25px; } h3 { font-size: 16px; diff --git a/assets/style/resources/Prestafont-Regular.woff2 b/assets/style/resources/Prestafont-Regular.woff2 new file mode 100644 index 0000000..1a15d76 Binary files /dev/null and b/assets/style/resources/Prestafont-Regular.woff2 differ diff --git a/assets/style/theme.scss b/assets/style/theme.scss index eeb6f0d..f4ba704 100644 --- a/assets/style/theme.scss +++ b/assets/style/theme.scss @@ -5,7 +5,7 @@ $grid-columns: 10; $brand-primary: #df0067; $brand-info: #23b9d6; -$primary: #011738; +$primary: #ffffff; $container-max-widths: ( sm: rem(780px), @@ -21,15 +21,18 @@ body { color: #000; } +@font-face { + font-family: "Prestafont"; + src: url("resources/Prestafont-Regular.woff2") format("woff"), +} + @import 'titles'; @import 'header'; @import 'footer'; @import 'components'; .main-content { - border-radius: 5px; background-color: #ffffff; - box-shadow: 1px 1px 3px 0 rgba(0, 0, 0, 0.53); } @import 'section_1'; diff --git a/components/AllContributors.vue b/components/AllContributors.vue index 9162c8d..3acccb6 100644 --- a/components/AllContributors.vue +++ b/components/AllContributors.vue @@ -1,5 +1,5 @@