Kraut.World/server
3
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

added sass loader to the project and put the cowebsite style in its own sass file

Browse source
This commit is contained in:
kharhamel 2021-03-18 12:37:05 +01:00
parent f9c8b4131c
commit 0701e607fa
9 changed files with 352 additions and 82 deletions
Download patch file Download diff file Expand all files Collapse all files

1
front/dist/.gitignore vendored
View file

@ -1,2 +1,3 @@
index.html
index.tmpl.html.tmp
style.css

1
front/dist/index.tmpl.html vendored
View file

@ -30,6 +30,7 @@
<base href="/">
<link rel="stylesheet" href="/resources/style/style.css">
<link rel="stylesheet" href="/style.css">
<title>WorkAdventure</title>
</head>
<body id="body" style="margin: 0; background-color: #000">

150
front/dist/resources/style/cowebsite.scss vendored Normal file
View file

@ -0,0 +1,150 @@
#cowebsite {
aside {
background: gray;
cursor: ew-resize;
img {
cursor: ew-resize;
margin: 3px;
pointer-events: none;
height: 20px;
}
}
.top-right-btn{
position: absolute;
background: none;
border: none;
cursor: url('/resources/logos/cursor_pointer.png'), pointer;
img {
height: 20px;
background-color: rgba(0,0.0,0,0.3);
padding: 5px;
border-radius: 3px;
}
img:hover {
background-color: rgba(0,0,0,0.4);
}
}
}
@media (min-aspect-ratio: 1/1) {
#cowebsite {
right: 0;
top: 0;
width: 50%;
height: 100vh;
display: flex;
&.loading {
transform: translateX(90%);
}
&.hidden {
transform: translateX(100%);
}
main {
width: 100%;
}
aside {
width: 30px;
align-items: center;
display: flex;
img {
transform: rotate(90deg);
}
}
.top-right-btn{
top: 10px;
right: -100px;
animation: right .2s ease;
img {
right: 15px;
}
}
#cowebsite-close {
right: -140px;
}
#cowebsite-fullscreen {
right: -100px;
}
}
#cowebsite:hover {
#cowebsite-close{
right: 10px;
}
#cowebsite-fullscreen{
right: 40px;
}
}
}
@media (max-aspect-ratio: 1/1) {
#cowebsite {
left: 0;
bottom: 0;
width: 100%;
height: 50%;
display: flex;
flex-direction: column;
&.loading {
transform: translateY(90%);
}
&.hidden {
transform: translateY(100%);
}
main {
height: 100%;
}
aside {
height: 30px;
align-items: center;
display: flex;
flex-direction: column;
}
.top-right-btn{
top: 10px;
right: -100px;
animation: right .2s ease;
img {
right: 15px;
}
}
#cowebsite-close {
right: -140px;
}
#cowebsite-fullscreen {
right: -100px;
}
}
#cowebsite:hover {
#cowebsite-close{
right: 10px;
}
#cowebsite-fullscreen{
right: 40px;
}
}
}

2
front/dist/resources/style/index.scss vendored Normal file
View file

@ -0,0 +1,2 @@
@import "cowebsite.scss";
/*@import "style.css"*/

79
front/dist/resources/style/style.css vendored
View file

@ -325,73 +325,7 @@ body {
max-height: 25%;
}
#cowebsite {
right: 0;
top: 0;
width: 50%;
height: 100vh;
display: flex;
}
#cowebsite.loading {
transform: translateX(90%);
}
#cowebsite.hidden {
transform: translateX(100%);
}
#cowebsite main {
width: 100%;
}
#cowebsite aside {
width: 30px;
background: gray;
align-items: center;
display: flex;
cursor: ew-resize;
}
#cowebsite aside img {
cursor: ew-resize;
margin: 3px;
transform: rotate(90deg);
pointer-events: none;
}
#cowebsite .top-right-btn{
position: absolute;
top: 10px;
right: -100px;
background: none;
border: none;
cursor: url('/resources/logos/cursor_pointer.png'), pointer;
animation: right .2s ease;
}
#cowebsite .top-right-btn img {
height: 20px;
right: 15px;
background-color: rgba(0,0.0,0,0.3);
padding: 5px;
border-radius: 3px;
}
#cowebsite .top-right-btn img:hover {
background-color: rgba(0,0,0,0.4);
}
#cowebsite #cowebsite-close {
right: -140px;
}
#cowebsite:hover #cowebsite-close{
right: 10px;
}
#cowebsite #cowebsite-fullscreen {
right: -100px;
}
#cowebsite:hover #cowebsite-fullscreen{
right: 40px;
}
}
@media (max-aspect-ratio: 1/1) {
.game-overlay {
@ -410,19 +344,6 @@ body {
.sidebar > div:hover {
max-width: 25%;
}
#cowebsite {
left: 0;
bottom: 0;
width: 100%;
height: 50%;
}
#cowebsite.loading {
transform: translateY(90%);
}
#cowebsite.hidden {
transform: translateY(100%);
}
}
#game {