Mercurial > hg > websites > source2info / changeset

--- a/site/features.html	Thu Jan 02 03:02:34 2020 -0700
+++ b/site/features.html	Thu Jan 02 03:55:00 2020 -0700
@@ -30,184 +30,22 @@
 			The Next-Gen S2 Engine is a significant departure to the legacy Source engine, running DX11 and Vulkan natively on their respective platforms.
 		</p>
 		<hr>
-		
-		<h1 id="toolsSectionH1">Tools</h1>
-		<p>
-			Source 2 comes with an integrated development enviornment (IDE), consisting of:
-			<br>
-			<i>Asset Browser</i>, <i>Level Editor</i>, <i>Material Editor</i>, <i>Model Editor</i>, <i>Particle Editor</i>, and <i>Film Maker</i>.
-			<br>
-			<img src="features/tools/toolsbar.png">
-		</p>
-
-		<div class="contentSection">
-			<a href="#toolsSectionAssetBrowser"><h3 id="toolsSectionAssetBrowser">- Asset Browser <img src="features/tools/asset_browser_sm.png"></h3></a>
-			<p>
-					The Asset Browser allows quick searching, previewing, grouping, and managing assets.
-					<br>
-					It also serves as the hub for development, launching the other tools either by their icon, or by double clicking an asset.
-					<br>
-					Assets inside the browser can also be dragged into other tools (such as Hammer).
-					<br>
-					<div class="mediaContainer">
-						<video width="577" height="438" autoplay loop>
-								<source src="features/tools/asset_browser_demo.webm" type="video/webm">
-								(Unspported video format?)
-							</video> 
+		<nav>
+			<ul class="featuresNav">
+				<div class="contentSection">
+					<a href="features_tools.html"><li><h1 id="toolsSectionH1">- <u>Tools</u> </h1></li></a>
+					<!-- <div class="featureShowcaseContainer"><img class="featureShowcase" src="features/tools/toolsbar.png"></div> -->
+					<p>
+							<i>Asset Browser</i>, <i>Level Editor</i>, <i>Material Editor</i>, <i>Model Editor</i>, <i>Particle Editor</i>, and <i>Film Maker</i>.
+							<br>
+						</p>
 					</div>
-			</p>
-		</div>
-	
-		<div class="contentSection">
-				<a href="#toolsSectionHammerEditor"><h3 id="toolsSectionHammerEditor">- Hammer Editor <img src="features/tools/hammer/hammer_sm.png"></h3></a>
-			<p>
-				The Source 2 Level Editor (Hammer) is a revolutionary leap above even contemporary level editors.
-				<br>
-				On top of the expected brush-based manipulation, you can edit individual faces, edges, and even verticies, making it a full model editor.
-				<br>
-				<br>
-				The new primitive in S2 is the <i>Mesh</i>, a vertex-based system, allowing concave, and complex geometry to be authored by the level designer.
-			</p>
-			<br>
-			<div class="mediaContainer">
-				<video width="256" height="256" autoplay loop>
-						<source src="features/tools/hammer/editbasics.webm" type="video/webm" title="Mesh editing">
-						Mesh Editing (Video)
-				</video> 
-				<video width="256" height="256" autoplay loop>
-						<source src="features/tools/hammer/convexmesh.webm" type="video/webm" title="Convex mesh editing">
-						Convex Mesh Editing (Video)
-				</video> 
-				<video width="256" height="256" autoplay loop>
-						<source src="features/tools/hammer/faceremoval.webm" type="video/webm" title="Convex mesh editing">
-						Convex Mesh Editing (Video)
-				</video>
-				<video width="256" height="256" autoplay loop>
-						<source src="features/tools/hammer/edittimelapse.webm" type="video/webm" title="Convex mesh editing">
-						Convex Mesh Editing (Video)
-				</video>
-			</div> 
-			<br>
-			<p>
-				Meshes can be exported for further editing in 3D applications, and then re-imported as DMX, OBJ, or FBX.
-				<br>
-				Legacy Source VMFs can also be imported.
-			</p>
-		</div>
-
-		<div class="contentSection">
-				<a href="#toolsSectionMaterialEditor"><h3 id="toolsSectionMaterialEditor">- Material Editor <img src="features/tools/met/met_sm.png"></h3></a>
-			<p>
-				No more fiddling with text-based VMT files, slow material reloads, and trial & error debugging.
-				<br>
-				S2 MET Supports realtime editing and previews, with in-editor texture importing.
-				<br>
-			</p>
-				<br>
-				<div class="mediaContainer">
-					<img class="mediaImage" src="features/tools/met/properties.png" width="1024px">
-				</div> 
-				<br>
-			<p>
-				MET Also supports extensive dynamic functions, and the following image formats: PSD, TGA, TIF, PFM, MKS, PNG, JPG
-			</p>
-		</div>
-
-		<div class="contentSection">
-				<a href="#toolsSectionModelEditor"><h3 id="toolsSectionModelEditor">- Model Editor <img src="features/tools/model_editor/model_editor_sm.png"></h3></a>
-			<p>
-				Model viewer, and editor.  No more fiddling with QC files, this does it all.
-				<br>
-				Used to configure hitboxes, collision, poses, weights, LODs, animations, constraints, attachments, and anything involving models.
-				<br>
-			</p>
-				<br>
-				<div class="mediaContainer">
-					<img class="mediaImage" src="features/tools/model_editor/editor.png" height="400px">
-					<video  height="400px" autoplay loop>
-							<source src="features/tools/model_editor/modelviewer.webm" type="video/webm" title="Model Viewer">
-							Convex Mesh Editing (Video)
-					</video>
-				</div> 
-				<br>
-			<p>
-				Model Importing supports the following formats: DMX, SMD, FBX, OBJ
-			</p>
-		</div>
-
-		<div class="contentSection">
-				<a href="#toolsSectionPET"><h3 id="toolsSectionPET">- Particle Editor <img src="features/tools/pet/pet_sm.png"></h3></a>
-			<p>
-				PET is for editing particles
-				<br>
-				...
-				<br>
-			</p>
-				<br>
-				<div class="mediaContainer">
-				</div> 
-				<br>
-		</div>
-
-		<div class="contentSection">
-				<a href="#toolsSectionSFM"><h3 id="toolsSectionSFM">- Filmmaker <img src="features/tools/sfm/sfm_sm.png"></h3></a>
-			<p>
-				The Filmmaker is used for rendering high-quality cinematics from in-engine.
-				<br>
-				...
-				<br>
-			</p>
-				<br>
-				<div class="mediaContainer">
-				</div> 
-				<br>
-		</div>
-
-		<div class="contentSection">
-				<a href="#toolsSectionVC2"><h3 id="toolsSectionVC2">- VConsole2 <img src="features/tools/vconsole2/vconsole2_sm.png"></h3></a>
-			<p>
-				Vastly improved over the simple in-engine console of yore.	Using a networked API for engine communication it allows remote debugging.
-				<br>
-				VC2 also features multi-tabbed displays for multitasking, extensive filtering, and verbosity control.
-				<br>
-			</p>
-				<br>
-				<div class="mediaContainer">
-					<img class="mediaImage" src="features/tools/vconsole2/main.png" >
-				</div> 
-				<br>
-		</div>
-
-		<h2>Unreleased</h2>
-
-		<div class="contentSection">
-				<a href="#toolsSectionFaceposer"><h3 id="toolsSectionFaceposer">- Faceposer <img src="features/tools/faceposer/faceposer_sm.png"></h3></a>
-			<p>
-				Used to make Choreo scenes.
-			</p>
-				<div class="mediaContainer">
-				</div> 
-		</div>
-
-		<div class="contentSection">
-				<a href="#toolsSectionModeldoc"><h3 id="toolsSectionModeldoc">- Modeldoc <img src="features/tools/model_doc/model_doc_sm.png"></h3></a>
-			<p id="textNotice"><b>Notice: </b>Unknown.</p>
-		</div>
-
-		<div class="contentSection">
-				<a href="#toolsSectionSnooper"><h3 id="toolsSectionSnooper">- Snooper <img src="features/tools/snooper/snooper_sm.png"></h3></a>
-			<p id="textNotice"><b>Notice: </b>Unknown.</p>
-		</div>
-
-		<div class="contentSection">
-				<a href="#toolsSectionVMix"><h3 id="toolsSectionVMix">- VMix <img src="features/tools/vmix/vmix_sm.png"></h3></a>
-			<p id="textNotice"><b>Notice: </b>Unknown.</p>
-		</div>
-
-		<div class="contentSection">
-				<a href="#toolsSectionGrapheditor"><h3 id="toolsSectionGrapheditor">- Grapheditor <img src="features/tools/grapheditor/grapheditor_sm.png"></h3></a>
-			<p id="textNotice"><b>Notice: </b>Unknown.</p>
-		</div>
+				<div class="contentSection">
+					<a href=""><li><h1 id="toolsSectionH1">- <u>Rendering</u></h1></li></a>
+					<p id="textNotice"><b>Notice: </b> Not created yet.</p>
+				</div>
+			</ul>
+		</nav>
 
 
 	</div>

--- a/site/features_tools.html	Thu Jan 02 03:02:34 2020 -0700
+++ b/site/features_tools.html	Thu Jan 02 03:55:00 2020 -0700
@@ -28,14 +28,11 @@
 		<h1>Source 2 Engine Features > Tools</h1>
 		<p>
 			Source 2 comes with an integrated development enviornment (IDE), consisting of:
-			<br>
-			<i>Asset Browser</i>, <i>Level Editor</i>, <i>Material Editor</i>, <i>Model Editor</i>, <i>Particle Editor</i>, and <i>Film Maker</i>.
-			<br>
 		</p>
 		<hr>
 
-		<div class="contentSection">
-			<a href="#toolsSectionAssetBrowser"><h3 id="toolsSectionAssetBrowser">- Asset Browser <img src="features/tools/asset_browser_sm.png"></h3></a>
+		<div class="contentSection" id="toolsSectionAssetBrowser">
+			<a href="#toolsSectionAssetBrowser"><h3>- Asset Browser <img class="toolIconSM" src="features/tools/asset_browser_sm.png"></h3></a>
 			<p>
 					The Asset Browser allows quick searching, previewing, grouping, and managing assets.
 					<br>
@@ -52,8 +49,8 @@
 			</p>
 		</div>
 	
-		<div class="contentSection">
-				<a href="#toolsSectionHammerEditor"><h3 id="toolsSectionHammerEditor">- Hammer Editor <img src="features/tools/hammer/hammer_sm.png"></h3></a>
+		<div class="contentSection" id="toolsSectionHammerEditor">
+				<a href="#toolsSectionHammerEditor"><h3 >- Hammer Editor <img class="toolIconSM" src="features/tools/hammer/hammer_sm.png"></h3></a>
 			<p>
 				The Source 2 Level Editor (Hammer) is a revolutionary leap above even contemporary level editors.
 				<br>
@@ -89,8 +86,8 @@
 			</p>
 		</div>
 
-		<div class="contentSection">
-				<a href="#toolsSectionMaterialEditor"><h3 id="toolsSectionMaterialEditor">- Material Editor <img src="features/tools/met/met_sm.png"></h3></a>
+		<div class="contentSection" id="toolsSectionMaterialEditor">
+				<a href="#toolsSectionMaterialEditor"><h3 >- Material Editor <img class="toolIconSM" src="features/tools/met/met_sm.png"></h3></a>
 			<p>
 				No more fiddling with text-based VMT files, slow material reloads, and trial & error debugging.
 				<br>
@@ -107,8 +104,8 @@
 			</p>
 		</div>
 
-		<div class="contentSection">
-				<a href="#toolsSectionModelEditor"><h3 id="toolsSectionModelEditor">- Model Editor <img src="features/tools/model_editor/model_editor_sm.png"></h3></a>
+		<div class="contentSection" id="toolsSectionModelEditor">
+				<a href="#toolsSectionModelEditor"><h3>- Model Editor <img class="toolIconSM" src="features/tools/model_editor/model_editor_sm.png"></h3></a>
 			<p>
 				Model viewer, and editor.  No more fiddling with QC files, this does it all.
 				<br>
@@ -129,8 +126,8 @@
 			</p>
 		</div>
 
-		<div class="contentSection">
-				<a href="#toolsSectionPET"><h3 id="toolsSectionPET">- Particle Editor <img src="features/tools/pet/pet_sm.png"></h3></a>
+		<div class="contentSection" id="toolsSectionPET">
+				<a href="#toolsSectionPET"><h3>- Particle Editor <img class="toolIconSM" src="features/tools/pet/pet_sm.png"></h3></a>
 			<p>
 				PET is for editing particles
 				<br>
@@ -143,8 +140,8 @@
 				<br>
 		</div>
 
-		<div class="contentSection">
-				<a href="#toolsSectionSFM"><h3 id="toolsSectionSFM">- Filmmaker <img src="features/tools/sfm/sfm_sm.png"></h3></a>
+		<div class="contentSection" id="toolsSectionSFM">
+				<a href="#toolsSectionSFM"><h3>- Filmmaker <img class="toolIconSM" src="features/tools/sfm/sfm_sm.png"></h3></a>
 			<p>
 				The Filmmaker is used for rendering high-quality cinematics from in-engine.
 				<br>
@@ -157,8 +154,8 @@
 				<br>
 		</div>
 
-		<div class="contentSection">
-				<a href="#toolsSectionVC2"><h3 id="toolsSectionVC2">- VConsole2 <img src="features/tools/vconsole2/vconsole2_sm.png"></h3></a>
+		<div class="contentSection" id="toolsSectionVC2">
+				<a href="#toolsSectionVC2"><h3>- VConsole2 <img class="toolIconSM" src="features/tools/vconsole2/vconsole2_sm.png"></h3></a>
 			<p>
 				Vastly improved over the simple in-engine console of yore.	Using a networked API for engine communication it allows remote debugging.
 				<br>
@@ -174,8 +171,8 @@
 
 		<h2>Unreleased</h2>
 
-		<div class="contentSection">
-				<a href="#toolsSectionFaceposer"><h3 id="toolsSectionFaceposer">- Faceposer <img src="features/tools/faceposer/faceposer_sm.png"></h3></a>
+		<div class="contentSection" id="toolsSectionFaceposer">
+				<a href="#toolsSectionFaceposer"><h3>- Faceposer <img class="toolIconSM" src="features/tools/faceposer/faceposer_sm.png"></h3></a>
 			<p>
 				Used to make Choreo scenes.
 			</p>
@@ -183,23 +180,23 @@
 				</div> 
 		</div>
 
-		<div class="contentSection">
-				<a href="#toolsSectionModeldoc"><h3 id="toolsSectionModeldoc">- Modeldoc <img src="features/tools/model_doc/model_doc_sm.png"></h3></a>
+		<div class="contentSection" id="toolsSectionModeldoc">
+				<a href="#toolsSectionModeldoc"><h3>- Modeldoc <img class="toolIconSM" src="features/tools/model_doc/model_doc_sm.png"></h3></a>
 			<p id="textNotice"><b>Notice: </b>Unknown.</p>
 		</div>
 
-		<div class="contentSection">
-				<a href="#toolsSectionSnooper"><h3 id="toolsSectionSnooper">- Snooper <img src="features/tools/snooper/snooper_sm.png"></h3></a>
+		<div class="contentSection" id="toolsSectionSnooper">
+				<a href="#toolsSectionSnooper"><h3>- Snooper <img class="toolIconSM" src="features/tools/snooper/snooper_sm.png"></h3></a>
 			<p id="textNotice"><b>Notice: </b>Unknown.</p>
 		</div>
 
-		<div class="contentSection">
-				<a href="#toolsSectionVMix"><h3 id="toolsSectionVMix">- VMix <img src="features/tools/vmix/vmix_sm.png"></h3></a>
+		<div class="contentSection" id="toolsSectionVMix">
+				<a href="#toolsSectionVMix"><h3>- VMix <img class="toolIconSM" src="features/tools/vmix/vmix_sm.png"></h3></a>
 			<p id="textNotice"><b>Notice: </b>Unknown.</p>
 		</div>
 
-		<div class="contentSection">
-				<a href="#toolsSectionGrapheditor"><h3 id="toolsSectionGrapheditor">- Grapheditor <img src="features/tools/grapheditor/grapheditor_sm.png"></h3></a>
+		<div class="contentSection" id="toolsSectionGrapheditor">
+				<a href="#toolsSectionGrapheditor"><h3>- Grapheditor <img class="toolIconSM" src="features/tools/grapheditor/grapheditor_sm.png"></h3></a>
 			<p id="textNotice"><b>Notice: </b>Unknown.</p>
 		</div>
 

--- a/site/style.css	Thu Jan 02 03:02:34 2020 -0700
+++ b/site/style.css	Thu Jan 02 03:55:00 2020 -0700
@@ -50,6 +50,27 @@
 }
 
 
+/* Features Nav */
+ul.featuresNav{
+	list-style-type: none;
+	padding: inherit;
+	font-size: inherit;
+}
+ul.featuresNav a{
+	color:#FAFAFA;
+	text-decoration: none;
+}
+ul.featuresNav h1{
+	font-size:2em;
+	margin-top: .1em;
+}
+div.featureShowcaseContainer {
+
+}
+img.featureShowcase{
+
+}
+
 /* Text Styles */
 div.content {
 	font-family: 'Lato', sans-serif;
@@ -77,7 +98,6 @@
 	margin-bottom: .25em;
 	font-size: 0.875em;
 }
-
 #textNotice {
 	width: max-content;
 	background-image: url("missing_5p.png");
@@ -120,8 +140,7 @@
 	border-bottom-color: #373737;
 	border-bottom-style: solid;
 	border-bottom-width: 1px;
-  }
-
+}
 div.contentSection {
 	border-color: #282828;
 	border-style: solid;
@@ -136,6 +155,10 @@
 	color:#fafafa;
 	text-decoration: none;
 }
+img.toolIconSM {
+	float: right;
+	margin-right: .25em;
+}
 
 /* Media Styles */
 div.mediaContainer {