inherentlee/andie
0
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Compare commits

base: inherentlee:018b0ef31d1b58e5c4d518f659738ba2b9c8cd45
Branches Tags
inherentlee:main
...
compare: inherentlee:16479476a843577cabf95a3798bdbc053e80910a
Branches Tags
inherentlee:main

3 Commits
018b0ef31d ... 16479476a8

Author SHA1 Message Date
Lee Cattarin
16479476a8 dummy nav 2026-01-28 10:53:44 -08:00
Lee Cattarin
735b655a4e flesh out main stylesheet and add dummy images 2026-01-28 10:53:27 -08:00
Lee Cattarin
241afd8cee update purple 2026-01-28 10:52:51 -08:00
7 changed files with 132 additions and 6 deletions
Expand all files Collapse all files

BIN
assets/img/filler0.jpg Executable file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 529 KiB

BIN
assets/img/filler1.jpg Executable file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.6 MiB

BIN
assets/img/filler2.jpg Executable file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 414 KiB

69
assets/styles/main.css
View File

@ -4,7 +4,7 @@
--color-dark: #130024; --color-dark: #130024;
--color-light: #ffdff3; --color-light: #ffdff3;
--color-purple-dark: #570d93; --color-purple-dark: #570d93;
--color-purple-light: #b675ec; --color-purple-light: #be70fe;
--color-pink-dark: #8f0d66; --color-pink-dark: #8f0d66;
--color-pink-light: #e771c2; --color-pink-light: #e771c2;
--color-orange-dark: #ba4f1d; --color-orange-dark: #ba4f1d;
@ -26,9 +26,9 @@
body { body {
color: var(--color-text); color: var(--color-text);
background-color: var(--color-bg); background-color: var(--color-bg);
font-family: Courier, monospace; font-family: Verdana, sans-serif;
width: 65%; width: 65%;
margin: 0 auto; margin: 0 auto 4rem;
} }
@media (max-width: 650px) { @media (max-width: 650px) {
@ -43,6 +43,67 @@ h3,
h4, h4,
h5, h5,
h6 { h6 {
font-family: Verdana, sans-serif;
line-height: 2.5; line-height: 2.5;
color: var(--color-pink);
font-family: Courier, monospace;
}
h1 {
text-align: center;
margin-top: 4rem;
font-size: 2.5rem;
}
h2 {
margin-top: 2rem;
font-size: 2rem;
}
h3 {
margin-top: 1rem;
font-size: 1.6rem;
}
@media (max-width: 650px) {
h1 {
font-size: 2rem;
}
h2 {
font-size: 1.6rem;
}
h3 {
font-size: 1.3rem;
}
}
img {
width: 100%;
}
p {
line-height: 1.3;
}
@media (max-width: 650px) {
p {
font-size: .8rem;
}
}
a {
color: var(--color-purple);
}
.float-left {
float: left;
width: 45%;
padding: .65rem 1rem .65rem 0;
}
.float-right {
float: right;
width: 45%;
padding: .65rem 0 .65rem 1rem;
} }

48
assets/styles/nav.css Normal file
View File

@ -0,0 +1,48 @@
nav {
display: flex;
flex-flow: row wrap;
justify-content: space-between;
align-items: center;
margin: 1rem auto;
}
nav a {
text-decoration: none;
}
nav h2 {
display: inline;
margin: 0;
font-size: 1.8rem;
}
@media (max-width: 650px) {
nav h2 {
font-size: 1.5rem;
}
}
nav ul {
display: flex;
flex-flow: column;
justify-content: space-around;
align-items: flex-end;
align-self: flex-end;
}
nav li {
list-style: none;
}
nav li a {
display: block;
padding: .3rem 0;
font-family: Courier, monospace;
font-size: 1.3rem;
}
@media (max-width: 650px) {
nav li a {
font-size: 1.2rem;
}
}

18
index.html
View File

@ -18,15 +18,30 @@
<!-- CSS --> <!-- CSS -->
<link rel="stylesheet" href="/assets/styles/main.css"> <link rel="stylesheet" href="/assets/styles/main.css">
<link rel="stylesheet" href="/assets/styles/nav.css">
</head> </head>
<body> <body>
<header> <header>
<nav> <nav>
<h2>
<a href="/" title="home page">Andie Lastname</a>
</h2>
<ul>
<li>
<a href="/1" title="dummy link 1">one</a>
</li>
<li>
<a href="/2" title="dummy link 2">two</a>
</li>
<li>
<a href="/3" title="dummy link 3">three</a>
</li>
</ul>
</nav> </nav>
</header> </header>
<main id="main"> <main id="main">
<h1>header level 1</h1> <h1>header level 1</h1>
<img class="float-left" src="/assets/img/filler0.jpg">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Fusce libero neque, sollicitudin id scelerisque in, congue ut leo. Fusce libero neque, sollicitudin id scelerisque in, congue ut leo.
Morbi vehicula sem quis mauris lobortis tempor quis ac eros. Morbi vehicula sem quis mauris lobortis tempor quis ac eros.
@ -39,6 +54,7 @@
</p> </p>
<h2>header level 2</h2> <h2>header level 2</h2>
<img class="float-right" src="/assets/img/filler1.jpg">
<p>Vestibulum dignissim tortor et tellus rutrum, quis dignissim orci rhoncus. <p>Vestibulum dignissim tortor et tellus rutrum, quis dignissim orci rhoncus.
Vestibulum eget justo in ante feugiat varius. Vestibulum eget justo in ante feugiat varius.
Donec efficitur nulla non mollis facilisis. Donec efficitur nulla non mollis facilisis.

3
palette/index.html
View File

@ -19,6 +19,7 @@
<!-- CSS --> <!-- CSS -->
<link rel="stylesheet" href="/assets/styles/main.css"> <link rel="stylesheet" href="/assets/styles/main.css">
<link rel="stylesheet" href="/assets/styles/palette.css"> <link rel="stylesheet" href="/assets/styles/palette.css">
<link rel="stylesheet" href="/assets/styles/nav.css">
</head> </head>
<body> <body>
<header> <header>
@ -31,7 +32,7 @@
<p class="color" id="dark">#130024</p> <p class="color" id="dark">#130024</p>
<p class="color" id="light">#ffdff3</p> <p class="color" id="light">#ffdff3</p>
<p class="color" id="purple-dark">#570d93</p> <p class="color" id="purple-dark">#570d93</p>
<p class="color" id="purple-light">#b675ec</p> <p class="color" id="purple-light">#be70fe</p>
<p class="color" id="pink-dark">#8f0d66</p> <p class="color" id="pink-dark">#8f0d66</p>
<p class="color" id="pink-light">#e771c2</p> <p class="color" id="pink-light">#e771c2</p>
<p class="color" id="orange-dark">#ba4f1d</p> <p class="color" id="orange-dark">#ba4f1d</p>