Brunobrno/vontor-cz
Template
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Refactor footer and remove unused pages

Browse Source 
Updated the footer component and its styles for improved layout and clarity, including new contact and service sections. Removed unused pages: DonateShopPage, SkillsPage, and related CSS/JS files, and cleaned up routing in App.tsx. Also streamlined Home.module.css by merging introduction styles and removing redundant imports.
This commit is contained in:
David Bruno Vontor
2025-12-10 03:24:31 +01:00
parent ada74c84a6
commit a2bc1e68ee
8 changed files with 274 additions and 449 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
frontend/src/pages/donate/DonateShopPage.tsx
View File

@@ -1,4 +0,0 @@
import DonationShop from "../../components/donate/DonationShop";
export default function DonateShopPage(){
return <DonationShop />;
}

338
frontend/src/pages/home/Home.module.css
View File

@@ -1,9 +1,3 @@
@import url('https://fonts.googleapis.com/css2?family=Roboto+Mono:ital,wght@0,100..700;1,100..700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Doto:wght@100..900&family=Roboto+Mono:ital,wght@0,100..700;1,100..700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Doto:wght@300&family=Roboto+Mono:ital,wght@0,100..700;1,100..700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Exo:ital,wght@0,100..900;1,100..900&display=swap');
:root{
--c-background: #031D44; /*background*/
--c-background-light: #04395E; /*background-highlight*/
@@ -13,228 +7,190 @@
--c-other: #70A288; /*other*/
}
html{
scroll-behavior: smooth;
}
body{
font-family: "Exo", serif;
overflow-x: hidden;
background: rgb(0,0,0);
background: -moz-linear-gradient(145deg, var(--c-background) 0%, var(--c-background-light) 100%);
background: -webkit-linear-gradient(145deg, var(--c-background) 0%, var(--c-background-light) 100%);
background: linear-gradient(145deg, var(--c-background) 0%, var(--c-background-light) 100%);
font-optical-sizing: auto;
font-weight: 700;
font-style: normal;
}
.wrapper {
position: relative;
width: 100%;
}
.doto-font{
font-family: "Doto", serif;
font-optical-sizing: auto;
font-weight: 300;
font-style: normal;
font-variation-settings: "ROND" 0;
}
.bebas-neue-regular {
font-family: "Bebas Neue", sans-serif;
font-weight: 400;
font-style: normal;
}
.introduction {
display: flex;
flex-direction: column;
}
body .between h1{
margin-top: 2em;
text-align: center;
color: var(--c-text);
padding-bottom: 10em;
margin-top: 6em;
width: 100%;
position: relative;
top:0;
/* gap: 4em;*/
text-decoration: underline;
font-size: 4em;
}
.introduction h1{
font-size: 2em;
.hidden{
display: none !important;
}
.introduction article {
/*background-color: cadetblue;*/
padding: 2em;
.apps-group{
display: flex;
flex-direction: column;
justify-content: space-between;
}
.apps-group div{
border-radius: 1em;
}
.introduction article header {}
.introduction article:nth-child(1) {
.apps-container{
position: relative;
display: flex;
gap: 3em;
width: 100%;
/* transform: rotate(5deg); */
align-self: center;
text-align: center;
font-size: 2em;
margin: auto;
justify-content: center;
}
/*
.introduction article:nth-child(2) {
width: 50%;
transform: rotate(3deg);
align-self: flex-end;
.apps-container .chat,
.apps-container .apps-group{
}
.introduction article:nth-child(3) {
width: 50%;
transform: rotate(-2deg);
align-self: flex-start;
}*/
.nav-drone{
margin-top: 0em !important;
margin-bottom: -9em;
height: 20em;
position: relative;
}
.nav-drone .video-background{
height: 55vh;
clip-path: polygon(0 0%, 15% 0, 30% 0%, 42% 0%, 61% 0%, 82% 0%, 100% 0%, 100% 94%, 82% 100%, 65% 96%, 47% 99%, 30% 90%, 14% 98%, 0 94%) !important;
}
#nav-drone-background-css:has(nav) nav{ /*TOHLE PATŘÍ NAVIGACI VYŘEŠIT*/
margin-bottom: 8em;
}
.spark-cursor{
margin: 0;
padding: 0;
box-sizing: border-box;
.animation-introduction{
position: absolute;
width: 100%;
height: 100%;
top: 0;
z-index: -2;
width: 40px;
height: 40px;
transform: translate(-20px, -20px);
}
.spark-cursor *{
margin: 0;
padding: 0;
box-sizing: border-box;
}
.animation-introduction ul{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
/*overflow: hidden; ZAPNOUT KDYŽ NECHCEŠ ANIMACI PŘECHÁZET DO OSTATNÍCH DIVŮ*/
}
.spark-cursor span{
position:absolute;
width: 2px;
height: 20px;
pointer-events: none;
transform-origin: bottom;
overflow: hidden;
.animation-introduction ul li{
position: absolute;
filter: drop-shadow(0 0 0.5em #0f0) drop-shadow(0 0 1em #0f0);
}
.spark-cursor span.animate::before{
display: block;
list-style: none;
width: 20px;
height: 20px;
background: rgba(255, 255, 255, 35%);
animation: animate 4s linear infinite;
bottom: -150px;
content: '';
position: absolute;
width: 100%;
height: 100%;
background: #0f0;
animation: animate-spark 1s ease-in-out forwards;
}
.animation-introduction ul li:nth-child(1){
left: 25%;
width: 80px;
height: 80px;
animation-delay: 0s;
}
.animation-introduction ul li:nth-child(2){
left: 10%;
width: 20px;
height: 20px;
animation-delay: 2s;
animation-duration: 12s;
}
.animation-introduction ul li:nth-child(3){
left: 70%;
width: 20px;
height: 20px;
animation-delay: 4s;
}
.animation-introduction ul li:nth-child(4){
left: 40%;
width: 60px;
height: 60px;
animation-delay: 0s;
animation-duration: 18s;
}
.animation-introduction ul li:nth-child(5){
left: 65%;
width: 20px;
height: 20px;
animation-delay: 0s;
}
.animation-introduction ul li:nth-child(6){
left: 75%;
width: 110px;
height: 110px;
animation-delay: 3s;
}
.animation-introduction ul li:nth-child(7){
left: 35%;
width: 150px;
height: 150px;
animation-delay: 7s;
}
.animation-introduction ul li:nth-child(8){
left: 50%;
width: 25px;
height: 25px;
animation-delay: 15s;
animation-duration: 45s;
}
.animation-introduction ul li:nth-child(9){
left: 20%;
width: 15px;
height: 15px;
animation-delay: 2s;
animation-duration: 35s;
}
.animation-introduction ul li:nth-child(10){
left: 85%;
width: 150px;
height: 150px;
animation-delay: 0s;
animation-duration: 11s;
}
@keyframes animate {
@keyframes animate-spark{
0%{
transform: translateY(0) rotate(0deg);
opacity: 1;
border-radius: 0;
transform: translateY(100%);
}
100%{
transform: translateY(-1000px) rotate(720deg);
opacity: 0;
border-radius: 50%;
transform: translateY(-100%);
}
}
.success-form-alert{
display: none;
background: #d4edda;
color: #155724;
padding: 10px;
border: 1px solid #c3e6cb;
border-radius: 5px;
margin-top: 10px;
position: relative;
}
.success-form-alert .close{
position: absolute;
top: 5px;
right: 10px;
cursor: pointer;
font-weight: bold;
}
@media only screen and (max-width: 990px) {
.animation-introduction ul li:nth-child(6){
left: 67%;
.apps-container{
display: flex;
margin: auto;
flex-direction: column;
width: 90%;
gap: 1em;
}
.animation-introduction ul li:nth-child(10) {
left: 60%;
.nav-drone{
display: none;
}
.introduction {
margin: 0;
top: 0;
.apps-container .apps-group {
font-size: 0.9em;
gap: 1em;
}
}
.introduction article {
width: auto !important;
transform: none !important;
align-self: none !important;
#reconnect{
border-radius: 1em;
color: white;
padding: 4em;
background-color: rgb(195 20 20);
width: 100%;
height: 100%;
position: absolute;
display: flex;
align-items: center;
flex-direction: column;
border: #7b0000 dashed 0.5em;
}
#reconnect img{
width: 10em;
}
#reconnect button{
position: relative;
color: white;
margin: auto 1em;
padding: 1em;
font: initial;
font-size: 2em;
background: none;
border: none;
cursor: pointer;
&:hover{
animation: shake 0.4s ease-in-out infinite;
animation-iteration-count: infinite;
}
}
@keyframes shake {
0% { transform: translateX(0); }
25% { transform: translateX(-2px) rotate(-8deg); }
50% { transform: translateX(2px) rotate(4deg); }
75% { transform: translateX(-1px) rotate(-2deg); }
100% { transform: translateX(0); }
}

194
frontend/src/pages/home/introduction.css
View File

@@ -1,194 +0,0 @@
.introduction {
display: flex;
flex-direction: column;
color: var(--c-text);
padding-bottom: 10em;
margin-top: 6em;
width: 100%;
position: relative;
top:0;
/* gap: 4em;*/
}
.introduction h1{
font-size: 2em;
}
.introduction article {
/*background-color: cadetblue;*/
padding: 2em;
border-radius: 1em;
}
/* header rules intentionally left out; keep markup clean */
.introduction article:nth-child(1) {
width: 100%;
/* transform: rotate(5deg); */
align-self: center;
text-align: center;
font-size: 2em;
}
/*
.introduction article:nth-child(2) {
width: 50%;
transform: rotate(3deg);
align-self: flex-end;
}
.introduction article:nth-child(3) {
width: 50%;
transform: rotate(-2deg);
align-self: flex-start;
}*/
.animation-introduction{
position: absolute;
width: 100%;
height: 100%;
top: 0;
z-index: -2;
}
.animation-introduction ul{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
/*overflow: hidden; ZAPNOUT KDYŽ NECHCEŠ ANIMACI PŘECHÁZET DO OSTATNÍCH DIVŮ*/
}
.animation-introduction ul li{
position: absolute;
display: block;
list-style: none;
width: 20px;
height: 20px;
/* use design palette for animated dots */
background: var(--c-boxes);
opacity: 0.35;
animation: animate 4s linear infinite;
bottom: -150px;
}
.animation-introduction ul li:nth-child(1){
left: 25%;
width: 80px;
height: 80px;
animation-delay: 0s;
}
.animation-introduction ul li:nth-child(2){
left: 10%;
width: 20px;
height: 20px;
animation-delay: 2s;
animation-duration: 12s;
}
.animation-introduction ul li:nth-child(3){
left: 70%;
width: 20px;
height: 20px;
animation-delay: 4s;
}
.animation-introduction ul li:nth-child(4){
left: 40%;
width: 60px;
height: 60px;
animation-delay: 0s;
animation-duration: 18s;
}
.animation-introduction ul li:nth-child(5){
left: 65%;
width: 20px;
height: 20px;
animation-delay: 0s;
}
.animation-introduction ul li:nth-child(6){
left: 75%;
width: 110px;
height: 110px;
animation-delay: 3s;
}
.animation-introduction ul li:nth-child(7){
left: 35%;
width: 150px;
height: 150px;
animation-delay: 7s;
}
.animation-introduction ul li:nth-child(8){
left: 50%;
width: 25px;
height: 25px;
animation-delay: 15s;
animation-duration: 45s;
}
.animation-introduction ul li:nth-child(9){
left: 20%;
width: 15px;
height: 15px;
animation-delay: 2s;
animation-duration: 35s;
}
.animation-introduction ul li:nth-child(10){
left: 85%;
width: 150px;
height: 150px;
animation-delay: 0s;
animation-duration: 11s;
}
@keyframes animate {
0%{
transform: translateY(0) rotate(0deg);
opacity: 1;
border-radius: 0;
}
100%{
transform: translateY(-1000px) rotate(720deg);
opacity: 0;
border-radius: 50%;
}
}
@media only screen and (max-width: 990px) {
.animation-introduction ul li:nth-child(6){
left: 67%;
}
.animation-introduction ul li:nth-child(10) {
left: 60%;
}
.introduction {
margin: 0;
top: 0;
}
.introduction article {
width: auto !important;
transform: none !important;
align-self: none !important;
}
}

2
frontend/src/pages/home/jquery-3.7.1.js vendored
View File

File diff suppressed because one or more lines are too long

4
frontend/src/pages/skills/SkillsPage.tsx
View File

@@ -1,4 +0,0 @@
import SkillsSection from "../../components/skills/SkillsSection";
export default function SkillsPage(){
return <SkillsSection />;
}