Skip to content

Commit

Permalink
feat: link-color variable added
Browse files Browse the repository at this point in the history
  • Loading branch information
@StevenKowalzik
StevenKowalzik committed Jan 9, 2024
1 parent 1fb4e87 commit e9385f0
Show file tree
Hide file tree
Showing 5 changed files with 93 additions and 77 deletions.
3 changes: 2 additions & 1 deletion embetty/src/_vars.scss
View file
Original file line number Diff line number Diff line change
@@ -1,3 +1,4 @@
$embetty-border-color: #ccc;
$embetty-font-family: Helvetica, Roboto, "Segoe UI", Calibri, sans-serif;
$embetty-font-family: Helvetica, Roboto, 'Segoe UI', Calibri, sans-serif;
$embetty-spacing: 1rem;
$embetty-link-color: #012469;
2 changes: 1 addition & 1 deletion embetty/src/embed/mastodon.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -93,7 +93,7 @@ $quoteLineWidth: 4px;
}

a {
color: #012469;
color: var(--embetty-link-color, $embetty-link-color);
text-decoration: none;
}

Expand Down
21 changes: 11 additions & 10 deletions embetty/src/embed/tweet.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -47,7 +47,7 @@ $quoteLineWidth: 4px;
header {
display: flex;
align-items: center;
margin-bottom: .5rem;
margin-bottom: 0.5rem;

img {
width: $profile-image-width;
Expand Down Expand Up @@ -81,14 +81,14 @@ $quoteLineWidth: 4px;
p {
margin: 0 auto 0.5rem;
line-height: 1.4;
letter-spacing: .01em;
letter-spacing: 0.01em;

@media (min-width: 600px) {
font-size: 18px;
}

a {
color: #012469;
color: var(--embetty-link-color, $embetty-link-color);
text-decoration: none;
}

Expand Down Expand Up @@ -159,8 +159,9 @@ $quoteLineWidth: 4px;

&:hover {
background-color: rgb(245, 248, 250);
border-color: rgba(136,153,166,.5);
transition: background-color .15s ease-in-out, border-color .15s ease-in-out;
border-color: rgba(136, 153, 166, 0.5);
transition: background-color 0.15s ease-in-out,
border-color 0.15s ease-in-out;
}

@media (min-width: 600px) {
Expand All @@ -184,20 +185,20 @@ $quoteLineWidth: 4px;
}

#link-body {
padding: .5rem;
padding: 0.5rem;

@media (min-width: 600px) {
display: flex;
flex-direction: column;
padding: .5rem .8rem;
padding: 0.5rem 0.8rem;
}
}

h3 {
font-size: 14px;
line-height: 1.3;
margin: 0;
margin-bottom: .3em;
margin-bottom: 0.3em;
}

p {
Expand All @@ -210,7 +211,7 @@ $quoteLineWidth: 4px;
line-height: 18px;
font-size: 14px;
margin: 0;
margin-bottom: .3em;
margin-bottom: 0.3em;
}
}

Expand All @@ -221,7 +222,7 @@ $quoteLineWidth: 4px;
}

#created-at {
margin-top: .5rem;
margin-top: 0.5rem;
display: block;
font-size: 14px;
color: #777;
Expand Down
8 changes: 5 additions & 3 deletions example/app.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,12 +9,13 @@ html {
}

body {
font: 14px "Lucida Grande", Helvetica, Arial, sans-serif;
font: 14px 'Lucida Grande', Helvetica, Arial, sans-serif;
margin: auto;
padding: 1rem;
}

embetty-tweet, pre {
embetty-tweet,
pre {
margin: 1rem auto !important;
}

Expand All @@ -39,5 +40,6 @@ pre {

.my-theme {
--embetty-border-color: red;
--embetty-font-family: 'Comic Sans MS'
--embetty-font-family: 'Comic Sans MS';
--embetty-link-color: red;
}
136 changes: 74 additions & 62 deletions example/tweet.html
View file
Original file line number Diff line number Diff line change
@@ -1,82 +1,94 @@
<!DOCTYPE html>
<html lang="en">
<head>
<title>embetty</title>
<link href="app.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.9.0/themes/prism.min.css" rel="stylesheet" />
<meta data-embetty-server=".">
<script async src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.9.0/prism.min.js"></script>
<script async src="embetty.js"></script>
</head>
<body>
<header>
<h1>embetty</h1>
<h2>Basic usage</h2>
</header>
<main>
<embetty-tweet status="880759671543541763"></embetty-tweet>
<head>
<title>embetty</title>
<link href="app.css" rel="stylesheet" />
<link
href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.9.0/themes/prism.min.css"
rel="stylesheet"
/>
<meta data-embetty-server="." />
<script
async
src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.9.0/prism.min.js"
></script>
<script async src="embetty.js"></script>
</head>
<body>
<header>
<h1>embetty</h1>
<h2>Basic usage</h2>
</header>
<main>
<embetty-tweet status="880759671543541763"></embetty-tweet>

<article>
<pre><code class="language-html">&lt;embetty-tweet status=&quot;941595208298483712&quot;&gt;&lt;/embetty-tweet&gt;</code></pre>
<embetty-tweet status="941595208298483712"></embetty-tweet>
</article>
<article>
<pre><code class="language-html">&lt;embetty-tweet status=&quot;928365837123227654&quot;&gt;&lt;/embetty-tweet&gt;</code></pre>
<embetty-tweet status="928365837123227654"></embetty-tweet>
</article>
<article>
<pre><code class="language-html">&lt;embetty-tweet status=&quot;941595208298483712&quot;&gt;&lt;/embetty-tweet&gt;</code></pre>
<embetty-tweet status="941595208298483712"></embetty-tweet>
</article>
<article>
<pre><code class="language-html">&lt;embetty-tweet status=&quot;928365837123227654&quot;&gt;&lt;/embetty-tweet&gt;</code></pre>
<embetty-tweet status="928365837123227654"></embetty-tweet>
</article>

<article>
<embetty-tweet class="my-theme" status="934386458852495360"></embetty-tweet>
<pre><code class="language-html">&lt;style&gt;
<article>
<embetty-tweet
class="my-theme"
status="934386458852495360"
></embetty-tweet>
<pre><code class="language-html">&lt;style&gt;
.my-theme {
--embetty-border-color: red;
--embetty-font-family: 'Comic Sans MS';
--embetty-link-color: red;
}
&lt;/style&gt;
&lt;embetty-tweet class=&quot;my-theme&quot; status=&quot;934386458852495360&quot;&gt;&lt;/embetty-tweet&gt;
</code></pre>
</article>

<article>
<pre><code class="language-html"><pre><code class="language-html">&lt;embetty-tweet status=&quot;880759671543541763&quot;&gt;&lt;/embetty-tweet&gt;</code></pre></code></pre>
<embetty-tweet status="880759671543541763"></embetty-tweet>
</article>
</article>

<article>
<pre><code class="language-html"><pre><code class="language-html">&lt;embetty-tweet status=&quot;916618051906428928&quot;&gt;&lt;/embetty-tweet&gt;</code></pre></code></pre>
<embetty-tweet status="916618051906428928"></embetty-tweet>
</article>
<article>
<pre><code class="language-html"><pre><code class="language-html">&lt;embetty-tweet status=&quot;880759671543541763&quot;&gt;&lt;/embetty-tweet&gt;</code></pre></code></pre>
<embetty-tweet status="880759671543541763"></embetty-tweet>
</article>

<article>
<pre><code class="language-html"><pre><code class="language-html">&lt;embetty-tweet status=&quot;916618051906428928&quot; include-thread&gt;&lt;/embetty-tweet&gt;</code></pre></code></pre>
<embetty-tweet status="916618051906428928" include-thread></embetty-tweet>
</article>
<article>
<pre><code class="language-html"><pre><code class="language-html">&lt;embetty-tweet status=&quot;916618051906428928&quot;&gt;&lt;/embetty-tweet&gt;</code></pre></code></pre>
<embetty-tweet status="916618051906428928"></embetty-tweet>
</article>

<article>
<pre><code class="language-html"><pre><code class="language-html">&lt;embetty-tweet status=&quot;936339584740454402&quot;&gt;&lt;/embetty-tweet&gt;</code></pre></code></pre>
<embetty-tweet status="936339584740454402"></embetty-tweet>
</article>
<article>
<pre><code class="language-html"><pre><code class="language-html">&lt;embetty-tweet status=&quot;916618051906428928&quot; include-thread&gt;&lt;/embetty-tweet&gt;</code></pre></code></pre>
<embetty-tweet
status="916618051906428928"
include-thread
></embetty-tweet>
</article>

<article>
<pre><code class="language-html"><pre><code class="language-html">&lt;embetty-tweet status=&quot;587993401691373568&quot;&gt;&lt;/embetty-tweet&gt;</code></pre></code></pre>
<embetty-tweet status="587993401691373568"></embetty-tweet>
</article>
<article>
<pre><code class="language-html"><pre><code class="language-html">&lt;embetty-tweet status=&quot;936339584740454402&quot;&gt;&lt;/embetty-tweet&gt;</code></pre></code></pre>
<embetty-tweet status="936339584740454402"></embetty-tweet>
</article>

<article>
<pre><code class="language-html"><pre><code class="language-html">&lt;embetty-tweet status=&quot;921685144594931712&quot;&gt;&lt;/embetty-tweet&gt;</code></pre></code></pre>
<embetty-tweet status="921685144594931712"></embetty-tweet>
</article>
<article>
<pre><code class="language-html"><pre><code class="language-html">&lt;embetty-tweet status=&quot;587993401691373568&quot;&gt;&lt;/embetty-tweet&gt;</code></pre></code></pre>
<embetty-tweet status="587993401691373568"></embetty-tweet>
</article>

<article>
<pre><code class="language-html"><pre><code class="language-html">&lt;embetty-tweet status=&quot;934029337019416579&quot;&gt;&lt;/embetty-tweet&gt;</code></pre></code></pre>
<embetty-tweet status="934029337019416579"></embetty-tweet>
</article>
<article>
<pre><code class="language-html"><pre><code class="language-html">&lt;embetty-tweet status=&quot;921685144594931712&quot;&gt;&lt;/embetty-tweet&gt;</code></pre></code></pre>
<embetty-tweet status="921685144594931712"></embetty-tweet>
</article>

<article>
<pre><code class="language-html"><pre><code class="language-html">&lt;embetty-tweet status=&quot;935819741947744256&quot;&gt;&lt;/embetty-tweet&gt;</code></pre></code></pre>
<embetty-tweet status="935819741947744256"></embetty-tweet>
</article>
<article>
<pre><code class="language-html"><pre><code class="language-html">&lt;embetty-tweet status=&quot;934029337019416579&quot;&gt;&lt;/embetty-tweet&gt;</code></pre></code></pre>
<embetty-tweet status="934029337019416579"></embetty-tweet>
</article>

</main>
</body>
<article>
<pre><code class="language-html"><pre><code class="language-html">&lt;embetty-tweet status=&quot;935819741947744256&quot;&gt;&lt;/embetty-tweet&gt;</code></pre></code></pre>
<embetty-tweet status="935819741947744256"></embetty-tweet>
</article>
</main>
</body>
</html>

0 comments on commit e9385f0

Please sign in to comment.