🐄💵 Checkpoint
./styles/main.css:69682263/450 ./zines/index.html:69682263/300 ./styles/zines.css:69682263/102 ./scripts/zines.js:69682263/3
This commit is contained in:
@ -35,5 +35,5 @@ function makeZine({name, blurb, format, site, fedi}) {
|
|||||||
let zineContainer = document.getElementById("zine-container");
|
let zineContainer = document.getElementById("zine-container");
|
||||||
|
|
||||||
for (let i = 0; i < zines.length; i++) {
|
for (let i = 0; i < zines.length; i++) {
|
||||||
zineContainer.append(makeZine(zines[i]));
|
// zineContainer.append(makeZine(zines[i]));
|
||||||
}
|
}
|
||||||
@ -5,13 +5,12 @@
|
|||||||
--color-bg-light: #f0f0f0;
|
--color-bg-light: #f0f0f0;
|
||||||
--color-text-light: #640054;
|
--color-text-light: #640054;
|
||||||
--color-header-light: #185370;
|
--color-header-light: #185370;
|
||||||
|
--color-warn-light: #fbcc0a;
|
||||||
|
|
||||||
--color-bg-dark: #1f1f1f;
|
--color-bg-dark: #1f1f1f;
|
||||||
--color-text-dark: #91c73b;
|
--color-text-dark: #91c73b;
|
||||||
--color-header-dark: #ff87f3;
|
--color-header-dark: #ff9b37;
|
||||||
|
--color-warn-dark: #540033;
|
||||||
--color-bg-wip: #fbcc0a;
|
|
||||||
--color-text-wip: #640054;
|
|
||||||
|
|
||||||
--color-text-main: #640054;
|
--color-text-main: #640054;
|
||||||
--color-text-header: #185370;
|
--color-text-header: #185370;
|
||||||
@ -73,12 +72,12 @@
|
|||||||
|
|
||||||
/* WIP banner */
|
/* WIP banner */
|
||||||
.wip {
|
.wip {
|
||||||
background-color: var(--color-bg-wip);
|
background-color: light-dark(var(--color-warn-light), var(--color-warn-dark));
|
||||||
color: var(--color-text-wip);
|
color: light-dark(var(--color-text-light), var(--color-text-dark));
|
||||||
font-family: var(--font-family);
|
font-family: var(--font-family);
|
||||||
padding: 0.05rem 1rem;
|
padding: 0.05rem 1rem;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
border: solid var(--color-text-wip);
|
border: solid light-dark(var(--color-text-light), var(--color-text-dark));
|
||||||
border-radius: 3px;
|
border-radius: 3px;
|
||||||
margin-top: 1rem;
|
margin-top: 1rem;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
|
|||||||
3
styles/zines.css
Normal file
3
styles/zines.css
Normal file
@ -0,0 +1,3 @@
|
|||||||
|
.artist {
|
||||||
|
font-size: 2.5rem;
|
||||||
|
}
|
||||||
@ -12,6 +12,7 @@
|
|||||||
|
|
||||||
<!-- The website stylesheet -->
|
<!-- The website stylesheet -->
|
||||||
<link rel="stylesheet" href="styles/main.css" />
|
<link rel="stylesheet" href="styles/main.css" />
|
||||||
|
<link rel="stylesheet" href="styles/zines.css" />
|
||||||
|
|
||||||
<!-- The website JavaScript file -->
|
<!-- The website JavaScript file -->
|
||||||
<script src="scripts/footer.js" defer></script>
|
<script src="scripts/footer.js" defer></script>
|
||||||
@ -59,6 +60,14 @@
|
|||||||
|
|
||||||
<div id="zine-container">
|
<div id="zine-container">
|
||||||
<!-- Auto populated by scripts/zines.js -->
|
<!-- Auto populated by scripts/zines.js -->
|
||||||
|
<div class="intro">
|
||||||
|
<h2>
|
||||||
|
lee
|
||||||
|
</h2>
|
||||||
|
<p>
|
||||||
|
is making a physical/digital zine about...
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
</main>
|
</main>
|
||||||
|
|||||||
Reference in New Issue
Block a user