Compare commits
14 Commits
Author | SHA1 | Date |
---|---|---|
Alex D. | 357f45101e | |
Alex D. | 5cc50968c4 | |
Alex D. | 52639f70f1 | |
Alex D. | 2f6de7457f | |
Alex D. | ffaef4a72b | |
Alex D. | 3a49532357 | |
Alex D. | 9b1f843da7 | |
Alex D. | 0616d7946a | |
Alex D. | a9dbb24eb1 | |
Alex D. | a30b7b1fda | |
Alex D. | 09b037a5c7 | |
Alex D. | 9b299894df | |
Alex D. | 6d1274354b | |
Alex | 5faec60ab6 |
|
@ -3,7 +3,7 @@
|
||||||
## What is this?
|
## What is this?
|
||||||
|
|
||||||
Well, nothing special...
|
Well, nothing special...
|
||||||
This is just the homepage i use for the community i am running [here](http://redxen.dynu.net)
|
This is just the homepage i use for the community i am running [here](https://redxen.eu)
|
||||||
|
|
||||||
## Why do i host it on GitHub?
|
## Why do i host it on GitHub?
|
||||||
|
|
||||||
|
|
|
@ -0,0 +1,258 @@
|
||||||
|
/*!
|
||||||
|
* Font Awesome Free 5.0.13 by @fontawesome - https://fontawesome.com
|
||||||
|
* License - https://fontawesome.com/license (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License)
|
||||||
|
*/
|
||||||
|
|
||||||
|
.fa,
|
||||||
|
.fab,
|
||||||
|
.fal,
|
||||||
|
.far,
|
||||||
|
.fas {
|
||||||
|
-moz-osx-font-smoothing: grayscale;
|
||||||
|
-webkit-font-smoothing: antialiased;
|
||||||
|
display: inline-block;
|
||||||
|
font-style: normal;
|
||||||
|
font-variant: normal;
|
||||||
|
text-rendering: auto;
|
||||||
|
line-height: 1
|
||||||
|
}
|
||||||
|
|
||||||
|
.fa-lg {
|
||||||
|
font-size: 1.33333em;
|
||||||
|
line-height: .75em;
|
||||||
|
vertical-align: -.0667em
|
||||||
|
}
|
||||||
|
|
||||||
|
.fa-xs {
|
||||||
|
font-size: .75em
|
||||||
|
}
|
||||||
|
|
||||||
|
.fa-sm {
|
||||||
|
font-size: .875em
|
||||||
|
}
|
||||||
|
|
||||||
|
.fa-1x {
|
||||||
|
font-size: 1em
|
||||||
|
}
|
||||||
|
|
||||||
|
.fa-2x {
|
||||||
|
font-size: 2em
|
||||||
|
}
|
||||||
|
|
||||||
|
.fa-3x {
|
||||||
|
font-size: 3em
|
||||||
|
}
|
||||||
|
|
||||||
|
.fa-4x {
|
||||||
|
font-size: 4em
|
||||||
|
}
|
||||||
|
|
||||||
|
.fa-5x {
|
||||||
|
font-size: 5em
|
||||||
|
}
|
||||||
|
|
||||||
|
.fa-6x {
|
||||||
|
font-size: 6em
|
||||||
|
}
|
||||||
|
|
||||||
|
.fa-7x {
|
||||||
|
font-size: 7em
|
||||||
|
}
|
||||||
|
|
||||||
|
.fa-8x {
|
||||||
|
font-size: 8em
|
||||||
|
}
|
||||||
|
|
||||||
|
.fa-9x {
|
||||||
|
font-size: 9em
|
||||||
|
}
|
||||||
|
|
||||||
|
.fa-10x {
|
||||||
|
font-size: 10em
|
||||||
|
}
|
||||||
|
|
||||||
|
.fa-fw {
|
||||||
|
text-align: center;
|
||||||
|
width: 1.25em
|
||||||
|
}
|
||||||
|
|
||||||
|
.fa-ul {
|
||||||
|
list-style-type: none;
|
||||||
|
margin-left: 2.5em;
|
||||||
|
padding-left: 0
|
||||||
|
}
|
||||||
|
|
||||||
|
.fa-ul>li {
|
||||||
|
position: relative
|
||||||
|
}
|
||||||
|
|
||||||
|
.fa-li {
|
||||||
|
left: -2em;
|
||||||
|
position: absolute;
|
||||||
|
text-align: center;
|
||||||
|
width: 2em;
|
||||||
|
line-height: inherit
|
||||||
|
}
|
||||||
|
|
||||||
|
.fa-border {
|
||||||
|
border: .08em solid #eee;
|
||||||
|
border-radius: .1em;
|
||||||
|
padding: .2em .25em .15em
|
||||||
|
}
|
||||||
|
|
||||||
|
.fa-pull-left {
|
||||||
|
float: left
|
||||||
|
}
|
||||||
|
|
||||||
|
.fa-pull-right {
|
||||||
|
float: right
|
||||||
|
}
|
||||||
|
|
||||||
|
.fa.fa-pull-left,
|
||||||
|
.fab.fa-pull-left,
|
||||||
|
.fal.fa-pull-left,
|
||||||
|
.far.fa-pull-left,
|
||||||
|
.fas.fa-pull-left {
|
||||||
|
margin-right: .3em
|
||||||
|
}
|
||||||
|
|
||||||
|
.fa.fa-pull-right,
|
||||||
|
.fab.fa-pull-right,
|
||||||
|
.fal.fa-pull-right,
|
||||||
|
.far.fa-pull-right,
|
||||||
|
.fas.fa-pull-right {
|
||||||
|
margin-left: .3em
|
||||||
|
}
|
||||||
|
|
||||||
|
.fa-spin {
|
||||||
|
animation: a 2s infinite linear
|
||||||
|
}
|
||||||
|
|
||||||
|
.fa-pulse {
|
||||||
|
animation: a 1s infinite steps(8)
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes a {
|
||||||
|
0% {
|
||||||
|
transform: rotate(0deg)
|
||||||
|
}
|
||||||
|
to {
|
||||||
|
transform: rotate(1turn)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.fa-rotate-90 {
|
||||||
|
-ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=1)";
|
||||||
|
transform: rotate(90deg)
|
||||||
|
}
|
||||||
|
|
||||||
|
.fa-rotate-180 {
|
||||||
|
-ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=2)";
|
||||||
|
transform: rotate(180deg)
|
||||||
|
}
|
||||||
|
|
||||||
|
.fa-rotate-270 {
|
||||||
|
-ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=3)";
|
||||||
|
transform: rotate(270deg)
|
||||||
|
}
|
||||||
|
|
||||||
|
.fa-flip-horizontal {
|
||||||
|
-ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=0, mirror=1)";
|
||||||
|
transform: scaleX(-1)
|
||||||
|
}
|
||||||
|
|
||||||
|
.fa-flip-vertical {
|
||||||
|
transform: scaleY(-1)
|
||||||
|
}
|
||||||
|
|
||||||
|
.fa-flip-horizontal.fa-flip-vertical,
|
||||||
|
.fa-flip-vertical {
|
||||||
|
-ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=2, mirror=1)"
|
||||||
|
}
|
||||||
|
|
||||||
|
.fa-flip-horizontal.fa-flip-vertical {
|
||||||
|
transform: scale(-1)
|
||||||
|
}
|
||||||
|
|
||||||
|
:root .fa-flip-horizontal,
|
||||||
|
:root .fa-flip-vertical,
|
||||||
|
:root .fa-rotate-90,
|
||||||
|
:root .fa-rotate-180,
|
||||||
|
:root .fa-rotate-270 {
|
||||||
|
-webkit-filter: none;
|
||||||
|
filter: none
|
||||||
|
}
|
||||||
|
|
||||||
|
.fa-stack {
|
||||||
|
display: inline-block;
|
||||||
|
height: 2em;
|
||||||
|
line-height: 2em;
|
||||||
|
position: relative;
|
||||||
|
vertical-align: middle;
|
||||||
|
width: 2em
|
||||||
|
}
|
||||||
|
|
||||||
|
.fa-stack-1x,
|
||||||
|
.fa-stack-2x {
|
||||||
|
left: 0;
|
||||||
|
position: absolute;
|
||||||
|
text-align: center;
|
||||||
|
width: 100%
|
||||||
|
}
|
||||||
|
|
||||||
|
.fa-stack-1x {
|
||||||
|
line-height: inherit
|
||||||
|
}
|
||||||
|
|
||||||
|
.fa-stack-2x {
|
||||||
|
font-size: 2em
|
||||||
|
}
|
||||||
|
|
||||||
|
.fa-inverse {
|
||||||
|
color: #fff
|
||||||
|
}
|
||||||
|
|
||||||
|
.fa-github:before {
|
||||||
|
content: "\f09b"
|
||||||
|
}
|
||||||
|
|
||||||
|
.fa-soundcloud:before {
|
||||||
|
content: "\f1be"
|
||||||
|
}
|
||||||
|
|
||||||
|
.fa-steam:before {
|
||||||
|
content: "\f1b6"
|
||||||
|
}
|
||||||
|
|
||||||
|
.sr-only {
|
||||||
|
border: 0;
|
||||||
|
clip: rect(0, 0, 0, 0);
|
||||||
|
height: 1px;
|
||||||
|
margin: -1px;
|
||||||
|
overflow: hidden;
|
||||||
|
padding: 0;
|
||||||
|
position: absolute;
|
||||||
|
width: 1px
|
||||||
|
}
|
||||||
|
|
||||||
|
.sr-only-focusable:active,
|
||||||
|
.sr-only-focusable:focus {
|
||||||
|
clip: auto;
|
||||||
|
height: auto;
|
||||||
|
margin: 0;
|
||||||
|
overflow: visible;
|
||||||
|
position: static;
|
||||||
|
width: auto
|
||||||
|
}
|
||||||
|
|
||||||
|
@font-face {
|
||||||
|
font-family: Font Awesome\ 5 Brands;
|
||||||
|
font-style: normal;
|
||||||
|
font-weight: 400;
|
||||||
|
src: url(https://use.fontawesome.com/releases/v5.0.13/webfonts/fa-brands-400.eot);
|
||||||
|
src: url(https://use.fontawesome.com/releases/v5.0.13/webfonts/fa-brands-400.eot?#iefix) format("embedded-opentype"), url(https://use.fontawesome.com/releases/v5.0.13/webfonts/fa-brands-400.woff2) format("woff2"), url(https://use.fontawesome.com/releases/v5.0.13/webfonts/fa-brands-400.woff) format("woff"), url(https://use.fontawesome.com/releases/v5.0.13/webfonts/fa-brands-400.ttf) format("truetype"), url(https://use.fontawesome.com/releases/v5.0.13/webfonts/fa-brands-400.svg#fontawesome) format("svg")
|
||||||
|
}
|
||||||
|
|
||||||
|
.fab {
|
||||||
|
font-family: Font Awesome\ 5 Brands
|
||||||
|
}
|
|
@ -0,0 +1,144 @@
|
||||||
|
/*Fonts*/
|
||||||
|
|
||||||
|
/* cyrillic */
|
||||||
|
|
||||||
|
@font-face {
|
||||||
|
font-family: 'Oswald';
|
||||||
|
font-style: normal;
|
||||||
|
font-weight: 400;
|
||||||
|
font-display: swap;
|
||||||
|
src: local('Oswald Regular'), local('Oswald-Regular'), url(https://fonts.gstatic.com/s/oswald/v16/TK3iWkUHHAIjg752HT8Gl-1PK62t.woff2) format('woff2');
|
||||||
|
unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* vietnamese */
|
||||||
|
|
||||||
|
@font-face {
|
||||||
|
font-family: 'Oswald';
|
||||||
|
font-style: normal;
|
||||||
|
font-weight: 400;
|
||||||
|
font-display: swap;
|
||||||
|
src: local('Oswald Regular'), local('Oswald-Regular'), url(https://fonts.gstatic.com/s/oswald/v16/TK3iWkUHHAIjg752Fj8Gl-1PK62t.woff2) format('woff2');
|
||||||
|
unicode-range: U+0102-0103, U+0110-0111, U+1EA0-1EF9, U+20AB;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* latin-ext */
|
||||||
|
|
||||||
|
@font-face {
|
||||||
|
font-family: 'Oswald';
|
||||||
|
font-style: normal;
|
||||||
|
font-weight: 400;
|
||||||
|
font-display: swap;
|
||||||
|
src: local('Oswald Regular'), local('Oswald-Regular'), url(https://fonts.gstatic.com/s/oswald/v16/TK3iWkUHHAIjg752Fz8Gl-1PK62t.woff2) format('woff2');
|
||||||
|
unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* latin */
|
||||||
|
|
||||||
|
@font-face {
|
||||||
|
font-family: 'Oswald';
|
||||||
|
font-style: normal;
|
||||||
|
font-weight: 400;
|
||||||
|
font-display: swap;
|
||||||
|
src: local('Oswald Regular'), local('Oswald-Regular'), url(https://fonts.gstatic.com/s/oswald/v16/TK3iWkUHHAIjg752GT8Gl-1PKw.woff2) format('woff2');
|
||||||
|
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* latin-ext */
|
||||||
|
|
||||||
|
@font-face {
|
||||||
|
font-family: 'Dosis';
|
||||||
|
font-style: normal;
|
||||||
|
font-weight: 400;
|
||||||
|
font-display: swap;
|
||||||
|
src: local('Dosis Regular'), local('Dosis-Regular'), url(https://fonts.gstatic.com/s/dosis/v7/HhyaU5sn9vOmLzlmC_WoEoZKdbA.woff2) format('woff2');
|
||||||
|
unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* latin */
|
||||||
|
|
||||||
|
@font-face {
|
||||||
|
font-family: 'Dosis';
|
||||||
|
font-style: normal;
|
||||||
|
font-weight: 400;
|
||||||
|
font-display: swap;
|
||||||
|
src: local('Dosis Regular'), local('Dosis-Regular'), url(https://fonts.gstatic.com/s/dosis/v7/HhyaU5sn9vOmLzloC_WoEoZK.woff2) format('woff2');
|
||||||
|
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* cyrillic-ext */
|
||||||
|
|
||||||
|
@font-face {
|
||||||
|
font-family: 'Open Sans Condensed';
|
||||||
|
font-style: normal;
|
||||||
|
font-weight: 300;
|
||||||
|
font-display: swap;
|
||||||
|
src: local('Open Sans Condensed Light'), local('OpenSansCondensed-Light'), url(https://fonts.gstatic.com/s/opensanscondensed/v12/z7NFdQDnbTkabZAIOl9il_O6KJj73e7Ff1GhDujMR7eS2AopSg.woff2) format('woff2');
|
||||||
|
unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* cyrillic */
|
||||||
|
|
||||||
|
@font-face {
|
||||||
|
font-family: 'Open Sans Condensed';
|
||||||
|
font-style: normal;
|
||||||
|
font-weight: 300;
|
||||||
|
font-display: swap;
|
||||||
|
src: local('Open Sans Condensed Light'), local('OpenSansCondensed-Light'), url(https://fonts.gstatic.com/s/opensanscondensed/v12/z7NFdQDnbTkabZAIOl9il_O6KJj73e7Ff1GhDuHMR7eS2AopSg.woff2) format('woff2');
|
||||||
|
unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* greek-ext */
|
||||||
|
|
||||||
|
@font-face {
|
||||||
|
font-family: 'Open Sans Condensed';
|
||||||
|
font-style: normal;
|
||||||
|
font-weight: 300;
|
||||||
|
font-display: swap;
|
||||||
|
src: local('Open Sans Condensed Light'), local('OpenSansCondensed-Light'), url(https://fonts.gstatic.com/s/opensanscondensed/v12/z7NFdQDnbTkabZAIOl9il_O6KJj73e7Ff1GhDunMR7eS2AopSg.woff2) format('woff2');
|
||||||
|
unicode-range: U+1F00-1FFF;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* greek */
|
||||||
|
|
||||||
|
@font-face {
|
||||||
|
font-family: 'Open Sans Condensed';
|
||||||
|
font-style: normal;
|
||||||
|
font-weight: 300;
|
||||||
|
font-display: swap;
|
||||||
|
src: local('Open Sans Condensed Light'), local('OpenSansCondensed-Light'), url(https://fonts.gstatic.com/s/opensanscondensed/v12/z7NFdQDnbTkabZAIOl9il_O6KJj73e7Ff1GhDubMR7eS2AopSg.woff2) format('woff2');
|
||||||
|
unicode-range: U+0370-03FF;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* vietnamese */
|
||||||
|
|
||||||
|
@font-face {
|
||||||
|
font-family: 'Open Sans Condensed';
|
||||||
|
font-style: normal;
|
||||||
|
font-weight: 300;
|
||||||
|
font-display: swap;
|
||||||
|
src: local('Open Sans Condensed Light'), local('OpenSansCondensed-Light'), url(https://fonts.gstatic.com/s/opensanscondensed/v12/z7NFdQDnbTkabZAIOl9il_O6KJj73e7Ff1GhDurMR7eS2AopSg.woff2) format('woff2');
|
||||||
|
unicode-range: U+0102-0103, U+0110-0111, U+1EA0-1EF9, U+20AB;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* latin-ext */
|
||||||
|
|
||||||
|
@font-face {
|
||||||
|
font-family: 'Open Sans Condensed';
|
||||||
|
font-style: normal;
|
||||||
|
font-weight: 300;
|
||||||
|
font-display: swap;
|
||||||
|
src: local('Open Sans Condensed Light'), local('OpenSansCondensed-Light'), url(https://fonts.gstatic.com/s/opensanscondensed/v12/z7NFdQDnbTkabZAIOl9il_O6KJj73e7Ff1GhDuvMR7eS2AopSg.woff2) format('woff2');
|
||||||
|
unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* latin */
|
||||||
|
|
||||||
|
@font-face {
|
||||||
|
font-family: 'Open Sans Condensed';
|
||||||
|
font-style: normal;
|
||||||
|
font-weight: 300;
|
||||||
|
font-display: swap;
|
||||||
|
src: local('Open Sans Condensed Light'), local('OpenSansCondensed-Light'), url(https://fonts.gstatic.com/s/opensanscondensed/v12/z7NFdQDnbTkabZAIOl9il_O6KJj73e7Ff1GhDuXMR7eS2Ao.woff2) format('woff2');
|
||||||
|
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
|
||||||
|
}
|
|
@ -0,0 +1,446 @@
|
||||||
|
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.webp);
|
||||||
|
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.61, 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;
|
||||||
|
height: calc(var(--desktop-height) - 10px);
|
||||||
|
margin: 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 {
|
||||||
|
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;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
}
|
||||||
|
.banner h1 {
|
||||||
|
filter: drop-shadow(-5px 6px 3px rgba(0, 0, 0, 0.7));
|
||||||
|
}
|
||||||
|
.banner img {
|
||||||
|
width: calc(32px + 14vw);
|
||||||
|
filter: drop-shadow(-5px 6px 3px rgba(0, 0, 0, 0.7));
|
||||||
|
transition: var(--long-transition);
|
||||||
|
margin-right: 10px;
|
||||||
|
}
|
||||||
|
.banner-title {
|
||||||
|
align-self: flex-end;
|
||||||
|
/*Flexbox content*/
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
display: flex;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
}
|
||||||
|
.scrolldown {
|
||||||
|
border-top: 2px solid #fff;
|
||||||
|
background-color: #ddd2;
|
||||||
|
width: 100%;
|
||||||
|
height: 40px;
|
||||||
|
align-self: flex-end;
|
||||||
|
font-size: 25px;
|
||||||
|
line-height: 40px;
|
||||||
|
text-align: center;
|
||||||
|
color: #fff;
|
||||||
|
text-decoration: none;
|
||||||
|
animation: pulse 1.5s infinite;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 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;
|
||||||
|
}
|
||||||
|
.banner-title {
|
||||||
|
align-self: center;
|
||||||
|
}
|
||||||
|
.scrolldown {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
/*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;
|
||||||
|
}
|
||||||
|
|
||||||
|
/*Animations*/
|
||||||
|
|
||||||
|
@keyframes pulse {
|
||||||
|
0% {
|
||||||
|
box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.4);
|
||||||
|
}
|
||||||
|
70% {
|
||||||
|
box-shadow: 0 0 0 15px rgba(255, 255, 255, 0);
|
||||||
|
}
|
||||||
|
100% {
|
||||||
|
box-shadow: 0 0 0 0 rgba(255, 255, 255, 0);
|
||||||
|
}
|
||||||
|
}
|
92
index.html
|
@ -1,58 +1,51 @@
|
||||||
<html>
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
<head>
|
<head>
|
||||||
<!--Styles and such-->
|
<!--Styles and meta-->
|
||||||
<link rel="stylesheet" href="res/web.css">
|
<title>RedXen Community</title>
|
||||||
<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">
|
<link rel="shortcut icon" href="/favicon.ico">
|
||||||
<!--Meta and tracking-->
|
|
||||||
<meta name="author" content="caskd">
|
<meta name="author" content="caskd">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
<meta charset="UTF-8">
|
<meta charset="UTF-8">
|
||||||
<meta name="description" content="The homepage of the RedXen Community">
|
<meta name="description" content="The homepage of the RedXen Community">
|
||||||
<title>RedXen Community</title>
|
|
||||||
<!-- Global site tag (gtag.js) - Google Analytics -->
|
|
||||||
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-120536610-1"></script>
|
|
||||||
<script>
|
|
||||||
window.dataLayer = window.dataLayer || [];
|
|
||||||
function gtag(){dataLayer.push(arguments);}
|
|
||||||
gtag('js', new Date());
|
|
||||||
gtag('config', 'UA-120536610-1');
|
|
||||||
</script>
|
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<div class="interface">
|
<div class="interface">
|
||||||
<div class="header">
|
|
||||||
<span id="logo-header">
|
|
||||||
<img src="res/logo.png" alt="logo">
|
|
||||||
</span>
|
|
||||||
<span id="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://yagpdb.redxen.eu">PMBot</a>
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
<div class="content">
|
<div class="content">
|
||||||
<div id="banner">
|
<div class="banner">
|
||||||
<img id="logobig" src="res/logo.png" alt="logo">
|
<div class="banner-title">
|
||||||
<h1>RedXen Gaming</h1>
|
<img src="res/logo.svg" alt="banner-logo">
|
||||||
|
<h1>RedXen Gaming</h1>
|
||||||
|
</div>
|
||||||
|
<a class="scrolldown" href="#about">About us</a>
|
||||||
</div>
|
</div>
|
||||||
<div id="text">
|
<div class="header" id="pgHeader">
|
||||||
|
<div class="logo-header">
|
||||||
|
<div><a href="https://redxen.eu"><img src="res/logo.svg" alt="header-logo"></a></div>
|
||||||
|
<div class="header-title"><a href="https://redxen.eu">RedXen Gaming</a></div>
|
||||||
|
</div>
|
||||||
|
<div 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>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div id="about" class="text">
|
||||||
<h2>About us</h2>
|
<h2>About us</h2>
|
||||||
<div id="forum" class="category">
|
<div id="forum" class="category">
|
||||||
<div class="left">
|
<div class="left">
|
||||||
<img alt="discourse" src="res/discourse.png">
|
<img alt="discourse" src="res/discourse.svg">
|
||||||
</div>
|
</div>
|
||||||
<div class="right">
|
<div class="right">
|
||||||
<h3>RedXen Forum</h3>
|
<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>
|
<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>
|
</div>
|
||||||
<div id="discord" class="category">
|
<div id="discord" class="swap category">
|
||||||
<div class="left">
|
<div class="left">
|
||||||
<img alt="discord" src="res/discord.png">
|
<img alt="discord" src="res/discord.svg">
|
||||||
</div>
|
</div>
|
||||||
<div class="right">
|
<div class="right">
|
||||||
<h3>Discord Server</h3>
|
<h3>Discord Server</h3>
|
||||||
|
@ -61,17 +54,29 @@
|
||||||
</div>
|
</div>
|
||||||
<div id="yagpdb" class="category">
|
<div id="yagpdb" class="category">
|
||||||
<div class="left">
|
<div class="left">
|
||||||
<img alt="yagpdb" src="res/yagpdb.png">
|
<img alt="yagpdb" src="res/yagpdb.webp">
|
||||||
</div>
|
</div>
|
||||||
<div class="right">
|
<div class="right">
|
||||||
<h3>PMBot</h3>
|
<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>
|
<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>
|
</div>
|
||||||
|
<div id="sb" class="swap category">
|
||||||
|
<div class="left">
|
||||||
|
<img alt="sourcebans" src="res/sb.webp">
|
||||||
|
</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>
|
<h2>News</h2>
|
||||||
<div id="news" class="text-field">
|
<div id="news" class="text-field">
|
||||||
<div class="row">
|
<div class="row">
|
||||||
<h3>June 2018</h3>
|
<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>
|
Created this webpage and added meta tags for SEO's<br>
|
||||||
Now hosting server on DigitalOcean with improved bandwidth
|
Now hosting server on DigitalOcean with improved bandwidth
|
||||||
</div>
|
</div>
|
||||||
|
@ -84,18 +89,23 @@
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div id=footer>
|
<div class="footer">
|
||||||
<div class="row">
|
<div class="row">
|
||||||
Made by caskd!<br>
|
Made by caskd!<br>
|
||||||
<a href="https://steamcommunity.com/id/caskd"><i class="fab fa-steam"></i></a>
|
<a aria-label="Steam" 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 aria-label="GitHub" 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>
|
<a aria-label="SoundCloud" href="https://soundcloud.com/caskd"><i class="fab fa-soundcloud"></i></a>
|
||||||
</div>
|
</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.
|
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>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
<link rel="stylesheet" href="css/web.css">
|
||||||
|
<link rel="stylesheet" href="css/fonts.css">
|
||||||
|
<link rel="stylesheet" href="css/fontawesome.css">
|
||||||
|
<script rel="preconnect" src="js/jquery-3.3.1.min.js"></script>
|
||||||
|
<script rel="preconnect" src="js/main.js"></script>
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
|
@ -0,0 +1,11 @@
|
||||||
|
$(document).ready(function() {
|
||||||
|
$(document).on('scroll', {passive: true}, 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
Before Width: | Height: | Size: 760 KiB |
After Width: | Height: | Size: 127 KiB |
BIN
res/discord.png
Before Width: | Height: | Size: 114 KiB |
|
@ -0,0 +1 @@
|
||||||
|
<svg id="Layer_1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 245 240"><style>.st0{fill:#7289DA;}</style><path class="st0" d="M104.4 103.9c-5.7 0-10.2 5-10.2 11.1s4.6 11.1 10.2 11.1c5.7 0 10.2-5 10.2-11.1.1-6.1-4.5-11.1-10.2-11.1zM140.9 103.9c-5.7 0-10.2 5-10.2 11.1s4.6 11.1 10.2 11.1c5.7 0 10.2-5 10.2-11.1s-4.5-11.1-10.2-11.1z"/><path class="st0" d="M189.5 20h-134C44.2 20 35 29.2 35 40.6v135.2c0 11.4 9.2 20.6 20.5 20.6h113.4l-5.3-18.5 12.8 11.9 12.1 11.2 21.5 19V40.6c0-11.4-9.2-20.6-20.5-20.6zm-38.6 130.6s-3.6-4.3-6.6-8.1c13.1-3.7 18.1-11.9 18.1-11.9-4.1 2.7-8 4.6-11.5 5.9-5 2.1-9.8 3.5-14.5 4.3-9.6 1.8-18.4 1.3-25.9-.1-5.7-1.1-10.6-2.7-14.7-4.3-2.3-.9-4.8-2-7.3-3.4-.3-.2-.6-.3-.9-.5-.2-.1-.3-.2-.4-.3-1.8-1-2.8-1.7-2.8-1.7s4.8 8 17.5 11.8c-3 3.8-6.7 8.3-6.7 8.3-22.1-.7-30.5-15.2-30.5-15.2 0-32.2 14.4-58.3 14.4-58.3 14.4-10.8 28.1-10.5 28.1-10.5l1 1.2c-18 5.2-26.3 13.1-26.3 13.1s2.2-1.2 5.9-2.9c10.7-4.7 19.2-6 22.7-6.3.6-.1 1.1-.2 1.7-.2 6.1-.8 13-1 20.2-.2 9.5 1.1 19.7 3.9 30.1 9.6 0 0-7.9-7.5-24.9-12.7l1.4-1.6s13.7-.3 28.1 10.5c0 0 14.4 26.1 14.4 58.3 0 0-8.5 14.5-30.6 15.2z"/></svg>
|
After Width: | Height: | Size: 1.1 KiB |
Before Width: | Height: | Size: 13 KiB |
|
@ -0,0 +1 @@
|
||||||
|
<svg aria-hidden="true" data-prefix="fab" data-icon="discourse" class="svg-inline--fa fa-discourse fa-w-14" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path fill="#d22" d="M225.9 32C103.3 32 0 130.5 0 252.1 0 256 .1 480 .1 480l225.8-.2c122.7 0 222.1-102.3 222.1-223.9C448 134.3 348.6 32 225.9 32zM224 384c-19.4 0-37.9-4.3-54.4-12.1L88.5 392l22.9-75c-9.8-18.1-15.4-38.9-15.4-61 0-70.7 57.3-128 128-128s128 57.3 128 128-57.3 128-128 128z"></path></svg>
|
After Width: | Height: | Size: 475 B |
BIN
res/logo.png
Before Width: | Height: | Size: 9.0 KiB |
|
@ -0,0 +1,16 @@
|
||||||
|
<?xml version="1.0" encoding="utf-8"?>
|
||||||
|
<!-- Generator: Adobe Illustrator 21.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
|
||||||
|
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
|
||||||
|
viewBox="0 0 183.2 184.2" style="enable-background:new 0 0 183.2 184.2;" xml:space="preserve">
|
||||||
|
<style type="text/css">
|
||||||
|
.st0{fill:#CC071A;}
|
||||||
|
</style>
|
||||||
|
<title>logo</title>
|
||||||
|
<path class="st0" d="M7.3,112.4C-5.9,68.2,24.1,19.3,71.2,7.9c61.8-14.8,118.7,39.6,105.9,101.4c-0.4,1.6-1,3.1-1.6,4.6
|
||||||
|
c-0.7,0.4-1.6,0.8-2.3,0.3c-9-6.6-20.1-8.2-29.8-13.1c-3.7-1.9-7-2.7-10.9-1c-5.5,2.4-10.7,1.2-15.6-2c-6-3.8-11.5-8.3-16.3-13.6
|
||||||
|
c-5.5-6.4-9-5.6-15.6-0.2c-9.6,8-20,14.9-31.1,20.9c-3,1.6-6.4,1.9-9.6,0.9c-12-4.1-21.9,1.6-32,6.3C10.6,113.3,8.9,114.5,7.3,112.4
|
||||||
|
z"/>
|
||||||
|
<path d="M7.3,112.4c6.9-7.7,18.7-4.2,25.7-11.4c1.5-1.6,3-0.6,4.4,0c11.5,4.7,20.3,3.1,28.5-5.9c2.4-2.9,5.7-5,9.4-6
|
||||||
|
c3.7-1.1,6.9-3.4,9-6.6c5.1-6.8,13-6.6,17.9,0.3c5.3,7.4,13.2,11.6,20.5,16.5c3.1,2.1,6.9,0.4,10.1-1.4c3.7-2.1,6.9-2.2,10.4,0.9
|
||||||
|
c2.9,2.5,6.5,4,10.3,4.2c8.8,0.5,15,6.6,22,11.1c-7.7,39.7-52.4,70.1-94.5,64C44,172.7,13.9,145.9,7.3,112.4z"/>
|
||||||
|
</svg>
|
After Width: | Height: | Size: 1.1 KiB |
After Width: | Height: | Size: 7.6 KiB |
274
res/web.css
|
@ -1,274 +0,0 @@
|
||||||
html {
|
|
||||||
margin: 0;
|
|
||||||
top: 0;
|
|
||||||
left: 0;
|
|
||||||
font-family: 'Oswald', sans-serif;
|
|
||||||
background: rgb(10, 10, 10);
|
|
||||||
min-height: 300px;
|
|
||||||
}
|
|
||||||
.header {
|
|
||||||
height: 50px;
|
|
||||||
width: 100%;
|
|
||||||
top: 0;
|
|
||||||
left: 0;
|
|
||||||
position: fixed;
|
|
||||||
background-color: rgba(10, 10, 10, 0.4);
|
|
||||||
z-index: 20;
|
|
||||||
display: flex;
|
|
||||||
overflow: hidden;
|
|
||||||
}
|
|
||||||
#logo-header img {
|
|
||||||
display: flex;
|
|
||||||
height: 40px;
|
|
||||||
padding: 5px;
|
|
||||||
}
|
|
||||||
#links-header {
|
|
||||||
display: flex;
|
|
||||||
height: 50px;
|
|
||||||
line-height: 50px;
|
|
||||||
flex: 1 1 0;
|
|
||||||
justify-content: flex-end;
|
|
||||||
}
|
|
||||||
#links-header a {
|
|
||||||
line-height: 50px;
|
|
||||||
color: #eee;
|
|
||||||
text-align: center;
|
|
||||||
padding-right: 10px;
|
|
||||||
padding-left: 10px;
|
|
||||||
text-decoration: none;
|
|
||||||
font-size: 20px;
|
|
||||||
font-family: 'Dosis', sans-serif;
|
|
||||||
}
|
|
||||||
.header a:hover {
|
|
||||||
background-color: rgba(255 ,255 ,255, 0.5);
|
|
||||||
color: #a11;
|
|
||||||
}
|
|
||||||
.content {
|
|
||||||
width: 100%;
|
|
||||||
min-height: 100%;
|
|
||||||
top: 0;
|
|
||||||
left: 0;
|
|
||||||
display: flex;
|
|
||||||
position: absolute;
|
|
||||||
flex-wrap: wrap;
|
|
||||||
flex-direction: column;
|
|
||||||
}
|
|
||||||
#banner {
|
|
||||||
/*Sizing*/
|
|
||||||
height: 400px;
|
|
||||||
width: 100%;
|
|
||||||
color: #fff;
|
|
||||||
overflow: hidden;
|
|
||||||
font-size: 40px;
|
|
||||||
transition: ease-in-out 0.2s;
|
|
||||||
|
|
||||||
/*Flexbox content*/
|
|
||||||
justify-content: center;
|
|
||||||
align-items: center;
|
|
||||||
display: flex;
|
|
||||||
|
|
||||||
/*Background settings*/
|
|
||||||
background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url(bg.jpg);
|
|
||||||
background-attachment: scroll;
|
|
||||||
background-size: cover;
|
|
||||||
background-repeat: no-repeat;
|
|
||||||
}
|
|
||||||
#banner img {
|
|
||||||
width: 220px;
|
|
||||||
filter: drop-shadow(-5px 6px 3px rgba(0,0,0,.7));
|
|
||||||
transition: ease-in-out 0.2s;
|
|
||||||
}
|
|
||||||
#text {
|
|
||||||
display: flex;
|
|
||||||
flex-wrap: wrap;
|
|
||||||
width: 100%;
|
|
||||||
max-width: 1700px;
|
|
||||||
min-height: 100px;
|
|
||||||
background-color: rgba(70, 70, 70, 0.4);
|
|
||||||
color: #fff;
|
|
||||||
align-self: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
#text h2 {
|
|
||||||
text-align: center;
|
|
||||||
width: 100%;
|
|
||||||
font-size: 60px;
|
|
||||||
line-height: 100px;
|
|
||||||
background-color: rgba(10, 10, 10, 0.4);
|
|
||||||
transition: ease-in-out 0.2s;
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
/*Category of descriptions*/
|
|
||||||
.category {
|
|
||||||
padding: 70px 0 0 0;
|
|
||||||
display: flex;
|
|
||||||
flex-wrap: nowrap;
|
|
||||||
width: 100%;
|
|
||||||
overflow: hidden;
|
|
||||||
transition: ease-in 200ms;
|
|
||||||
filter: saturate(0%);
|
|
||||||
color: #fff;
|
|
||||||
box-shadow: 0 4px 8px -2px #000;
|
|
||||||
}
|
|
||||||
.category:hover {
|
|
||||||
color: #c22;
|
|
||||||
box-shadow: 0 10px 8px -2px #000;
|
|
||||||
}
|
|
||||||
.category:hover { filter: saturate(100%); }
|
|
||||||
|
|
||||||
.category img {
|
|
||||||
width: 40%;
|
|
||||||
max-width: 900px;
|
|
||||||
padding: 5% 5% 5% 5%;
|
|
||||||
transition: ease-in-out 0.2s;
|
|
||||||
}
|
|
||||||
h2 { color: #F33;}
|
|
||||||
|
|
||||||
#news {margin-bottom: 20px;}
|
|
||||||
|
|
||||||
.text-field {
|
|
||||||
width: 100%;
|
|
||||||
justify-content: center;
|
|
||||||
display: flex;
|
|
||||||
padding: 20px;
|
|
||||||
background-color: rgba(10, 10, 10, 0.4);
|
|
||||||
max-width: 1200px;
|
|
||||||
margin: 1 auto;
|
|
||||||
flex-direction: row;
|
|
||||||
flex: 1;
|
|
||||||
font-size: 20px;
|
|
||||||
flex-wrap: wrap;
|
|
||||||
align-items: flex-start;
|
|
||||||
text-align: center;
|
|
||||||
font-family: 'Dosis', sans-serif;
|
|
||||||
}
|
|
||||||
.row {
|
|
||||||
width: 50%;
|
|
||||||
}
|
|
||||||
.text-field h3 {
|
|
||||||
font-size: 25px;
|
|
||||||
margin: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
/*Left Side settings*/
|
|
||||||
.left {
|
|
||||||
background-color: rgba(0, 0, 0, 0.5);
|
|
||||||
width: 30%;
|
|
||||||
display: flex;
|
|
||||||
justify-content: center;
|
|
||||||
align-items: center;
|
|
||||||
min-width: 200px;
|
|
||||||
transition: ease-in-out 0.2s;
|
|
||||||
}
|
|
||||||
|
|
||||||
/*Right side settings*/
|
|
||||||
.right {
|
|
||||||
background-color: rgba(10, 10, 10, 0.4);
|
|
||||||
width: 70%;
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
padding: 50px 50px 50px 30px;
|
|
||||||
justify-content: center;
|
|
||||||
transition: ease-in-out 0.2s;
|
|
||||||
}
|
|
||||||
.right h3 {
|
|
||||||
font-size: 40px;
|
|
||||||
margin: 0;
|
|
||||||
}
|
|
||||||
.right p {
|
|
||||||
font-style: italic;
|
|
||||||
font-family: 'Open Sans Condensed', sans-serif;
|
|
||||||
}
|
|
||||||
|
|
||||||
/*Webpage footer*/
|
|
||||||
#footer {
|
|
||||||
color: #fff;
|
|
||||||
display: flex;
|
|
||||||
max-width: 1700px;
|
|
||||||
width: 80%;
|
|
||||||
font-size: 20px;
|
|
||||||
height: 200px;
|
|
||||||
text-align: center;
|
|
||||||
align-items: center;
|
|
||||||
overflow: hidden;
|
|
||||||
margin: 1 auto;
|
|
||||||
}
|
|
||||||
#footer a {
|
|
||||||
color: #f22;
|
|
||||||
text-decoration: none;
|
|
||||||
padding: 0 10px 0 10px;
|
|
||||||
font-size: 30px;
|
|
||||||
}
|
|
||||||
#footer-r, #footer-r a {
|
|
||||||
font-size: 20px;
|
|
||||||
padding: 0;
|
|
||||||
font-style: italic;
|
|
||||||
}
|
|
||||||
|
|
||||||
/*Adaptive content using media queries*/
|
|
||||||
|
|
||||||
@media screen and (max-width: 730px) {
|
|
||||||
.header {
|
|
||||||
height: 50px;
|
|
||||||
}
|
|
||||||
#banner {
|
|
||||||
font-size: 20px;
|
|
||||||
height: 300px;
|
|
||||||
}
|
|
||||||
#text h2 {
|
|
||||||
font-size: 30px;
|
|
||||||
line-height: 50px;
|
|
||||||
}
|
|
||||||
#banner img {
|
|
||||||
width: 110px;
|
|
||||||
}
|
|
||||||
.category {
|
|
||||||
flex-wrap: wrap;
|
|
||||||
}
|
|
||||||
.category img {
|
|
||||||
width: 30%;
|
|
||||||
}
|
|
||||||
.left, .right {
|
|
||||||
width: 100%;
|
|
||||||
}
|
|
||||||
.right {
|
|
||||||
padding: 10px 25px 10px 25px;
|
|
||||||
}
|
|
||||||
.right h3 {
|
|
||||||
font-size: 30px;
|
|
||||||
}
|
|
||||||
.right p {
|
|
||||||
font-size: 15px;
|
|
||||||
margin: 0;
|
|
||||||
}
|
|
||||||
.row {
|
|
||||||
width: 100%;
|
|
||||||
margin: 10px 0;
|
|
||||||
}
|
|
||||||
.text-field {
|
|
||||||
font-size: 10px;
|
|
||||||
padding: 10px;
|
|
||||||
justify-content: space-between;
|
|
||||||
}
|
|
||||||
.text-field h3 {
|
|
||||||
font-size: 20px;
|
|
||||||
}
|
|
||||||
#footer {
|
|
||||||
width: 90%;
|
|
||||||
font-size: 15px;
|
|
||||||
height: auto;
|
|
||||||
flex-flow: wrap;
|
|
||||||
}
|
|
||||||
#footer a {
|
|
||||||
font-size: 25px;
|
|
||||||
padding: 0 7px 0 7px;
|
|
||||||
}
|
|
||||||
#footer-r, #footer-r a {
|
|
||||||
font-size: 15px;
|
|
||||||
padding: 0;
|
|
||||||
}
|
|
||||||
#footer-r {
|
|
||||||
padding: 0 0 10px 0;
|
|
||||||
}
|
|
||||||
}
|
|
BIN
res/yagpdb.png
Before Width: | Height: | Size: 50 KiB |
After Width: | Height: | Size: 23 KiB |