droped tailwindcss and added css helper functions and styling
This commit is contained in:
parent
aa80670c99
commit
08ee6f32f8
88
css/srx.css
88
css/srx.css
|
|
@ -1,14 +1,90 @@
|
||||||
|
:root {
|
||||||
|
--c_dark: #191919;
|
||||||
|
--c_light: #fff;
|
||||||
|
--c_scheme_bg: var(--c_dark);
|
||||||
|
--c_scheme_el: var(--c_light);
|
||||||
|
}
|
||||||
|
|
||||||
|
::selection {
|
||||||
|
background-color: #fece30;
|
||||||
|
color: var(--c_light);
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (prefers-color-scheme: light) {
|
||||||
|
:root {
|
||||||
|
--c_scheme_bg: var(--c_light);
|
||||||
|
--c_scheme_el: var(--c_dark);
|
||||||
|
--c_scheme_filter: grayscale(0);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
@font-face {
|
@font-face {
|
||||||
font-family: 'workbench';
|
font-family: 'workbench';
|
||||||
src: url('../font/WORKBENCH-REGULAR.ttf') format('truetype');
|
src: url('../font/WORKBENCH-REGULAR.ttf') format('truetype');
|
||||||
}
|
}
|
||||||
|
|
||||||
h1,
|
.p-uppercase {
|
||||||
h2,
|
text-transform: uppercase;
|
||||||
h3,
|
letter-spacing: 0.2rem;
|
||||||
h4,
|
}
|
||||||
h5,
|
|
||||||
h6 {
|
.p-bold {
|
||||||
|
font-weight: 500;
|
||||||
|
letter-spacing: 0.3rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.p-text-style {
|
||||||
|
font-weight: 300;
|
||||||
|
letter-spacing: 0.05rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.p-separator {
|
||||||
|
width: 7rem;
|
||||||
|
border: 1px solid var(--c_scheme_el);
|
||||||
|
margin: 1.8rem auto 1.4rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
.figure {
|
||||||
|
width: 50%;
|
||||||
|
margin: 0 auto 2rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.figure__img {
|
||||||
|
width: 100%;
|
||||||
|
height: auto;
|
||||||
|
filter: var(--c_scheme_filter);
|
||||||
|
transition: filter 0.3s ease-in;
|
||||||
|
}
|
||||||
|
|
||||||
|
.figure__caption {
|
||||||
|
width: 80%;
|
||||||
|
font-size: 0.9rem;
|
||||||
|
line-height: 1.8;
|
||||||
|
margin: 0 auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.article {
|
||||||
|
max-width: 54rem;
|
||||||
|
text-align: center;
|
||||||
|
font-family: "Oswald", sans-serif;
|
||||||
|
margin: 0 auto;
|
||||||
|
padding: 1.5rem 8vmin 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.article__headline {
|
||||||
|
color: var(--c_scheme_el);
|
||||||
font: inherit;
|
font: inherit;
|
||||||
font-family: workbench;
|
font-family: workbench;
|
||||||
|
font-size: 2rem;
|
||||||
|
font-weight: 200;
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
body {
|
||||||
|
width: 100%;
|
||||||
|
min-width: 20rem;
|
||||||
|
background-color: var(--c_scheme_bg);
|
||||||
|
color: var(--c_scheme_el);
|
||||||
|
margin: 0;
|
||||||
}
|
}
|
||||||
148
index.html
148
index.html
|
|
@ -1,79 +1,77 @@
|
||||||
<!doctype html>
|
<!doctype html>
|
||||||
<html lang="en">
|
<html lang="en">
|
||||||
<head>
|
|
||||||
<title>What is Magnetic-core memory?</title>
|
|
||||||
<meta charset="UTF-8">
|
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1"/>
|
|
||||||
<meta name="description" content="HTML & CSS Course Examples.">
|
|
||||||
<meta name="author" content="Sebastian Wendel"/>
|
|
||||||
<meta
|
|
||||||
name="created" content="2024-02-09T14:14:22.450262740"/>
|
|
||||||
<!-- TODO: Checkout the full list of Open Graph Data tags -->
|
|
||||||
<meta property="og:title" content="What is Magnetic-core memory?"/>
|
|
||||||
<meta property="og:description" content="HTML & CSS Course Examples."/>
|
|
||||||
<meta property="og:image" content="/image.png"/>
|
|
||||||
<script src="./js/tailwindcss.js?plugins=forms,typography,aspect-ratio,line-clamp"></script>
|
|
||||||
<link rel="stylesheet" href="./css/srx.css">
|
|
||||||
</head>
|
|
||||||
<body>
|
|
||||||
<main>
|
|
||||||
<article>
|
|
||||||
<div class="relative overflow-hidden bg-white">
|
|
||||||
<div class="pb-80 pt-16 sm:pb-40 sm:pt-24 lg:pb-48 lg:pt-40">
|
|
||||||
<div class="relative mx-auto max-w-7xl px-4 sm:static sm:px-6 lg:px-8">
|
|
||||||
<div class="sm:max-w-lg">
|
|
||||||
<h1 class="text-4xl font-bold tracking-tight text-gray-900 sm:text-6xl">What is Magnetic-core memory?</h1>
|
|
||||||
<p class="mt-4 text-xl text-gray-500">Core memory uses
|
|
||||||
<a href="https://en.wikipedia.org/wiki/Toroid">toroids</a>
|
|
||||||
(rings) of a
|
|
||||||
<a href="https://en.wikipedia.org/wiki/Hard_magnetic_material">hard
|
|
||||||
magnetic material</a>
|
|
||||||
(usually a
|
|
||||||
<a href="https://en.wikipedia.org/wiki/Ferrite_(magnet)#Semi-hard_ferrites">semi-hard
|
|
||||||
ferrite</a>). Each core stores one
|
|
||||||
<a href="https://en.wikipedia.org/wiki/Bit">bit</a>
|
|
||||||
of information. Two or more wires pass through each core, forming an
|
|
||||||
X-Y array of cores. When an electrical current above a certain
|
|
||||||
threshold is applied to the wires, the core will become magnetized.
|
|
||||||
The core to be written is selected by powering one X and one Y wire
|
|
||||||
to half of the required power, such that only the single core at the
|
|
||||||
intersection is written. Depending on the direction of the currents,
|
|
||||||
the core will pick up a clockwise or counterclockwise magnetic field,
|
|
||||||
storing a 1 or 0.
|
|
||||||
|
|
||||||
This writing process also causes electricity to be
|
<head>
|
||||||
<a href="https://en.wikipedia.org/wiki/Electromagnetic_induction">induced</a>
|
<title>What is Magnetic-core memory?</title>
|
||||||
into nearby wires. If the new pulse being applied in the X-Y wires is
|
<meta charset="UTF-8">
|
||||||
the same as the last applied to that core, the existing field will do
|
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||||
nothing, and no induction will result. If the new pulse is in the
|
<meta name="description" content="HTML & CSS Course Examples.">
|
||||||
opposite direction, a pulse will be generated. This is normally
|
<meta name="author" content="Sebastian Wendel" />
|
||||||
picked up in a separate "sense" wire, allowing the system
|
<meta name="created" content="2024-02-09T14:14:22.450262740" />
|
||||||
to know whether that core held a 1 or 0. As this readout process
|
<!-- TODO: Checkout the full list of Open Graph Data tags -->
|
||||||
requires the core to be written, this process is known as
|
<meta property="og:title" content="What is Magnetic-core memory?" />
|
||||||
<i>destructive
|
<meta property="og:description" content="HTML & CSS Course Examples." />
|
||||||
readout</i>, and requires additional circuitry to reset the core to
|
<meta property="og:image" content="/image.png" />
|
||||||
its original value if the process flipped it.
|
<script src="./js/tailwindcss.js?plugins=forms,typography,aspect-ratio,line-clamp"></script>
|
||||||
</p>
|
<link rel="stylesheet" href="./css/srx.css">
|
||||||
</div>
|
</head>
|
||||||
<div>
|
|
||||||
<div class="mt-10">
|
<main>
|
||||||
<div aria-hidden="true" class="pointer-events-none lg:absolute lg:inset-y-0 lg:mx-auto lg:w-full lg:max-w-7xl">
|
<article class="article">
|
||||||
<div class="absolute transform sm:left-1/2 sm:top-0 sm:translate-x-8 lg:left-1/2 lg:top-1/2 lg:-translate-y-1/2 lg:translate-x-8">
|
|
||||||
<div class="flex items-center space-x-6 lg:space-x-8">
|
<h1 class="article__headline">
|
||||||
<div class="grid flex-shrink-0 grid-cols-1 ">
|
What is Magnetic-core <span class="p-uppercase">memory?</span>
|
||||||
<div class="h-64 w-44 overflow-hidden rounded-lg">
|
</h1>
|
||||||
<img class="h-full w-full object-cover object-center" src="./img/IMG_20240205_00.webp" alt="A Core memory Module showing the detailed structure of ferrite cores and copper wires.">
|
|
||||||
</div>
|
<hr class="p-separator" />
|
||||||
</div>
|
|
||||||
</div>
|
<p class="p-text-style">Core memory uses
|
||||||
</div>
|
<a href="https://en.wikipedia.org/wiki/Toroid">toroids</a>
|
||||||
</div>
|
(rings) of a
|
||||||
</div>
|
<a href="https://en.wikipedia.org/wiki/Hard_magnetic_material">hard
|
||||||
</div>
|
magnetic material</a>
|
||||||
</div>
|
(usually a
|
||||||
</div>
|
<a href="https://en.wikipedia.org/wiki/Ferrite_(magnet)#Semi-hard_ferrites">semi-hard
|
||||||
</div>
|
ferrite</a>). Each core stores one
|
||||||
</article>
|
<a href="https://en.wikipedia.org/wiki/Bit">bit</a>
|
||||||
</main>
|
of information. Two or more wires pass through each core, forming an
|
||||||
</body>
|
X-Y array of cores. When an electrical current above a certain
|
||||||
|
threshold is applied to the wires, the core will become magnetized.
|
||||||
|
The core to be written is selected by powering one X and one Y wire
|
||||||
|
to half of the required power, such that only the single core at the
|
||||||
|
intersection is written. Depending on the direction of the currents,
|
||||||
|
the core will pick up a clockwise or counterclockwise magnetic field,
|
||||||
|
storing a 1 or 0.
|
||||||
|
|
||||||
|
This writing process also causes electricity to be
|
||||||
|
<a href="https://en.wikipedia.org/wiki/Electromagnetic_induction">induced</a>
|
||||||
|
into nearby wires. If the new pulse being applied in the X-Y wires is
|
||||||
|
the same as the last applied to that core, the existing field will do
|
||||||
|
nothing, and no induction will result. If the new pulse is in the
|
||||||
|
opposite direction, a pulse will be generated. This is normally
|
||||||
|
picked up in a separate "sense" wire, allowing the system
|
||||||
|
to know whether that core held a 1 or 0. As this readout process
|
||||||
|
requires the core to be written, this process is known as destructive
|
||||||
|
readout, and requires additional circuitry to reset the core to
|
||||||
|
its original value if the process flipped it.
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<figure class="figure">
|
||||||
|
<img class="" src="./img/IMG_20240205_00.webp"
|
||||||
|
alt="A Core memory Module showing the detailed structure of ferrite cores and copper wires.">
|
||||||
|
</figure>
|
||||||
|
|
||||||
|
<footer class="footer">
|
||||||
|
<p>
|
||||||
|
<small class="footer_small">
|
||||||
|
Source: <a href="https://en.wikipedia.org/wiki/Magnetic-core_memory">Wikipedia:
|
||||||
|
Magnetic-Core-Memory</a>
|
||||||
|
</small>
|
||||||
|
</p>
|
||||||
|
</footer>
|
||||||
|
</article>
|
||||||
|
|
||||||
|
</main>
|
||||||
|
</body>
|
||||||
|
|
||||||
</html>
|
</html>
|
||||||
Loading…
Reference in a new issue