cssindepth / css-in-depth Goto Github PK

After loading listing-5.11.html the text "Starting at" in the <small> element is in regular case. Figure 5.2 (Livebook and epub) shows it in uppercase: "STARTING AT".

There doesn't seem to be any CSS that would target this element.

In ch02/listing-2.31.html the statement rootElement = document.documentElement; is extraneous. rootElementis already/still set by the preceding let rootElement = document.documentElement;

Instead of applying transition-delay to the nav labels always, just apply it on hover. Changing the selector from:
.nav-links > li:nth-child(n) .nav-links__label
to
.nav-links:hover > li:nth-child(n) .nav-links__label
helps preventing the delay when using tab to navigate (different timings in appearances are noticeable) also it removes the delay while transitioning from the hover to the normal state.

The last 3 listings in Chapter 3 (listing-3.19.html, listing-3.20.html, listing-3.21.html) don't display the sponsor link in Firefox (version 68.0.2). The aside element doesn't want to grow to fit the content.

Chrome, IE, and Edge display it as expected.

(Also, thanks for writing the book! It's been about 15 years since I've had to touch CSS, and I've already learned a lot from just the first 3 chapters.)

Hi
I was so happy for the responsiveness of the portfolio gallery on p. 165
It just work perfect on my localhost ...
then I found that on my mobile device images will overflow to the right
Have a look here

Can any one out there help me on this issure ... Been stuck with this for ...days :-(
Thank
otto leholt - Denmark

Hi everyone!

Running npm run build command after adding "css/homepage.md" file with content as indicated in the book still returns "WARNING: no homepage content found in homepage.md."

However, when I add "homepage.md" file to the root directory, kss generates a new "docs/index.html" file, which works perfectly on the browser. Does it depend on the version of the kss? In my case, it is :

"devDependencies": {
    "kss": "^3.1.0"
  }

which differs from

"devDependencies": {
    "kss": "^3.0.0-beta.14"
  }

Following style has corrupted layout.

.portfolio img {
  flex: 1;
  object-fit: cover;
  width: 100%;
}

So, I think it shoud be as follows

.portfolio img {
  flex-grow: 1;
  object-fit: cover;
  width: 100%;
}

Chapter 12
12.2.2 Adding new colors to a palette
Listing 12.7 Adding the red color to the palette

In the Elements pane, right-click the tag and select :active
(or active in Firefox) from the context menu (figure 12.12). This will force the
browser to display the element’s active styles.
With the element forced to an active state, you can see how the red color looks.

figure 12.12 html

<ul class="top-nav">
  <li>
    <a href="/pricing">Pricing</a>
  </li>
</ul>

doesn't match figure 12.11 "video calls" link

and doesn't show red color for selector priority

a:active {
  color: var(--red);
}

.top-nav a {
  color: var(--white);
}

figure 12.12 should show this part html

<a href="/features/video-calling">video calls</a>

Hello everyone!
Could you explain me please how calculation works in listing-2.21.html?

Does a browser first calculate font-size by multiplying default font-size 16 px by 2em, then a browser calculates line-height on the basis of calculated font size?

One more question, please.
In listing-2.22.html, line-height and font-size are calculated on the basis of default font-size (16px)?
As for line-height: 2em, em relates to the ancestor's () font-size (16px)?

Thank you!

button--cta text color is overwritten by a:visited (so you'll see a full green button). A quick workaround is to be more specific when querying the element (maybe .button.button--cta instead of .button--cta)

In the listing font-size: 0.8rem is set for both .button and .button--small selectors, which makes the text size of the two equal, as far as I can tell, but the figure shows (and the text hints) that the latter button has a smaller text.

Question originally asked on stackoverflow.

Hello everyone!
Could you help me please?:)

I've got a question: in the css part of listing-2.9.html, the "ul ul {font-size: 1em;}" stops the shrinking of font size caused by the "ul{ font-size: .8em; }". How does it work? How doest the browser understand that it should first set the font-size at 16px*0.8 then it should stop the diminishing of the font-size when it comes across the "ul ul {font-size: 1em;}"? How the repetition of the selector work in this code?