aboutsummaryrefslogtreecommitdiff
path: root/src/components
diff options
context:
space:
mode:
authorStanisław Zagórowski <hasohasacz@gmail.com>2023-08-30 18:00:11 +0200
committerStanisław Zagórowski <hasohasacz@gmail.com>2023-08-30 18:00:11 +0200
commitb7c37574f4f90fc346bc51dd06c77c8958570b33 (patch)
tree72895a18a8d72ecd35bf9b71030d6bf40ae34167 /src/components
parentb661407d801c8ccaa7773ae30f0fc26a1d70ffff (diff)
all: move front into its own directory
Diffstat (limited to 'src/components')
-rw-r--r--src/components/carousel.css68
-rw-r--r--src/components/carousel.tsx31
-rw-r--r--src/components/navbar-item.tsx8
-rw-r--r--src/components/navbar.css277
-rw-r--r--src/components/navbar.tsx20
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>
- );
-}