From c5afdd52df272b245c5fa9c9bc3f83d93e793836 Mon Sep 17 00:00:00 2001 From: caskd Date: Sun, 1 Jul 2018 01:46:34 +0200 Subject: [PATCH] Improved code readability Also added few features --- {res => css}/web.css | 297 +++++++++++++++++--------------- index.html | 6 +- {res => js}/jquery-3.3.1.min.js | 0 {res => js}/main.js | 0 4 files changed, 163 insertions(+), 140 deletions(-) rename {res => css}/web.css (77%) rename {res => js}/jquery-3.3.1.min.js (100%) rename {res => js}/main.js (100%) diff --git a/res/web.css b/css/web.css similarity index 77% rename from res/web.css rename to css/web.css index bd211f7..7c13e64 100644 --- a/res/web.css +++ b/css/web.css @@ -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; } \ No newline at end of file diff --git a/index.html b/index.html index 291e8f3..c1a8f23 100644 --- a/index.html +++ b/index.html @@ -2,18 +2,18 @@ RedXen Community - + - + - +
diff --git a/res/jquery-3.3.1.min.js b/js/jquery-3.3.1.min.js similarity index 100% rename from res/jquery-3.3.1.min.js rename to js/jquery-3.3.1.min.js diff --git a/res/main.js b/js/main.js similarity index 100% rename from res/main.js rename to js/main.js