Optimization

This commit is contained in:
caskd 2018-08-01 12:27:55 +02:00
parent 5cc50968c4
commit 357f45101e
17 changed files with 787 additions and 313 deletions

258
css/fontawesome.css vendored Normal file
View File

@ -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
}

144
css/fonts.css Normal file
View File

@ -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;
}

View File

@ -1,394 +1,446 @@
html {
margin: 0;
top: 0;
left: 0;
font-family: 'Oswald', sans-serif;
scroll-behavior: smooth;
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;
/*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);
/*Global Variables*/
--desktop-height: calc(20px + 2vw);
--mobile-height: calc(10px + 2vw);
--header-transparency: rgba(0, 0, 0, 0.7);
--header-transparency: rgba(0, 0, 0, 0.7);
--image-size: 30%;
--red: #d22;
--dark-gray: #111;
--gray: #151515;
--transparent-gray: #222E;
--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;
--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);
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;
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;
display: none;
opacity: 0;
margin: auto 0;
}
.logo-header a {
text-decoration: none;
color: #fff;
text-decoration: none;
color: #fff;
}
.logo-header img {
display: flex;
margin-left: 5px;
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);
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);
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);
.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);
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);
font-size: calc(var(--desktop-height) / 1.75);
height: calc(var(--desktop-height) * 1.5);
}
.links-header a:hover {
color: var(--red);
color: var(--red);
}
/*Sticky header*/
.sticky > .logo-header {
opacity: 1;
display: flex;
opacity: 1;
display: flex;
}
.sticky > .links-header {
display: flex;
flex: 1 1 0;
justify-content: flex-end;
display: flex;
flex: 1 1 0;
justify-content: flex-end;
}
.sticky {
position: fixed;
background-color: var(--header-transparency);
top: 0;
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;
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;
/*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,.7));
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,.7));
transition: var(--long-transition);
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);
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-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);
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%;
width: 50%;
}
.text-field h3 {
font-size: calc(16px + 1vw);
margin: 0;
.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;
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);
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);
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;
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);
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;
font-size: 3vw;
margin: 0;
}
.right p {
font-size: calc(16px + 0.75vw);
font-family: 'Open Sans Condensed', sans-serif;
font-size: calc(16px + 0.75vw);
font-family: "Open Sans Condensed", sans-serif;
}
.swap .right {
order: 0;
text-align: 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);
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;
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;
.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;
}
/*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 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;
}
/*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;
}
/*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);
}
/*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;
}
/*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;
}
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);
}
}

View File

@ -1,45 +1,42 @@
<!DOCTYPE html>
<html lang="en">
<head>
<!--Styles and meta-->
<title>RedXen Community</title>
<link rel="stylesheet" href="css/web.css">
<link rel="shortcut icon" href="/favicon.ico">
<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 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>
</head>
<body>
<div class="interface">
<div class="content">
<div class="banner">
<img src="res/logo.png" alt="logo">
<h1>RedXen Gaming</h1>
<div class="banner">
<div class="banner-title">
<img src="res/logo.svg" alt="banner-logo">
<h1>RedXen Gaming</h1>
</div>
<a class="scrolldown" href="#about">About us</a>
</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="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>
</span>
<span class="links-header">
</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>
</span>
</div>
</div>
<div class="text">
<div id="about" class="text">
<h2>About us</h2>
<div id="forum" class="category">
<div class="left">
<img alt="discourse" src="res/discourse.png">
<img alt="discourse" src="res/discourse.svg">
</div>
<div class="right">
<h3>RedXen Forum</h3>
@ -48,7 +45,7 @@
</div>
<div id="discord" class="swap category">
<div class="left">
<img alt="discord" src="res/discord.png">
<img alt="discord" src="res/discord.svg">
</div>
<div class="right">
<h3>Discord Server</h3>
@ -57,7 +54,7 @@
</div>
<div id="yagpdb" class="category">
<div class="left">
<img alt="yagpdb" src="res/yagpdb.png">
<img alt="yagpdb" src="res/yagpdb.webp">
</div>
<div class="right">
<h3>PMBot</h3>
@ -66,7 +63,7 @@
</div>
<div id="sb" class="swap category">
<div class="left">
<img alt="sourcebans" src="res/sb.png">
<img alt="sourcebans" src="res/sb.webp">
</div>
<div class="right">
<h3>SourceBans</h3>
@ -95,9 +92,9 @@
<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>
<a aria-label="Steam" href="https://steamcommunity.com/id/caskd"><i class="fab fa-steam"></i></a>
<a aria-label="GitHub" href="https://github.com/casKd-dev"><i class="fab fa-github"></i></a>
<a aria-label="SoundCloud" 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.
@ -105,5 +102,10 @@
</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>
</html>

View File

@ -1,5 +1,5 @@
$(document).ready(function() {
$(document).scroll(function() {
$(document).on('scroll', {passive: true}, function() {
/* On scroll check if scrolled beyond 100% */
var header = document.getElementById("pgHeader");
if (window.pageYOffset >= $(window).height()) {

Binary file not shown.

Before

Width:  |  Height:  |  Size: 760 KiB

BIN
res/bg.webp Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 127 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 114 KiB

1
res/discord.svg Normal file
View File

@ -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

Binary file not shown.

Before

Width:  |  Height:  |  Size: 13 KiB

1
res/discourse.svg Normal file
View File

@ -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

Binary file not shown.

Before

Width:  |  Height:  |  Size: 9.0 KiB

16
res/logo.svg Normal file
View File

@ -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

Binary file not shown.

Before

Width:  |  Height:  |  Size: 14 KiB

BIN
res/sb.webp Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 7.6 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 48 KiB

BIN
res/yagpdb.webp Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 23 KiB