Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Post css naked day #43

Merged
merged 4 commits into from
Apr 10, 2024
Merged

Post css naked day #43

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
155d68a
Revert "remove all styles and comments"
alifeee Apr 6, 2024
733cfaa
write new similarities
alifeee Apr 8, 2024
4bcd6e6
Reset `similar.html` files
alifeee Apr 8, 2024
bf8c2f7
Merge branch 'main' into post-css-naked-day
alifeee Apr 10, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
62 changes: 56 additions & 6 deletions bike-to-cambridge/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -34,9 +34,12 @@
<!-- favicon -->
<link rel="icon" type="image/png" href="../favicon.png" />
<!-- stylesheets -->

<link rel="stylesheet" href="../stylesheet.css" />
<!-- fonts -->

<link
rel="stylesheet"
href="https://fonts.googleapis.com/css?family=Josefin+Sans|Roboto"
/>
<!-- zero-md: https://github.com/zerodevx/zero-md -->
<script type="module" src="../zero-md.js"></script>
<!-- alpinejs -->
Expand Down Expand Up @@ -82,14 +85,52 @@ <h1>alifeee's blog</h1>
<section id="content">
<zero-md src="./bike-to-cambridge.md" no-shadow>
<template data-merge="append">


<link rel="stylesheet" href="../stylesheet_md.css" />
<style>
/* from https://css-tricks.com/full-width-containers-limited-width-parents/ */
/* images with src="url.png#wider" are selected :) */
.markdown-body img[src$="wider"] {
max-height: unset;
max-width: unset;
--w-vw: 90vw;
--w-rem: 60rem;
--w: min(var(--w-vw), var(--w-rem));
/* min-width: 40rem; */
overflow-x: auto;
width: var(--w);
position: relative;
left: 50%;
right: 50%;
margin-left: calc(-1 * var(--w) / 2);
margin-right: calc(-1 * var(--w) / 2);
}
:host {
contain: unset;
}
</style>
</template>
</zero-md>
</section>
<hr />


<section id="comments">
<script
src="https://giscus.app/client.js"
data-repo="alifeee/blog"
data-repo-id="R_kgDOJaqeLQ"
data-category="comments"
data-category-id="DIC_kwDOJaqeLc4CZQST"
data-mapping="og:title"
data-strict="1"
data-reactions-enabled="1"
data-emit-metadata="0"
data-input-position="top"
data-theme="light"
data-lang="en"
crossorigin="anonymous"
async
></script>
</section>

<section id="similar">
<h1>Similar posts</h1>
Expand All @@ -116,5 +157,14 @@ <h1>Similar posts</h1>
</footer>
</body>


<style>
#background {
position: fixed;
top: 0;
bottom: 0;
margin: auto;
z-index: -1;
opacity: 0.1;
}
</style>
</html>
55 changes: 48 additions & 7 deletions factorio-proximity-chat/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -31,9 +31,12 @@
<!-- favicon -->
<link rel="icon" type="image/png" href="../favicon.png" />
<!-- stylesheets -->

<link rel="stylesheet" href="../stylesheet.css" />
<!-- fonts -->

<link
rel="stylesheet"
href="https://fonts.googleapis.com/css?family=Josefin+Sans|Roboto"
/>
<!-- zero-md: https://github.com/zerodevx/zero-md -->
<script type="module" src="../zero-md.js"></script>
<!-- alpinejs -->
Expand Down Expand Up @@ -78,15 +81,42 @@ <h1>alifeee's blog</h1>
<section id="content">
<zero-md src="./factorio-proximity-chat.md" no-shadow>
<template data-merge="append">



<link rel="stylesheet" href="../stylesheet_md.css" />
<style>
/* by default, tokens (=, +, etc) have a background that...
doesn't get set by themes */
.language-css .token.string,
.style .token.string,
.token.entity,
.token.operator,
.token.url {
background: none;
}
</style>
<link href="prism-atom-dark.css" rel="stylesheet" />
</template>
</zero-md>
</section>
<hr />


<section id="comments">
<script
src="https://giscus.app/client.js"
data-repo="alifeee/blog"
data-repo-id="R_kgDOJaqeLQ"
data-category="comments"
data-category-id="DIC_kwDOJaqeLc4CZQST"
data-mapping="og:title"
data-strict="1"
data-reactions-enabled="1"
data-emit-metadata="0"
data-input-position="top"
data-theme="dark"
data-lang="en"
crossorigin="anonymous"
async
></script>
</section>

<section id="similar">
<h1>Similar posts</h1>
Expand All @@ -112,5 +142,16 @@ <h1>Similar posts</h1>
<a class="backlink" href="../">Back to main page</a>
</footer>
</body>

<style>
:root {
--text-colour: #fff;
--link-colour: #e39827;
--unimportanttext-colour: #ccc;
--border-colour: #e39827;
--background-colour: #002b02;
}
body {
background-image: url("./images/grass-tiled.jpg");
}
</style>
</html>
55 changes: 0 additions & 55 deletions factorio-proximity-chat/similar.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,55 +0,0 @@
<li class="post">
<a class="link" href=".././hull-bus-sign">
<div class="preview-image">
<img alt="Sketch of Dot Matrix Display showing the text 'Dot Matrix Display'" height="290" src=".././hull-bus-sign/og-image.png" width="700"/>
</div>
<hgroup class="info">
<h2 class="title">
Hull Bus Terminal Signs: Making Pong on an old Dot-Matrix
Display
</h2>
<p class="date">
<time datetime="2023-10-08">2023-10-08</time>
</p>
<ul class="categories">
<li class="electronics">electronics</li>
<li class="hackspaces">hackspaces</li>
</ul>
</hgroup>
</a>
</li>
<li class="post">
<a class="link" href=".././font-workshop">
<div class="preview-image">
<img alt='Text, "FONT MAKING WORKSHOP!"' height="450" src=".././font-workshop/images/poster.svg" width="450"/>
</div>
<hgroup class="info">
<h2 class="title">I ran a computer font-making workshop!</h2>
<p class="date">
<time datetime="2024-03-09">2024-03-09</time>
</p>
<ul class="categories">
<li class="font">font</li>
<li class="hackspaces">hackspaces</li>
</ul>
</hgroup>
</a>
</li>
<li class="post">
<a class="link" href=".././steam-collage-api">
<div class="preview-image">
<img alt="Thumbnail of alifeee's most played games on Steam." height="215" src=".././steam-collage-api/images/mosaic_small.jpg" width="450"/>
</div>
<hgroup class="info">
<h2 class="title">
Coding Projects! #1: Collage generator for Steam games
</h2>
<p class="date">
<time datetime="2023-08-23">2023-08-23</time>
</p>
<ul class="categories">
<li class="programming">programming</li>
</ul>
</hgroup>
</a>
</li>
80 changes: 74 additions & 6 deletions font-workshop/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -32,9 +32,12 @@
<!-- favicon -->
<link rel="icon" type="image/png" href="../favicon.png" />
<!-- stylesheets -->

<link rel="stylesheet" href="../stylesheet.css" />
<!-- fonts -->

<link
rel="stylesheet"
href="https://fonts.googleapis.com/css?family=Josefin+Sans|Roboto"
/>

<!-- libraries -->
<!-- zero-md: https://github.com/zerodevx/zero-md -->
Expand Down Expand Up @@ -66,7 +69,16 @@
></script>

<!-- extra scripts -->

<style>
body {
opacity: 0.8;
background-image: radial-gradient(
#444cf7 0.5px,
var(--background-colour) 0.5px
);
background-size: 10px 10px;
}
</style>
</head>

<body>
Expand All @@ -83,14 +95,70 @@ <h1>alifeee's blog</h1>
<section id="content">
<zero-md src="./font-workshop.md" no-shadow>
<template data-merge="append">


<link rel="stylesheet" href="../stylesheet_md.css" />
<style>
@font-face {
font-family: "classic-neil";
src: url("fonts/classic-neil/classicneil.woff") format("woff");
}
.font--classic-neil * {
font-family: "classic-neil", cursive;
}
@font-face {
font-family: "vmorse";
src: url("fonts/vmorse/VMORSE.woff") format("woff");
}
.font--vmorse * {
font-family: "vmorse", cursive;
}
@font-face {
font-family: "font";
src: url("fonts/font/font.woff") format("woff");
}
.font--font * {
font-family: "font", sans-serif;
}
@font-face {
font-family: "Ricardo";
src: url("fonts/ricardo/Ricardo.woff") format("woff");
}
.font--ricardo * {
font-family: "Ricardo", cursive;
}
@font-face {
font-family: "A Font";
src: url("fonts/a-font/a-font.woff") format("woff");
}
.font--a-font * {
font-family: "A Font", cursive;
}
.font--cursive * {
font-family: cursive;
}
</style>
</template>
</zero-md>
</section>
<hr />


<section id="comments">
<script
src="https://giscus.app/client.js"
data-repo="alifeee/blog"
data-repo-id="R_kgDOJaqeLQ"
data-category="comments"
data-category-id="DIC_kwDOJaqeLc4CZQST"
data-mapping="og:title"
data-strict="1"
data-reactions-enabled="1"
data-emit-metadata="0"
data-input-position="top"
data-theme="light"
data-lang="en"
crossorigin="anonymous"
async
></script>
</section>

<section id="similar">
<h1>Similar posts</h1>
Expand Down
57 changes: 0 additions & 57 deletions font-workshop/similar.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,57 +0,0 @@
<li class="post">
<a class="link" href=".././making-bogface">
<div class="preview-image">
<img alt="bogface text" height="450" src=".././making-bogface/front-page-image.png" width="450"/>
</div>
<hgroup class="info">
<h2 class="title">
Making my own Font - <span class="BogFace">BogFace</span>
</h2>
<p class="date">
<time datetime="2023-12-23">2023-12-23</time>
</p>
<ul class="categories">
<li class="font">font</li>
</ul>
</hgroup>
</a>
</li>
<li class="post">
<a class="link" href=".././hackspace-adventures">
<div class="preview-image">
<img alt="three hackspace logos" height="450" src=".././hackspace-adventures/og-image.png" width="450"/>
</div>
<hgroup class="info">
<h2 class="title">
What, why, and how is a Hackspace, and what have I used them
for?
</h2>
<p class="date">
<time datetime="2023-11-07">2023-11-07</time>
</p>
<ul class="categories">
<li class="hackspaces">hackspaces</li>
</ul>
</hgroup>
</a>
</li>
<li class="post">
<a class="link" href=".././hull-bus-sign">
<div class="preview-image">
<img alt="Sketch of Dot Matrix Display showing the text 'Dot Matrix Display'" height="290" src=".././hull-bus-sign/og-image.png" width="700"/>
</div>
<hgroup class="info">
<h2 class="title">
Hull Bus Terminal Signs: Making Pong on an old Dot-Matrix
Display
</h2>
<p class="date">
<time datetime="2023-10-08">2023-10-08</time>
</p>
<ul class="categories">
<li class="electronics">electronics</li>
<li class="hackspaces">hackspaces</li>
</ul>
</hgroup>
</a>
</li>
Loading
Loading