Showing posts from September, 2022

Blogger templates

Total photos: 12

  1. green leafed trees

    Photo by redcharlie

  2. landscape photography of brown mountain

    Photo by Wil Stewart

  3. blue starry night

    Photo by Mark Basarab

  4. aerial island and beaches

    Photo by Amanda Phung

  5. forest pathway

    Photo by Elke Karin Lugert

  6. photo of two black, white, and orange koi fish

    Photo by Sora Sagano

  7. landscape photo of brown mountain

    Photo by Darryl Brian

  8. moon illustration

    Photo by Shin Roran

  9. bird's eye view of body of water

    Photo by Tim Mossholder

  10. high-angle photography of rural area

    Photo by Steven Wong

  11. silhoutte of mountains during sunset

    Photo by Ivana Cajina

  12. bird's-eye view of mountain rang

    Photo by Elena Prokofyeva

Grid

Total photos: 6

  1. green leafed trees

    Photo by redcharlie

  2. landscape photography of brown mountain

    Photo by Wil Stewart

  3. blue starry night

    Photo by Mark Basarab

  4. aerial island and beaches

    Photo by Amanda Phung

  5. forest pathway

    Photo by Elke Karin Lugert

  6. photo of two black, white, and orange koi fish

    Photo by Sora Sagano

  7. landscape photo of brown mountain

    Photo by Darryl Brian

  8. moon illustration

    Photo by Shin Roran

  9. bird's eye view of body of water

    Photo by Tim Mossholder

  10. high-angle photography of rural area

    Photo by Steven Wong

  11. silhoutte of mountains during sunset

    Photo by Ivana Cajina

  12. bird's-eye view of mountain rang

    Photo by Elena Prokofyeva

  1. green leafed trees

    Photo by redcharlie

  2. landscape photography of brown mountain

    Photo by Wil Stewart

  3. blue starry night

    Photo by Mark Basarab

  4. aerial island and beaches

    Photo by Amanda Phung

  5. forest pathway

    Photo by Elke Karin Lugert

  6. photo of two black, white, and orange koi fish

    Photo by Sora Sagano

  7. landscape photo of brown mountain

    Photo by Darryl Brian

  8. moon illustration

    Photo by Shin Roran

  9. bird's eye view of body of water

    Photo by Tim Mossholder

  10. high-angle photography of rural area

    Photo by Steven Wong

  11. silhoutte of mountains during sunset

    Photo by Ivana Cajina

  12. bird's-eye view of mountain rang

    Photo by Elena Prokofyeva

To Top
/* RESET RULES –––––––––––––––––––––––––––––––––––––––––––––––––– */ :root { --black: #1a1a1a; --white: #fff; --gray: #ccc; --darkgreen: #18846C; --lightbrown: antiquewhite; --darkblack: rgba(0,0,0,0.8); --minRangeValue: 280px; } * { margin: 0; padding: 0; outline: none; border: none; } button { cursor: pointer; background: none; } img { display: block; max-width: 100%; height: auto; } ol, ul { list-style: none; } a { color: inherit; } body { margin: 50px 0; color: var(--black); font: 1rem/1.3 sans-serif; } .gallery { padding: 0 2rem; } .container { max-width: 1030px; margin: 0 auto; } .d-none { display: none; } /* TOOLBAR –––––––––––––––––––––––––––––––––––––––––––––––––– */ .toolbar { display: flex; justify-content: space-between; align-items: center; } .toolbar .search-wrapper { position: relative; } .toolbar input[type="search"] { font-size: 1.1rem; border: none; border-bottom: 1px solid; padding-bottom: 3px; } .toolbar ::placeholder { color: var(--gray); } .toolbar .counter { position: absolute; left: 0; top: calc(100% + 5px); font-size: 0.9rem; color: var(--gray); } .view-options { display: flex; align-items: center; } .view-options li:not(:last-child) { margin-right: 1.2rem; } .view-options button { padding: 2px; border: 3px solid transparent; } .view-options .active button { border-color: var(--darkgreen); } /* IMAGE LIST –––––––––––––––––––––––––––––––––––––––––––––––––– */ .image-list { margin: 3rem 0; } .image-list li { background: var(--lightbrown); color: var(--darkblack); } .image-list p:first-child { font-weight: bold; font-size: 1.15rem; } .image-list p:last-child { margin-top: 0.5rem; } /* GRID VIEW –––––––––––––––––––––––––––––––––––––––––––––––––– */ .grid-view { display: grid; grid-gap: 2rem; grid-template-columns: repeat(auto-fit, minmax(var(--minRangeValue), 1fr)); } .grid-view figcaption { padding: 1rem; } /* LIST VIEW –––––––––––––––––––––––––––––––––––––––––––––––––– */ .list-view li + li { margin-top: 1.5rem; } .list-view figure { display: grid; grid-gap: 1.5rem; grid-template-columns: 150px 1fr; align-items: center; } /* FOOTER –––––––––––––––––––––––––––––––––––––––––––––––––– */ footer { font-size: 1rem; padding: 0 1.5rem; text-align: right; } footer span { color: #e31b23; } /* MQ –––––––––––––––––––––––––––––––––––––––––––––––––– */ @media screen and (max-width: 900px) { .toolbar input[type="range"] { display: none; } } @media screen and (max-width: 700px) { .grid-view li { text-align: center; padding: 0.5rem; } .grid-view figcaption { padding: 0.5rem 0 0; } }