Compare commits
10 commits
experiment
...
main
| Author | SHA1 | Date | |
|---|---|---|---|
37e80e6c96
|
|||
|
e2f220d4bb
|
|||
|
5f180972d6
|
|||
|
205df35fbb
|
|||
|
5551966dee
|
|||
|
d9dbcc18ba
|
|||
|
d655fb4594
|
|||
|
431c3cfb6d
|
|||
|
957ea5455f
|
|||
|
377d49129c
|
35 changed files with 47 additions and 768 deletions
25
.forgejo/workflows/build.yml
Normal file
25
.forgejo/workflows/build.yml
Normal file
|
|
@ -0,0 +1,25 @@
|
|||
on: [push]
|
||||
|
||||
jobs:
|
||||
build:
|
||||
runs-on: ubuntu-latest
|
||||
steps:
|
||||
- uses: actions/checkout@v4
|
||||
- name: Setup Ruby
|
||||
uses: https://github.com/ruby/setup-ruby@8575951200e472d5f2d95c625da0c7bec8217c42 # v1.161.0
|
||||
with:
|
||||
ruby-version: '3.2.2' # Not needed with a .ruby-version file
|
||||
bundler-cache: true # runs 'bundle install' and caches installed gems automatically
|
||||
cache-version: 0 # Increment this number if you need to re-download cached gems
|
||||
# - uses: actions/setup-node@v4
|
||||
# with:
|
||||
# node-version: 22
|
||||
# cache: 'npm'
|
||||
# - name: Install node dependencies
|
||||
# run: npm install
|
||||
# - name: Build
|
||||
# run: npm run build
|
||||
- name: Build
|
||||
run: bundle exec jekyll build
|
||||
- name: Copy
|
||||
run: cp -r dist/* /pages/
|
||||
2
.gitignore
vendored
2
.gitignore
vendored
|
|
@ -130,4 +130,4 @@ dist
|
|||
.yarn/install-state.gz
|
||||
.pnp.*
|
||||
|
||||
assets
|
||||
#assets
|
||||
|
|
|
|||
|
|
@ -12,6 +12,7 @@ GEM
|
|||
ffi (1.15.5)
|
||||
forwardable-extended (2.6.0)
|
||||
google-protobuf (3.22.2-x86_64-darwin)
|
||||
google-protobuf (3.22.2-x86_64-linux)
|
||||
http_parser.rb (0.8.0)
|
||||
i18n (1.12.0)
|
||||
concurrent-ruby (~> 1.0)
|
||||
|
|
@ -61,6 +62,8 @@ GEM
|
|||
safe_yaml (1.0.5)
|
||||
sass-embedded (1.59.3-x86_64-darwin)
|
||||
google-protobuf (~> 3.21)
|
||||
sass-embedded (1.59.3-x86_64-linux-gnu)
|
||||
google-protobuf (~> 3.21)
|
||||
terminal-table (3.0.2)
|
||||
unicode-display_width (>= 1.1.1, < 3)
|
||||
unicode-display_width (2.4.2)
|
||||
|
|
@ -68,6 +71,8 @@ GEM
|
|||
|
||||
PLATFORMS
|
||||
x86_64-darwin-21
|
||||
x86_64-darwin-23
|
||||
x86_64-linux
|
||||
|
||||
DEPENDENCIES
|
||||
jekyll (~> 4.3)
|
||||
|
|
@ -76,4 +81,4 @@ DEPENDENCIES
|
|||
jekyll-sitemap (~> 1.4)
|
||||
|
||||
BUNDLED WITH
|
||||
2.4.6
|
||||
2.5.9
|
||||
|
|
|
|||
|
|
@ -1,3 +1,4 @@
|
|||
# homepage
|
||||
|
||||
i have like a bunch of these now but i want to try to make one that's a video game lmao
|
||||
i have like a bunch of these now but i want to try to make one that's a video game lmao
|
||||
|
||||
|
|
|
|||
|
|
@ -1,20 +0,0 @@
|
|||
import { init as init_lens } from './js/lens.js'
|
||||
import { init as init_cartridge } from './js/cartridge';
|
||||
import { init as init_pong } from './js/pong';
|
||||
|
||||
|
||||
// Test import of an asset
|
||||
// import webpackLogo from '@/images/webpack-logo.svg'
|
||||
|
||||
// Test import of styles
|
||||
import './index.scss';
|
||||
|
||||
|
||||
// let main = document.getElementsByTagName(main);
|
||||
// console.log('name', main[0].getAttribute('name'))
|
||||
// if (main[0].getAttribute('name') === "home"){
|
||||
init_lens();
|
||||
console.log('init lens');
|
||||
init_cartridge();
|
||||
init_pong();
|
||||
// }
|
||||
|
|
@ -1,85 +0,0 @@
|
|||
const CART_SIZE = {
|
||||
x: 300,
|
||||
y: 200
|
||||
}
|
||||
|
||||
function slot_position(){
|
||||
let slot = document.querySelector('#slot');
|
||||
return slot.getBoundingClientRect()
|
||||
}
|
||||
|
||||
function list_carts(){
|
||||
let carts= document.querySelectorAll('.cartridge-metadata');
|
||||
return carts;
|
||||
|
||||
}
|
||||
|
||||
|
||||
function showPopups(){
|
||||
let carts = list_carts();
|
||||
|
||||
let cartPopups = carts.forEach((cart) => {
|
||||
console.log('cart', cart);
|
||||
let popup = window.open(
|
||||
cart.getAttribute('url'),
|
||||
cart.getAttribute('title'),
|
||||
`popup=true,width=${CART_SIZE.x+10},height=${CART_SIZE.y+10}`
|
||||
)
|
||||
popup.screen
|
||||
})
|
||||
}
|
||||
|
||||
|
||||
|
||||
// function store_slot_position(){
|
||||
// let slot_pos = slot_position();
|
||||
// console.log(slot_pos);
|
||||
// window.setTimeout(poll_position, 1000);
|
||||
// }
|
||||
|
||||
function store_position(){
|
||||
let name = document.querySelector('.cartridge .label').textContent;
|
||||
let position = {
|
||||
x: window.screenX,
|
||||
y: window.screenY,
|
||||
width: window.outerWidth,
|
||||
height: window.outerHeight
|
||||
};
|
||||
|
||||
localStorage.setItem(name, JSON.stringify(position));
|
||||
window.setTimeout(store_position, 100);
|
||||
console.log('store position', position);
|
||||
}
|
||||
|
||||
function console_message(msg){
|
||||
// console.log('console message', msg);
|
||||
let cart_position = JSON.parse(msg.newValue);
|
||||
cart_position['name'] = String(msg.key).trim();
|
||||
console.log(cart_position)
|
||||
}
|
||||
|
||||
function init_console(){
|
||||
showPopups();
|
||||
// store_slot_position();
|
||||
|
||||
// window.addEventListener('resize', () => {
|
||||
// store_slot_position();
|
||||
// })
|
||||
|
||||
window.addEventListener('storage', (event) => {console_message(event)})
|
||||
}
|
||||
|
||||
function init_cartridge(){
|
||||
console.log('init cartridge')
|
||||
store_position();
|
||||
}
|
||||
|
||||
export function init(){
|
||||
window.showPopups = showPopups;
|
||||
let page_type = document.querySelector('main').getAttribute('page');
|
||||
if (page_type === 'console'){
|
||||
init_console();
|
||||
} else if (page_type === "cartridge"){
|
||||
init_cartridge();
|
||||
}
|
||||
}
|
||||
|
|
@ -1,87 +0,0 @@
|
|||
// OK so the next thing to do is make it so it's blurry when the screen is too
|
||||
// big or too small, and thne prompt someone to make their screen bigger or smaller
|
||||
// to be a lens and then you have to move the window around to be able to see the different
|
||||
// links on the page
|
||||
|
||||
const FOCUS_SIZE = 400;
|
||||
|
||||
function _init(){
|
||||
let root = document.querySelector(':root');
|
||||
let lens = document.getElementsByClassName('lens')[0];
|
||||
let filter = document.getElementById('filter');
|
||||
let hid_hint = false;
|
||||
|
||||
if (!lens){
|
||||
console.log('not doing lens')
|
||||
return
|
||||
}
|
||||
|
||||
// let FOCUS_SIZE = root.style.getPropertyValue('--lens-size')
|
||||
|
||||
root.style.setProperty(
|
||||
'--screen-width',
|
||||
`${window.screen.availWidth}px`
|
||||
);
|
||||
root.style.setProperty(
|
||||
'--screen-height',
|
||||
`${window.screen.availHeight}px`
|
||||
);
|
||||
function set_position(){
|
||||
lens.style.transform = `translate(-${window.screenX}px, -${window.screenY}px)`
|
||||
setTimeout(set_position, 10);
|
||||
}
|
||||
|
||||
function get_blur(){
|
||||
return Math.max(
|
||||
Math.sqrt(
|
||||
(
|
||||
Math.abs(window.innerHeight-FOCUS_SIZE) +
|
||||
Math.abs(window.innerWidth-FOCUS_SIZE)
|
||||
) / 4)-5,
|
||||
0)
|
||||
}
|
||||
|
||||
function set_blur(){
|
||||
let blur_radius = get_blur()
|
||||
filter.style.setProperty(
|
||||
'--blur-radius',
|
||||
`${blur_radius}px`
|
||||
)
|
||||
setTimeout(set_blur, 50);
|
||||
}
|
||||
|
||||
function show_hint(){
|
||||
if (get_blur() > 3) {
|
||||
let hint = document.getElementById('hint');
|
||||
hint.classList.remove('hidden')
|
||||
|
||||
setTimeout(check_hint, 2000);
|
||||
}
|
||||
}
|
||||
|
||||
function check_hint(){
|
||||
if (get_blur() < 3){
|
||||
let hint = document.getElementById('hint');
|
||||
hint.classList.add('rehidden');
|
||||
hid_hint = true;
|
||||
|
||||
}
|
||||
if (hid_hint === false){
|
||||
setTimeout(check_hint, 100);
|
||||
}
|
||||
}
|
||||
|
||||
set_position();
|
||||
set_blur();
|
||||
setTimeout(show_hint, 2000);
|
||||
// setTimeout(set_size,100);
|
||||
// set_size()
|
||||
}
|
||||
|
||||
export function init(){
|
||||
|
||||
// document.addEventListener('load', () => {
|
||||
// _init();
|
||||
// })
|
||||
_init();
|
||||
}
|
||||
|
|
@ -1,248 +0,0 @@
|
|||
const PADDING = 50;
|
||||
|
||||
const PADDLE_SIZE = {
|
||||
width: 500,
|
||||
height: 30,
|
||||
}
|
||||
const BALL_SIZE = {
|
||||
width: 50,
|
||||
height: 30
|
||||
}
|
||||
|
||||
const PADDLE_POSITION = {
|
||||
x: (window.screen.availWidth / 2) - (PADDLE_SIZE.width/2),
|
||||
y: window.screen.availHeight - PADDLE_SIZE.height - PADDING
|
||||
}
|
||||
|
||||
const TARGET_SIZE = {
|
||||
width: 300,
|
||||
height: 100
|
||||
}
|
||||
|
||||
const TARGET_GRID = {
|
||||
x: 4,
|
||||
y: 3
|
||||
}
|
||||
|
||||
|
||||
const PADDLE_MOVE = 30;
|
||||
|
||||
|
||||
function shuffleArray(array) {
|
||||
return array.map(value => ({ value, sort: Math.random() }))
|
||||
.sort((a, b) => a.sort - b.sort)
|
||||
.map(({ value }) => value)
|
||||
}
|
||||
|
||||
|
||||
function plan_grid(){
|
||||
let n_targets = TARGET_GRID.x * TARGET_GRID.y;
|
||||
let pages, page_objects;
|
||||
// get pages that are real pages
|
||||
pages = document.querySelectorAll('.page-metadata');
|
||||
page_objects = Array.from(pages).map((page) => {
|
||||
return {
|
||||
url: page.getAttribute('url')
|
||||
}
|
||||
})
|
||||
// pad end with blanks
|
||||
page_objects = Object.assign(new Array(n_targets).fill({url:'blank.html'}), page_objects);
|
||||
// shuffle array order
|
||||
page_objects = shuffleArray(page_objects)
|
||||
|
||||
// arrange on a grid!
|
||||
page_objects = page_objects.map((page, idx) => {
|
||||
let col = idx % TARGET_GRID.x;
|
||||
let row = Math.floor(idx / TARGET_GRID.x);
|
||||
let col_grid_width = (window.screen.availWidth-(PADDING*2)) / TARGET_GRID.x
|
||||
|
||||
return {
|
||||
...page,
|
||||
x: (col_grid_width * col) + PADDING,
|
||||
y: (PADDING*2 + TARGET_SIZE.height) * row
|
||||
}
|
||||
})
|
||||
|
||||
return page_objects
|
||||
}
|
||||
|
||||
function popupPosition(popup){
|
||||
let pos = {
|
||||
left: popup.screenLeft,
|
||||
right: popup.screenLeft + popup.outerWidth,
|
||||
top: popup.screenTop,
|
||||
bottom: popup.screenTop + popup.outerHeight
|
||||
}
|
||||
pos.centerX = (pos.left + pos.right) / 2
|
||||
pos.centerY = (pos.top + pos.bottom) / 2
|
||||
return pos
|
||||
}
|
||||
|
||||
function checkIntersect(a, b){
|
||||
let pos_a = popupPosition(a);
|
||||
let pos_b = popupPosition(b);
|
||||
// console.log(pos_a,pos_b)
|
||||
// check if intersect
|
||||
let overlap = !(
|
||||
pos_a.right < pos_b.left ||
|
||||
pos_a.left > pos_b.right ||
|
||||
pos_a.bottom < pos_b.top ||
|
||||
pos_a.top > pos_b.bottom
|
||||
)
|
||||
|
||||
if (overlap === false){
|
||||
return false
|
||||
}
|
||||
|
||||
// if overlap, check what side we are on
|
||||
if (Math.abs(pos_a.centerX-pos_b.centerX) > Math.abs(pos_a.centerY-pos_b.centerY)){
|
||||
// more X difference than y difference, we are left or right
|
||||
if (pos_a.centerX > pos_b.centerX){
|
||||
// a is to the right of b
|
||||
return('right')
|
||||
} else {
|
||||
return('left')
|
||||
}
|
||||
} else {
|
||||
if (pos_a.centerY > pos_b.centerY){
|
||||
// a is below b
|
||||
return('bottom')
|
||||
} else {
|
||||
return('top')
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function endGame(popups, ball, paddle){
|
||||
for (let popup of popups){
|
||||
popup.popup.close()
|
||||
}
|
||||
ball.popup.close();
|
||||
paddle.close();
|
||||
}
|
||||
|
||||
function handleIntersect(popup, popups){
|
||||
if (popup.url === "blank.html"){
|
||||
popup.popup.close()
|
||||
let index = popups.indexOf(popup);
|
||||
if (index > -1){
|
||||
popups.splice(index, 1);
|
||||
}
|
||||
console.log('closing popup')
|
||||
return false
|
||||
} else {
|
||||
window.location = popup.url
|
||||
console.log('going to new page!')
|
||||
return true;
|
||||
}
|
||||
}
|
||||
|
||||
function updateBall(ball, popups, paddle){
|
||||
let end_game = false;
|
||||
ball.position = popupPosition(ball.popup)
|
||||
// console.log(ball.position, popups.popup)
|
||||
// check bounce
|
||||
if (ball.position.right === window.screen.availWidth || ball.position.left === 0){
|
||||
ball.velocity.x *= -1
|
||||
}
|
||||
if (ball.position.top === screen.availTop){
|
||||
ball.velocity.y *= -1
|
||||
}
|
||||
|
||||
// check intersections with other windows
|
||||
for (let popup of popups){
|
||||
// console.log(popup.popup)
|
||||
let intersected = checkIntersect(ball.popup, popup.popup)
|
||||
if (intersected === 'top' || intersected === 'bottom'){
|
||||
ball.velocity.y *= -1;
|
||||
} else if (intersected === 'left' || intersected === 'right'){
|
||||
ball.velocity.x *= -1;
|
||||
}
|
||||
if (intersected){
|
||||
console.log(intersected);
|
||||
end_game = handleIntersect(popup, popups);
|
||||
break
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
if (checkIntersect(ball.popup, paddle) && ball.velocity.y < 0){
|
||||
ball.velocity.y *= -1;
|
||||
}
|
||||
|
||||
if (ball.position.bottom === window.screen.availHeight && ball.velocity.y < 0){
|
||||
// ball died :(
|
||||
// end_game = true;
|
||||
ball.popup.close();
|
||||
ball = init_ball();
|
||||
}
|
||||
|
||||
if (end_game){
|
||||
endGame(popups, ball, paddle)
|
||||
} else {
|
||||
ball.popup.moveBy(ball.velocity.x, -ball.velocity.y)
|
||||
window.setTimeout(() => {updateBall(ball, popups, paddle)}, 100)
|
||||
}
|
||||
}
|
||||
|
||||
function init_ball(){
|
||||
let ball_popup = window.open('ball.html', 'ball', `popup=true,width=${BALL_SIZE.width},height=${BALL_SIZE.height},screenX=${PADDLE_POSITION.x},screenY=${PADDLE_POSITION.y-BALL_SIZE.height}`)
|
||||
ball_popup.moveTo(PADDLE_POSITION.x,PADDLE_POSITION.y)
|
||||
|
||||
let ball = {
|
||||
popup: ball_popup,
|
||||
velocity: {x: 20, y: 20}
|
||||
};
|
||||
return ball
|
||||
}
|
||||
|
||||
|
||||
function init_controller(){
|
||||
let grid = plan_grid();
|
||||
console.log(grid);
|
||||
let popups = grid.map((page, idx) => {
|
||||
return{ ...page,
|
||||
popup: window.open(page.url, `target-${idx}`, `popup=true,width=${TARGET_SIZE.width},height=${TARGET_SIZE.height},left=${page.x},top=${page.y}`)
|
||||
}
|
||||
})
|
||||
let paddle = window.open('paddle.html', 'paddle', `popup=true,width=${PADDLE_SIZE.width},height=${PADDLE_SIZE.height},screenX=${PADDLE_POSITION.x},screenY=${PADDLE_POSITION.y}`)
|
||||
|
||||
let ball = init_ball();
|
||||
updateBall(ball, popups, paddle);
|
||||
}
|
||||
|
||||
function init_paddle(){
|
||||
window.resizeTo(PADDLE_SIZE.width, PADDLE_SIZE.height);
|
||||
window.moveTo(
|
||||
PADDLE_POSITION.x,
|
||||
PADDLE_POSITION.y
|
||||
)
|
||||
|
||||
document.addEventListener('keydown', (event) => {
|
||||
if (event.key == "ArrowLeft"){
|
||||
if (window.screenX > PADDLE_MOVE) {
|
||||
window.moveBy(-PADDLE_MOVE, 0)
|
||||
} else {
|
||||
window.moveBy(-window.screenX, 0);
|
||||
}
|
||||
} else if (event.key == "ArrowRight"){
|
||||
let right_edge = window.screenX + window.outerWidth;
|
||||
if (right_edge < window.screen.availWidth - PADDLE_MOVE){
|
||||
window.moveBy(PADDLE_MOVE, 0)
|
||||
} else {
|
||||
window.moveBy(window.screen.availWidth - right_edge, 0)
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
|
||||
|
||||
export function init(){
|
||||
let page_type = document.querySelector('main').getAttribute('page');
|
||||
if (page_type === 'pong'){
|
||||
init_controller();
|
||||
} else if (page_type === "paddle"){
|
||||
init_paddle();
|
||||
}
|
||||
}
|
||||
|
|
@ -30,8 +30,8 @@ github_username: sneakers-the-rat
|
|||
# directories
|
||||
source: ./src
|
||||
destination: ./dist
|
||||
keep_files:
|
||||
- assets # Build settings
|
||||
# keep_files:
|
||||
# - assets # Build settings
|
||||
#theme: minima
|
||||
plugins:
|
||||
- jekyll-feed
|
||||
|
|
|
|||
|
|
@ -34,7 +34,7 @@ module.exports = {
|
|||
// Generates deprecation warning: https://github.com/jantimon/html-webpack-plugin/issues/1501
|
||||
new HtmlWebpackPlugin({
|
||||
// favicon: paths.src + '/images/favicon.png',
|
||||
template: './_assets/template.html', // template file
|
||||
template: './_assets/default.html', // template file
|
||||
filename: '../src/_layouts/default.html' // output file
|
||||
}),
|
||||
],
|
||||
|
|
|
|||
33
src/Gemfile
33
src/Gemfile
|
|
@ -1,33 +0,0 @@
|
|||
source "https://rubygems.org"
|
||||
# Hello! This is where you manage which Jekyll version is used to run.
|
||||
# When you want to use a different version, change it below, save the
|
||||
# file and run `bundle install`. Run Jekyll with `bundle exec`, like so:
|
||||
#
|
||||
# bundle exec jekyll serve
|
||||
#
|
||||
# This will help ensure the proper Jekyll version is running.
|
||||
# Happy Jekylling!
|
||||
gem "jekyll", "~> 4.3.2"
|
||||
# This is the default theme for new Jekyll sites. You may change this to anything you like.
|
||||
gem "minima", "~> 2.5"
|
||||
# If you want to use GitHub Pages, remove the "gem "jekyll"" above and
|
||||
# uncomment the line below. To upgrade, run `bundle update github-pages`.
|
||||
# gem "github-pages", group: :jekyll_plugins
|
||||
# If you have any plugins, put them here!
|
||||
group :jekyll_plugins do
|
||||
gem "jekyll-feed", "~> 0.12"
|
||||
end
|
||||
|
||||
# Windows and JRuby does not include zoneinfo files, so bundle the tzinfo-data gem
|
||||
# and associated library.
|
||||
platforms :mingw, :x64_mingw, :mswin, :jruby do
|
||||
gem "tzinfo", ">= 1", "< 3"
|
||||
gem "tzinfo-data"
|
||||
end
|
||||
|
||||
# Performance-booster for watching directories on Windows
|
||||
gem "wdm", "~> 0.1.1", :platforms => [:mingw, :x64_mingw, :mswin]
|
||||
|
||||
# Lock `http_parser.rb` gem to `v0.6.x` on JRuby builds since newer versions of the gem
|
||||
# do not have a Java counterpart.
|
||||
gem "http_parser.rb", "~> 0.6.0", :platforms => [:jruby]
|
||||
|
|
@ -2,5 +2,6 @@
|
|||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<meta http-equiv="x-ua-compatible" content="ie=edge" />
|
||||
<link rel="stylesheet" href="{{ "/assets/css/main.css" | relative_url }}">
|
||||
|
||||
<title>{{ page.title }}</title>
|
||||
|
|
|
|||
|
|
@ -1,11 +0,0 @@
|
|||
---
|
||||
layout: default
|
||||
---
|
||||
<div class="cartridge">
|
||||
<div class="clip">
|
||||
|
||||
</div>
|
||||
<div class="label">
|
||||
{{ page.title }}
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -1,35 +0,0 @@
|
|||
---
|
||||
layout: default
|
||||
---
|
||||
|
||||
<div id="console">
|
||||
|
||||
<div id="popups">
|
||||
<button onclick="showPopups();">
|
||||
SHOW POPUPS
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div id="container">
|
||||
<div id="slot">
|
||||
|
||||
</div>
|
||||
<div id="slot-label">
|
||||
I AM A SLOT PUT THINGS IN ME
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{% for cartridge in site.pages %}
|
||||
{% if cartridge.layout == "cartridge" %}
|
||||
<ul class="cartridge-list" id="cartridges">
|
||||
<li
|
||||
class="cartridge-metadata"
|
||||
url="{{ cartridge.url }}"
|
||||
title="{{ cartridge.title }}"
|
||||
>
|
||||
<a href="{{ cartridge.url }}">{{ cartridge.title }}</a>
|
||||
</li>
|
||||
</ul>
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
</div>
|
||||
|
|
@ -1,8 +1,10 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en" prefix="foaf: http://xmlns.com/foaf/0.1/"><head><script defer src="/assets/app.bundle.js"></script></head>
|
||||
<html lang="en" prefix="foaf: http://xmlns.com/foaf/0.1/"><head>
|
||||
|
||||
{% include head.html %}
|
||||
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
{% if page.navigation %}
|
||||
|
|
|
|||
|
|
@ -1,26 +0,0 @@
|
|||
---
|
||||
layout: default
|
||||
---
|
||||
|
||||
<div id="pong" style="background-color: {{ page.color }}">
|
||||
|
||||
<div class="content">{{ content }}</div>
|
||||
|
||||
<ul class="page-list" id="pages">
|
||||
{% for p in site.pages %}
|
||||
{% if p.page_name == "target" %}
|
||||
|
||||
<li
|
||||
class="page-metadata"
|
||||
url="{{ p.url }}"
|
||||
title="{{ p.title }}"
|
||||
>
|
||||
<a href="{{ cartridge.url }}">{{ cartridge.title }}</a>
|
||||
</li>
|
||||
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
|
||||
|
|
@ -1,6 +1,7 @@
|
|||
body {
|
||||
width: 100%;
|
||||
height: 100%
|
||||
height: 100%;
|
||||
background-color: #ff0000;
|
||||
}
|
||||
|
||||
#container {
|
||||
|
|
@ -4,7 +4,3 @@
|
|||
@import 'scaffolding';
|
||||
@import 'layout';
|
||||
@import 'text';
|
||||
|
||||
@import 'pages/home';
|
||||
@import 'pages/console';
|
||||
@import 'pages/pong';
|
||||
|
|
@ -1,60 +0,0 @@
|
|||
.cartridge-list {
|
||||
//display: none;
|
||||
}
|
||||
|
||||
#console {
|
||||
|
||||
#container {
|
||||
position: absolute;
|
||||
bottom: 20px;
|
||||
right: 20px;
|
||||
height: 200px;
|
||||
width: 50%;
|
||||
border: 2px solid black;
|
||||
|
||||
|
||||
#slot{
|
||||
border: 3px solid black;
|
||||
width: 300px;
|
||||
height: 50px;
|
||||
|
||||
}
|
||||
#slot-label {
|
||||
font-family: monospace;
|
||||
top: 3.5em;
|
||||
position:relative;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
#popups {
|
||||
position:absolute;
|
||||
top: 20%;
|
||||
left: 20%;
|
||||
}
|
||||
|
||||
& * {
|
||||
position: absolute;
|
||||
}
|
||||
}
|
||||
|
||||
.cartridge {
|
||||
position:absolute;
|
||||
top:0;
|
||||
left:0;
|
||||
width: 300px;
|
||||
height: 200px;
|
||||
border: 2px solid black;
|
||||
|
||||
box-shadow: 5px 5px black;
|
||||
|
||||
.label {
|
||||
position: absolute;
|
||||
top: 20px;
|
||||
left: 20px;
|
||||
font-family: monospace;
|
||||
}
|
||||
|
||||
|
||||
|
||||
}
|
||||
|
|
@ -1,76 +0,0 @@
|
|||
:root {
|
||||
--screen-width: 100vw;
|
||||
--screen-height: 100vh;
|
||||
--blur-radius: 100px;
|
||||
--lens-size: 400px;
|
||||
--hint-color: deeppink;
|
||||
}
|
||||
|
||||
.lens {
|
||||
|
||||
//--screen-left: 0;
|
||||
//--screen-top: 0;
|
||||
position: absolute;
|
||||
width: var(--screen-width);
|
||||
height: var(--screen-height);
|
||||
//top: var(--screen-top);
|
||||
//left: var(--screen-left);
|
||||
top: 0;
|
||||
left: 0;
|
||||
|
||||
transition: transform ease 100ms;
|
||||
}
|
||||
|
||||
#filter {
|
||||
z-index: 999;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
left:0;
|
||||
top:0;
|
||||
position:absolute;
|
||||
backdrop-filter: blur(var(--blur-radius));
|
||||
//background-color: #ffffffff;
|
||||
}
|
||||
|
||||
#hint {
|
||||
width: var(--lens-size);
|
||||
height: var(--lens-size);
|
||||
position: absolute;
|
||||
border: 3px solid var(--hint-color);
|
||||
top: calc(50% - var(--lens-size)/2);
|
||||
left: calc(50% - var(--lens-size)/2);
|
||||
border-radius: calc(var(--lens-size));
|
||||
transition: opacity 1000ms;
|
||||
opacity: 100%;
|
||||
z-index: 10000;
|
||||
|
||||
text-align: center;
|
||||
backdrop-filter: blur(10px);
|
||||
|
||||
p {
|
||||
font-family: Times, "Times New Roman", serif;
|
||||
background-color: deeppink;
|
||||
font-weight: bold;
|
||||
font-style: italic;
|
||||
width: 50%;
|
||||
color: white;
|
||||
margin: auto;
|
||||
font-size: 2em;
|
||||
top: 40%;
|
||||
position: relative;
|
||||
//left: 50%;
|
||||
}
|
||||
|
||||
&.hidden, &.rehidden {
|
||||
border-color: #ff000000;
|
||||
opacity: 0%;
|
||||
//transition: all 1000ms;
|
||||
|
||||
}
|
||||
|
||||
&.hidden {
|
||||
transition: all 0ms;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
|
@ -1,28 +0,0 @@
|
|||
#pong {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
|
||||
.content {
|
||||
text-align: center;
|
||||
font: {
|
||||
family: monospace;
|
||||
size: 3em;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.page-list {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.pong-ball {
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
left: 0;
|
||||
top: 0;
|
||||
position: absolute;
|
||||
}
|
||||
4
src/assets/css/main.scss
Normal file
4
src/assets/css/main.scss
Normal file
|
|
@ -0,0 +1,4 @@
|
|||
---
|
||||
---
|
||||
|
||||
@import "index";
|
||||
|
|
@ -1,5 +0,0 @@
|
|||
---
|
||||
layout: cartridge
|
||||
title: blog
|
||||
page_name: cartridge
|
||||
---
|
||||
|
|
@ -1,4 +0,0 @@
|
|||
---
|
||||
layout: console
|
||||
page_name: console
|
||||
---
|
||||
BIN
src/img/ball.png
BIN
src/img/ball.png
Binary file not shown.
|
Before Width: | Height: | Size: 5.8 KiB |
|
|
@ -1,8 +0,0 @@
|
|||
---
|
||||
title: about
|
||||
page_name: target
|
||||
layout: pong
|
||||
color: blue
|
||||
---
|
||||
|
||||
ABOUT
|
||||
|
|
@ -1,7 +0,0 @@
|
|||
---
|
||||
layout: pong
|
||||
title: ball
|
||||
page_name: ball
|
||||
---
|
||||
|
||||
<img class="pong-ball" src="/img/ball.png"/>
|
||||
|
|
@ -1,5 +0,0 @@
|
|||
---
|
||||
title: target
|
||||
page_name: blank_target
|
||||
layout: pong
|
||||
---
|
||||
|
|
@ -1,7 +0,0 @@
|
|||
---
|
||||
title: blog
|
||||
page_name: target
|
||||
layout: pong
|
||||
color: pink
|
||||
---
|
||||
BLOG
|
||||
|
|
@ -1,6 +0,0 @@
|
|||
---
|
||||
layout: pong
|
||||
page_name: pong
|
||||
|
||||
---
|
||||
|
||||
|
|
@ -1,5 +0,0 @@
|
|||
---
|
||||
layout: pong
|
||||
page_name: paddle
|
||||
title: paddle
|
||||
---
|
||||
Loading…
Reference in a new issue