Skip to content

Commit

Permalink
Update for week 2 / Fix Headings
Browse files Browse the repository at this point in the history
  • Loading branch information
munusshih committed Feb 2, 2024
1 parent bc80257 commit d3946fa
Show file tree
Hide file tree
Showing 5 changed files with 103 additions and 237 deletions.
67 changes: 31 additions & 36 deletions css/style.css
Original file line number Diff line number Diff line change
Expand Up @@ -22,7 +22,6 @@
--font-size-h3: 1rem;
--font-size-h4: 0.8rem;

--black: var(--light-grey);
--off-black: #262626;
--dark-grey: #7A7A7A;
--light-grey: #F5F5F5;
Expand All @@ -34,12 +33,13 @@
--blue: #0056FF;
--magenta: #FF48FF;
--purple: #B56CFF;
--bg: #000000;
--background: #000000;
--foreground: white;

--link-arrow-color: var(--black);
--foreground: var(--foreground);
--slider-button-color: var(--white);

--border: 1px solid var(--black);
--border: 1px solid var(--foreground);

--star-1: var(--red);
--star-2: var(--orange);
Expand All @@ -55,9 +55,9 @@ html {
}

body {
background-color: var(--bg);
background-color: var(--background);
font-family: var(--font-family-main);
color: var(--black);
color: var(--foreground);
line-height: 1.3;
letter-spacing: -0.04rem;
max-width: var(--page-width);
Expand All @@ -76,34 +76,33 @@ h1 {
padding: 0 var(--page-padding);
}

h2 {
h2,
h4 {
font-size: var(--font-size-h4);
font-weight: var(--font-weight-semibold);
text-transform: uppercase;
margin-bottom: var(--font-size-h4);
}

h3 {
font-size: var(--font-size-h2);
font-weight: var(--font-weight-semibold);
letter-spacing: -0.05em;
letter-spacing: -0.07em;
line-height: 0.9;
max-width: 20ch;
}

h3,
p,
a {
font-size: var(--font-size-h3);
font-weight: var(--font-size-regular);
letter-spacing: -0.02em;
}

h4 {
font-size: var(--font-size-h4);
font-weight: var(--font-weight-semibold);
text-transform: uppercase;
margin-bottom: var(--font-size-h4);
}

h5 {
font-size: var(--font-size-h3);
font-weight: var(--font-weight-medium);
margin-bottom: var(--font-size-h4);
text-decoration: underline;
}

/* #sessions h4::before {
Expand All @@ -124,7 +123,7 @@ h5 {
a {
text-decoration: none;
border-bottom: var(--border);
color: var(--black);
color: var(--foreground);
}

a:hover {
Expand All @@ -135,15 +134,15 @@ a::after {
content: "↗";
font-family: var(--font-family-symbols);
margin-left: 4px;
color: var(--link-arrow-color);
color: var(--foreground);
}

a:hover::after {
color: var(--link-arrow-color);
color: var(--foreground);
}

a.arrow-visible::after {
color: var(--link-arrow-color);
color: var(--foreground);
}

a.arrow-visible:hover::after {
Expand Down Expand Up @@ -179,7 +178,7 @@ footer {

#footer--link-top::after {
content: "↑";
color: var(--link-arrow-color);
color: var(--foreground);
}

/* LIST STYLES */
Expand Down Expand Up @@ -240,7 +239,7 @@ ol>li {
}

.todolist ol li input {
accent-color: var(--link-arrow-color);
accent-color: var(--foreground);
cursor: pointer;
transform: scale(1.4) translate(-0.05rem, -.05rem);
margin-right: 0.5rem;
Expand All @@ -256,13 +255,13 @@ details {
border-radius: var(--font-size-h1);
}

#sessions details summary h3 {
#sessions details summary h4 {
min-height: 20rem;
min-width: 20rem;
border-radius: 50%;
}

#sessions details:nth-of-type(4n + 1) summary h3 {
#sessions details:nth-of-type(4n + 1) summary h4 {
/*
* Created with https://www.css-gradient.com
* Gradient link: https://www.css-gradient.com/?c1=c08fcb&c2=ab3025&gt=r&gd=dcc
Expand All @@ -271,7 +270,7 @@ details {
background: radial-gradient(at center, #C08FCB, #AB3025);
}

#sessions details:nth-of-type(4n + 2) summary h3 {
#sessions details:nth-of-type(4n + 2) summary h4 {
/*
* Created with https://www.css-gradient.com
* Gradient link: https://www.css-gradient.com/?c1=282ecc&c2=082f6f&gt=r&gd=dcc
Expand All @@ -280,7 +279,7 @@ details {
background: radial-gradient(at center, #282ECC, #082F6F);
}

#sessions details:nth-of-type(4n + 3) summary h3 {
#sessions details:nth-of-type(4n + 3) summary h4 {
/*
* Created with https://www.css-gradient.com
* Gradient link: https://www.css-gradient.com/?c1=d4a86a&c2=74bdb3&gt=r&gd=dcc
Expand All @@ -289,7 +288,7 @@ details {
background: radial-gradient(at center, #D4A86A, #74BDB3);
}

#sessions details:nth-of-type(4n) summary h3 {
#sessions details:nth-of-type(4n) summary h4 {
/*
* Created with https://www.css-gradient.com
* Gradient link: https://www.css-gradient.com/?c1=69eb0b&c2=931b32&gt=r&gd=dcc
Expand Down Expand Up @@ -406,7 +405,7 @@ pre {
overflow-x: visible;
tab-size: 2;
padding: 20px;
background-color: var(--bg);
background-color: var(--background);
outline: 1px solid var(--light-grey);
white-space: pre-wrap;
white-space: -moz-pre-wrap;
Expand Down Expand Up @@ -453,7 +452,7 @@ header {
left: 0;
right: 0;
bottom: 0;
background-color: var(--black);
background-color: var(--foreground);
-webkit-transition: 0.3s;
transition: 0.3s;
border-radius: var(--font-size-h1);
Expand Down Expand Up @@ -485,12 +484,12 @@ input:checked+.slider:before {
/* ACCESSIBILITY */

input[type="checkbox"]:focus+span {
outline: 3px solid var(--link-arrow-color);
outline: 3px solid var(--foreground);
outline-offset: 3px;
}

:focus-visible {
outline: 3px solid var(--link-arrow-color);
outline: 3px solid var(--foreground);
outline-offset: 3px;
border-radius: var(--font-size-h1);
transition: 0.3s;
Expand Down Expand Up @@ -560,10 +559,6 @@ input[type="checkbox"]:focus+span {
padding-left: var(--font-size-h3);
}

.border-left {
border-left: 1px solid black;
}

.col-span-1 {
grid-column: span 1 / span 1;
}
Expand Down
44 changes: 23 additions & 21 deletions index.html
Original file line number Diff line number Diff line change
Expand Up @@ -33,7 +33,7 @@
<link rel="stylesheet" href="/css/style.css" />

<script src="js/content.js" defer></script>
<!-- <script src="js/params.js" async defer></script> -->
<script src="js/params.js" defer></script>
<!-- Google tag (gtag.js) -->
<!-- Google tag (gtag.js) -->
<script async
Expand Down Expand Up @@ -95,7 +95,7 @@ <h1 class="effect">Core 2:<br />Intx Lab</h1>
<div class="col-span-1 padding-1">
<ul>
<li>
<h4>Instructor</h4>
<h2>Instructor</h2>
</li>
<li><a class="effect" href="https://munusshih.com/">Munus
Shih</a></li>
Expand All @@ -108,7 +108,7 @@ <h4>Instructor</h4>

<section class="border--bottom">
<div class="grid space--after-double">
<h4 class="padding-l">Quick Links</h4>
<h2 class="padding-l">Quick Links</h2>
<ul class="padding-1 flex col-span-3">
<li><a class="effect"
href="https://docs.google.com/document/d/1DGRJQYwCW6UJSTzkkroCPbKYEcuo6SK52J2MMQ0dm6g/edit?usp=sharing">Syllabus</a>
Expand All @@ -117,13 +117,14 @@ <h4 class="padding-l">Quick Links</h4>
href="https://calendly.com/shihy990/45mins">Office
Hours
(Munus)</a></li>
<li><a href="https://forms.gle/YjeCMDAuTnhqEF727">Intro
Survey</a></li>
<li><a
href="https://canvas.newschool.edu/courses/1757357">Canvas</a>
</li>
</ul>
</div>

<div class="grid">
<h4 class="padding-l">Overview</h4>
<h2 class="padding-l">Overview</h2>
<article class="col-span-3">
<p class="">
This course serves as a complement to Core Studio
Expand Down Expand Up @@ -152,30 +153,30 @@ <h4 class="padding-l">Overview</h4>
</section>

<section class="grid border--bottom" id="sessions">
<h4 class="padding-l">Sessions</h4>
<h2 class="padding-l">Sessions</h2>
<article class="col-span-3 border-left">
<h2 class="effect space--after-single">Unit
<h3 class="effect space--after-single">Unit
1:<br />The Web is
Fluid
</h2>
</h3>
<div class="flex">
<details>
<summary>
<h3 class="effect">Week 1</h3>
<h4 class="effect">Week 1</h4>
</summary>

<div id="week1"></div>
</details>
<details>
<summary>
<h3 class="effect">Week 2</h3>
<h4 class="effect">Week 2</h4>
</summary>

<div id="week2"></div>
</details>
<details>
<summary>
<h3 class="effect">Week 3</h3>
<h4 class="effect">Week 3</h4>
</summary>

<div id="week3"></div>
Expand All @@ -184,14 +185,15 @@ <h3 class="effect">Week 3</h3>
</section>

<section class="border--bottom grid">
<h4 class="padding-l">Community</h4>
<h2 class="padding-l">Community</h2>
<ul class="padding-1">
<li><a class="effect" href="#">Ketana Anekar</a></li>
<li><a class="effect" href="#">Ethan Camarillo</a></li>
<li><a class="effect" href="#">Danielle Casado</a></li>
<li><a class="effect" href="#">Dani Casado</a></li>
<li><a class="effect" href="#">Rosa de Vera</a></li>
<li><a class="effect" href="#">Sophia Dombrowski</a></li>
<li><a class="effect" href="#">Jake Morosini</a></li>
<li><a class="effect" href="#">Jade Park</a></li>
<li><a class="effect" href="#">Amber Pjongluck</a></li>
<li><a class="effect" href="#">Adele Plard</a></li>
<li><a class="effect" href="#">Amanda Quintanilla</a></li>
Expand All @@ -203,7 +205,7 @@ <h4 class="padding-l">Community</h4>
</section>

<section class="border--bottom grid">
<h4 class="padding-l">Class Policies</h4>
<h2 class="padding-l">Class Policies</h2>
<article class="col-span-3">
<details>
<summary>
Expand Down Expand Up @@ -270,7 +272,7 @@ <h3 class="effect">On Crediting Code</h3>

<ul>
<li>
<h3>Crediting ChatGPT for Assistance</h3>
<h4>Crediting ChatGPT for Assistance</h4>
<p class="space--after-single">When ChatGPT
helps
you with JavaScript code or explanations,
Expand Down Expand Up @@ -312,7 +314,7 @@ <h3>Crediting ChatGPT for Assistance</h3>


<li>
<h3>Using JavaScript Tutorials</h3>
<h4>Using JavaScript Tutorials</h4>
<p class="space--after-single">Incorporating
JavaScript tutorials into your assignments?
Follow these guidelines:</p>
Expand Down Expand Up @@ -342,7 +344,7 @@ <h3>Using JavaScript Tutorials</h3>


<li>
<h3>Utilizing Code Examples</h3>
<h4>Utilizing Code Examples</h4>
<p class="space--after-single">When integrating
code
examples from the web or documentation,
Expand Down Expand Up @@ -379,7 +381,7 @@ <h3>Utilizing Code Examples</h3>


<li>
<h3>Collaborating with Others</h3>
<h4>Collaborating with Others</h4>
<p class="space--after-single">In collaborative
JavaScript assignments, ensure proper credit
to
Expand Down Expand Up @@ -410,7 +412,7 @@ <h3>Collaborating with Others</h3>
</li>

<li class="space--after-quadruple">
<h3>Referring to Open Source Projects</h3>
<h4>Referring to Open Source Projects</h4>
<p class="space--after-single">When leveraging
open-source JavaScript libraries or code,
follow
Expand Down Expand Up @@ -441,7 +443,7 @@ <h3>Referring to Open Source Projects</h3>
</section>

<section class="border--bottom grid">
<h4 class="padding-l">Colophon</h4>
<h2 class="padding-l">Colophon</h2>
<article class="col-span-3">
<p class="space--after-single"><span class="effect">I'd like to
thank</span> <a class="arrow-visible effect"
Expand Down
Loading

0 comments on commit d3946fa

Please sign in to comment.