diff --git a/README.md b/README.md index ffe3ab1..ca3e8c3 100644 --- a/README.md +++ b/README.md @@ -1 +1,11 @@ -# RXHomepage +# RedXen Homepage + +## What is this? + +Well, nothing special... +This is just the homepage i use for the community i am running [here](http://redxen.dynu.net) + +## Why do i host it on GitHub? + +If anyone wants to contribute, see my code practices or something similar, then here it is. +It is also easier to check on something or manage changes. diff --git a/index.html b/index.html new file mode 100644 index 0000000..91c38dd --- /dev/null +++ b/index.html @@ -0,0 +1,70 @@ + + + + + + + + + + RedXen Gaming + + +
+ + + + + + + + RedXen Gaming + +
+
+

About us

+

+ We are a small community of gamers that play the same games and enjoy the same things!
+

+

Updates

+

+ 10 May - Adapted the homepage to almost all viewports
+ 6 May - Got a new homepage! The one you are on now
+ 1 May - Discord revamp with new channels, categories and roles +

+

Servers

+

+ Currently planning on hosting servers for some games but our bandwidth doesn't allow it for now.
+ In the near future we will get better bandwidth.
+ The approx. number of players that wouldn't impact performance would be ~ 5 players.
+ That amount is too low for a server. +

+

Current Staff

+

+ Owner: casKd
+ Administrator: Davids_Trains
+ Super-Moderator: McDonlad
+ Moderators: ChuppaChupps & Korato +

+

Current Setup

+

+ Our current server setup consists of:

+ Intel i3-2100
+ 6GB DDR3 RAM
+ 220 KB/s upload speed
+ 830 KB/s download speed
+ Our forum powered by Discourse
+ Cloud service powered by Nextcloud
+ All running through nginx reverse proxy +

+ +
+ + \ No newline at end of file diff --git a/res/stylesheet-min.css b/res/stylesheet-min.css new file mode 100644 index 0000000..540ea3b --- /dev/null +++ b/res/stylesheet-min.css @@ -0,0 +1,156 @@ +/*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; +} +#box:hover #title { + height: 40px; + transition: ease-in-out 200ms; + line-height: 40px; +} +#box:hover > #links-top a { + padding-top: 10px; + padding-bottom: 10px; + opacity: 1; +} +#box:hover ~ #content { + top: 80px; + transition: ease-in-out 300ms; +} +#box:hover { + height: 80px; + 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: 20px; + 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: 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(50,50,50,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:hover { + background-color: rgba(200,200,200,0.8); + color: #000; +} + +/*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; +} +.subtitle:hover { + height: 30px; + line-height: 30px; + transition: ease-in-out 200ms; + background-color: rgba(0, 0, 0, 0.8); + color: rgb(200,0,50); +} +.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: 14px; + line-height: 24px; + transition: ease-in-out 200ms; +} +#footer:hover { + transition: ease-in-out 300ms; + line-height: 30px; + 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; +} \ No newline at end of file diff --git a/res/stylesheet.css b/res/stylesheet.css new file mode 100644 index 0000000..961e656 --- /dev/null +++ b/res/stylesheet.css @@ -0,0 +1,170 @@ +/*Root*/ +:root { + background-color: rgb(110, 0, 0); + background-image: url('https://s14.postimg.cc/6ge0ofcrl/image.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; +} \ No newline at end of file diff --git a/res/window.js b/res/window.js new file mode 100644 index 0000000..764d3f4 --- /dev/null +++ b/res/window.js @@ -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'); + } +}); \ No newline at end of file