RedXen/Homepage
RedXen
/
Homepage
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Some fixes and making it look nice

This commit is contained in:
Alex D. 2018-07-05 18:19:19 +02:00
parent 6fa48b6a83
commit df68dcd352
3 changed files with 87 additions and 101 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

147
css/web.css
View File

@ -3,6 +3,7 @@ html {
top: 0;
left: 0;
font-family: 'Oswald', sans-serif;
scroll-behavior: smooth;
/*Fixed Background*/
background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url(../res/bg.jpg);
@ -18,11 +19,11 @@ html {
--header-transparency: rgba(0, 0, 0, 0.7);
--image-size: 20%;
--image-size: 30%;
--red: #d22;
--dark-gray: #111;
--gray: #151515;
--light-gray: #222;
--transparent-gray: #222E;
--quick-transition: cubic-bezier(0.165, 0.84, 0.44, 1) 0.5s;
--long-transition: cubic-bezier(0.215, 0.610, 0.355, 1) 1s;
@ -46,27 +47,27 @@ html {
font-size: calc(var(--desktop-height) / 2);
margin: auto 0;
}
#logo-header {
.logo-header {
display: none;
opacity: 0;
margin: auto 0;
}
#logo-header a {
.logo-header a {
text-decoration: none;
color: #fff;
}
#logo-header img {
.logo-header img {
display: flex;
margin-left: 5px;
}
#links-header {
.links-header {
display: flex;
flex: 1;
margin: auto 0;
justify-content: space-around;
transition: var(--quick-transition);
}
#links-header a {
.links-header a {
color: #eee;
text-align: center;
margin: auto 1vw;
@ -74,7 +75,7 @@ html {
font-family: 'Dosis', sans-serif;
transition: var(--quick-transition);
}
.header, #links-header, #logo-header, #logo-header img{
.header, .links-header, .logo-header, .logo-header img{
height: var(--desktop-height);
font-size: calc(var(--desktop-height) / 2);
}
@ -88,16 +89,16 @@ html {
font-size: calc(var(--desktop-height) / 1.75);
height: calc(var(--desktop-height) * 1.5);
}
#links-header a:hover {
.links-header a:hover {
color: var(--red);
}
/*Sticky header*/
.sticky > #logo-header {
.sticky > .logo-header {
opacity: 1;
display: flex;
}
.sticky > #links-header {
.sticky > .links-header {
display: flex;
flex: 1 1 0;
justify-content: flex-end;
@ -121,13 +122,13 @@ html {
}
/* Banner settings */
#banner {
.banner {
/*Sizing*/
height: 100vh;
width: 100%;
color: #fff;
overflow: hidden;
font-size: 4vw;
font-size: calc(32px + 2vw);
transition: var(--long-transition);
/*Flexbox content*/
@ -135,33 +136,33 @@ html {
align-items: center;
display: flex;
}
#banner h1 {
.banner h1 {
filter: drop-shadow(-5px 6px 3px rgba(0,0,0,.7));
}
#banner img {
width: 20vw;
.banner img {
width: calc(32px + 14vw);
filter: drop-shadow(-5px 6px 3px rgba(0,0,0,.7));
transition: var(--long-transition);
}
/* Text field settings */
#text {
.text {
display: flex;
flex-wrap: wrap;
width: 95%;
width: 100%;
min-height: 100px;
background-color: var(--light-gray);
background-color: var(--dark-gray);
color: #fff;
align-self: center;
transition: var(--quick-transition);
}
#text h2 {
.text h2 {
text-align: center;
width: 100%;
margin: 3vw 0;
font-size: 5vw;
line-height: 8vw;
font-size: calc(32px + 2vw);
line-height: 1.4em;
background-color: var(--gray);
transition: var(--quick-transition);
color: var(--red);
@ -175,7 +176,7 @@ html {
margin: 0 auto;
flex-direction: row;
flex: 1;
font-size: 1.2vw;
font-size: calc(16px + 0.5vw);
flex-wrap: wrap;
align-items: flex-start;
text-align: center;
@ -183,43 +184,35 @@ html {
transition: var(--quick-transition);
}
.row {
width: 45%;
width: 50%;
}
.text-field h3 {
font-size: 1.2vw;
font-size: calc(16px + 1vw);
margin: 0;
}
/*Category of descriptions*/
.category {
margin: 1.5vw 0;
display: flex;
flex-wrap: nowrap;
width: 100%;
width: 90%;
margin: 1.5vw auto;
overflow: hidden;
transition: var(--quick-transition);
filter: saturate(0%);
color: #fff;
box-shadow: 0 4px 8px -2px #000;
}
.category img {
width: 40%;
width: 80%;
max-width: 900px;
padding: 5% 5% 5% 5%;
transition: var(--quick-transition);
}
.category:hover {
color: #c22;
box-shadow: 0 10px 8px -2px #000;
filter: saturate(100%);
}
/*Left Side settings*/
.left {
background-color: var(--dark-gray);
width: var(--image-size);
display: flex;
justify-content: center;
justify-content: flex-end;
align-items: center;
min-width: 200px;
transition: var(--quick-transition);
@ -227,17 +220,17 @@ html {
.swap .left {
order: 1;
justify-content: flex-start;
}
/*Right side settings*/
.right {
background-color: var(--gray);
width: calc(100% - var(--image-size));
display: flex;
flex-direction: column;
padding: 2%;
padding: 5%;
justify-content: center;
text-align: right;
text-align: left;
transition: var(--quick-transition);
}
.right h3 {
@ -245,36 +238,35 @@ html {
margin: 0;
}
.right p {
font-size: 1.5vw;
font-style: italic;
font-size: calc(16px + 0.75vw);
font-family: 'Open Sans Condensed', sans-serif;
}
.swap .right {
order: 0;
text-align: left;
text-align: right;
}
/*Webpage footer*/
#footer {
.footer {
color: #fff;
display: flex;
width: 100%;
width: 95%;
height: auto;
font-size: 1vw;
font-size: calc(16px + 0.75vw);
text-align: center;
align-items: center;
overflow: hidden;
align-content: space-around;
padding: 2% 0;
padding: 2% 2.5%;
background-color: var(--dark-gray);
}
#footer a {
.footer a {
color: var(--red);
text-decoration: none;
padding: 0 0.5vw;
}
#footer-r, #footer-r a {
font-size: 1.5vw;
.footer-r, .footer-r a {
font-size: calc(16px + 0.5vw);
padding: 0;
font-style: italic;
}
@ -292,35 +284,38 @@ html {
opacity: 0;
display: none;
}
#links-header a {
font-size: 3vw;
.links-header a {
font-size: calc(16 + 1vw);
}
.header, #links-header, #links-header a, #logo-header img {
.header, .links-header, .links-header a, .logo-header img {
height: var(--mobile-height);
line-height: var(--mobile-height);
}
.header:hover {
background-color: var(--header-transparency);
background-color: var(--dark-gray);
height: var(--mobile-height);
}
.header:hover > #links-header a {
.header:hover > .links-header a {
line-height: var(--mobile-height);
font-size: 3vw;
font-size: inherit;
}
/*Banner settings*/
#banner {
.banner {
font-size: 4vw;
height: 300px;
}
#banner img {
.banner img {
width: 20vw;
}
/*Category settings*/
.category {
flex-wrap: wrap;
margin: 2vw 0;
margin: 3vh 0;
width: 100%;
background-color: var(--gray);
box-shadow: 0px 10px 10px 5px rgba(0,0,0,1);
}
.category img {
width: 30%;
@ -336,6 +331,7 @@ html {
}
.left {
min-width: 200px;
background-color: #5551;
}
.swap .right {
order: 1;
@ -346,10 +342,10 @@ html {
text-align: center;
}
.right h3 {
font-size: 6vw;
font-size: calc(16px + 3vw);
}
.right p {
font-size: 3vw;
font-size: calc(16px + 1vw);
margin: 0;
}
@ -358,43 +354,40 @@ html {
width: 100%;
margin: 10px 0;
}
.text h2 {
font-size: calc(16px + 7vw);
line-height: 1.4em;
}
.text-field {
font-size: 3vw;
font-size: calc(12px + 0.75vw);
padding: 10px;
justify-content: space-between;
}
.text-field h3 {
font-size: 4vw;
font-size: calc(16px + 1.2vw);
}
/*Footer settings*/
#footer {
.footer {
width: 90%;
padding: 0 5%;
font-size: 4vw;
font-size: calc(16px + 1.2vw);
height: auto;
flex-flow: wrap;
}
#footer a {
font-size: 4vw;
.footer a {
font-size: calc(16px + 1.2vw);
padding: 0 7px 0 7px;
}
#footer-r, #footer-r a {
font-size: 3vw;
.footer-r, .footer-r a {
font-size: calc(16px + 0.5vw);
padding: 0;
}
#footer-r {
.footer-r {
padding: 0 0 10px 0;
}
}
/*Fit text to whole screen*/
@media screen and (max-width: 1280px) {
#text {
width: 100%;
}
}
/*Scrollbar hide*/
::-webkit-scrollbar {
width: 0;

16
index.html
View File

@ -1,4 +1,4 @@
<html>
<html lang="en">
<head>
<!--Styles and meta-->
<title>RedXen Community</title>
@ -18,16 +18,16 @@
<body>
<div class="interface">
<div class="content">
<div id="banner">
<img id="logobig" src="res/logo.png" alt="logo">
<div class="banner">
<img src="res/logo.png" alt="logo">
<h1>RedXen Gaming</h1>
</div>
<div class="header" id="pgHeader">
<span id="logo-header">
<span class="logo-header">
<div><a href="https://redxen.eu"><img src="res/logo.png" alt="logo"></a></div>
<div class="header-title"><a href="https://redxen.eu">RedXen Gaming</a></div>
</span>
<span id="links-header">
<span class="links-header">
<a href="https://forum.redxen.eu">Forum</a>
<a href="https://steamcommunity.com/groups/redxengaming">Steam</a>
<a href="/discord">Discord</a>
@ -35,7 +35,7 @@
<a href="https://yagpdb.redxen.eu">PMBot</a>
</span>
</div>
<div id="text">
<div class="text">
<h2>About us</h2>
<div id="forum" class="category">
<div class="left">
@ -92,14 +92,14 @@
</div>
</div>
</div>
<div id=footer>
<div class="footer">
<div class="row">
Made by caskd!<br>
<a href="https://steamcommunity.com/id/caskd"><i class="fab fa-steam"></i></a>
<a href="https://github.com/casKd-dev"><i class="fab fa-github"></i></a>
<a href="https://soundcloud.com/caskd"><i class="fab fa-soundcloud"></i></a>
</div>
<div id="footer-r" class="row">
<div class="footer-r row">
This website was made with tons of love, trial and time. If you appreciate what i have done or want to give me feedback or such, <a href="mailto:caskd@gmx.de">contact</a> me here.
</div>
</div>

25
js/main.js
View File

@ -1,18 +1,11 @@
$(document).ready(function() {
/* Load Google Analytics */
$.getScript("https://www.googletagmanager.com/gtag/js?id=UA-120536610-1");
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'UA-120536610-1');
});
$(document).scroll(function() {
/* On scroll check if scrolled beyond 100% */
var header = document.getElementById("pgHeader");
if (window.pageYOffset >= $(window).height()) {
header.classList.add("sticky");
} else {
header.classList.remove("sticky");
}
$(document).scroll(function() {
/* On scroll check if scrolled beyond 100% */
var header = document.getElementById("pgHeader");
if (window.pageYOffset >= $(window).height()) {
header.classList.add("sticky");
} else {
header.classList.remove("sticky");
}
});
});