Move global head to file and split between page-specific and global

This commit is contained in:
Frankie B 2022-09-19 21:21:41 +00:00
parent 222d3303b4
commit 199be00b8c
9 changed files with 42 additions and 127 deletions

View file

@ -1,23 +1,19 @@
<!DOCTYPE html>
<html lang="en">
<head>
<title>Calculators</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<link rel="stylesheet" id="theme" href="../res/css/dark.css" type="text/css" />
<link rel="shortcut icon" href="../res/img/icons/ico/calc.ico" type="image/x-icon">
<!-- Global -->
<?php require('../inc/head.html'); ?>
<meta property="og:type" content="website">
<!-- Page-specific -->
<title>Calculators</title>
<link rel="shortcut icon" href="../res/img/icons/ico/calc.ico" type="image/x-icon">
<meta property="og:title" content="Calculators">
<meta property="og:description" content="C a l c u l a t o r s">
<meta property="og:image" content="/res/img/icons/png/calc.png">
<script lang="javascript" src="../res/js/themeswap.js"></script>
</head>
<body>
<div class="page">
<?php require('../nav.php') ?>
<?php require('../inc/nav.php') ?>
<div id="pagebody">
<div id="content">

View file

@ -2,22 +2,19 @@
<!DOCTYPE html>
<html lang="en">
<head>
<title>Calculators</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<link rel="stylesheet" id="theme" href="../res/css/dark.css" type="text/css" />
<link rel="shortcut icon" href="../res/img/icons/ico/calc.ico" type="image/x-icon">
<!-- Global -->
<?php require('../inc/head.html'); ?>
<meta property="og:type" content="website">
<!-- Page-specific -->
<title>Calculators</title>
<link rel="shortcut icon" href="../res/img/icons/ico/calc.ico" type="image/x-icon">
<meta property="og:title" content="Calculators">
<meta property="og:description" content="C a l c u l a t o r s">
<meta property="og:image" content="/res/img/icons/png/calc.png">
<script lang="javascript" src="../res/js/themeswap.js"></script>
</head>
<body>
<div class="page">
<?php require('../nav.php') ?>
<?php require('../inc/nav.php') ?>
<div id="pagebody">
<div id="content">

4
inc/head.html Normal file
View file

@ -0,0 +1,4 @@
<meta charset="utf-8">
<meta property="og:type" content="website">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" id="theme" href="/res/css/dark.css" type="text/css">

View file

@ -1,3 +1,4 @@
<script lang="javascript" src="/res/js/themeswap.js"></script>
<div class="header">
<nav>
<div>

View file

@ -2,46 +2,19 @@
<html lang="en">
<head>
<title>~floppydisk</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" id="theme" href="./res/css/dark.css" type="text/css" />
<!-- Global -->
<?php require('./inc/head.html'); ?>
<meta property="og:type" content="website">
<meta property="og:title" content="~floppydisk">
<!-- Page-specific -->
<title>~floppydisk</title>
> <meta property="og:title" content="~floppydisk">
<meta property="og:description" content="This is the personal homepage of floppydisk. Every now and then, I dabble in software/hardware projects, take pictures, or write blogposts.">
<meta property="og:image" content="/favicon.png">
<!--<script lang="javascript" href="/res/js/themeswap.js"></script>-->
<script>
function addStyleSheet(name, id) {
var path = '/res/css/' + name + '.css';
var old = document.getElementById(id);
if (old && (old.href != path)) {
old.href = path;
}
}
var otherTheme = {
'dark': 'light',
'light': 'dark',
};
var currentTheme = localStorage.getItem('theme');
if (!otherTheme.hasOwnProperty(currentTheme)) {
currentTheme = window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
}
addStyleSheet(currentTheme, 'theme');
function toggleTheme() {
currentTheme = otherTheme[currentTheme] || 'light';
localStorage.setItem('theme', currentTheme);
addStyleSheet(currentTheme, 'theme');
}
</script>
</head>
<body>
<div class="page">
<?php require('nav.php') ?>
<?php require('./inc/nav.php') ?>
<div id="pagebody">
<div id="content">
<p>Hi!</p>

View file

@ -2,22 +2,19 @@
<!DOCTYPE html>
<html lang="en">
<head>
<title>Calculators</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<link rel="stylesheet" id="theme" href="../res/css/dark.css" type="text/css" />
<link rel="shortcut icon" href="../res/img/icons/ico/calc.ico" type="image/x-icon">
<!-- Global -->
<?php require('../inc/head.html'); ?>
<meta property="og:type" content="website">
<!-- Page-specific -->
<title>Calculators</title>
<link rel="shortcut icon" href="../res/img/icons/ico/calc.ico" type="image/x-icon">
<meta property="og:title" content="Calculators">
<meta property="og:description" content="C a l c u l a t o r s">
<meta property="og:image" content="/res/img/icons/png/calc.png">
<script lang="javascript" src="../res/js/themeswap.js"></script>
</head>
<body>
<div class="page">
<?php require('../nav.php') ?>
<?php require('../inc/nav.php') ?>
<div id="pagebody">
<div id="content">

View file

@ -2,22 +2,18 @@
<!DOCTYPE html>
<html lang="en">
<head>
<title>Calculators</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<link rel="stylesheet" id="theme" href="../res/css/dark.css" type="text/css" />
<link rel="shortcut icon" href="../res/img/icons/ico/calc.ico" type="image/x-icon">
<!-- Global -->
<?php require('../inc/head.html'); ?>
<meta property="og:type" content="website">
<meta property="og:title" content="Calculators">
<!-- Page-specific -->
<title>Calculators</title>
<link rel="shortcut icon" href="../res/img/icons/ico/calc.ico" type="image/x-icon">
<meta property="og:description" content="C a l c u l a t o r s">
<meta property="og:image" content="/res/img/icons/png/calc.png">
<script lang="javascript" src="../res/js/themeswap.js"></script>
</head>
<body>
<div class="page">
<?php require('../nav.php') ?>
<?php require('../inc/nav.php') ?>
<div id="pagebody">
<div id="content">

View file

@ -2,21 +2,18 @@
<!DOCTYPE html>
<html lang="en">
<head>
<title>Calculators</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<link rel="stylesheet" id="theme" href="../res/css/dark.css" type="text/css" />
<link rel="shortcut icon" href="../res/img/icons/ico/calc.ico" type="image/x-icon">
<!-- Global -->
<?php require('../inc/head.html'); ?>
<meta property="og:type" content="website">
<!-- Page-specific -->
<title>Calculators</title>
<link rel="shortcut icon" href="../res/img/icons/ico/calc.ico" type="image/x-icon">
<meta property="og:title" content="Calculators">
<meta property="og:description" content="C a l c u l a t o r s">
<meta property="og:image" content="/res/img/icons/png/calc.png">
<script lang="javascript" src="../res/js/themeswap.js"></script>
</head>
<body>
<?php require('../nav.php') ?>
<?php require('../inc/nav.php') ?>
<div id="pagebody">
<div id="content">

View file

@ -1,46 +0,0 @@
<!DOCTYPE html>
<html lang="en">
<head>
<title>Calculators</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<link rel="stylesheet" id="theme" href="../res/css/dark.css" type="text/css" />
<link rel="shortcut icon" href="../res/img/icons/ico/calc.ico" type="image/x-icon">
<meta property="og:type" content="website">
<meta property="og:title" content="Calculators">
<meta property="og:description" content="C a l c u l a t o r s">
<meta property="og:image" content="/res/img/icons/png/calc.png">
<script lang="javascript" src="../res/js/themeswap.js"></script>
</head>
<body>
<div class="page">
<div class="header">
<nav>
<div>
<a href="../me/">about</a> |
<a href="../pics/">pics</a> |
<a href="../projects/">projects</a> |
<a href="../cgit">repos</a> |
<a href="../interblag/">weblog</a> |
calculators
</div>
</nav>
<div class="pagetree">
<div style="float: left;">Design based on <a href="https://finalrewind.org/">finalrewind.org</a></div>
<span class="title">
<a href="/">~floppydisk</a> / calculators
</span>
<div style="float: right;"><a onClick="javascript:toggleTheme()">dark / light mode</a></div>
</div>
</div> <!-- header -->
<div id="pagebody">
<div id="content">
</div> <!-- content -->
</div> <!-- pagebody -->
</div> <!-- page -->
</body>
</html>