{"id":21304753,"url":"https://github.com/absurditiesmedia/astro-retro","last_synced_at":"2025-07-23T10:34:32.614Z","repository":{"id":263882670,"uuid":"891535647","full_name":"absurditiesmedia/astro-retro","owner":"absurditiesmedia","description":"A very basic theme for astro, specificially inspired by the sed documentation page, the many like it, and the rejection of \"pixel perfect\" design in favor of a minimalist approach centered on the idea that cascasing stylesheets are no more than a suggestion to the browser and should be simple enough to parallel a print style guide.","archived":false,"fork":false,"pushed_at":"2025-04-10T18:23:22.000Z","size":2898,"stargazers_count":0,"open_issues_count":1,"forks_count":1,"subscribers_count":0,"default_branch":"main","last_synced_at":"2025-04-10T19:51:37.718Z","etag":null,"topics":["astro","astro-theme","astro-themes","blog","minimalist","podcast","rss"],"latest_commit_sha":null,"homepage":"","language":"Astro","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/absurditiesmedia.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2024-11-20T14:05:53.000Z","updated_at":"2025-04-10T18:23:25.000Z","dependencies_parsed_at":"2024-11-20T20:24:39.525Z","dependency_job_id":"2e946cda-982f-4428-987b-c216b2caaf1a","html_url":"https://github.com/absurditiesmedia/astro-retro","commit_stats":null,"previous_names":["absurditiesmedia/astro-retro"],"tags_count":1,"template":false,"template_full_name":null,"purl":"pkg:github/absurditiesmedia/astro-retro","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/absurditiesmedia%2Fastro-retro","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/absurditiesmedia%2Fastro-retro/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/absurditiesmedia%2Fastro-retro/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/absurditiesmedia%2Fastro-retro/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/absurditiesmedia","download_url":"https://codeload.github.com/absurditiesmedia/astro-retro/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/absurditiesmedia%2Fastro-retro/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":266663048,"owners_count":23964676,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","status":"online","status_checked_at":"2025-07-23T02:00:09.312Z","response_time":66,"last_error":null,"robots_txt_status":null,"robots_txt_updated_at":null,"robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["astro","astro-theme","astro-themes","blog","minimalist","podcast","rss"],"created_at":"2024-11-21T16:15:52.004Z","updated_at":"2025-07-23T10:34:32.591Z","avatar_url":"https://github.com/absurditiesmedia.png","language":"Astro","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Astro - Retro Website Theme\n*by Absurdities Media Group \u003c[absurditiesmediallc@gmail.com]\u003e \u003c[contact@absurditiesmedia.com]\u003e* \n\nJourney back to the 90s with this retro website theme. When pages were not\noverthought, we just posted them. All of this without giving up any of the\nfeatures, SEO, and compatability provided by a modern web framework. This\nsimple design will change the way you think about building websites, and\nwe hope it will be widely adopted and change the way people think about\nbuilding websites. The web has come a long way, and there have been so many \ndesign mistakes. From the first time a table was used to create an image \nheavy layout because it looked cool, to the use of media queries to create\na responsive design. Developers have promised designers pixel perfect layouts\nwhen we've known damn well these were promises we could not keep. And what's \nworse, they've undermined the key features of the technologies we use.\n\nIf this were a video game, I'd hit the reset button right here and start the\nlevel over. Let this theme be that reset button. Let's forget everything we\nknow about web design, and start over. This time, let's build on a set of \nprinciples that work. And instead of getting caught up in hacks trying to \nforce designs into some sort of prconceived idea about what we want to \nmake the websites look like. Let's allow the medium to determine what \nconstitutes good design. \n\nHTML, CSS, JavaScript and the Browser constitue a visual *medium*. \nJust like  Watercolor, Woodcut or Silkscreen. Artisic media have historically \ndictated a set of rules as to their best use. For example, a silkscreen design\nrarely uses more than 4 colors, watercolor is poorly suited to non-organic \nforms with bright colors and hard edges. The best woodcuts make use of the \ngrain of the wood. At the same time, the web is a publishing medium, like \nNewspapers and Magazines, Televison and Film, Radio and Recorded Audio. \nIn fact, the web is so powerful and versatile that it encompasses the \nfunctionality of all of these media, adds to them, and promises to continue\nexpanding its capabilities as time goes on.    \n\nThe most useful technologies that have emerged on the internet have nearly \nexclusively been the most simple ones. Take a look at the websites that\ntruly changed the face of the internet. Not as they exist now, but as they\nexisted at the time of their launch. A halfway decent developer could have\ncoded any of them in a week or two. What made them special, and what made \npeople use them was that they exposed a basic capability of the technology \nthat, in most of the cases, had just become possible. \n\nBased on these concepts, I propose a set of **Design principles for a mature\nworld wide web:**:\n\n- The browser will ultimately determine how pages appear. No developer has \n  access to all the versions of all the browsers on all of the devices in\n  use. Accept that the best you can do is make *suggestions* as to how \n  elements appear on the page. Keep this in mind when designing, and do\n  not create designs that will look bad if they are not pixel perfect.\n \n- The function of HTML is to create a semantic organization of content. \n  HTML is not a tool for visual design. It is a tool for information. Make\n  Use of the elements to create a structure that aids in the presentation of\n  information.\n\n- Hyperlinks take the concept of in-text citation to a whole new, and \n  interactive level. Think about the experience of researching a topic\n  in the library, consider the amount of time that a researcher might have\n  saved if the in-text citations were simply converted into hyperlinks. \n  Consider the legitimacy a link to a reliable source adds to anything\n  you have to say.\n\n- URL/URI: (*Uniform* Resource Locator/*Identifier*). The name says what\n  they are, try to minimize the use of tracking codes in them when you\n  can. \n\n- Before creating a style **sheet**, write a style **guide** then \n  then translate that guide into a stylesheet. A style guide will prescribe\n  the design elements to be used througout the site. Building your \n  stylesheet based on a style guide will greatly reduce the size of \n  your CSS file, will give your site a consistent look, encourage the \n  semantic use of HTML, and when it comes time to redesign, you may find\n  that all you must do is edit the stylesheet.\n\n- Consider Accessibility first. \n\nThese guidelines are a work in progress, and I'm very much aware of the many \nsimilar schools of thought with similar intent. I \n\n## Further Reading\n\n### Accessibility\n- [https://www.w3.org/WAI/fundamentals/accessibility-intro/]\n- [https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA]\n\n### Design Principles\n- [https://piccalil.li/blog/what-are-design-tokens]\n- [https://viewports.fyi/]\n- [https://piccalil.li/blog/cube-css]\n- [https://en.wikipedia.org/wiki/Single-responsibility_principle]\n- [https://en.wikipedia.org/wiki/Don%27t_repeat_yourself]\n- [https://snipcart.com/blog/organize-css-modular-architecture]\n- [https://clubmate.fi/oocss-acss-bem-smacss-what-are-they-what-should-i-use]\n- [https://css-tricks.com/bem-101/]\n- [http://oocss.org/]\n- [https://smacss.com/]\n- [https://en.bem.info/]\n- [https://buildexcellentwebsit.es/]\n- [https://utopia.fyi/]\n- [https://every-layout.dev]\n- [https://tailwindcss.com/docs]\n\n\n### Tools\n- [https://coolors.co/]\n- [https://icons8.com/lunacy/]\n- [https://penpot.app/pricing]\n\n\n### Even More Resources\n- [https://github.com/gztchan/awesome-design]\n\n\n# Project Structure\n\n```text\n├── public/\n├── src/\n│   ├── components/\n│   ├── content/\n│   ├── layouts/\n│   └── pages/\n├── astro.config.mjs\n├── README.md\n├── package.json\n└── tsconfig.json\n```\n\nAstro looks for `.astro` or `.md` files in the `src/pages/` directory. Each page is exposed as a route based on its file name.\n\nThere's nothing special about `src/components/`, but that's where we like to put any Astro/React/Vue/Svelte/Preact components.\n\nThe `src/content/` directory contains \"collections\" of related Markdown and MDX documents. Use `getCollection()` to retrieve posts from `src/content/blog/`, and type-check your frontmatter using an optional schema. See [Astro's Content Collections docs](https://docs.astro.build/en/guides/content-collections/) to learn more.\n\nAny static assets, like images, can be placed in the `public/` directory.\n\n## 🧞 Commands\n\nAll commands are run from the root of the project, from a terminal:\n\n| Command                   | Action                                           |\n| :------------------------ | :----------------------------------------------- |\n| `npm install`             | Installs dependencies                            |\n| `npm run dev`             | Starts local dev server at `localhost:4321`      |\n| `npm run build`           | Build your production site to `./dist/`          |\n| `npm run preview`         | Preview your build locally, before deploying     |\n| `npm run astro ...`       | Run CLI commands like `astro add`, `astro check` |\n| `npm run astro -- --help` | Get help using the Astro CLI                     |\n\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fabsurditiesmedia%2Fastro-retro","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fabsurditiesmedia%2Fastro-retro","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fabsurditiesmedia%2Fastro-retro/lists"}