commit 908137855a1d3e27d197b1a39cba44e261cf6dc7 Author: CherryKitten Date: Sat Jan 28 19:40:47 2023 +0100 Initial commit diff --git a/.gitignore b/.gitignore new file mode 100644 index 0000000..a3ffe50 --- /dev/null +++ b/.gitignore @@ -0,0 +1,2 @@ +public/ +.idea diff --git a/.gitmodules b/.gitmodules new file mode 100644 index 0000000..3a07023 --- /dev/null +++ b/.gitmodules @@ -0,0 +1,3 @@ +[submodule "themes/terminimal"] + path = themes/terminimal + url = https://github.com/pawroman/zola-theme-terminimal.git diff --git a/config.toml b/config.toml new file mode 100644 index 0000000..1035a79 --- /dev/null +++ b/config.toml @@ -0,0 +1,50 @@ +# The URL the site will be built for +base_url = "https://cherrykitten.dev" + +theme = "terminimal" + +compile_sass = true + +# Whether to build a search index to be used later on by a JavaScript library +build_search_index = false + +taxonomies = [ + {name = "tags"}, +] + +[markdown] +# Whether to do syntax highlighting +# Theme can be customised by setting the `highlight_theme` variable to a theme supported by Zola +highlight_code = true + +[extra] + +# One of: blue, green, orange, pink, red. +# Defaults to blue. +accent_color = "rosepine" + +# One of: blue, dark, green, orange, pink, red. +# Enabling dark background will also modify primary font color +# to be darker. +# Defaults to accent color (or, if not accent color specified, to blue). +background_color = "rosepine" + +# The logo text - defaults to "Terminimal theme" +logo_text = "CherryKitten" + +copyright_html = """\ +

© 2022 - CherryKitten

Impressum +""" + +menu_items = [ + {name = "Home", url = "$BASE_URL"}, + + {name = "About me", url = "$BASE_URL/about"}, + + {name = "Blog", url = "$BASE_URL/blog"}, + + {name = "Contact", url = "$BASE_URL/contact"}, + #{name = "github", url = "url-to-your-github", newtab = true}, +] + +page_titles = "combined" diff --git a/content/blog/_index.md b/content/blog/_index.md new file mode 100644 index 0000000..295f524 --- /dev/null +++ b/content/blog/_index.md @@ -0,0 +1,5 @@ ++++ +paginate_by = 2 +sort_by = "date" +template = "index.html" ++++ diff --git a/content/blog/fediverse_isnt_just_mastodon.md b/content/blog/fediverse_isnt_just_mastodon.md new file mode 100644 index 0000000..e2dd6da --- /dev/null +++ b/content/blog/fediverse_isnt_just_mastodon.md @@ -0,0 +1,81 @@ ++++ +title = "The Fediverse is more than just Mastodon" +date = 2022-11-26 ++++ + +With Twitter in a downwards spiral thanks to some rich guy whose name escapes me breaking everything, the Fediverse has been getting the biggest influx of new users in a very long time. +People have been recommending "Mastodon" as a Twitter alternative for a while now, causing #Mastodon to be the top trending Hashtag on many days. + +Browsing that hashtag one can find a lot of misconceptions about what Mastodon is, how it works, and what its limitations are. These misconceptions are not just spread by people who dislike Mastodon and try to convince others not to use it, though. They are also perpetuated by people who seem to want to increase the userbase at all cost, regardless of whom it attracts to the Fediverse. + +### Mastodon, the "Twitter Alternative" + +The biggest misconception already starts with the recommendation itself. "You should switch to Mastodon", "Mastodon is a great Twitter alternative", "on Mastodon you can do x and y and z". +"Mastodon" is just one small piece of a bigger puzzle. When you sign up on a Mastodon instance, you're not joining just Mastodon. +You are using Mastodon to join the so-called "Fediverse", a network of all kinds of different services that can all communicate with each other using a Protocol called [ActivityPub](https://www.w3.org/TR/activitypub/). + +Now, because so many people on sites like Twitter frame Mastodon as its own seperate thing, new users who try out a big Mastodon instance and can't deal with its flaws, don't know better than to just write it off as bad and never look back. +Nobody told them that all their friends on Mastodon would also be reachable from a plethora of different platforms that they might be more comfortable with using. +That's the beauty of a federated web, there are always alternatives, always different ways of interacting with the same people over the same protocols and on the same network. + +I'm imagining a world where the Top Trending Hashtag on Twitter is #Fediverse, with everyone talking about their favourite features of different platforms and explaining why it is **not** a Twitter alternative. + +### Wait, so it's not a Twitter Alternative? + +No. It isn't. And anyone who is telling you that it is, is either doing so in bad faith, or has no idea what they're talking about. +Twitter is corporate social media, that's why it's full of ads and corporate accounts. It is designed to get its users addicted to the platform, to maximize engagement, drive up ad impressions and profit. To twitter you are just a collection of numbers, costs and profits. Nothing else. + +The Fediverse exists to build communities. It is created by people, for people. Most contributors and server admins don't make any money from it. They work on everything in their free time, fund it out of their own pockets or through donations, and don't expect much in return. + +### 'Most'? + +Of course, like with every rule, there are exceptions. The above framing of Mastodon as the one special ActivityPub implementation that everyone constantly talks about, brought in lots of financial support for "Mastodon gGmbH", the "non-profit organization" founded by Mastodon maintainer Eugen Rochko. As of writing of this post, the organization earns about 30.000€ a month through patreon and has 52 corporate sponsors, including sketchy gambling sites and cryptocurrency firms. +None of this money is of any use for the wider Fediverse community. It goes towards the hosting of the "flagship instances" and the development of the version of the Mastodon code that very often gets changed in ways the wider community disapproves of, or refuses to implement features that would be useful or even neccessary for the process of building safe, inclusive communities. + +The thousands of instance admins and developers of other Fediverse software, be it forks of Mastodon or completely different platforms, don't see a single cent of that money. +Instead, they have to deal with the increase in moderation effort due to millions of users suddenly flooding the Fediverse with demands of a second Twitter. + +### How moderation works + +Moderation on the Fediverse is done manually by individuals. This is a feature, not a bug. Automated content moderation leads to many errors and intransparent policy enforcement. It is also very prone to abuse. +Every report is read by an actual person. Most platforms implement reports in a way that the moderators of the reporter's instance can see it, with an optional possibility to forward it to the instance of the reported user. + +There are different tools moderators/admins can use to deal with problematic content/users. +Remote users can be individually silenced, meaning they don't show up in the federated timeline, but can still be followed, or they can be fully blocked from interacting with the instance at all. +The same actions can also be applied to whole instances. This is called "defederating", because the instances are no longer federating with each other. Some people are framing this as a bad thing, claiming it would be wrong for instance admins to decide who their users can follow and interact with. This is where the importance of instance choice comes in. + +### "It doesn't matter what instance you're on, just pick one!!!" + +Ugh. If I had a penny for every time I saw someone make this claim, I'd have to never work a day in my life again. + +It's wrong. It's so damn wrong that I honestly can't believe anyone has ever made this claim in good faith. + +The instance you choose is probably **the most important factor** to determine how much you will enjoy your time on the Fediverse. +Your instance choice decides what cool features you have access to (because different instances can use different software), it decides who can interact with you, who you can follow, who you see on the different timelines, and how safe you are from seeing things you definitely do not want to see. + +Instances all have their own moderation team, rules, and code of conduct. Before you sign up for an instance, you should read their about page and rules, to determine if their views align with yours. That's right, instances have explicit values! If you want to be on an instance that doesn't moderate at all, you're free to choose one. You'll just have to deal with the fact that a lot of people will block you instead. +If you care about community and friendly, respectful interactions, a well-moderated instance that has a code of conduct you agree with is the right place for you. There your reports will actually be read and acted upon. +Please remember that the moderators are just people doing it in their free-time though. They can't react to everything instantly, and they might be overwhelmed sometimes. Be nice to them and don't abuse the report systems, work together to build a nice and friendly community. + +### "But the official instance is probably a good place to start, right? ...right?" + +First of all, there is no "official" instance. The Fediverse is an open-source community project. There is no authority to claim anything as official. +There are two big instances run by Eugen Rochko, which often are falsely described as official Mastodon instances, mastodon.social and mastodon.online. +Those instances have 250.000 and 87.000 users respectively, and until recently were "moderated" by a single person, Eugen himself. +I'm putting "moderated" in quotes for a reason. There is barely any moderation going on there. Lots of harassment originates from there. But unfortunately, since so many new users get tricked into signing up for them it's not as easy to just block them the way you would smaller instances that become problematic. +Recently a lot of instances have started to block .social and .online anyways, because they just can not deal with the huge increase in moderation effort. There have been PSAs going around for people to please switch to smaller instances if they want to continue to interact with their friends, but it's sadly impossible to reach everyone. + +### Some more resources + +Now you're probably asking yourself "okay, but **how** do I find a good instance? It's all so overwhelming and complicated!!" and like with most problems, the community has already created the resources you need. + +- [Fedi.tips](https://fedi.tips/) has a lot of explanations and information for newer users. +- [Fediverse.party](https://fediverse.party/) shows off all of the different software that exists to interact with the Fediverse and makes it easy to find instances running on those different platforms. I would really strongly suggest trying out something different from Mastodon. It'll be worth it. +- [Fediverse.info](https://fediverse.info/explore/people) has a tool to dicsover users to follow. It is opt-in, meaning everyone on the list consented to be findable through it. +- [f00fc7c8@kind.social](https://kind.social/@f00fc7c8/109407989829565640) wrote a thread about the history of federated social media and the Fediverse. + +### Welcome to the Fediverse! + +There are still a lot of things I haven't directly adressed in this post. It would be impossible for one on its own to think of everything. +So once you've signed up on a small cozy Fediverse instance, look through the Hashtag #FediTips, write and #Introduction post, ask whatever questions you might still have and start making lots of new friends. +Welcome to the Fediverse 💜. diff --git a/content/index.md b/content/index.md new file mode 100644 index 0000000..1cfef9b --- /dev/null +++ b/content/index.md @@ -0,0 +1,7 @@ ++++ +title = "Hello there!" ++++ + +Hi, I'm Sammy. + +Welcome to my little website :3 diff --git a/content/pages/about_me.md b/content/pages/about_me.md new file mode 100644 index 0000000..1287a92 --- /dev/null +++ b/content/pages/about_me.md @@ -0,0 +1,41 @@ ++++ +title = "About Me" +path = "about" ++++ + +I'm Sammy. A queer catgirl who loves working with computers. +My pronouns are It/Its. **Only** It/Its. +I love learning new things, trying out new technologies and exploring the unknown. + +My first little steps into the world of IT already started as a little kitten. +At age 12, I started learning LUA and the basics of server infrastructure +to host Gameservers with custom code for a video game I had been playing. + +Since then, I have been continuously expanding my knowledge in both programming and administration. + +The linux command line is my cozy place. I selfhost almost everything. +From cloud storage and media streaming to password management and social media. + +I know some JavaScript and some Python, and am currently learning Rust. + +Besides all that computer stuff, I love sewing, especially making cute plushies. I also try to spend at least as much +time outside in nature as I do inside in front of a computer screen. I love being around water and wild animals, I love walking through +forests and listening to all the beautiful birdsongs. + +### Certifications + +I have earned the following certifications: + +#### FreeCodeCamp + +- Data Analysis with Python +- Scientific Computing with Python +- Quality Assurance +- Data Visualization +- Back End Development and APIs +- Front End Development Libraries +- JavaScript Algorithms and Data Structures +- Responsive Web Design + +You can find these certifications on my [FreeCodeCamp Profile](https://www.freecodecamp.org/CherryKitten) and the code for +all the relevant projects in my [git repo](https://codeberg.org/CherryKitten/freecodecamp-projects). diff --git a/content/pages/contact.md b/content/pages/contact.md new file mode 100644 index 0000000..3c57d29 --- /dev/null +++ b/content/pages/contact.md @@ -0,0 +1,74 @@ ++++ +title = "Contact" +path = "contact" ++++ + +## You can find me in the following places: + +- [@sammy@social.cherrykitten.dev](https://social.cherrykitten.dev/@sammy) - My personal Calckey instance, which you can follow from anywhere on the Fediverse! +- [@sammy:cherrykitten.dev](https://matrix.to/#/@sammy:cherrykitten.dev) - My Matrix account, also on my own personal homeserver and reachable from any other matrix server! +- [Discord](https://discordapp.com/users/Sammy%20%F0%9F%90%BE%20(It/Its)#6860) - If you prefer that for some reason, you can reach me on there too I guess. +- [contact@cherrykitten.dev](mailto:contact@cherrykitten.dev) - You could even e-mail me! My public key for encrypted e-mails is at the bottom of this page. +- [GitHub](https://github.com/CherryKitten) - For code and stuff +- [Codeberg](https://codeberg.org/CherryKitten) - For code and stuff but cooler than GitHub + + + +### PGP-Key: + +``` +-----BEGIN PGP PUBLIC KEY BLOCK----- + +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 +CZ+X0brf7A== +=3zvH +-----END PGP PUBLIC KEY BLOCK----- +``` + + diff --git a/content/pages/impressum.md b/content/pages/impressum.md new file mode 100644 index 0000000..e333451 --- /dev/null +++ b/content/pages/impressum.md @@ -0,0 +1,19 @@ ++++ +title = "Impressum" +path = "impressum" ++++ + +Because I live in germany, I'm legally obligated to have this on here 🙄 + +Angaben gemäß § 5 TMG + + Samantha Yilmaz + c/o Postflex #3050 + Emsdettener Str. 10 + 48268 Greven + +Vertreten durch: Samantha Yilmaz + +E-Mail: contact[at]cherrykitten[dot]dev + +Verantwortlich für den Inhalt nach § 55 Abs. 2 RStV: Samantha Yilmaz diff --git a/sass/buttons.scss b/sass/buttons.scss new file mode 100644 index 0000000..7a864b0 --- /dev/null +++ b/sass/buttons.scss @@ -0,0 +1,92 @@ +.button-container { + display: table; + margin-left: auto; + margin-right: auto; +} + +button, +.button, +a.button { + position: relative; + display: flex; + align-items: center; + justify-content: center; + padding: 8px 18px; + margin-bottom: 5px; + text-align: center; + border-radius: 8px; + border: 1px solid transparent; + appearance: none; + cursor: pointer; + outline: none; + + /* variants */ + + &.outline { + background: transparent; + box-shadow: none; + padding: 8px 18px; + + :hover { + transform: none; + box-shadow: none; + } + } + + &.primary { + box-shadow: 0 4px 6px rgba(50, 50, 93, .11), 0 1px 3px rgba(0, 0, 0, .08); + + &:hover { + box-shadow: 0 2px 6px rgba(50, 50, 93, .21), 0 1px 3px rgba(0, 0, 0, .08); + } + } + + &.link { + background: none; + font-size: 1rem; + } + + + /* sizes */ + + &.small { + font-size: .8rem; + } + + &.wide { + min-width: 200px; + padding: 14px 24px; + } +} + +a.read-more, +a.read-more:hover, +a.read-more:active { + display: inline-flex; + background: none; + box-shadow: none; + padding: 0; + margin: 20px 0; + max-width: 100%; +} + +.code-toolbar { + margin-bottom: 20px; + + .toolbar-item a { + position: relative; + display: inline-flex; + align-items: center; + justify-content: center; + padding: 3px 8px; + margin-bottom: 5px; + text-align: center; + font-size: 13px; + font-weight: 500; + border-radius: 8px; + border: 1px solid transparent; + appearance: none; + cursor: pointer; + outline: none; + } +} diff --git a/sass/color/background_rosepine.scss b/sass/color/background_rosepine.scss new file mode 100644 index 0000000..a0cfda4 --- /dev/null +++ b/sass/color/background_rosepine.scss @@ -0,0 +1,5 @@ +:root { + --background: #232136; + + --color: #3e8fb0; +} diff --git a/sass/color/rosepine.scss b/sass/color/rosepine.scss new file mode 100644 index 0000000..4fd0318 --- /dev/null +++ b/sass/color/rosepine.scss @@ -0,0 +1,11 @@ +:root { + --accent: rgb(235, 111, 146); + --accent2: rgb(246, 193, 119); + --accent3: rgb(62, 143, 176); + --accent-alpha-70: rgba(235, 111, 146,.7); + --accent-alpha-20: rgba(235, 111, 146,.2); + + --background: #232136; + --color: #e0def4; + --border-color: rgba(246, 193, 119, .1); +} diff --git a/sass/footer.scss b/sass/footer.scss new file mode 100644 index 0000000..21be315 --- /dev/null +++ b/sass/footer.scss @@ -0,0 +1,64 @@ +@import "variables"; + +.footer { + padding: 40px 0; + flex-grow: 0; + opacity: .5; + + &__inner { + display: flex; + align-items: center; + justify-content: space-between; + margin: 0; + width: 760px; + max-width: 100%; + + @media (max-width: $tablet-max-width) { + flex-direction: column; + } + } + + a { + color: inherit; + } + + .copyright { + display: flex; + flex-direction: row; + align-items: center; + font-size: 1rem; + color: var(--light-color-secondary); + + &--user { + margin: auto; + text-align: center; + } + + & > *:first-child:not(:only-child) { + margin-right: 10px; + + @media (max-width: $tablet-max-width) { + border: none; + padding: 0; + margin: 0; + } + } + + @media (max-width: $tablet-max-width) { + flex-direction: column; + margin-top: 10px; + } + } + + .copyright-theme-sep { + @media (max-width: $tablet-max-width) { + display: none; + } + } + + .copyright-theme { + @media (max-width: $tablet-max-width) { + font-size: 0.75rem; + } + } +} diff --git a/sass/header.scss b/sass/header.scss new file mode 100644 index 0000000..6d69ca8 --- /dev/null +++ b/sass/header.scss @@ -0,0 +1,98 @@ +@import "variables"; + +@mixin menu { + position: absolute; + background: var(--background); + box-shadow: var(--shadow); + color: white; + border: 2px solid; + margin: 0; + padding: 10px; + list-style: none; + z-index: 99; +} + +.header { + display: flex; + flex-direction: column; + position: relative; + + &__inner { + display: flex; + align-items: center; + justify-content: space-between; + } + + &__logo { + display: flex; + flex: 1; + + &:after { + content: ''; + //background: repeating-linear-gradient(90deg, var(--accent), var(--accent) 2px, transparent 0, transparent 16px); + background: repeating-linear-gradient(90deg, var(--accent), var(--accent) 2px, transparent 0, transparent 16px, var(--accent2), var(--accent2) 17px, transparent 0, transparent 32px); + display: block; + width: 100%; + right: 10px; + } + + a { + flex: 0 0 auto; + max-width: 100%; + } + } + + .menu { + margin: 20px 0; + + &__inner { + display: flex; + flex-wrap: wrap; + list-style: none; + margin: 0; + padding: 0; + + li { + color: var(--accent3); + &.active { + color: var(--accent-alpha-70); + } + + &:not(:last-of-type) { + margin-right: 20px; + margin-bottom: 10px; + flex: 0 0 auto; + } + } + } + + &__sub-inner { + position: relative; + list-style: none; + padding: 0; + margin: 0; + + &:not(:only-child) { + margin-left: 20px; + } + + &-more { + @include menu; + top: 35px; + left: 0; + + &-trigger { + color: var(--accent); + user-select: none; + cursor: pointer; + } + + li { + margin: 0; + padding: 5px; + white-space: nowrap; + } + } + } + } +} diff --git a/sass/logo.scss b/sass/logo.scss new file mode 100644 index 0000000..d455cc7 --- /dev/null +++ b/sass/logo.scss @@ -0,0 +1,8 @@ +.logo { + display: flex; + align-items: center; + text-decoration: none; + background: var(--accent); + color: black; + padding: 5px 10px; +} diff --git a/sass/main.scss b/sass/main.scss new file mode 100644 index 0000000..171b0bc --- /dev/null +++ b/sass/main.scss @@ -0,0 +1,255 @@ +@import "variables"; + +html { + box-sizing: border-box; +} + +*, +*:before, +*:after { + box-sizing: inherit; +} + +body { + margin: 0; + padding: 0; + font-family: Hack, DejaVu Sans Mono, Monaco, Consolas, Ubuntu Mono, monospace; + font-size: 1rem; + line-height: 1.54; + background-color: var(--background); + color: var(--color); + text-rendering: optimizeLegibility; + -webkit-font-smoothing: antialiased; + -webkit-overflow-scrolling: touch; + -webkit-text-size-adjust: 100%; + + @media (max-width: $phone-max-width) { + font-size: 1rem; + } +} + +h1, h2, h3, h4, h5, h6 { + display: flex; + align-items: center; + font-weight: bold; + line-height: 1.3; + color: var(--accent2); +} + +h1 { + font-size: 1.4rem; +} + +h2 { + font-size: 1.3rem; +} + +h3 { + font-size: 1.2rem; +} + +h4, h5, h6 { + font-size: 1.15rem; +} + + +a { + color: inherit; +} + +img { + display: block; + max-width: 100%; + + &.left { + margin-right: auto; + } + + &.center { + margin-left: auto; + margin-right: auto; + } + + &.right { + margin-left: auto; + } +} + +p { + margin-bottom: 20px; +} + +figure { + display: table; + max-width: 100%; + margin: 25px 0; + + &.left { + img { + margin-right: auto; + } + } + + &.center { + img { + margin-left: auto; + margin-right: auto; + } + } + + &.right { + img { + margin-left: auto; + } + } + + figcaption { + font-size: 14px; + padding: 5px 10px; + margin-top: 5px; + background: var(--accent); + color: var(--background); + + &.left { + text-align: left; + } + + &.center { + text-align: center; + } + + &.right { + text-align: right; + } + } +} + +code { + font-family: Hack, DejaVu Sans Mono, Monaco, Consolas, Ubuntu Mono, monospace; + font-feature-settings: normal; + background: var(--accent-alpha-20); + padding: 1px 6px; + margin: 0 2px; + font-size: .95rem; +} + +pre { + font-family: Hack, DejaVu Sans Mono, Monaco, Consolas, Ubuntu Mono, monospace; + padding: 20px; + font-size: .95rem; + overflow: auto; + border-top: 1px solid rgba(255, 255, 255, .1); + border-bottom: 1px solid rgba(255, 255, 255, .1); + + @media (max-width: $phone-max-width) { + white-space: pre-wrap; + word-wrap: break-word; + } + + code { + padding: 0; + margin: 0; + background: none; + } +} + +blockquote { + border-top: 1px solid var(--accent); + border-bottom: 1px solid var(--accent); + margin: 40px 0; + padding: 25px; + + @media (max-width: $phone-max-width) { + padding-right: 0; + } + + &:before { + content: '”'; + font-family: Georgia, serif; + font-size: 3.875rem; + position: absolute; + left: -40px; + top: -20px; + } + + p:first-of-type { + margin-top: 0; + } + + p:last-of-type { + margin-bottom: 0; + } + + p { + position: relative; + } + + p:before { + content: '>'; + display: block; + position: absolute; + left: -25px; + color: var(--accent); + } +} + +table { + table-layout: fixed; + border-collapse: collapse; + width: 100%; + margin: 40px 0; +} + +table, th, td { + border: 1px dashed var(--accent); + padding: 10px; +} + +th { + color: var(--accent); +} + +ul, ol { + margin-left: 30px; + padding: 0; + + li { + position: relative; + } + + @media (max-width: $phone-max-width) { + margin-left: 20px; + } +} + +ol ol { + list-style-type: lower-alpha; +} + +.container { + display: flex; + flex-direction: column; + padding: 40px; + max-width: 864px; + min-height: 100vh; + margin: 0 auto; + + @media (max-width: $phone-max-width) { + padding: 20px; + } +} + +.content { + display: flex; +} + +hr { + width: 100%; + border: none; + background: var(--border-color); + height: 1px; +} + +.hidden { + display: none; +} diff --git a/sass/pagination.scss b/sass/pagination.scss new file mode 100644 index 0000000..566005b --- /dev/null +++ b/sass/pagination.scss @@ -0,0 +1,77 @@ +@import 'variables'; + +.pagination { + margin-top: 50px; + + &__title { + display: flex; + text-align: center; + position: relative; + margin: 100px 0 20px; + + &-h { + text-align: center; + margin: 0 auto; + padding: 5px 10px; + background: var(--background); + font-size: .8rem; + text-transform: uppercase; + letter-spacing: .1em; + z-index: 1; + } + + hr { + position: absolute; + left: 0; + right: 0; + width: 100%; + margin-top: 15px; + z-index: 0; + } + } + + &__buttons { + display: flex; + align-items: center; + justify-content: center; + + @media (max-width: $phone-max-width) { + flex-direction: column; + } + } +} + +.button { + position: relative; + display: inline-flex; + align-items: center; + justify-content: center; + font-size: 1rem; + border-radius: 8px; + max-width: 40%; + padding: 0; + cursor: pointer; + appearance: none; + + @media (max-width: $phone-max-width) { + max-width: 80%; + } + + + .button { + margin-left: 10px; + } + + a { + display: flex; + padding: 8px 16px; + text-overflow: ellipsis; + white-space: nowrap; + overflow: hidden; + } + + &__text { + text-overflow: ellipsis; + white-space: nowrap; + overflow: hidden; + } +} diff --git a/sass/post.scss b/sass/post.scss new file mode 100644 index 0000000..a59a28e --- /dev/null +++ b/sass/post.scss @@ -0,0 +1,135 @@ +@import "variables"; + +.posts { + width: 100%; + margin: 0 auto; +} + +.post { + width: 100%; + text-align: left; + margin: 20px auto; + padding: 20px 0; + + @media (max-width: $tablet-max-width) { + max-width: 660px; + } + + &:not(:last-of-type) { + border-bottom: 1px solid var(--border-color); + } + + %meta { + font-size: 1rem; + margin-bottom: 10px; + color: var(--accent-alpha-70); + } + + &-meta { + @extend %meta; + } + + &-meta-inline { + @extend %meta; + + display: inline; + } + + &-title { + --border: 2px dashed var(--accent); + position: relative; + color: var(--accent2); + margin: 0 0 15px; + padding-bottom: 15px; + border-bottom: var(--border); + font-weight: normal; + + a { + text-decoration: none; + } + } + + %tags { + margin-bottom: 20px; + font-size: 1rem; + opacity: .5; + } + + &-tags { + @extend %tags; + + display: block; + } + + &-tags-inline { + @extend %tags; + + display: inline; + + @media (max-width: $phone-max-width) { + display: block; + } + } + + &-content { + margin-top: 30px; + } + + &-cover { + border: 20px solid var(--accent); + background: transparent; + margin: 40px 0; + padding: 20px; + + @media (max-width: $phone-max-width) { + padding: 10px; + border-width: 10px; + } + } + + ul { + list-style: none; + + li:before { + content: '►'; + position: absolute; + left: -20px; + color: var(--accent); + } + } +} + +.post--regulation { + h1 { + justify-content: center; + } + + h2 { + justify-content: center; + margin-bottom: 10px; + + &+ h2 { + margin-top: -10px; + margin-bottom: 20px; + } + } +} + +.post-list { + .post-date { + color: var(--accent3); + text-decoration: none; + } + + a { + text-decoration: none; + } + + .post-list-title { + text-decoration: underline; + } + + .post-tag { + text-decoration: underline; + } +} diff --git a/sass/style.scss b/sass/style.scss new file mode 100644 index 0000000..3a289d7 --- /dev/null +++ b/sass/style.scss @@ -0,0 +1,8 @@ +@import 'buttons'; + +@import 'header'; +@import 'logo'; +@import 'main'; +@import 'post'; +@import 'pagination'; +@import 'footer'; diff --git a/sass/variables.scss b/sass/variables.scss new file mode 100644 index 0000000..3b95a9c --- /dev/null +++ b/sass/variables.scss @@ -0,0 +1,2 @@ +$phone-max-width: 683px; +$tablet-max-width: 899px; diff --git a/themes/terminimal b/themes/terminimal new file mode 160000 index 0000000..0ec1aed --- /dev/null +++ b/themes/terminimal @@ -0,0 +1 @@ +Subproject commit 0ec1aed81acf7ea47e457b9289c1974186c3eb3d