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

Improved code readability 

Also added few features
This commit is contained in:
Alex D. 2018-07-01 01:46:34 +02:00
parent 461ec1b25b
commit c5afdd52df
4 changed files with 163 additions and 140 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

297
res/web.css → css/web.css
View File

@ -3,31 +3,40 @@ html {
top: 0;
left: 0;
font-family: 'Oswald', sans-serif;
background: rgb(10, 10, 10);
/*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);
--header-transparency: rgba(0, 0, 0, 0.7);
--image-size: 20%;
--red: #d22;
--dark-gray: #111;
--gray: #151515;
--light-gray: #222;
--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;
background-color: rgba(0, 0, 0, 0);
z-index: 20;
display: flex;
position: absolute;
overflow: hidden;
transition: ease-out 0.2s;
}
.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);
transition: var(--quick-transition);
}
.header-title {
width: 100%;
@ -37,10 +46,6 @@ html {
font-size: calc(var(--desktop-height) / 2);
margin: auto 0;
}
.header, #links-header, #logo-header, #logo-header img{
height: var(--desktop-height);
font-size: calc(var(--desktop-height) / 2);
}
#logo-header {
display: none;
opacity: 0;
@ -59,7 +64,7 @@ html {
flex: 1;
margin: auto 0;
justify-content: space-around;
transition: ease-out 0.4s;
transition: var(--quick-transition);
}
#links-header a {
color: #eee;
@ -67,72 +72,27 @@ html {
margin: auto 1vw;
text-decoration: none;
font-family: 'Dosis', sans-serif;
transition: ease-out 0.2s;
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: #a11;
}
.content {
width: 100%;
min-height: 100%;
top: 0;
left: 0;
display: flex;
position: absolute;
flex-wrap: wrap;
flex-direction: column;
}
#banner {
/*Sizing*/
height: 100vh;
width: 100%;
color: #fff;
overflow: hidden;
font-size: 4vw;
transition: ease-out 0.4s;
/*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 h1 {
filter: drop-shadow(-5px 6px 3px rgba(0,0,0,.7));
}
#banner img {
width: 20vw;
filter: drop-shadow(-5px 6px 3px rgba(0,0,0,.7));
transition: ease-out 0.4s;
}
#text {
display: flex;
flex-wrap: wrap;
width: 95%;
min-height: 100px;
background-color: rgba(70, 70, 70, 0.4);
color: #fff;
align-self: center;
transition: ease-in-out 0.3s;
color: var(--red);
}
#text h2 {
text-align: center;
width: 100%;
margin: 3vw 0;
font-size: 5vw;
line-height: 8vw;
background-color: rgba(10, 10, 10, 0.4);
transition: ease-in-out 0.3s;
color: #F33;
}
/*Scrolled beyond header*/
/*Sticky header*/
.sticky > #logo-header {
opacity: 1;
display: flex;
@ -144,40 +104,74 @@ html {
}
.sticky {
position: fixed;
background-color: rgba(10, 10, 10, 0.7);
background-color: var(--header-transparency);
top: 0;
}
/*Category of descriptions*/
.category {
margin: 1.5vw 0;
display: flex;
flex-wrap: nowrap;
/* 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%;
overflow: hidden;
transition: ease-in 0.2s;
filter: saturate(0%);
color: #fff;
box-shadow: 0 4px 8px -2px #000;
overflow: hidden;
font-size: 4vw;
transition: var(--long-transition);
/*Flexbox content*/
justify-content: center;
align-items: center;
display: flex;
}
.category:hover {
color: #c22;
box-shadow: 0 10px 8px -2px #000;
#banner h1 {
filter: drop-shadow(-5px 6px 3px rgba(0,0,0,.7));
}
.category:hover { filter: saturate(100%); }
.category img {
width: 40%;
max-width: 900px;
padding: 5% 5% 5% 5%;
transition: ease-in-out 0.2s;
#banner img {
width: 20vw;
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: 95%;
min-height: 100px;
background-color: var(--light-gray);
color: #fff;
align-self: center;
transition: var(--quick-transition);
}
#text h2 {
text-align: center;
width: 100%;
margin: 3vw 0;
font-size: 5vw;
line-height: 8vw;
background-color: var(--gray);
transition: var(--quick-transition);
color: var(--red);
}
.text-field {
width: 100%;
justify-content: center;
display: flex;
padding: 20px;
background-color: rgba(10, 10, 10, 0.4);
background-color: var(--gray);
margin: 0 auto;
flex-direction: row;
flex: 1;
@ -186,7 +180,7 @@ html {
align-items: flex-start;
text-align: center;
font-family: 'Dosis', sans-serif;
transition: ease-in-out 0.2s;
transition: var(--quick-transition);
}
.row {
width: 45%;
@ -196,30 +190,55 @@ html {
margin: 0;
}
/*Category of descriptions*/
.category {
margin: 1.5vw 0;
display: flex;
flex-wrap: nowrap;
width: 100%;
overflow: hidden;
transition: var(--quick-transition);
filter: saturate(0%);
color: #fff;
box-shadow: 0 4px 8px -2px #000;
}
.category img {
width: 40%;
max-width: 900px;
padding: 5% 5% 5% 5%;
transition: var(--quick-transition);
}
.category:hover {
color: #c22;
box-shadow: 0 10px 8px -2px #000;
filter: saturate(100%);
}
/*Left Side settings*/
.left {
background-color: rgba(0, 0, 0, 0.5);
width: 30%;
background-color: var(--dark-gray);
width: var(--image-size);
display: flex;
justify-content: center;
align-items: center;
min-width: 200px;
transition: ease-in-out 0.2s;
transition: var(--quick-transition);
}
.swap .left {
order: 1;
}
/*Right side settings*/
.right {
background-color: rgba(10, 10, 10, 0.4);
width: 70%;
background-color: var(--gray);
width: calc(100% - var(--image-size));
display: flex;
flex-direction: column;
padding: 2%;
justify-content: center;
text-align: right;
transition: ease-in-out 0.2s;
transition: var(--quick-transition);
}
.right h3 {
font-size: 3vw;
@ -239,21 +258,20 @@ html {
#footer {
color: #fff;
display: flex;
width: 95%;
width: 100%;
height: auto;
font-size: 1vw;
text-align: center;
align-items: center;
overflow: hidden;
margin: 1 auto;
align-content: space-around;
padding: 2%;
padding: 2% 0;
background-color: var(--dark-gray);
}
#footer a {
color: #f22;
color: var(--red);
text-decoration: none;
padding: 0 0.5vw;
font-size: 1.5vw;
}
#footer-r, #footer-r a {
font-size: 1.5vw;
@ -263,11 +281,23 @@ html {
/*Adaptive content using media queries*/
@media screen and (max-width: 720px) {
/*Header settings*/
.header {
position: relative;
margin-top: 5px;
margin-bottom: 5px;
background-color: rgba(10, 10, 10, 0.4);
padding: 5px 0;
background-color: var(--dark-gray);
}
.header-title {
opacity: 0;
display: none;
}
#links-header a {
font-size: 3vw;
}
.header, #links-header, #links-header a, #logo-header img {
height: var(--mobile-height);
line-height: var(--mobile-height);
}
.header:hover {
background-color: var(--header-transparency);
@ -277,24 +307,17 @@ html {
line-height: var(--mobile-height);
font-size: 3vw;
}
.header-title {
opacity: 0;
display: none;
}
.header, #links-header, #links-header a, #logo-header img {
height: var(--mobile-height);
line-height: var(--mobile-height);
}
/*Banner settings*/
#banner {
font-size: 4vw;
height: 300px;
}
#links-header a {
font-size: 3vw;
}
#banner img {
width: 20vw;
}
/*Category settings*/
.category {
flex-wrap: wrap;
margin: 2vw 0;
@ -303,6 +326,8 @@ html {
width: 30%;
margin: 0 auto;
}
/*Sides and swapping*/
.left, .right {
width: 100%;
}
@ -327,6 +352,8 @@ html {
font-size: 3vw;
margin: 0;
}
/*Text field settings*/
.row {
width: 100%;
margin: 10px 0;
@ -339,8 +366,11 @@ html {
.text-field h3 {
font-size: 4vw;
}
/*Footer settings*/
#footer {
width: 90%;
padding: 0 5%;
font-size: 4vw;
height: auto;
flex-flow: wrap;
@ -357,22 +387,15 @@ html {
padding: 0 0 10px 0;
}
}
/*Fit text to whole screen*/
@media screen and (max-width: 1280px) {
#text {
width: 100%;
}
}
/*Scrollbar*/
/*Scrollbar hide*/
::-webkit-scrollbar {
width: 5px;
}
::-webkit-scrollbar-track {
background: rgba(0, 0, 0, 0.5);
}
::-webkit-scrollbar-thumb {
background: rgba(255 ,255 ,255, 0.2);
}
::-webkit-scrollbar-thumb:hover {
background: rgba(255 ,255 ,255, 0.5);
width: 0;
}

6
index.html
View File

@ -2,18 +2,18 @@
<head>
<!--Styles and meta-->
<title>RedXen Community</title>
<link rel="stylesheet" href="res/web.css">
<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="res/jquery-3.3.1.min.js"></script>
<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="res/main.js"></script>
<script src="js/main.js"></script>
</head>
<body>
<div class="interface">

0
res/jquery-3.3.1.min.js → js/jquery-3.3.1.min.js vendored
View File

0
res/main.js → js/main.js
View File