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

Compare commits

base: inherentlee/andie:018b0ef31d1b58e5c4d518f659738ba2b9c8cd45
Branches Tags
inherentlee/andie:main
..
compare: inherentlee/andie:16479476a843577cabf95a3798bdbc053e80910a
Branches Tags
inherentlee/andie:main
3 Commits
018b0ef31d .. 16479476a8
Author SHA1 Message Date
inherentlee 16479476a8 dummy nav 2026-01-28 10:53:44 -08:00
inherentlee 735b655a4e flesh out main stylesheet and add dummy images 2026-01-28 10:53:27 -08:00
inherentlee 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
assets/img/filler0.jpg
Executable
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 529 KiB

assets/img/filler1.jpg
Executable
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.6 MiB

assets/img/filler2.jpg
Executable
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 414 KiB

assets/styles/main.css
+65 -4
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;
} }
assets/styles/nav.css
+48
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;
}
}
index.html
+17 -1
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.
palette/index.html
+2 -1
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>