diff --git a/src/client/resources/main.html b/src/client/resources/main.html index 9e927a4c..8faf0f5c 100644 --- a/src/client/resources/main.html +++ b/src/client/resources/main.html @@ -45,7 +45,9 @@ p { font-weight: 200; - font-size: 1.2em; + font-size: 1.4em; + color: rgb(255, 255, 255); + text-shadow: 1px 1px #000000; } a { @@ -53,17 +55,20 @@ text-decoration: none; } - a:visited { - color: inherit; - } - - p a { - text-decoration: underline; + a:visited { + color: inherit; } - p a:hover { - color: #19c34c; - } + p a { + font-weight: bold; + color: #236b2f; + text-decoration: none; + text-shadow: 2px 2px #000000; + } + + p a:hover { + color: #00ff4c; + } nav { padding: 0px; @@ -77,18 +82,18 @@ display: none; } - #brand i { - font-size: 40px; - width: 64px; - vertical-align: top; - text-align: center; - cursor: pointer; - } + #brand i { + font-size: 40px; + width: 64px; + vertical-align: top; + text-align: center; + cursor: pointer; + } - #brand span { - font-size: 27px; - margin-left: 10px; - } + #brand span { + font-size: 27px; + margin-left: 10px; + } nav ul { list-style: none; @@ -96,9 +101,9 @@ margin: 0; } - nav ul li { - display: inline-block; - } + nav ul li { + display: inline-block; + } nav .nav-link { display: inline-block; @@ -112,23 +117,23 @@ margin-bottom: -1px; } - nav .nav-link.active { - border-bottom: 1px solid white; - } + nav .nav-link.active { + border-bottom: 1px solid white; + } - nav .nav-link:hover, - nav .nav-link.active { - text-shadow: 0px 0px 8px rgba(255, 255, 255, 0.748); - } + nav .nav-link:hover, + nav .nav-link.active { + text-shadow: 0px 0px 8px rgba(255, 255, 255, 0.748); + } - nav .nav-link:first-child { - padding-left: 0; - } + nav .nav-link:first-child { + padding-left: 0; + } - nav .nav-link.not-active { - color: rgba(255, 255, 255, 0.25); - pointer-events: none; - } + nav .nav-link.not-active { + color: rgba(255, 255, 255, 0.25); + pointer-events: none; + } .side-nav-container { min-width: 64px; @@ -149,15 +154,15 @@ left: 0; } - .side-nav i { - padding: 10px 0; - transition: all .1s ease; - cursor: pointer; - } + .side-nav i { + padding: 10px 0; + transition: all .1s ease; + cursor: pointer; + } - .side-nav i:hover { - color: rgba(255, 255, 255, 1); - } + .side-nav i:hover { + color: rgba(255, 255, 255, 1); + } .side-nav-bottom { position: absolute; @@ -178,34 +183,34 @@ flex-wrap: wrap; } - .container.full { - width: 100%; - /*padding: 0px;*/ - } + .container.full { + width: 100%; + /*padding: 0px;*/ + } - .container h1, - .container h2, - .container h3 { - width: 100%; - margin-bottom: 10px; - margin-left: 5px; - margin-top: 0; - letter-spacing: 1px; - font-weight: 200; - } + .container h1, + .container h2, + .container h3 { + width: 100%; + margin-bottom: 10px; + margin-left: 5px; + margin-top: 0; + letter-spacing: 1px; + font-weight: 200; + } - .container h3 { - margin-bottom: 0px; - font-weight: 500; - } + .container h3 { + margin-bottom: 0px; + font-weight: 500; + } .full-row .card { flex: 2; } - .full-row .card.small { - flex: 1; - } + .full-row .card.small { + flex: 1; + } .card { display: flex; @@ -213,22 +218,22 @@ box-sizing: border-box; } - .card.small { - width: 12.5%; - } + .card.small { + width: 12.5%; + } - .card.full { - width: 100%; - } + .card.full { + width: 100%; + } @media(max-width: 1341px) { .card { width: 50%; } - .card.small { - width: 25%; - } + .card.small { + width: 25%; + } } .card .card-container { @@ -242,6 +247,10 @@ transition: all 0.5s ease; } + .card:hover .card-container { + box-shadow: 0 9px 19px rgba(0, 0, 0, 0.1), 0 15px 12px rgba(0, 0, 0, 0.1); + } + .card .card-img { overflow: hidden; height: 185px; @@ -277,7 +286,7 @@ .card:hover .card-content { background-color: rgba(255, 255, 255, 0.321); color: rgb(255, 255, 255); - text-shadow: 2px 2px #000000; + text-shadow: 1px 1px #000000; } .card .card-content span { @@ -314,11 +323,11 @@ transition: opacity bottom 0.5s; } - .card .card-action.hidden-action { - bottom: -43px; - transition: bottom 0.5s ease; - border-color: rgba(0, 0, 0, 0.0); - } + .card .card-action.hidden-action { + bottom: -43px; + transition: bottom 0.5s ease; + border-color: rgba(0, 0, 0, 0.0); + } .card:hover .card-action.hidden-action { bottom: 0; @@ -337,32 +346,32 @@ cursor: pointer; } - a.btn i { - vertical-align: middle; - } + a.btn i { + vertical-align: middle; + } - a.btn.highlight { - background: white; - color: black; - } + a.btn.highlight { + background: white; + color: black; + } - a.btn:hover { - background: white; - color: black; - box-shadow: 0px 0px 10px rgba(255, 255, 255, 0.42); - } + a.btn:hover { + background: white; + color: black; + box-shadow: 0px 0px 10px rgba(255, 255, 255, 0.42); + } - a.btn.small { - padding: 10px 50px; - } + a.btn.small { + padding: 10px 50px; + } - div.menus > div { + div.menus>div { display: none; } - div.menus > div.active { - display: block !important; - } + div.menus>div.active { + display: block !important; + } .progress { width: 100%; @@ -374,26 +383,25 @@ background: rgba(0, 0, 0, 0.25); } - .progress > .bar { - width: 50%; - height: 100%; - margin: 0; - background: rgb(121, 121, 121); - background: linear-gradient(145deg, rgba(121, 121, 121, 1) 0%, rgba(0, 212, 255, 1) 100%); - transition: all 0.2s linear; - } + .progress>.bar { + width: 50%; + height: 100%; + margin: 0; + background: rgb(121, 121, 121); + background: linear-gradient(145deg, rgba(121, 121, 121, 1) 0%, rgba(0, 212, 255, 1) 100%); + transition: all 0.2s linear; + }
-
h1.gg