diff --git a/src/css/_variables.scss b/src/css/_variables.scss index 4ede497..174de9f 100644 --- a/src/css/_variables.scss +++ b/src/css/_variables.scss @@ -13,6 +13,12 @@ $purple: #460fc8; // Temp: This can be removed after Bulma 0.5.1 $sizes: $size-1 $size-2 $size-3 $size-4 $size-5 $size-6 $size-7; +$link: $orange; +$link-visited: $orange; +$link-hover: $white; +$link-focus: $grey-lighter; +$link-active: $grey-lighter; + $dropdown-content-background-color: rgba($grey-dark, 0.9); $dropdown-item-color: $grey-lighter; $dropdown-item-hover-color: $white; diff --git a/src/css/main.scss b/src/css/main.scss index 4c27d0c..f1b2b35 100644 --- a/src/css/main.scss +++ b/src/css/main.scss @@ -179,6 +179,37 @@ html { } } +.about-box { + position: relative; + margin-top: 50px; + + .hook-box, .hook-box:before { + background-color: $purple; + @extend .bg-stripes-gradient; + } + + @include desktop { + .hook-box:before { + -webkit-mask-position: calc(50% - 40px) top; + mask-position: calc(50% - 40px) top; + background-position-x: -20px !important; + } + .hook-box { + margin: 0 40px 0 0; + } + } + + .hook-box { + padding: 25px; + overflow: visible; + } + + .hero-image { + shape-outside: polygon(0 0, 100% 0, 100% 100%, 50% 100%, 50% 50%, 0 50%); + margin: -40px -55px 0 0; + } +} + .main-schedule { background: rgba(0,0,0,0.7); padding: 5px 10px 10px; diff --git a/src/img/hero-char.png b/src/img/hero-char.png new file mode 100644 index 0000000..c126d09 Binary files /dev/null and b/src/img/hero-char.png differ diff --git a/src/js/components/App.vue b/src/js/components/App.vue index d9ea143..d9778bd 100644 --- a/src/js/components/App.vue +++ b/src/js/components/App.vue @@ -83,8 +83,51 @@
This website is not affiliated with Nintendo. All product names, logos, and brands are property of their respective owners. + About
+ + @@ -112,6 +155,7 @@ export default { na: null, }, }, + aboutOpen: false, }; }, computed: {