eryn/erynwells.me
1
0
Fork 0
Code Issues 8 Pull requests 1 Projects Releases Packages Activity Actions

Photos WIP

Browse source
This commit is contained in:
Eryn Wells 2022-10-19 07:38:26 -07:00
parent dd1e4ee40f
commit ae19e1a777
4 changed files with 119 additions and 72 deletions
Download patch file Download diff file Expand all files Collapse all files

91
content/photos/photos.css
View file

@ -1,44 +1,81 @@
:root {
--photo-params-background: #ddd;
--photo-params-border-color: #aaa;
}
@media (prefers-color-scheme: dark) {
:root {
--photo-params-background: #444;
--photo-params-background: #777;
}
--body-code-background-color: rgb(var(--dk-gray));
--box-shadow-color: rgba(var(--dk-gray), 0.8);
--heading-color: rgb(var(--white));
--html-color: rgb(var(--white));
--html-background-color: rgb(var(--black));
--photo-params-background-color: rgb(var(--dk-gray));
--photo-params-container-background-color: rgb(var(--sub-dk-gray));
--photo-params-color: rgb(var(--super-lt-gray));
--photo-params-border-color: rgb(var(--sub-dk-gray));
--platter-background-color: rgba(var(--black), var(--platter-background-opacity));
--separator-color: rgb(var(--dk-gray));
--twitter-icon: url(/icons/twitter-dark.svg);
--github-icon: url(/icons/github-dark.svg);
--instagram-icon: url(/icons/instagram-dark.svg);
--rss-icon: url(/icons/rss-dark.svg);
}
ul.grid {
align-items: center;
display: flex;
flex-direction: row;
flex-wrap: wrap;
gap: 5px;
justify-content: flex-start;
main.photos.list {
display: inline-block;
max-width: none;
margin: var(--body-item-spacing) 0;
padding: 0 var(--body-item-spacing);
width: 100%;
}
main.photos.list ul.grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
gap: 0.8rem;
margin: 0;
padding: 0;
}
.photos .grid li {
display: block;
height: 210px;
list-style: none;
width: 210px;
@media (max-width: 415px) {
.photos ul.grid {
grid-template-columns: repeat(2, 1fr);
}
}
.grid li img {
border-radius: 0.5rem;
.photos .grid li {
line-height: 0;
list-style: none;
}
.photos .grid li a {
}
.photos .grid li img {
border-radius: 3px;
}
.photo-params {
background-color: var(--photo-params-background);
width: 100%;
}
.photo-params .container {
display: block;
background-color: var(--photo-params-container-background-color);
border-radius: 10px;
margin: var(--body-item-spacing) auto;
padding: calc(var(--body-item-spacing) / 2);
width: 66%;
}
.photo-params table {
background-color: var(--photo-params-background-color);
color: var(--photo-params-color);
border-collapse: collapse;
border-radius: 6px;
margin: 1rem auto;
table-layout: fixed;
text-align: center;
width: 66%;
width: 100%;
}
.photo-params thead td {
@ -84,7 +121,7 @@ ul.grid {
.photo-params.debug thead {
font-size: 2rem;
font-weight: bold;
border-bottom: 2px solid var(--dark);
border-bottom: 2px solid rgb(var(--dk-gray));
}
.photo-params.debug {