start adding demos to portfolio

This commit is contained in:
ktyl 2021-10-11 00:29:58 +01:00
parent 4a2259da36
commit 9e85336b87
5 changed files with 38 additions and 8 deletions

BIN
img/oglc.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 165 KiB

View File

@ -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)

18
src/inc_css/demos.css Normal file
View File

@ -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;
}

View File

@ -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>

View File

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