Initial commit of 001code-html Scratch frontend project.
Includes scratch-gui, scratch-vm, scratch-blocks, scratch-render, scratch-l10n, and deployment config. Co-authored-by: Cursor <cursoragent@cursor.com>
This commit is contained in:
494
scratch-gui/static/css/onegame.css
Normal file
494
scratch-gui/static/css/onegame.css
Normal file
@@ -0,0 +1,494 @@
|
||||
.u-section-1 .u-sheet-1 {
|
||||
min-height: 555px;
|
||||
}
|
||||
|
||||
.u-section-1 .u-text-1 {
|
||||
margin: 38px auto 0;
|
||||
}
|
||||
|
||||
.u-section-1 .u-list-1 {
|
||||
margin-top: 0;
|
||||
margin-bottom: 38px;
|
||||
}
|
||||
|
||||
.u-section-1 .u-repeater-1 {
|
||||
min-height: 426px;
|
||||
grid-auto-columns: calc(33.3333% - 6.66667px);
|
||||
grid-template-columns: repeat(3, calc(33.3333% - 6.66667px));
|
||||
grid-gap: 10px;
|
||||
}
|
||||
|
||||
.u-section-1 .u-container-layout-1 {
|
||||
padding: 30px;
|
||||
}
|
||||
|
||||
.u-section-1 .u-image-1 {
|
||||
height: 298px;
|
||||
margin-top: 10px;
|
||||
margin-bottom: 0;
|
||||
--radius: 20px;
|
||||
}
|
||||
|
||||
.u-section-1 .u-text-2 {
|
||||
font-weight: 700;
|
||||
margin: 20px 61px 0 0;
|
||||
}
|
||||
|
||||
.u-section-1 .u-container-layout-2 {
|
||||
padding: 30px;
|
||||
}
|
||||
|
||||
.u-section-1 .u-image-2 {
|
||||
height: 298px;
|
||||
margin-top: 10px;
|
||||
margin-bottom: 0;
|
||||
--radius: 20px;
|
||||
}
|
||||
|
||||
.u-section-1 .u-text-3 {
|
||||
font-weight: 700;
|
||||
margin: 20px 61px 0 0;
|
||||
}
|
||||
|
||||
.u-section-1 .u-container-layout-3 {
|
||||
padding: 30px;
|
||||
}
|
||||
|
||||
.u-section-1 .u-image-3 {
|
||||
height: 298px;
|
||||
margin-top: 10px;
|
||||
margin-bottom: 0;
|
||||
--radius: 20px;
|
||||
}
|
||||
|
||||
.u-section-1 .u-text-4 {
|
||||
font-weight: 700;
|
||||
margin: 20px 61px 0 0;
|
||||
}
|
||||
|
||||
.u-section-1 .u-container-layout-4 {
|
||||
padding: 30px;
|
||||
}
|
||||
|
||||
.u-section-1 .u-image-4 {
|
||||
height: 298px;
|
||||
margin-top: 10px;
|
||||
margin-bottom: 0;
|
||||
--radius: 20px;
|
||||
}
|
||||
|
||||
.u-section-1 .u-text-5 {
|
||||
font-weight: 700;
|
||||
margin: 20px 61px 0 0;
|
||||
}
|
||||
|
||||
.u-section-1 .u-gallery-nav-1 {
|
||||
position: absolute;
|
||||
left: 10px;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
}
|
||||
|
||||
.u-section-1 .u-gallery-nav-2 {
|
||||
position: absolute;
|
||||
right: 10px;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
}
|
||||
|
||||
@media (max-width: 1199px) {
|
||||
.u-section-1 .u-repeater-1 {
|
||||
grid-auto-columns: calc(33.333333333333336% - 6.66667px);
|
||||
grid-template-columns: repeat(3, calc(33.333333333333336% - 6.66667px));
|
||||
}
|
||||
|
||||
.u-section-1 .u-image-1 {
|
||||
height: 236px;
|
||||
}
|
||||
|
||||
.u-section-1 .u-text-2 {
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
.u-section-1 .u-image-2 {
|
||||
height: 236px;
|
||||
}
|
||||
|
||||
.u-section-1 .u-text-3 {
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
.u-section-1 .u-image-3 {
|
||||
height: 236px;
|
||||
}
|
||||
|
||||
.u-section-1 .u-text-4 {
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
.u-section-1 .u-image-4 {
|
||||
height: 236px;
|
||||
}
|
||||
|
||||
.u-section-1 .u-text-5 {
|
||||
margin-right: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 991px) {
|
||||
.u-section-1 .u-repeater-1 {
|
||||
grid-auto-columns: calc(50% - 5.0000025px);
|
||||
grid-template-columns: repeat(2, calc(50% - 5.0000025px));
|
||||
}
|
||||
|
||||
.u-section-1 .u-image-1 {
|
||||
height: 279px;
|
||||
}
|
||||
|
||||
.u-section-1 .u-image-2 {
|
||||
height: 279px;
|
||||
}
|
||||
|
||||
.u-section-1 .u-image-3 {
|
||||
height: 279px;
|
||||
}
|
||||
|
||||
.u-section-1 .u-image-4 {
|
||||
height: 279px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 767px) {
|
||||
.u-section-1 .u-text-1 {
|
||||
margin-top: 100px;
|
||||
}
|
||||
|
||||
.u-section-1 .u-repeater-1 {
|
||||
grid-auto-columns: calc(100% - 0px);
|
||||
grid-template-columns: 100%;
|
||||
}
|
||||
|
||||
.u-section-1 .u-container-layout-1 {
|
||||
padding-left: 10px;
|
||||
padding-right: 10px;
|
||||
}
|
||||
|
||||
.u-section-1 .u-image-1 {
|
||||
height: 484px;
|
||||
}
|
||||
|
||||
.u-section-1 .u-container-layout-2 {
|
||||
padding-left: 10px;
|
||||
padding-right: 10px;
|
||||
}
|
||||
|
||||
.u-section-1 .u-image-2 {
|
||||
height: 484px;
|
||||
}
|
||||
|
||||
.u-section-1 .u-container-layout-3 {
|
||||
padding-left: 10px;
|
||||
padding-right: 10px;
|
||||
}
|
||||
|
||||
.u-section-1 .u-image-3 {
|
||||
height: 484px;
|
||||
}
|
||||
|
||||
.u-section-1 .u-container-layout-4 {
|
||||
padding-left: 10px;
|
||||
padding-right: 10px;
|
||||
}
|
||||
|
||||
.u-section-1 .u-image-4 {
|
||||
height: 484px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 575px) {
|
||||
.u-section-1 .u-repeater-1 {
|
||||
grid-auto-columns: 100%;
|
||||
}
|
||||
|
||||
.u-section-1 .u-image-1 {
|
||||
height: 298px;
|
||||
}
|
||||
|
||||
.u-section-1 .u-image-2 {
|
||||
height: 298px;
|
||||
}
|
||||
|
||||
.u-section-1 .u-image-3 {
|
||||
height: 298px;
|
||||
}
|
||||
|
||||
.u-section-1 .u-image-4 {
|
||||
height: 298px;
|
||||
}
|
||||
} .u-section-2 {
|
||||
background-image: none;
|
||||
}
|
||||
|
||||
.u-section-2 .u-sheet-1 {
|
||||
min-height: 551px;
|
||||
}
|
||||
|
||||
.u-section-2 .u-text-1 {
|
||||
--animation-custom_in-translate_x: -300px;
|
||||
--animation-custom_in-translate_y: 0px;
|
||||
--animation-custom_in-opacity: 0;
|
||||
--animation-custom_in-rotate: 0deg;
|
||||
--animation-custom_in-scale: 1;
|
||||
margin: 31px auto 0;
|
||||
}
|
||||
|
||||
.u-section-2 .u-list-1 {
|
||||
grid-template-rows: repeat(1, auto);
|
||||
margin-top: 35px;
|
||||
margin-bottom: 31px;
|
||||
}
|
||||
|
||||
.u-section-2 .u-repeater-1 {
|
||||
grid-template-columns: repeat(4, calc(25% - 22.5px));
|
||||
min-height: 401px;
|
||||
grid-auto-columns: calc(25% - 22.5px);
|
||||
grid-gap: 30px;
|
||||
}
|
||||
|
||||
.u-section-2 .u-image-1 {
|
||||
--animation-custom_in-translate_x: 0px;
|
||||
--animation-custom_in-translate_y: 300px;
|
||||
--animation-custom_in-opacity: 0;
|
||||
--animation-custom_in-rotate: 0deg;
|
||||
--animation-custom_in-scale: 1;
|
||||
--radius: 25px;
|
||||
background-image: linear-gradient(0deg, rgba(0,0,0,0.25), rgba(0,0,0,0.25)), url('../images/photo-1539387893102-c0e198446a35.jpeg');
|
||||
background-position: 50% 50%;
|
||||
}
|
||||
|
||||
.u-section-2 .u-container-layout-1 {
|
||||
padding: 30px 0 0;
|
||||
}
|
||||
|
||||
.u-section-2 .u-text-2 {
|
||||
font-weight: 900;
|
||||
line-height: 0.4;
|
||||
font-size: 1.125rem;
|
||||
margin: 246px auto 0;
|
||||
}
|
||||
|
||||
.u-section-2 .u-btn-1 {
|
||||
--radius: 50px;
|
||||
border-style: solid;
|
||||
font-weight: 700;
|
||||
text-transform: uppercase;
|
||||
font-size: 0.875rem;
|
||||
letter-spacing: 1px;
|
||||
margin: 36px auto 0;
|
||||
}
|
||||
|
||||
.u-section-2 .u-image-2 {
|
||||
--animation-custom_in-translate_x: 0px;
|
||||
--animation-custom_in-translate_y: 300px;
|
||||
--animation-custom_in-opacity: 0;
|
||||
--animation-custom_in-rotate: 0deg;
|
||||
--animation-custom_in-scale: 1;
|
||||
--radius: 25px;
|
||||
background-image: linear-gradient(0deg, rgba(0,0,0,0.25), rgba(0,0,0,0.25)), url('../images/photo-1523215424-b900db56bc0d.jpeg');
|
||||
background-position: 50% 50%;
|
||||
}
|
||||
|
||||
.u-section-2 .u-container-layout-2 {
|
||||
padding: 30px 0 0;
|
||||
}
|
||||
|
||||
.u-section-2 .u-text-3 {
|
||||
font-weight: 900;
|
||||
line-height: 0.4;
|
||||
font-size: 1.125rem;
|
||||
margin: 246px auto 0;
|
||||
}
|
||||
|
||||
.u-section-2 .u-btn-2 {
|
||||
--radius: 50px;
|
||||
border-style: solid;
|
||||
font-weight: 700;
|
||||
text-transform: uppercase;
|
||||
font-size: 0.875rem;
|
||||
letter-spacing: 1px;
|
||||
margin: 36px auto 0;
|
||||
}
|
||||
|
||||
.u-section-2 .u-image-3 {
|
||||
--animation-custom_in-translate_x: 0px;
|
||||
--animation-custom_in-translate_y: 300px;
|
||||
--animation-custom_in-opacity: 0;
|
||||
--animation-custom_in-rotate: 0deg;
|
||||
--animation-custom_in-scale: 1;
|
||||
--radius: 25px;
|
||||
background-image: linear-gradient(0deg, rgba(0,0,0,0.25), rgba(0,0,0,0.25)), url('../images/O1CN012178lO23PdR5TJnyE_4193547248.png');
|
||||
background-position: 50% 50%;
|
||||
}
|
||||
|
||||
.u-section-2 .u-container-layout-3 {
|
||||
padding: 30px 0 0;
|
||||
}
|
||||
|
||||
.u-section-2 .u-text-4 {
|
||||
font-weight: 900;
|
||||
line-height: 0.4;
|
||||
font-size: 1.125rem;
|
||||
margin: 246px auto 0;
|
||||
}
|
||||
|
||||
.u-section-2 .u-btn-3 {
|
||||
--radius: 50px;
|
||||
border-style: solid;
|
||||
font-weight: 700;
|
||||
text-transform: uppercase;
|
||||
font-size: 0.875rem;
|
||||
letter-spacing: 1px;
|
||||
margin: 36px auto 0;
|
||||
}
|
||||
|
||||
.u-section-2 .u-image-4 {
|
||||
--animation-custom_in-translate_x: 0px;
|
||||
--animation-custom_in-translate_y: 300px;
|
||||
--animation-custom_in-opacity: 0;
|
||||
--animation-custom_in-rotate: 0deg;
|
||||
--animation-custom_in-scale: 1;
|
||||
--radius: 25px;
|
||||
background-image: linear-gradient(0deg, rgba(0,0,0,0.25), rgba(0,0,0,0.25)), url('../images/photo-1562229125-6d6075419a22.jpeg');
|
||||
background-position: 50% 50%;
|
||||
}
|
||||
|
||||
.u-section-2 .u-container-layout-4 {
|
||||
padding: 30px 0 0;
|
||||
}
|
||||
|
||||
.u-section-2 .u-text-5 {
|
||||
font-weight: 900;
|
||||
line-height: 0.4;
|
||||
font-size: 1.125rem;
|
||||
margin: 246px auto 0;
|
||||
}
|
||||
|
||||
.u-section-2 .u-btn-4 {
|
||||
--radius: 50px;
|
||||
border-style: solid;
|
||||
font-weight: 700;
|
||||
text-transform: uppercase;
|
||||
font-size: 0.875rem;
|
||||
letter-spacing: 1px;
|
||||
margin: 36px auto 0;
|
||||
}
|
||||
|
||||
.u-section-2 .u-image-5 {
|
||||
--animation-custom_in-translate_x: 0px;
|
||||
--animation-custom_in-translate_y: 300px;
|
||||
--animation-custom_in-opacity: 0;
|
||||
--animation-custom_in-rotate: 0deg;
|
||||
--animation-custom_in-scale: 1;
|
||||
--radius: 25px;
|
||||
background-image: linear-gradient(0deg, rgba(0,0,0,0.25), rgba(0,0,0,0.25)), url("../images/photo-1544193711-09caf25d5813.jpeg");
|
||||
}
|
||||
|
||||
.u-section-2 .u-container-layout-5 {
|
||||
padding: 30px 0 0;
|
||||
}
|
||||
|
||||
.u-section-2 .u-text-6 {
|
||||
font-weight: 900;
|
||||
line-height: 0.4;
|
||||
font-size: 1.125rem;
|
||||
margin: 246px auto 0;
|
||||
}
|
||||
|
||||
.u-section-2 .u-btn-5 {
|
||||
--radius: 50px;
|
||||
border-style: solid;
|
||||
font-weight: 700;
|
||||
text-transform: uppercase;
|
||||
font-size: 0.875rem;
|
||||
letter-spacing: 1px;
|
||||
margin: 36px auto 0;
|
||||
}
|
||||
|
||||
.u-section-2 .u-image-6 {
|
||||
--animation-custom_in-translate_x: 0px;
|
||||
--animation-custom_in-translate_y: 300px;
|
||||
--animation-custom_in-opacity: 0;
|
||||
--animation-custom_in-rotate: 0deg;
|
||||
--animation-custom_in-scale: 1;
|
||||
--radius: 25px;
|
||||
background-image: linear-gradient(0deg, rgba(0,0,0,0.25), rgba(0,0,0,0.25)), url("../images/photo-1539387893102-c0e198446a35.jpeg?rand=f0be");
|
||||
}
|
||||
|
||||
.u-section-2 .u-container-layout-6 {
|
||||
padding: 30px 0 0;
|
||||
}
|
||||
|
||||
.u-section-2 .u-text-7 {
|
||||
font-weight: 900;
|
||||
line-height: 0.4;
|
||||
font-size: 1.125rem;
|
||||
margin: 246px auto 0;
|
||||
}
|
||||
|
||||
.u-section-2 .u-btn-6 {
|
||||
--radius: 50px;
|
||||
border-style: solid;
|
||||
font-weight: 700;
|
||||
text-transform: uppercase;
|
||||
font-size: 0.875rem;
|
||||
letter-spacing: 1px;
|
||||
margin: 36px auto 0;
|
||||
}
|
||||
|
||||
.u-section-2 .u-gallery-nav-1 {
|
||||
position: absolute;
|
||||
left: 10px;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
}
|
||||
|
||||
.u-section-2 .u-gallery-nav-2 {
|
||||
position: absolute;
|
||||
right: 10px;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
}
|
||||
|
||||
@media (max-width: 1199px) {
|
||||
.u-section-2 .u-image-5 {
|
||||
background-position: 50% 50%;
|
||||
}
|
||||
|
||||
.u-section-2 .u-image-6 {
|
||||
background-position: 50% 50%;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 991px) {
|
||||
.u-section-2 .u-repeater-1 {
|
||||
grid-template-columns: repeat(2, calc(50% - 15px));
|
||||
grid-auto-columns: calc(50% - 15px);
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 767px) {
|
||||
.u-section-2 .u-text-1 {
|
||||
margin-top: 65px;
|
||||
}
|
||||
|
||||
.u-section-2 .u-repeater-1 {
|
||||
grid-template-columns: 100%;
|
||||
grid-auto-columns: calc(100% - 0px);
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 575px) {
|
||||
.u-section-2 .u-repeater-1 {
|
||||
grid-auto-columns: 100%;
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user