Altitude/SiteFrontend
5
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Fixed footer, messed with some colors. Wasted time on a failed attempted at a darkmode switch

Browse Source
This commit is contained in:
Peter
2024-01-14 21:05:13 +01:00
parent e967a42423
commit 3baee7f8e5
7 changed files with 260 additions and 112 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/App.css
+140 -2
View File
@@ -1,3 +1,141 @@
:root{
--white: #FFFFFF;
--black: #282828;
--pureblack: #000000;
--font-color: #272727;
--grey: #A3A3A3;
--link-color: #1f9bde;
--linkhover: #00d9ff;
--navlink: #4b4b4b;
--switch: #FBFBFE;
--error: #c23c3c;
--footer-color: #e9e9e9;
}
@font-face {
font-family: 'opensans';
src:url('/public/fonts/opensans.ttf') format('truetype'),
url('/public/fonts/opensans.eot') format('embedded-opentype'),
url('/public/fonts/opensans.svg') format('svg'),
url('/public/fonts/opensans.woff') format('woff');
}
@font-face {
font-family: 'opensans-bold';
src:url('/public/fonts/opensans-bold.ttf') format('truetype'),
url('/public/fonts/opensans-bold.eot') format('embedded-opentype'),
url('/public/fonts/opensans-bold.svg') format('svg'),
url('/public/fonts/opensans-bold.woff') format('woff');
}
html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code,
del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var,
b, i,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figcaption, figure,
footer, header, hgroup, menu, nav, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-size: 100%;
vertical-align: baseline;
background: transparent;
}
.flex{
display: flex;
}
.row{
flex-direction: row;
}
.row-rev{
flex-direction: row-reverse;
}
.wrap{
flex-flow: row wrap;
}
.wrap-rev{
flex-flow: row wrap-reverse;
}
.column{
flex-direction: column;
}
.column-rev{
flex-direction: column-reverse;
}
.between{
justify-content: space-between;
}
.around{
justify-content: space-around;
}
.start{
justify-content: flex-start;
}
.end{
justify-content: flex-end;
}
.center{
justify-content: center;
}
/* css starts here */
a:hover{
color: var(--linkhover);
text-decoration: none;
}
h1 {
font-family: 'opensans-bold', sans-serif;
letter-spacing: 3px;
color: var(--font-color);
font-size: 1.7em;
margin-bottom: 30px;
font-weight: normal;
}
h2 {
font-family: 'opensans-bold',sans-serif;
font-size: 1.3em;
color: var(--font-color);
transition: 0.5s ease;
}
h3 {
font-family: 'opensans-bold',sans-serif;
font-size: 1.2em;
color: var(--font-color);
transition: 0.5s ease;
}
p {
font-family: 'opensans',sans-serif;
font-size: 1em;
color: var(--font-color);
transition: 0.5s ease;
}
.App {
text-align: center;
}
@@ -14,14 +152,14 @@
}
.App-header {
background-color: #282c34;
background-color: var(--color-primary);
min-height: 100vh;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
font-size: calc(10px + 2vmin);
color: white;
color: var(--font-color);
}
body {
src/App.tsx
+2 -1
View File
@@ -2,8 +2,8 @@ import ContactForm from "./components/contact_form/contact";
import './App.css';
import Home from "./components/home/home";
import {BrowserRouter, Route, Routes} from 'react-router-dom';
import Header from "./components/header/header";
import Footer from "./components/footer/footer";
import React from "react";
import VerifyMail from "./components/verify_email/verify_mail";
import ThankYou from "./components/verify_email/thank_you";
import DEBUG from "./components/DEBUG/DEBUG";
@@ -11,6 +11,7 @@ import DEBUG from "./components/DEBUG/DEBUG";
function App() {
return (
<div className="app-container">
<Header/>
<BrowserRouter>
<Routes>
<Route path="/" element={<Home/>}/>
src/components/contact_form/Contact.css
-4
View File
@@ -46,8 +46,4 @@ input[type="submit"] {
button[disabled],
input[type="submit"][disabled] {
background-color: #ccc;
}
#footer{
padding-bottom: 0 !important;
}
src/components/footer/Footer.css
+14 -2
View File
@@ -3,6 +3,15 @@ footer {
transition: 0.5s ease;
}
ul {
padding: 0px;
}
a {
text-decoration: none;
color: var(--link-color);
}
#footer {
padding: 80px 0;
width: 80%;
@@ -33,14 +42,14 @@ footer {
footer ul, footer p {
list-style: none;
font-size: 0.9em;
color: rgb(168, 168, 168);
color: var(--font-color);
font-family: 'opensans',sans-serif;
}
footer h2 {
margin-bottom: 10px;
font-size: 1.3em;
color: var(--white);
color: var(--font-color);
}
#copyright {
@@ -49,6 +58,9 @@ footer h2 {
.followus {
padding-top: 15px;
height: 35px;
display: flex;
align-items: flex-end;
}
.followus img {
src/components/footer/footer.tsx
+9 -9
View File
@@ -10,17 +10,17 @@ const Footer: FC = () => {
<div id="footerinner">
<div id="footertext">
<h2>ABOUT US</h2>
<p>Altitude is a community-centered {version} version survival server. We're one of those
<p>Altitude is a community-centered {version} survival server. We're one of those
servers you come to call "home". We are your place to get together with friends and play
survival, with a few extra features suggested by our community!</p>
<div className="followus">
<a target="_blank" rel="noopener" href="https://discordapp.com/invite/TGqpzCJ">
<a target="_blank" rel="noreferrer" href="https://discordapp.com/invite/TGqpzCJ">
<img src="https://alttd.com//assets/img/logos/discord.png" alt="Discord Button"/>
</a>
<a target="_blank" rel="noopener" href="https://twitter.com/alttdmc">
<a target="_blank" rel="noreferrer" href="https://twitter.com/alttdmc">
<img src="https://alttd.com//assets/img/logos/twitter.png" alt="Twitter Button"/>
</a>
<a target="_blank" rel="noopener" href="https://instagram.com/alttdmc">
<a target="_blank" rel="noreferrer" href="https://instagram.com/alttdmc">
<img src="https://alttd.com/assets/img/logos/instagram.png" alt="Instagram Button"/>
</a>
</div>
@@ -28,13 +28,13 @@ const Footer: FC = () => {
<div className="footernav">
<h2>COMMUNITY</h2>
<ul>
<li><a target="_blank" rel="noopener"
<li><a target="_blank" rel="noreferrer"
href="https://discordapp.com/invite/TGqpzCJ">Discord</a></li>
<li><a target="_blank" rel="noopener" href="https://alttd.com/blog">Blog</a></li>
<li><a target="_blank" rel="noopener" href="https://twitter.com/alttdmc">Twitter</a></li>
<li><a target="_blank" rel="noopener" href="https://instagram.com/alttdmc">Instagram</a>
<li><a target="_blank" rel="noreferrer" href="https://alttd.com/blog">Blog</a></li>
<li><a target="_blank" rel="noreferrer" href="https://twitter.com/alttdmc">Twitter</a></li>
<li><a target="_blank" rel="noreferrer" href="https://instagram.com/alttdmc">Instagram</a>
</li>
<li><a target="_blank" rel="noopener" href="https://reddit.com/r/alttd">Reddit</a></li>
<li><a target="_blank" rel="noreferrer" href="https://reddit.com/r/alttd">Reddit</a></li>
</ul>
</div>
<div className="footernav">
src/components/home/home.tsx
+2 -2
View File
@@ -9,8 +9,8 @@ const Home: FunctionComponent = () => {
<meta name="Forms home page" content="The home page for all Altitude forms"/>
</Helmet>
<header className="App-header">
<p>Welcome to the Altitude forms page</p>
<a href="/contact">Contact us.</a>
<h1>Welcome to the Altitude forms page</h1>
<h2><a href="/contact">Contact us.</a></h2>
</header>
</div>
);