swendel/hcs-html-ccs
1
0
Fork 0
Code Issues Pull requests Packages Projects Releases Wiki Activity

droped tailwindcss and added css helper functions and styling

Browse source
This commit is contained in:
Sebastian Wendel 2024-02-19 12:54:13 +01:00
parent aa80670c99
commit 08ee6f32f8
2 changed files with 157 additions and 83 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

88
css/srx.css
View file

@ -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-family: 'workbench';
src: url('../font/WORKBENCH-REGULAR.ttf') format('truetype');
}
h1,
h2,
h3,
h4,
h5,
h6 {
.p-uppercase {
text-transform: uppercase;
letter-spacing: 0.2rem;
}
.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-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;
}

62
index.html
View file

@ -1,13 +1,13 @@
<!doctype html>
<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"/>
<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." />
@ -15,15 +15,17 @@
<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
<article class="article">
<h1 class="article__headline">
What is Magnetic-core <span class="p-uppercase">memory?</span>
</h1>
<hr class="p-separator" />
<p class="p-text-style">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
@ -49,31 +51,27 @@
opposite direction, a pulse will be generated. This is normally
picked up in a separate &quot;sense&quot; 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
<i>destructive
readout</i>, and requires additional circuitry to reset the core to
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>
</div>
<div>
<div class="mt-10">
<div aria-hidden="true" class="pointer-events-none lg:absolute lg:inset-y-0 lg:mx-auto lg:w-full lg:max-w-7xl">
<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">
<div class="grid flex-shrink-0 grid-cols-1 ">
<div class="h-64 w-44 overflow-hidden rounded-lg">
<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>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<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>