Initial commit

This commit is contained in:
DigitalDesignDude 2022-07-25 08:01:49 -04:00
commit ef9afe798a
16 changed files with 486 additions and 0 deletions

2
.gitattributes vendored Normal file
View File

@ -0,0 +1,2 @@
# Auto detect text files and perform LF normalization
* text=auto

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

BIN
images/backdrop-grey.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 39 KiB

BIN
images/favicon.ico Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.1 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 98 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 105 KiB

BIN
images/logo-dsgm.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 34 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 66 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 160 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 240 KiB

172
index.html Normal file
View File

@ -0,0 +1,172 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>DSGM Resource Site</title>
<link rel="icon" type="image/x-icon" href="images/favicon.ico">
<!-- LINKING CSS + BOOSTRAP -->
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<!--Font Awesome CDN -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css">
<!-- Site Style -->
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<main>
<header>
<img id="site-logo" class="img-fluid" src="images/logo-dsgm.png">
<h1 class="themed-text">Resource Site</h1>
</header>
<div class="separator"></div>
<div id="main-content">
<!--SECTION - INSTALLATION GUIDES-->
<section class="section-container">
<div class="section-headline">
<h2>DS Game Maker Installation Guides</h2>
</div>
<div class="row">
<div class="col-md-6 mb-3">
<a href="https://github.com/DigitalDesignDude/DS-Game-Maker-5-Setup">
<img class="post-thumbnail img-fluid" src="images/thumbnail-setup-dsgm-on-windows.png" alt="DSGM Windows 11/10 Setup">
<h3 class="post-thumbnail-title">DSGM Windows 11/10 Setup</h3>
</a>
</div>
<div class="col-md-6 mb-3">
<a href="https://dsgamemaker.online/vmrelease.html">
<img class="post-thumbnail img-fluid" src="images/thumbnail-dsgm-virtual-machine-guide.png" alt="DSGM Virtual Machine Edition">
<h3 class="post-thumbnail-title">DSGM Virtual Machine Edition</h3>
</a>
</div>
</div>
</section>
<!--SECTION - DSGM DOCUMENTATION-->
<section class="section-container">
<div class="section-headline">
<h2>Documentation</h2>
</div>
<div class="row container-bubble m-0">
<div class="col-md-6 d-flex justify-content-center">
<img class="text-center" src="images/img-documentation.png" style="width: 100%; max-width: 300px;">
</div>
<div class="col-md-6 d-flex align-items-center py-3 px-0">
<ul>
<li><a href="hosted-files/DS%20Game%20Maker%205%20Manual.pdf">DS Game Maker.pdf</a></li>
<li><a href="hosted-files/DSGM%20Coding%20at%20a%20Glance.pdf">DSGM Coding at a Glance.pdf</a></li>
<li><a href="hosted-files/Index%20of%20DS%20Game%20Maker%20Functions.pdf">Index of DS Game Maker Functions.pdf</a></li>
<li><a href="hosted-files/PAlib%20Functions%20Reference.pdf">Palib Functions Reference.pdf</a></li>
<li><a href="hosted-files/Troubleshooting%20Common%20Errors%20in%20DSGM%205.pdf">TroubleShooting Common Errors in DSGM 5.pdf</a></li>
</ul>
</div>
</div>
</section>
<!--SECTION - EXAMPLE FILES-->
<section class="section-container">
<div class="section-headline">
<h2>Example Files</h2>
</div>
<div class="row banner m-0 p-4">
<div class="col-md-6 text-center d-flex justify-content-center align-items-center">
<div>
<img class="img-fluid mb-3" src="images/logo-dsgm.png" alt="documentation">
<h3 class="banner-text mb-3 themed-text">Example Files</h3>
<a class="btn btn-primary banner-button" href="https://surrealcubemedia.itch.io/ds-game-maker-examples">View on Itch.io</a>
</div>
</div>
<div class="col-md-6 d-flex justify-content-center">
<img class="img-fluid text-center m-1" src="images/img-dsgm-examples.png">
</div>
</div>
</section>
<!--SECTION - TUTORIALS-->
<section class="section-container">
<div class="section-headline">
<h2>Tutorials</h2>
</div>
<div class="row ">
<div class="col-md-4 mb-3">
<img class="post-thumbnail img-fluid" src="images/thumbnail_action-rpg-tut-01.png">
<h3 class="post-thumbnail-title">Action RPG Tutorial #01 Sprite Movement</h3>
<a href="https://www.youtube.com/channel/UCVmba1o66nWG6p-82g22iyg" class="post-sub-text">Coming soon! Subscribe to be notified.</a>
</div>
<div class="col-md-4 mb-3">
<a href="https://www.youtube.com/watch?v=dHIOLBCViCA&t=109s"></a>
<div class="post-thumbnail fluidMedia16x9"><iframe src="https://www.youtube.com/embed/dHIOLBCViCA" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe></div>
<h3 class="post-thumbnail-title">Tap To Start Screen</h3>
</div>
<div class="col-md-4 mb-3">
<div class="post-thumbnail fluidMedia16x9"><iframe src="https://www.youtube.com/embed/iGOefvkqBlM" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe></div>
<h3 class="post-thumbnail-title">Fixing Color Palette Error</h3>
</div>
</div>
</section>
<!--SECTION - COMMUNITY & SOCIAL LINKS -->
<section class="section-container">
<div class="section-headline">
<h2>Community & Social Links</h2>
</div>
<div class="row">
<div class="col-md-4 mb-3">
<h3><i class="fab fa-discord"></i> Discord Servers</h3>
<ul>
<li><a href="https://discord.gg/uzNM8gGSA4">DS Game Maker</a></li>
<li><a href="https://discord.gg/HqbuAy9xJf">DSGM Online</a></li>
</ul>
</div>
<div class="col-md-4 mb-3">
<h3><i class="fab fa-youtube"></i> YouTube Channels</h3>
<ul>
<li><a href="https://www.youtube.com/channel/UCVmba1o66nWG6p-82g22iyg">DigitalDesignDude</a></li>
<li><a href="https://www.youtube.com/channel/UCX-OKJjHLaTXOkxIAPSKM7Q">James Garner</a></li>
</ul>
</div>
</div>
</section>
</div>
<!--End of Main Content-->
<div class="separator"></div>
<footer>
<p class="mb-0">Site by DigitalDesignDude</p>
</footer>
</main>
<!-- SCRIPTS -->
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</body>
</html>

312
style.css Normal file
View File

@ -0,0 +1,312 @@
html {
scroll-behavior: smooth;
}
body {
background-color: #65BAFF;
margin-top: 10px;
background-image: linear-gradient(#65BAFF, #0081EA);
}
main {
width: 80%;
max-width: 1024px;
padding: 40px 0px;
margin: 0 auto;
}
#main-content {
background-color: white;
padding: 80px 5%;
margin: 0 auto;
}
p,
li,
span,
label,
input,
select option,
strong,
dt,
dd {
font-family: 'Trebuchet MS', sans-serif;
color: #666666;
}
ul {
padding-left: 8%;
}
li {
margin-bottom: 10px;
}
/*HEADER====================================*/
header {
background-image: url(images/backdrop-grey.png);
background-position: top;
background-repeat: no-repeat;
background-size: cover;
border-radius: 16px 16px 0px 0px;
padding: 20px;
text-align: center;
}
#site-logo {
margin-bottom: 5px;
}
.separator{
background-image: linear-gradient(#DEDEDE, #6B6B6B);
height: 10px;
}
/*FOOTER=====================================*/
footer {
background-color: black;
padding: 30px;
border-radius: 0px 0px 16px 16px;
text-align: center
}
/*HEADLINES AND SPECIAL TEXT======================*/
h1 {
font-family: 'Ubuntu', 'Trebuchet MS', Sans-Serif !important;
font-size: 42px;
color: #D8D8D8;
}
h2 {
font-family: 'Ubuntu', 'Trebuchet MS', Sans-Serif !important;
font-size: 32px;
color: #666666;
display: inline;
margin-bottom: 0px;
}
h3 {
font-family: 'Ubuntu', 'Trebuchet MS', Sans-Serif !important;
color: #393939;
font-size: 22px;
margin-bottom: 12px;
}
.themed-text {
font-family: 'Ubuntu', 'Trebuchet MS', Sans-Serif !important;
color: #D8D8D8;
font-weight: 400;
text-shadow: -2px -2px 0 #3e3e3e, 2px -2px 0 #3e3e3e, -2px 2px 0 #3e3e3e, 2px 2px 0 #3e3e3e;
/*-webkit-text-stroke-width: 1.7px;
-webkit-text-stroke-color: #3e3e3e;
background: -webkit-linear-gradient(#F0F0F0, #B2B2B2);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
*/
}
/*SECTIONS AND SECTION CONTENT============================*/
.section-headline {
border-bottom: 1px solid #cccccc;
margin-bottom: 30px;
padding-bottom: 10px;
overflow-wrap: break-word;
}
.section-container {
margin-bottom: 80px;
}
.sub-section {
margin-bottom: 40px;
}
.post-thumbnail {
margin-bottom: 15px;
}
.post-thumbnail-title {
text-align: center;
}
.post-sub-text {
text-align: center;
display: block;
}
.container-bubble {
background-color: #EBEBEB;
border: 1px solid #bebebe;
border-radius: 20px;
padding: 30px;
color: #767676;
}
.banner {
background-image: url(images/backdrop-grey.png);
background-position: right;
background-repeat: no-repeat;
background-size: cover;
padding: 20px;
}
.banner-text {
/*font-size: 42px !important;*/
font-size: calc(30px + 6 * ((100vw - 320px) / 680)) !important;
}
.banner-button {
width: 100%;
max-width: 260px;
margin-bottom: 20px;
}
/*BUTTONS AND LINKS==================================*/
.btn-primary,
.btn-primary:visited,
.btn-primary:disabled,
.btn-primary.disabled {
background-color: #2A2A2A;
border: 1px solid #2A2A2A !important;
color: white;
font-family: 'Trebuchet MS', sans-serif;
box-shadow: none !important;
}
.btn-primary:hover,
.btn-primary:focus {
background-color: #212121;
}
.btn-primary:active {
background-color: #1d1d1d !important;
}
/*MISC ====================================*/
/*Social Icons*/
.fa-discord {
color: #5865F2;
}
.fa-youtube {
color: #FF0000;
}
/*Youtube Video Responsive Embeding*/
.fluidMedia16x9 iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border: none;
}
.fluidMedia16x9 {
position: relative;
padding-bottom: 56.25%;
/* proportion value to aspect ratio 16:9 (9 / 16 = 0.5625 or 56.25%) */
height: 0;
overflow: hidden;
background-color: black;
}
/*MEDIA QUERIES===============================*/
/*Bootstrap Large Media Query*/
@media only screen and (max-width: 991px) {}
/*Mobile*/
@media only screen and (max-width: 767px) {
main {
width: 90%;
}
/*HEADLINES ----------------------*/
h1 {
font-size: 42px;
text-align: center
}
h2 {
font-size: 28px;
}
h3 {
font-size: 22px;
}
}
/*Mobile Small*/
@media only screen and (max-width: 360px) {
main {
width: 92%;
}
#main-content {
padding: 40px 5%;
}
/*HEADLINES ----------------------*/
h1 {
font-size: 30px;
}
h2 {
font-size: 24px;
}
h3 {
font-size: 18px;
}
h4 {
font-size: 18px;
}
.section-headline {
padding-bottom: 5px;
}
}