diff options
Diffstat (limited to 'src/components')
| -rw-r--r-- | src/components/carousel.css | 68 | ||||
| -rw-r--r-- | src/components/carousel.tsx | 31 | ||||
| -rw-r--r-- | src/components/navbar-item.tsx | 8 | ||||
| -rw-r--r-- | src/components/navbar.css | 277 | ||||
| -rw-r--r-- | src/components/navbar.tsx | 20 |
5 files changed, 0 insertions, 404 deletions
diff --git a/src/components/carousel.css b/src/components/carousel.css deleted file mode 100644 index f311805..0000000 --- a/src/components/carousel.css +++ /dev/null @@ -1,68 +0,0 @@ -.carousel-content { - align-self: center; - max-height: 100%; - white-space: nowrap; - -ms-overflow-style: none; /* hide scrollbar in IE and Edge */ - scrollbar-width: none; /* hide scrollbar in Firefox */ -} - -.carousel-item { - width: 100%; - flex-shrink: 0; - height: auto; - float: left; - text-align: center; - transition: all 250ms linear; - white-space: nowrap; - vertical-align: middle; -} - -.slick-slider { - margin: 24px; -} - -.slick-slide { - margin: 0 auto; - border-radius: 10px; - text-align: center; - float: none !important; - display: inline-block !important; - vertical-align: middle; - min-height: 1px; -} - -.carousel-item > * { - border-radius: 10px; - vertical-align: middle; - width: 100%; - height: auto; -} - -.slick-dots li button::before { - color: var(--color-fg) !important; -} - -@media (max-width: 1150px) { - .carousel-wrapper { - margin: 60px auto; - width: 330px; - height: 220px; - } -} - -@media (max-width: 1150px) and (min-width: 480px) { - .carousel-wrapper { - margin: 60px auto; - width: 480px; - height: 360px; - } -} - -@media (min-width: 1150px) { - .carousel-wrapper { - float: right; - width: 480px; - height: 360px; - } -} - diff --git a/src/components/carousel.tsx b/src/components/carousel.tsx deleted file mode 100644 index af9279b..0000000 --- a/src/components/carousel.tsx +++ /dev/null @@ -1,31 +0,0 @@ -import './carousel.css'; -import Slider, { Settings } from 'react-slick'; -import "slick-carousel/slick/slick.css"; -import "slick-carousel/slick/slick-theme.css"; - -export default function Carousel(props: { children: any }) { - const settings: Settings = { - dots: true, - infinite: true, - speed: 500, - slidesToShow: 1, - slidesToScroll: 1 - }; - - return ( - <div class="carousel-wrapper"> - <Slider {...settings}> - { - props.children instanceof Array ? - props.children.map((child: any) => { - return ( - <div class="carousel-item">{child}</div> - ); - }) - : - <div class="carousel-item">{props.children}</div> - } - </Slider> - </div> - ); -} diff --git a/src/components/navbar-item.tsx b/src/components/navbar-item.tsx deleted file mode 100644 index c2f2306..0000000 --- a/src/components/navbar-item.tsx +++ /dev/null @@ -1,8 +0,0 @@ -import * as preact from "preact"; - -export function NavbarItem(props: any) { - const { name, href, children, rel } = props; - - return (preact.createElement("div", { className: "navbar-item" }, - preact.createElement("a", { className: "navbar-item-" + name, href: href, rel: rel }, children))); -} diff --git a/src/components/navbar.css b/src/components/navbar.css deleted file mode 100644 index 466fdd6..0000000 --- a/src/components/navbar.css +++ /dev/null @@ -1,277 +0,0 @@ -/* on big screens, navbar is fixed to the top of the screen */ -.navbar-container { - position: fixed; - background-color: var(--color-bg); - top: 0; - width: 100%; - z-index: 9999; - margin: auto; -} - -/* on smaller ones, make it behave as a normal element laid out at the top of the page */ -@media (max-width: 1150px) { - .navbar-container { - position: static; - } -} - -.navbar { - margin-top: 20pt; - margin-bottom: 12pt; - align-items: center; - justify-content: center; - align-self: center; -} - -.navbar-icon { - font-family: Hack, monospace; - font-weight: 500; - color: #646cff; - font-size: 1.5em; - padding: 0.5em; - margin: 0.5em; -} - -.navbar { - align-self: center; - display: block; - width: 100%; - text-align: center; -} - -.navbar-item { - font-family: Hack, monospace; - font-size: 18pt; - text-align: center; - float: none; - clear: left; - display: inline-block; - margin: 0 0.25em; - transition: all 0.2s ease-in-out; -} - -.navbar-item:hover { - padding-left: 0.5em; - padding-right: 0.5em; - transition: all 0.2s ease-in-out; -} - -.navbar-current { - font-weight: bold; -} - -/* home */ - -.navbar-item-home:link { - color: #98C379; - text-decoration: none; -} - -.navbar-item-home:visited { - color: #98C379; - text-decoration: none; -} - -.navbar-item-home:hover { - color: #afd088; - text-decoration: underline; -} - -.navbar-item-home:active { - color: #afd088; - text-decoration: underline; -} - -/* games */ - -.navbar-item-games:link { - color: #e06c75; - text-decoration: none; -} - -.navbar-item-games:visited { - color: #e06c75; - text-decoration: none; -} - -.navbar-item-games:hover { - color: #ef7a80; - text-decoration: underline; -} - -.navbar-item-games:active { - color: #ef7a90; - text-decoration: underline; -} - -/* projects */ - -.navbar-item-projects:link { - color: #d19a66; - text-decoration: none; -} - -.navbar-item-projects:visited { - color: #d19a66; - text-decoration: none; -} - -.navbar-item-projects:hover { - color: #dfa873; - text-decoration: underline; -} - -.navbar-item-projects:active { - color: #dffa73; - text-decoration: underline; -} - -/* github */ - -.navbar-item-github:link { - color: #c678dd; - text-decoration: none; -} - -.navbar-item-github:visited { - color: #c678dd; - text-decoration: none; -} - -.navbar-item-github:hover { - color: #d286eb; - text-decoration: underline; -} - -.navbar-item-github:active { - color: #d286eb; - text-decoration: underline; -} - -/* itch */ - -.navbar-item-itch:link { - color: #e06c75; - text-decoration: none; -} - -.navbar-item-itch:visited { - color: #e06c75; - text-decoration: none; -} - -.navbar-item-itch:hover { - color: #ef7a80; - text-decoration: underline; -} - -.navbar-item-itch:active { - color: #ef7a90; - text-decoration: underline; -} - -/* twitter */ - -.navbar-item-twitter:link { - text-decoration: none; -} - -.navbar-item-twitter:visited { - text-decoration: none; -} - -.navbar-item-twitter:hover { - text-decoration: underline; -} - -.navbar-item-twitter:active { - text-decoration: underline; -} - -/* mastodon */ - -.navbar-item-mastodon:link { - color: #6a4ae0; - text-decoration: none; -} - -.navbar-item-mastodon:visited { - color: #6a4ae0; - text-decoration: none; -} - -.navbar-item-mastodon:hover { - color: #7a55e8; - text-decoration: underline; -} - -.navbar-item-mastodon:active { - color: #7a55e8; - text-decoration: underline; -} - -/* cohost */ - -.navbar-item-cohost:link { - color: #b63b73; - text-decoration: none; -} - -.navbar-item-cohost:visited { - color: #b63b73; - text-decoration: none; -} - -.navbar-item-cohost:hover { - color: #c54a7f; - text-decoration: underline; -} - -.navbar-item-cohost:active { - color: #c54a7f; - text-decoration: underline; -} - -/* tumblr */ - -.navbar-item-tumblr:link { - color: #00b8ff; - text-decoration: none; -} - -.navbar-item-tumblr:visited { - color: #00b8ff; - text-decoration: none; -} - -.navbar-item-tumblr:hover { - color: #00c5ff; - text-decoration: underline; -} - -.navbar-item-tumblr:active { - color: #00c5ff; - text-decoration: underline; -} - -/* contact */ - -.navbar-item-contact:link { - color: #e5c07b; - text-decoration: none; -} - -.navbar-item-contact:visited { - color: #e5c07b; - text-decoration: none; -} - -.navbar-item-contact:hover { - color: #f2ce89; - text-decoration: underline; -} - -.navbar-item-contact:active { - color: #f2ce89; - text-decoration: underline; -} diff --git a/src/components/navbar.tsx b/src/components/navbar.tsx deleted file mode 100644 index ba3d7d7..0000000 --- a/src/components/navbar.tsx +++ /dev/null @@ -1,20 +0,0 @@ -import './navbar.css'; - -import { NavbarItem } from './navbar-item'; - -export function Navbar() { - return ( - <div class="navbar-container"> - <div class="navbar"> - <NavbarItem name="home" href="/">[Home]</NavbarItem> - <NavbarItem name="games" href="/games">[Games]</NavbarItem> - <NavbarItem name="projects" href="/projects">[Other Projects]</NavbarItem> - <NavbarItem name="github" href="https://github.com/Duckonaut">[GitHub]</NavbarItem> - <NavbarItem name="itch" href="https://duckonaut.itch.io/">[Itch.io]</NavbarItem> - <NavbarItem name="twitter" href="https://twitter.com/duckonaut">[Twitter]</NavbarItem> - <NavbarItem name="mastodon" href="https://mastodon.gamedev.place/@duckonaut" rel="me">[Mastodon]</NavbarItem> - <NavbarItem name="contact" href="/contact">[Contact]</NavbarItem> - </div> - </div> - ); -} |