barrett/barrettruth.com
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

refactor: make styles, js common for posts

Browse source
This commit is contained in:
Barrett Ruth 2024-06-15 14:35:39 -05:00
parent 3865436f75
commit 2a8c3194d1
7 changed files with 143 additions and 87 deletions
Download patch file Download diff file Expand all files Collapse all files

2
index.html
View file

@ -4,6 +4,7 @@
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="stylesheet" href="styles/common.css" />
<link rel="stylesheet" href="styles/index.css" />
<link rel="icon" type="image/webp" href="/public/logo.webp" />
<title>Barrett Ruth</title>
@ -51,6 +52,7 @@
<a target="_blank" href="mailto:br.barrettruth@gmail.com">Email</a>
</div>
</footer>
<script src="scripts/common.js"></script>
<script src="scripts/index.js"></script>
</body>
</html>

20
posts/from-github-pages-to-aws.html
View file

@ -4,13 +4,25 @@
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="stylesheet" href="../styles/index.css" />
<link rel="stylesheet" href="../styles/common.css" />
<link rel="stylesheet" href="../styles/post.css" />
<link rel="icon" type="image/webp" href="../public/logo.webp" />
<title>Barrett Ruth</title>
</head>
<body>
<main class="main">main</main>
<footer>foot</footer>
<script src="../scripts/index.js"></script>
<header>
<a href="/" onclick="home(event)">
<div class="terminal-prompt">
<span class="prompt">barrett@ruth:~$</span>
<span class="cursor"></span>
</div>
</a>
</header>
<main class="main">
<ul>
<li>hi</li>
</ul>
</main>
<script src="../scripts/common.js"></script>
</body>
</html>

30
scripts/common.js Normal file
View file

@ -0,0 +1,30 @@
const TERMINAL_PROMPT = "barrett@ruth:~$ ";
let clearing = false;
function clearPrompt(delay, callback) {
if (clearing) return;
clearing = true;
const terminalPrompt = document.querySelector(".terminal-prompt");
const topicLength = terminalPrompt.innerHTML.length - TERMINAL_PROMPT.length;
let i = 0;
function removeChar() {
if (i++ < topicLength) {
terminalPrompt.textContent = terminalPrompt.textContent.slice(0, -1);
setTimeout(removeChar, delay / topicLength);
} else {
i = 0;
clearing = false;
callback && callback();
}
}
removeChar();
}
function goHome(e) {
e.preventDefault();
clearPrompt(500, () => (window.location.href = "/"));
}

25
scripts/index.js
View file

@ -19,31 +19,6 @@ const postMapping = new Map([
["Algorithms", [{ name: "two pointers" }, { name: "convex hull" }]],
]);
const TERMINAL_PROMPT = "barrett@ruth:~$ ";
let clearing = false;
function clearPrompt(delay, callback) {
if (clearing) return;
clearing = true;
const terminalPrompt = document.querySelector(".terminal-prompt");
const topicLength = terminalPrompt.innerHTML.length - TERMINAL_PROMPT.length;
let i = 0;
function removeChar() {
if (i++ < topicLength) {
terminalPrompt.textContent = terminalPrompt.textContent.slice(0, -1);
setTimeout(removeChar, delay / topicLength);
} else {
i = 0;
clearing = false;
callback && callback();
}
}
removeChar();
}
function refresh(e) {
e.preventDefault();

59
styles/common.css Normal file
View file

@ -0,0 +1,59 @@
@font-face {
font-family: "Signifier";
src: url("public/signifier/Signifier-Regular.ttf");
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: "Signifier";
src: url("public/signifier/Signifier-Italic.ttf");
font-weight: normal;
font-style: italic;
}
@font-face {
font-family: "Signifier";
src: url("public/signifier/Signifier-Bold.ttf");
font-weight: bold;
font-style: normal;
}
@font-face {
font-family: "Signifier";
src: url("public/signifier/Signifier-BoldItalic.ttf");
font-weight: bold;
font-style: italic;
}
.graph {
background-image: linear-gradient(
to right,
rgba(200, 200, 200, 0.4) 1px,
transparent 1px
),
linear-gradient(to bottom, rgba(200, 200, 200, 0.4) 1px, transparent 1px);
background-size: 3vw 3vw;
}
.terminal-cursor {
display: inline-block;
width: 10px;
height: 1em;
background-color: white;
border: 1px solid black;
vertical-align: text-top;
animation: blink 1s step-start infinite;
}
@keyframes blink {
50% {
background-color: transparent;
border-color: transparent;
}
}
.terminal-container {
font-family: "Courier New", monospace;
}

58
styles/index.css
View file

@ -1,31 +1,3 @@
@font-face {
font-family: "Signifier";
src: url("public/signifier/Signifier-Regular.ttf");
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: "Signifier";
src: url("public/signifier/Signifier-Italic.ttf");
font-weight: normal;
font-style: italic;
}
@font-face {
font-family: "Signifier";
src: url("public/signifier/Signifier-Bold.ttf");
font-weight: bold;
font-style: normal;
}
@font-face {
font-family: "Signifier";
src: url("public/signifier/Signifier-BoldItalic.ttf");
font-weight: bold;
font-style: italic;
}
html,
body {
font-family: "Signifier", serif;
@ -36,15 +8,6 @@ body {
display: flex;
flex-direction: column;
}
.graph {
background-image: linear-gradient(
to right,
rgba(200, 200, 200, 0.4) 1px,
transparent 1px
),
linear-gradient(to bottom, rgba(200, 200, 200, 0.4) 1px, transparent 1px);
background-size: 3vw 3vw;
}
header,
footer {
@ -61,27 +24,6 @@ footer {
justify-content: flex-end;
}
.terminal-cursor {
display: inline-block;
width: 10px;
height: 1em;
background-color: white;
border: 1px solid black;
vertical-align: text-top;
animation: blink 1s step-start infinite;
}
@keyframes blink {
50% {
background-color: transparent;
border-color: transparent;
}
}
.terminal-container {
font-family: "Courier New", monospace;
}
.main {
flex: 1;
display: flex;

36
styles/post.css Normal file
View file

@ -0,0 +1,36 @@
@font-face {
font-family: "Signifier";
src: url("public/signifier/Signifier-Regular.ttf");
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: "Signifier";
src: url("public/signifier/Signifier-Italic.ttf");
font-weight: normal;
font-style: italic;
}
@font-face {
font-family: "Signifier";
src: url("public/signifier/Signifier-Bold.ttf");
font-weight: bold;
font-style: normal;
}
@font-face {
font-family: "Signifier";
src: url("public/signifier/Signifier-BoldItalic.ttf");
font-weight: bold;
font-style: italic;
}
html,
body {
font-family: "Signifier", serif;
overflow: hidden;
margin: 0;
padding: 0;
height: 100%;
}