v1 Archive
This commit is contained in:
parent
5cc50968c4
commit
238ab6f66d
394
css/web.css
394
css/web.css
|
|
@ -1,394 +0,0 @@
|
|||
html {
|
||||
margin: 0;
|
||||
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);
|
||||
background-attachment: fixed;
|
||||
background-size: cover;
|
||||
background-position: center;
|
||||
background-repeat: no-repeat;
|
||||
min-height: 300px;
|
||||
|
||||
/*Global Variables*/
|
||||
--desktop-height: calc(20px + 2vw);
|
||||
--mobile-height: calc(10px + 2vw);
|
||||
|
||||
--header-transparency: rgba(0, 0, 0, 0.7);
|
||||
|
||||
--image-size: 30%;
|
||||
--red: #d22;
|
||||
--dark-gray: #111;
|
||||
--gray: #151515;
|
||||
--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;
|
||||
}
|
||||
|
||||
/* Desktop header*/
|
||||
.header {
|
||||
width: 100%;
|
||||
left: 0;
|
||||
z-index: 20;
|
||||
display: flex;
|
||||
position: absolute;
|
||||
overflow: hidden;
|
||||
transition: var(--quick-transition);
|
||||
}
|
||||
.header-title {
|
||||
width: 100%;
|
||||
color: #fff;
|
||||
display: flex;
|
||||
flex-wrap: nowrap;
|
||||
font-size: calc(var(--desktop-height) / 2);
|
||||
margin: auto 0;
|
||||
}
|
||||
.logo-header {
|
||||
display: none;
|
||||
opacity: 0;
|
||||
margin: auto 0;
|
||||
}
|
||||
.logo-header a {
|
||||
text-decoration: none;
|
||||
color: #fff;
|
||||
}
|
||||
.logo-header img {
|
||||
display: flex;
|
||||
margin-left: 5px;
|
||||
}
|
||||
.links-header {
|
||||
display: flex;
|
||||
flex: 1;
|
||||
margin: auto 0;
|
||||
justify-content: space-around;
|
||||
transition: var(--quick-transition);
|
||||
}
|
||||
.links-header a {
|
||||
color: #eee;
|
||||
text-align: center;
|
||||
margin: auto 1vw;
|
||||
text-decoration: none;
|
||||
font-family: 'Dosis', sans-serif;
|
||||
transition: var(--quick-transition);
|
||||
}
|
||||
.header, .links-header, .logo-header, .logo-header img{
|
||||
height: var(--desktop-height);
|
||||
font-size: calc(var(--desktop-height) / 2);
|
||||
}
|
||||
|
||||
/*Hover settings*/
|
||||
.header:hover {
|
||||
background-color: var(--header-transparency);
|
||||
height: calc(var(--desktop-height) * 1.5);
|
||||
}
|
||||
.header:hover > .header-title {
|
||||
font-size: calc(var(--desktop-height) / 1.75);
|
||||
height: calc(var(--desktop-height) * 1.5);
|
||||
}
|
||||
.links-header a:hover {
|
||||
color: var(--red);
|
||||
}
|
||||
|
||||
/*Sticky header*/
|
||||
.sticky > .logo-header {
|
||||
opacity: 1;
|
||||
display: flex;
|
||||
}
|
||||
.sticky > .links-header {
|
||||
display: flex;
|
||||
flex: 1 1 0;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
.sticky {
|
||||
position: fixed;
|
||||
background-color: var(--header-transparency);
|
||||
top: 0;
|
||||
}
|
||||
|
||||
/* Content settings */
|
||||
.content {
|
||||
width: 100%;
|
||||
min-height: 100%;
|
||||
top: 0;
|
||||
left: 0;
|
||||
display: flex;
|
||||
position: absolute;
|
||||
flex-wrap: wrap;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
/* Banner settings */
|
||||
.banner {
|
||||
/*Sizing*/
|
||||
height: 100vh;
|
||||
width: 100%;
|
||||
color: #fff;
|
||||
overflow: hidden;
|
||||
font-size: calc(32px + 2vw);
|
||||
transition: var(--long-transition);
|
||||
|
||||
/*Flexbox content*/
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
display: flex;
|
||||
}
|
||||
.banner h1 {
|
||||
filter: drop-shadow(-5px 6px 3px rgba(0,0,0,.7));
|
||||
}
|
||||
.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 {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
width: 100%;
|
||||
min-height: 100px;
|
||||
background-color: var(--dark-gray);
|
||||
color: #fff;
|
||||
align-self: center;
|
||||
transition: var(--quick-transition);
|
||||
}
|
||||
|
||||
.text h2 {
|
||||
text-align: center;
|
||||
width: 100%;
|
||||
margin: 3vw 0;
|
||||
font-size: calc(32px + 2vw);
|
||||
line-height: 1.4em;
|
||||
background-color: var(--gray);
|
||||
transition: var(--quick-transition);
|
||||
color: var(--red);
|
||||
}
|
||||
.text-field {
|
||||
width: 100%;
|
||||
justify-content: center;
|
||||
display: flex;
|
||||
padding: 20px;
|
||||
background-color: var(--gray);
|
||||
margin: 0 auto;
|
||||
flex-direction: row;
|
||||
flex: 1;
|
||||
font-size: calc(16px + 0.5vw);
|
||||
flex-wrap: wrap;
|
||||
align-items: flex-start;
|
||||
text-align: center;
|
||||
font-family: 'Dosis', sans-serif;
|
||||
transition: var(--quick-transition);
|
||||
}
|
||||
.row {
|
||||
width: 50%;
|
||||
}
|
||||
.text-field h3 {
|
||||
font-size: calc(16px + 1vw);
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
/*Category of descriptions*/
|
||||
.category {
|
||||
display: flex;
|
||||
flex-wrap: nowrap;
|
||||
width: 90%;
|
||||
margin: 1.5vw auto;
|
||||
overflow: hidden;
|
||||
transition: var(--quick-transition);
|
||||
color: #fff;
|
||||
}
|
||||
.category img {
|
||||
width: 80%;
|
||||
max-width: 900px;
|
||||
padding: 5% 5% 5% 5%;
|
||||
transition: var(--quick-transition);
|
||||
}
|
||||
|
||||
/*Left Side settings*/
|
||||
.left {
|
||||
width: var(--image-size);
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
align-items: center;
|
||||
min-width: 200px;
|
||||
transition: var(--quick-transition);
|
||||
}
|
||||
|
||||
.swap .left {
|
||||
order: 1;
|
||||
justify-content: flex-start;
|
||||
}
|
||||
|
||||
/*Right side settings*/
|
||||
.right {
|
||||
width: calc(100% - var(--image-size));
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding: 5%;
|
||||
justify-content: center;
|
||||
text-align: left;
|
||||
transition: var(--quick-transition);
|
||||
}
|
||||
.right h3 {
|
||||
font-size: 3vw;
|
||||
margin: 0;
|
||||
}
|
||||
.right p {
|
||||
font-size: calc(16px + 0.75vw);
|
||||
font-family: 'Open Sans Condensed', sans-serif;
|
||||
}
|
||||
.swap .right {
|
||||
order: 0;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
/*Webpage footer*/
|
||||
.footer {
|
||||
color: #fff;
|
||||
display: flex;
|
||||
width: 95%;
|
||||
height: auto;
|
||||
font-size: calc(16px + 0.75vw);
|
||||
text-align: center;
|
||||
align-items: center;
|
||||
overflow: hidden;
|
||||
align-content: space-around;
|
||||
padding: 2% 2.5%;
|
||||
background-color: var(--dark-gray);
|
||||
}
|
||||
.footer a {
|
||||
color: var(--red);
|
||||
text-decoration: none;
|
||||
padding: 0 0.5vw;
|
||||
}
|
||||
.footer-r, .footer-r a {
|
||||
font-size: calc(16px + 0.5vw);
|
||||
padding: 0;
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
/*Adaptive content using media queries*/
|
||||
@media screen and (max-width: 720px) {
|
||||
|
||||
/*Header settings*/
|
||||
.header {
|
||||
position: relative;
|
||||
padding: 5px 0;
|
||||
background-color: var(--dark-gray);
|
||||
}
|
||||
.header-title {
|
||||
opacity: 0;
|
||||
display: none;
|
||||
}
|
||||
.links-header a {
|
||||
font-size: calc(16 + 1vw);
|
||||
}
|
||||
.header, .links-header, .links-header a, .logo-header img {
|
||||
height: var(--mobile-height);
|
||||
line-height: var(--mobile-height);
|
||||
}
|
||||
.header:hover {
|
||||
background-color: var(--dark-gray);
|
||||
height: var(--mobile-height);
|
||||
}
|
||||
.header:hover > .links-header a {
|
||||
line-height: var(--mobile-height);
|
||||
font-size: inherit;
|
||||
}
|
||||
|
||||
/*Banner settings*/
|
||||
.banner {
|
||||
font-size: 4vw;
|
||||
height: 300px;
|
||||
}
|
||||
.banner img {
|
||||
width: 20vw;
|
||||
}
|
||||
|
||||
/*Category settings*/
|
||||
.category {
|
||||
flex-wrap: wrap;
|
||||
margin: 3vh 0;
|
||||
width: 100%;
|
||||
background-color: var(--gray);
|
||||
box-shadow: 0px 10px 10px 5px rgba(0,0,0,1);
|
||||
}
|
||||
.category img {
|
||||
width: 30%;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
/*Sides and swapping*/
|
||||
.left, .right {
|
||||
width: 100%;
|
||||
}
|
||||
.swap .left {
|
||||
order: 0;
|
||||
}
|
||||
.left {
|
||||
min-width: 200px;
|
||||
background-color: #5551;
|
||||
}
|
||||
.swap .right {
|
||||
order: 1;
|
||||
text-align: center;
|
||||
}
|
||||
.right {
|
||||
padding: 10px 25px 10px 25px;
|
||||
text-align: center;
|
||||
}
|
||||
.right h3 {
|
||||
font-size: calc(16px + 3vw);
|
||||
}
|
||||
.right p {
|
||||
font-size: calc(16px + 1vw);
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
/*Text field settings*/
|
||||
.row {
|
||||
width: 100%;
|
||||
margin: 10px 0;
|
||||
}
|
||||
.text h2 {
|
||||
font-size: calc(16px + 7vw);
|
||||
line-height: 1.4em;
|
||||
}
|
||||
.text-field {
|
||||
font-size: calc(12px + 0.75vw);
|
||||
padding: 10px;
|
||||
justify-content: space-between;
|
||||
}
|
||||
.text-field h3 {
|
||||
font-size: calc(16px + 1.2vw);
|
||||
}
|
||||
|
||||
/*Footer settings*/
|
||||
.footer {
|
||||
width: 90%;
|
||||
padding: 0 5%;
|
||||
font-size: calc(16px + 1.2vw);
|
||||
height: auto;
|
||||
flex-flow: wrap;
|
||||
}
|
||||
.footer a {
|
||||
font-size: calc(16px + 1.2vw);
|
||||
padding: 0 7px 0 7px;
|
||||
}
|
||||
.footer-r, .footer-r a {
|
||||
font-size: calc(16px + 0.5vw);
|
||||
padding: 0;
|
||||
}
|
||||
.footer-r {
|
||||
padding: 0 0 10px 0;
|
||||
}
|
||||
}
|
||||
|
||||
/*Scrollbar hide*/
|
||||
::-webkit-scrollbar {
|
||||
width: 0;
|
||||
}
|
||||
165
index.html
165
index.html
|
|
@ -1,109 +1,70 @@
|
|||
<html lang="en">
|
||||
<html>
|
||||
<head>
|
||||
<!--Styles and meta-->
|
||||
<title>RedXen Community</title>
|
||||
<link rel="stylesheet" href="css/web.css">
|
||||
<meta name="author" content="caskd">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<meta charset="UTF-8">
|
||||
<meta name="description" content="The homepage of the RedXen Community">
|
||||
<script src="js/jquery-3.3.1.min.js"></script>
|
||||
<link href="https://fonts.googleapis.com/css?family=Abel" rel="stylesheet">
|
||||
<link href="https://fonts.googleapis.com/css?family=Glegoo" rel="stylesheet">
|
||||
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.13/css/all.css" integrity="sha384-DNOHZ68U8hZfKXOrtjWvjxusGo9WQnrNx2sqG0tfsghAvtVlRW3tvkXWZh58N9jp" crossorigin="anonymous">
|
||||
<link href="https://fonts.googleapis.com/css?family=Oswald" rel="stylesheet">
|
||||
<link href="https://fonts.googleapis.com/css?family=Open+Sans+Condensed:300" rel="stylesheet">
|
||||
<link href="https://fonts.googleapis.com/css?family=Dosis" rel="stylesheet">
|
||||
<link rel="shortcut icon" href="/favicon.ico">
|
||||
<script src="js/main.js"></script>
|
||||
<link href="https://fonts.googleapis.com/css?family=Quicksand" rel="stylesheet">
|
||||
<link href="res/stylesheet-min.css" rel="stylesheet" id="style">
|
||||
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
|
||||
<script src="res/window.js"></script>
|
||||
<title>RedXen Gaming</title>
|
||||
</head>
|
||||
<body>
|
||||
<div class="interface">
|
||||
<div class="content">
|
||||
<div class="banner">
|
||||
<img src="res/logo.png" alt="logo">
|
||||
<h1>RedXen Gaming</h1>
|
||||
</div>
|
||||
<div class="header" id="pgHeader">
|
||||
<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 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>
|
||||
<a href="https://sb.redxen.eu">SourceBans</a>
|
||||
<a href="https://yagpdb.redxen.eu">PMBot</a>
|
||||
</span>
|
||||
</div>
|
||||
<div class="text">
|
||||
<h2>About us</h2>
|
||||
<div id="forum" class="category">
|
||||
<div class="left">
|
||||
<img alt="discourse" src="res/discourse.png">
|
||||
</div>
|
||||
<div class="right">
|
||||
<h3>RedXen Forum</h3>
|
||||
<p>Our forum is a easy-to-browse forum that is fast and reliable, it is powered by Discourse and it is one of the best community forums!</p>
|
||||
</div>
|
||||
</div>
|
||||
<div id="discord" class="swap category">
|
||||
<div class="left">
|
||||
<img alt="discord" src="res/discord.png">
|
||||
</div>
|
||||
<div class="right">
|
||||
<h3>Discord Server</h3>
|
||||
<p>Due to the reliability that Discord offers, most of the people join us on our server to communicate about topics they have in common, support is also given pretty quick there.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div id="yagpdb" class="category">
|
||||
<div class="left">
|
||||
<img alt="yagpdb" src="res/yagpdb.png">
|
||||
</div>
|
||||
<div class="right">
|
||||
<h3>PMBot</h3>
|
||||
<p>We also host a slightly customized version of YAGPDB called PMBot that can moderate your servers, you can add him to your server!</p>
|
||||
</div>
|
||||
</div>
|
||||
<div id="sb" class="swap category">
|
||||
<div class="left">
|
||||
<img alt="sourcebans" src="res/sb.png">
|
||||
</div>
|
||||
<div class="right">
|
||||
<h3>SourceBans</h3>
|
||||
<p>Got banned? Don't know the reason why, or want to make a complaint? You should be visiting our SourceBans page</p>
|
||||
</div>
|
||||
</div>
|
||||
<h2>News</h2>
|
||||
<div id="news" class="text-field">
|
||||
<div class="row">
|
||||
<h3>June 2018</h3>
|
||||
Added SourceBans for easier ban management<br>
|
||||
Now hosting TF2 & CSS servers<br>
|
||||
Forums are stable and ready to use<br>
|
||||
Created this webpage and added meta tags for SEO's<br>
|
||||
Now hosting server on DigitalOcean with improved bandwidth
|
||||
</div>
|
||||
<div class="row">
|
||||
<h3>May 2018</h3>
|
||||
Added reaction roles to the discord server<br>
|
||||
Adapted the homepage to almost all viewports<br>
|
||||
Updated homepage to a better one<br>
|
||||
Discord revamp with new channels, categories and roles
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<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 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>
|
||||
<div id="box">
|
||||
<span id="links-top">
|
||||
<a href="https://steamcommunity.com/groups/redxengaming"><i class="fab fa-steam"></i></a>
|
||||
<a href="https://discord.gg/CTFMzde"><i class="fab fa-discord"></i></a>
|
||||
<a href="https://forum.redxen.eu"><i class="fab fa-discourse"></i></a>
|
||||
<a href="https://yagpdb.redxen.eu"><i class="fas fa-robot"></i></a>
|
||||
</span>
|
||||
<span id="title">
|
||||
<span class="titletext">RedXen Gaming</span>
|
||||
</span>
|
||||
</div>
|
||||
<div id="content">
|
||||
<p class="subtitle">About us</p>
|
||||
<p class="text">
|
||||
We are a small community of gamers that play the same games and enjoy the same things!<br>
|
||||
</p>
|
||||
<p class="subtitle">Updates</p>
|
||||
<p class="text">
|
||||
3 June - Now hosting server on DigitalOcean with improved bandwidth<br>
|
||||
17 May - Added reaction roles to the discord server<br>
|
||||
10 May - Adapted the homepage to almost all viewports<br>
|
||||
6 May - Got a new homepage! The one you are on now<br>
|
||||
1 May - Discord revamp with new channels, categories and roles
|
||||
</p>
|
||||
<p class="subtitle">Servers</p>
|
||||
<p class="text">
|
||||
Currently planning on hosting servers for some games but our bandwidth doesn't allow it for now.<br>
|
||||
In the near future we will get better bandwidth.<br>
|
||||
The approx. number of players that wouldn't impact performance would be ~ 5 players.<br>
|
||||
That amount is too low for a server.
|
||||
</p>
|
||||
<p class="subtitle">Current Staff</p>
|
||||
<p class="text">
|
||||
Owner: casKd <br>
|
||||
Administrator: Davids_Trains<br>
|
||||
Super-Moderator: McDonlad<br>
|
||||
Moderators: ChuppaChupps & Korato
|
||||
</p>
|
||||
<p class="subtitle">Current Setup</p>
|
||||
<p class="text">
|
||||
Our current server setup consists of:<br>
|
||||
2GB RAM<br>
|
||||
2 vCPU's<br>
|
||||
Up to 90 Mbps bandwidth<br>
|
||||
Dockerized Discourse<br>
|
||||
Dockerized YAGPDB<br>
|
||||
</p>
|
||||
<div id="footer">
|
||||
<span class="links">
|
||||
<a href="https://steamcommunity.com/id/caskd"><i class="fab fa-steam"></i></a>
|
||||
<a href="https://discord.gg/CTFMzde"><i class="fab fa-discord"></i></a>
|
||||
<a href="https://forum.redxen.eu/u/caskd"><i class="fab fa-discourse"></i></a>
|
||||
<a href="mailto:caskd@gmx.de"><i class="fas fa-envelope"></i></a>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
</html>
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
11
js/main.js
11
js/main.js
|
|
@ -1,11 +0,0 @@
|
|||
$(document).ready(function() {
|
||||
$(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");
|
||||
}
|
||||
});
|
||||
});
|
||||
BIN
res/bg.jpg
BIN
res/bg.jpg
Binary file not shown.
|
Before Width: | Height: | Size: 760 KiB After Width: | Height: | Size: 116 KiB |
BIN
res/discord.png
BIN
res/discord.png
Binary file not shown.
|
Before Width: | Height: | Size: 114 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 13 KiB |
BIN
res/logo.png
BIN
res/logo.png
Binary file not shown.
|
Before Width: | Height: | Size: 9.0 KiB |
BIN
res/sb.png
BIN
res/sb.png
Binary file not shown.
|
Before Width: | Height: | Size: 14 KiB |
|
|
@ -0,0 +1,110 @@
|
|||
/*Root*/
|
||||
:root {
|
||||
background-color: rgb(110, 0, 0);
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
/*Top bar settings*/
|
||||
#box {
|
||||
background: linear-gradient(to left, rgb(220, 0, 0), rgb(170, 0, 0));
|
||||
width: 100%;
|
||||
height: 60px;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
transition: ease-in-out 400ms;
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
/*Links in top bar*/
|
||||
#links-top {
|
||||
top: 0;
|
||||
position: absolute;
|
||||
text-align: center;
|
||||
width: 100%;
|
||||
height: auto;
|
||||
background-color: rgba(0, 0, 0, 0.4);
|
||||
transition: ease-in-out 300ms;
|
||||
}
|
||||
#links-top a {
|
||||
text-decoration: none;
|
||||
color: #fff;
|
||||
padding-top: 5px;
|
||||
padding-bottom: 5px;
|
||||
font-family: 'Quicksand', sans-serif;
|
||||
font-size: 20px;
|
||||
display: inline-block;
|
||||
transition: ease-in-out 200ms;
|
||||
padding-right: 5px;
|
||||
padding-left: 5px;
|
||||
opacity: 0.6;
|
||||
}
|
||||
|
||||
/*Title Bar*/
|
||||
#title {
|
||||
font-family: 'Abel', sans-serif;
|
||||
font-size: 20px;
|
||||
line-height: 30px;
|
||||
bottom: 0;
|
||||
width: 100%;
|
||||
left: 0;
|
||||
height: 30px;
|
||||
display: block;
|
||||
text-align: center;
|
||||
position: absolute;
|
||||
color: #fff;
|
||||
transition: ease-in-out 200ms;
|
||||
}
|
||||
|
||||
/*Page Content*/
|
||||
#content {
|
||||
background-color: rgba(30,30,30,0.5);
|
||||
color: #fff;
|
||||
height: auto;
|
||||
top: 60px;
|
||||
width: 100%;
|
||||
transition: ease-in-out 200ms;
|
||||
position: absolute;
|
||||
z-index: 0;
|
||||
left: 0;
|
||||
text-align: center;
|
||||
vertical-align: middle;
|
||||
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
|
||||
}
|
||||
|
||||
/*Content types*/
|
||||
.subtitle {
|
||||
font-size: 14px;
|
||||
line-height: 22px;
|
||||
width: 100%;
|
||||
color: #fff;
|
||||
height: 22px;
|
||||
background-color: rgba(0, 0, 0, 0.4);
|
||||
font-family: 'Glegoo', serif;
|
||||
transition: ease-in-out 300ms;
|
||||
}
|
||||
.text {
|
||||
font-size: 10px;
|
||||
line-height: 12px;
|
||||
font-family: 'Quicksand', sans-serif;
|
||||
transition: ease-in-out 150ms;
|
||||
}
|
||||
|
||||
/*Footer Settings*/
|
||||
#footer {
|
||||
font-family: 'Quicksand', sans-serif;
|
||||
width: 100%;
|
||||
height: auto;
|
||||
background-color: rgba(0, 0, 0, 0.4);
|
||||
color: #fff;
|
||||
font-size: 16px;
|
||||
line-height: 24px;
|
||||
transition: ease-in-out 200ms;
|
||||
}
|
||||
#footer a {
|
||||
text-decoration: none;
|
||||
color: #fff;
|
||||
padding-right: 5px;
|
||||
padding-left: 5px;
|
||||
transition: ease-in-out 300ms;
|
||||
}
|
||||
|
|
@ -0,0 +1,170 @@
|
|||
/*Root*/
|
||||
:root {
|
||||
background-color: rgb(110, 0, 0);
|
||||
background-image: url('bg.jpg');
|
||||
background-repeat: no-repeat;
|
||||
background-size: cover;
|
||||
background-attachment: fixed;
|
||||
background-position: center;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
/*Top bar settings*/
|
||||
#box {
|
||||
background: linear-gradient(to left, rgb(220, 0, 0), rgb(170, 0, 0));
|
||||
width: 100%;
|
||||
height: 80px;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
transition: ease-in-out 400ms;
|
||||
z-index: 2;
|
||||
}
|
||||
#box:hover > #links-top a {
|
||||
font-size: 150%;
|
||||
padding-top: 10px;
|
||||
padding-bottom: 10px;
|
||||
opacity: 1;
|
||||
}
|
||||
#box:hover ~ #content {
|
||||
top: 120px;
|
||||
transition: ease-in-out 300ms;
|
||||
}
|
||||
#box:hover {
|
||||
height: 120px;
|
||||
transition: ease-in-out 300ms;
|
||||
}
|
||||
|
||||
/*Links in top bar*/
|
||||
#links-top {
|
||||
top: 0;
|
||||
position: absolute;
|
||||
text-align: center;
|
||||
width: 100%;
|
||||
height: auto;
|
||||
background-color: rgba(0, 0, 0, 0.4);
|
||||
transition: ease-in-out 300ms;
|
||||
}
|
||||
#links-top a {
|
||||
text-decoration: none;
|
||||
color: #fff;
|
||||
padding-top: 5px;
|
||||
padding-bottom: 5px;
|
||||
font-family: 'Quicksand', sans-serif;
|
||||
font-size: 16px;
|
||||
display: inline-block;
|
||||
transition: ease-in-out 200ms;
|
||||
padding-right: 5px;
|
||||
padding-left: 5px;
|
||||
opacity: 0.6;
|
||||
}
|
||||
#links-top a:hover {
|
||||
color: rgb(200,0,50);
|
||||
padding-right: 20px;
|
||||
padding-left: 20px;
|
||||
transition: ease-in-out 200ms;
|
||||
}
|
||||
|
||||
/*Title Bar*/
|
||||
#title {
|
||||
font-family: 'Abel', sans-serif;
|
||||
font-size: 30px;
|
||||
line-height: 40px;
|
||||
bottom: 0;
|
||||
width: 80%;
|
||||
left: 10%;
|
||||
height: 40px;
|
||||
display: block;
|
||||
text-align: center;
|
||||
position: absolute;
|
||||
background-color: rgba(0,0,0,0.2);
|
||||
color: #fff;
|
||||
border-top-right-radius: 5px;
|
||||
border-top-left-radius: 5px;
|
||||
transition: ease-in-out 200ms;
|
||||
}
|
||||
#title:hover {
|
||||
background-color: rgba(255,255,255,0.8);
|
||||
transition: ease-in-out 200ms;
|
||||
color: #000;
|
||||
height: 50px;
|
||||
line-height: 50px;
|
||||
}
|
||||
|
||||
/*Page Content*/
|
||||
#content {
|
||||
background-color: rgba(50,50,50,0.5);
|
||||
color: #fff;
|
||||
height: auto;
|
||||
top: 80px;
|
||||
width: 80%;
|
||||
transition: ease-in-out 200ms;
|
||||
position: absolute;
|
||||
left: 10%;
|
||||
z-index: 0;
|
||||
text-align: center;
|
||||
vertical-align: middle;
|
||||
border-bottom-left-radius: 5px;
|
||||
border-bottom-right-radius: 5px;
|
||||
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
|
||||
}
|
||||
#content:hover {
|
||||
background-color: rgba(200,200,200,0.8);
|
||||
color: #000;
|
||||
}
|
||||
|
||||
/*Content types*/
|
||||
.subtitle {
|
||||
font-size: 20px;
|
||||
line-height: 40px;
|
||||
width: 100%;
|
||||
color: #fff;
|
||||
height: 40px;
|
||||
background-color: rgba(0, 0, 0, 0.4);
|
||||
font-family: 'Glegoo', serif;
|
||||
transition: ease-in-out 300ms;
|
||||
}
|
||||
.subtitle:hover {
|
||||
height: 50px;
|
||||
line-height: 50px;
|
||||
transition: ease-in-out 200ms;
|
||||
background-color: rgba(0, 0, 0, 0.8);
|
||||
color: rgb(200,0,50);
|
||||
}
|
||||
.text {
|
||||
font-size: 12px;
|
||||
line-height: 18px;
|
||||
font-family: 'Quicksand', sans-serif;
|
||||
transition: ease-in-out 150ms;
|
||||
}
|
||||
/*Footer Settings*/
|
||||
#footer {
|
||||
font-family: 'Quicksand', sans-serif;
|
||||
width: 100%;
|
||||
height: auto;
|
||||
border-bottom-left-radius: 5px;
|
||||
border-bottom-right-radius: 5px;
|
||||
background-color: rgba(0, 0, 0, 0.4);
|
||||
color: #fff;
|
||||
font-size: 24px;
|
||||
line-height: 40px;
|
||||
transition: ease-in-out 200ms;
|
||||
}
|
||||
#footer:hover {
|
||||
transition: ease-in-out 300ms;
|
||||
line-height: 60px;
|
||||
background-color: rgba(0, 0, 0, 0.8);
|
||||
}
|
||||
#footer a {
|
||||
text-decoration: none;
|
||||
color: #fff;
|
||||
padding-right: 5px;
|
||||
padding-left: 5px;
|
||||
transition: ease-in-out 300ms;
|
||||
}
|
||||
#footer a:hover {
|
||||
color: rgb(200,0,50);
|
||||
padding-right: 20px;
|
||||
padding-left: 20px;
|
||||
transition: ease-in-out 200ms;
|
||||
}
|
||||
|
|
@ -0,0 +1,8 @@
|
|||
$(window).on ("load resize", function() {
|
||||
if ($(window).width() < 720) {
|
||||
$('#style').attr('href','res/stylesheet-min.css');
|
||||
}
|
||||
else {
|
||||
$('#style').attr('href','res/stylesheet.css');
|
||||
}
|
||||
});
|
||||
BIN
res/yagpdb.png
BIN
res/yagpdb.png
Binary file not shown.
|
Before Width: | Height: | Size: 48 KiB |
Loading…
Reference in New Issue