Sophia/steamwidgets-web
1
0
Fork 0
mirror of https://github.com/SophiaAtkinson/steamwidgets-web.git synced 2025-06-27 10:17:41 -07:00
Code Issues Packages Projects Releases Wiki Activity

#5 New base layout & doc section

Browse Source
This commit is contained in:
Daniel Brendel
2023-03-22 15:53:32 +01:00
parent 5c31b3e581
commit 01f9530645
10 changed files with 1024 additions and 892 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
app/resources/js/app.js
View File

@ -227,4 +227,12 @@ window.hljs = hljs;
document.addEventListener('DOMContentLoaded', function(){
window.hljs.highlightAll();
window.onscroll = function() {
if ((document.body.scrollTop > document.getElementsByClassName('navbar')[0].offsetHeight + 100) || (document.documentElement.scrollTop > document.getElementsByClassName('navbar')[0].offsetHeight + 100)) {
document.getElementsByClassName('navbar')[0].classList.add('navbar-background-show');
} else {
document.getElementsByClassName('navbar')[0].classList.remove('navbar-background-show');
}
};
});

65
app/resources/sass/app.scss
View File

@ -14,7 +14,12 @@ body {
}
.navbar {
background-color: rgba(255, 255, 255, 0.0);
background-color: transparent;
transition: .3s ease-in-out;
}
.navbar-background-show {
background-color: rgb(76, 76, 120);
}
a.navbar-item:hover, a.navbar-item.is-active, .navbar-link:hover, .navbar-link.is-active {
@ -48,7 +53,6 @@ a.navbar-burger:hover {
@media screen and (min-width: 1088px) {
flex-grow: 1;
justify-content: center;
transform: translate(11%, -0%)
}
}
@ -59,15 +63,58 @@ a.navbar-burger:hover {
.header {
width: 100%;
height: 320px;
background-repeat: no-repeat;
background-size: cover;
height: 750px;
@media screen and (max-width: 768px) {
height: 550px;
}
background-color: rgb(41, 52, 62);
}
.header-overlay {
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.5);
}
.header-content {
position: relative;
top: 50%;
@media screen and (min-width: 769px) {
transform: translateY(-15%);
}
padding: 20px;
@media screen and (max-width: 1088px) {
margin-top: 58px;
}
}
.header-content h1 {
font-size: 2.0em;
}
.header-content h2 {
font-size: 1.8em;
color: rgba(00, 255, 135, 0.7);
}
.header-description {
margin-top: 20px;
color: rgb(230, 230, 230);
}
.header-buttons {
margin-top: 30px;
}
.header-gradient {
background-image: linear-gradient(90deg, rgb(57, 115, 209), rgb(49, 231, 134));
background-clip: text;
color: transparent;
display: inline-block;
}
.header-image {
width: 65%;
height: 100%;
}
.content-section {
@ -288,4 +335,10 @@ tbody strong {
.steam-workshop-info-footer-action a:hover {
color: rgb(250, 250, 250) !important;
text-decoration: none !important;
}
.hide-mobile {
@media screen and (max-width: 1087px) {
display: none;
}
}