Consolidate all the CSS
- ID
7ad5113- date
2024-07-15 08:12:18+00:00- author
Alex Chan <alex@alexwlchan.net>- parent
0b31c4a- message
Consolidate all the CSS- changed files
1 file, 21 additions, 68 deletions
Changed files
index.html (4116) → index.html (1556)
diff --git a/index.html b/index.html
index 5a89104..fe1a470 100644
--- a/index.html
+++ b/index.html
@@ -11,87 +11,46 @@
<link href="style.css" rel="stylesheet">
<style>
- /* css is harder, e.g. no unit tests, cross-browser */
- /* been copy-pasting */
-
- /* set up basic colors
- * css variables fairly new for me, used css preprocessor e.g. sass before
- * but always light user so CSS vars have mostly displaced it
- * love the way I can override variables on individual elements, useful e.g. for per-element tint colors
- * still missing colors but oh well */
:root {
--header-background-color: LightGreen;
--footer-background-color: PowderBlue;
+
+ --max-width: 34rem;
+ --padding: 1em;
}
header { background: var(--header-background-color); }
footer { background: var(--footer-background-color); }
- /* can see layout of page, but colour blocks don't go to edge of page.
- * caused by default body margins, come from CSS User Agent stylesheet
- * can be overriden by normalize.css, maybe if I knew more about default ss
- * fix that next */
- body { margin: 0; }
-
- /* not necessary in major browsers which only set default margin, but
- * doesn't hurt */
- body { padding: 0; }
-
- /* so now colors fill page, but:
- * text fills screen, too wide! only want a few alphabets */
- /* text goes all the way to edge */
+ body {
+ margin: 0;
+ padding: 0;
- /* fix the width first */
- /* do need to add inner elements for text, e.g. <p> */
- /* isn't this being replaced soon? */
- /* depends on other varibales, e.g. font and size, whether it's text or image-heavy */
- /* what does auto mean here? */
- /* should I be doing px or em? */
- /* between 2 and 3 alphabets wide */
- /* https://www.joshwcomeau.com/css/surprising-truth-about-pixels-and-accessibility/ */
- :root {
-/* --max-width: 750px;*/
- --max-width: 334rem;
+ min-height: 100vh;
+ display: grid;
+ grid-template-rows: auto 1fr auto;
}
header > *, main, footer > * {
max-width: var(--max-width);
- margin: 0 auto;
- }
-
- /* now text goes all the ay to edge, let's fix that */
- :root {
- --padding: 1em;
- }
+ margin: 0 auto;
- header > *, main, footer > * {
- padding: var(--padding);
+ padding-top: calc(var(--padding) + env(safe-area-inset-top));
+ padding-right: calc(var(--padding) + env(safe-area-inset-right));
+ padding-bottom: calc(var(--padding) + env(safe-area-inset-bottom));
+ padding-left: calc(var(--padding) + env(safe-area-inset-left));
}
-
- /* todo: padding! */
-
- header > *, main, footer > * {
- padding-left: calc(var(--padding) + env(safe-area-inset-left));
- padding-right: calc(var(--padding) + env(safe-area-inset-right));
- }
-
- /* want to push footer all the way to the bottom */
- /* used to have a solution using flex, but I don't really understand flex
- * never had to use it
- * can accomplish similar technique using grid!
- * auto in grid is confusing after margin
- */
- body {
- min-height: 100vh;
- display: grid;
- grid-template-rows: auto 1fr auto;
- }
-
</style>
</head>
<body>
<header>
+ <h1>
+ This is my web page
+ </h1>
+ </header>
+
+ <main>
<p>
abcdefghijklm nopqrstuvwxyz
abcdefghijklm nopqrstuvwxyz
@@ -100,17 +59,11 @@
abcdefghijklm nopqrstuvwxyz
abcdefghijklm nopqrstuvwxyz
</p>
- </header>
-
- <main>
- <p>
- Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
- </p>
</main>
<footer>
<p>
- Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+ This is information about my web page
</p>
</footer>
</body>