sammy/cherrykitten.dev
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Initial commit

Browse source
This commit is contained in:
CherryKitten 2023-01-28 19:40:47 +01:00
commit 908137855a
Signed by: sammy
GPG key ID: 0B696A86A853E955
21 changed files with 1038 additions and 0 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
.gitignore vendored Normal file
View file

@ -0,0 +1,2 @@
public/
.idea

3
.gitmodules vendored Normal file
View file

@ -0,0 +1,3 @@
[submodule "themes/terminimal"]
path = themes/terminimal
url = https://github.com/pawroman/zola-theme-terminimal.git

50
config.toml Normal file
View file

@ -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 = """\
<p>&copy; 2022 - CherryKitten</p><a href="/impressum">Impressum</a>
"""
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"

5
content/blog/_index.md Normal file
View file

@ -0,0 +1,5 @@
+++
paginate_by = 2
sort_by = "date"
template = "index.html"
+++

81
content/blog/fediverse_isnt_just_mastodon.md Normal file
View file

@ -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.
<!-- more -->
### 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 💜.

7
content/index.md Normal file
View file

@ -0,0 +1,7 @@
+++
title = "Hello there!"
+++
Hi, I'm Sammy.
Welcome to my little website :3

41
content/pages/about_me.md Normal file
View file

@ -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).

74
content/pages/contact.md Normal file
View file

@ -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-----
```

19
content/pages/impressum.md Normal file
View file

@ -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

92
sass/buttons.scss Normal file
View file

@ -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;
}
}

5
sass/color/background_rosepine.scss Normal file
View file

@ -0,0 +1,5 @@
:root {
--background: #232136;
--color: #3e8fb0;
}

11
sass/color/rosepine.scss Normal file
View file

@ -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);
}

64
sass/footer.scss Normal file
View file

@ -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;
}
}
}

98
sass/header.scss Normal file
View file

@ -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;
}
}
}
}
}

8
sass/logo.scss Normal file
View file

@ -0,0 +1,8 @@
.logo {
display: flex;
align-items: center;
text-decoration: none;
background: var(--accent);
color: black;
padding: 5px 10px;
}

255
sass/main.scss Normal file
View file

@ -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;
}

77
sass/pagination.scss Normal file
View file

@ -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;
}
}

135
sass/post.scss Normal file
View file

@ -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;
}
}

8
sass/style.scss Normal file
View file

@ -0,0 +1,8 @@
@import 'buttons';
@import 'header';
@import 'logo';
@import 'main';
@import 'post';
@import 'pagination';
@import 'footer';

2
sass/variables.scss Normal file
View file

@ -0,0 +1,2 @@
$phone-max-width: 683px;
$tablet-max-width: 899px;

1
themes/terminimal Submodule

@ -0,0 +1 @@
Subproject commit 0ec1aed81acf7ea47e457b9289c1974186c3eb3d