start adding demos to portfolio

makefile

@@ -1,19 +1,25 @@
 SRC_DIR			= src
+IMG_DIR			= img
 OUT_DIR			= site
 
 ROOT_DIR		= $(SRC_DIR)/root
-INC_HTML		= $(SRC_DIR)/inc_html
-INC_CSS 		= $(SRC_DIR)/inc_css
 
 PAGES 			= $(shell find $(ROOT_DIR) -wholename "$(ROOT_DIR)*.html")
-HTML_INCLUDES 	= $(shell find $(INC_HTML) -name *.html)
-HTML_TARGETS 	= $(PAGES:$(ROOT_DIR)/%.html=$(OUT_DIR)/%.html)
-
 STYLES			= $(shell find $(ROOT_DIR) -wholename "$(ROOT_DIR)*.css")
-CSS_INCLUDES	= $(shell find $(INC_CSS) -name *.css)
+
+IMAGES			= $(shell find $(IMG_DIR) -wholename "$(IMG_DIR)/*.png")
+#IMAGES			= $(IMAGES:$(shell find $(IMG_DIR) -wholename "$(IMG_DIR)/*.jpg"))
+#IMAGES			= $(IMAGES:$(shell find $(IMG_DIR) -wholename "$(IMG_DIR)/*.gif"))
+
+HTML_INCLUDES 	= $(shell find $(SRC_DIR)/inc_html -name *.html)
+CSS_INCLUDES	= $(shell find $(SRC_DIR)/inc_css -name *.css)
+
+HTML_TARGETS 	= $(PAGES:$(ROOT_DIR)/%.html=$(OUT_DIR)/%.html)
 CSS_TARGETS 	= $(STYLES:$(ROOT_DIR)/%.css=$(OUT_DIR)/%.css)
+PNG_TARGETS		= $(IMG_DIR)/%.png=$(OUT_DIR)/%.png
 
 run: $(HTML_TARGETS) $(CSS_TARGETS)
+	cp $(IMG_DIR)/*.png $(OUT_DIR)/
 
 $(OUT_DIR)/%.html: $(ROOT_DIR)/%.html $(HTML_INCLUDES)
 	mkdir -p $(OUT_DIR)

src/inc_css/demos.css

@@ -0,0 +1,18 @@
+.demoTile {
+    opacity: 0.3;
+    transition: opacity 0.3s;
+    max-width: 15vw;
+    display: inline;
+}
+
+.demoTile:hover {
+    opacity: 1.0;
+}
+
+.demoTiles {
+    position: absolute;
+    background-color:white;
+    left:27.5%;
+    top: var(--title-height);
+    margin-top:40px;
+}

src/root/portfolio.html

@@ -8,8 +8,13 @@
     <h1 class="fsText"><a href="index.html">ktyl@website</a>/portfolio</h1>
 </div>
 
-    #include sidebar.html
+#include sidebar.html
+
+<div class="demoTiles">
+<img class="demoTile" src="oglc.png">
+<img class="demoTile" src="oglc.png">
+<img class="demoTile" src="oglc.png">
+</div>
 
 </body>
-
 </html>

src/root/styles.css

@@ -162,4 +162,5 @@ a.fsText:hover {
     transition: color 0.3s;
 }
 
+#include demos.css
 #include planets.css