feat: Rename color variables, tweak some styles
This commit is contained in:
daudix-UFO
@ -22,8 +22,6 @@ There should be whitespace between paragraphs. We recommend including a README,
|
||||
|
||||
# Heading 1
|
||||
|
||||
> Yes, H1 has ultra-bold style and a dot at the end. You probably shouldn't use it for anything other than page header :)
|
||||
|
||||
This is a normal paragraph following a header. Codeberg is a code hosting platform for version control and collaboration. It lets you and others work together on projects from anywhere.
|
||||
|
||||
## Heading 2
|
||||
|
||||
132
sass/_main.scss
132
sass/_main.scss
@ -27,7 +27,6 @@ body {
|
||||
|
||||
body {
|
||||
font-family: "Inter Variable", sans-serif;
|
||||
font-weight: 400;
|
||||
line-height: 1.6;
|
||||
color: var(--fg-color);
|
||||
background-color: var(--bg-color);
|
||||
@ -135,13 +134,8 @@ a {
|
||||
}
|
||||
}
|
||||
|
||||
b,
|
||||
strong {
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
small {
|
||||
color: var(--fg60);
|
||||
color: var(--fg-muted-5);
|
||||
font-size: 0.8rem;
|
||||
}
|
||||
|
||||
@ -162,7 +156,7 @@ dl {
|
||||
}
|
||||
|
||||
hr {
|
||||
border: 0.125rem solid var(--fg20);
|
||||
border: 0.125rem solid var(--fg-muted-3);
|
||||
margin: 3rem auto;
|
||||
width: 40%;
|
||||
border-radius: 9999px;
|
||||
@ -170,15 +164,10 @@ hr {
|
||||
|
||||
blockquote {
|
||||
border-left: 0.25rem solid var(--primary-color);
|
||||
border-radius: var(--rounded-corner-small);
|
||||
color: var(--fg60);
|
||||
border-radius: 0.25rem;
|
||||
color: var(--fg-muted-5);
|
||||
margin: 0;
|
||||
padding: 0 0.75rem;
|
||||
|
||||
// make border slightly transparent for nested blockquote
|
||||
> blockquote {
|
||||
border-left: 0.3rem solid var(--primary-color-alpha);
|
||||
}
|
||||
}
|
||||
|
||||
abbr {
|
||||
@ -195,7 +184,7 @@ code {
|
||||
code:not(pre code) {
|
||||
padding: 2px 6px;
|
||||
border-radius: var(--rounded-corner-small);
|
||||
background-color: var(--fg10);
|
||||
background-color: var(--fg-muted-2);
|
||||
color: var(--red-fg);
|
||||
}
|
||||
|
||||
@ -221,7 +210,7 @@ pre {
|
||||
|
||||
mark {
|
||||
display: block;
|
||||
background-color: var(--fg05);
|
||||
background-color: var(--fg-muted-1);
|
||||
color: var(--fg-color); // unset mark color from primary color to text color
|
||||
border-radius: 0; // unset code block border radius
|
||||
padding: 0; // unset mark padding
|
||||
@ -239,9 +228,9 @@ pre {
|
||||
}
|
||||
|
||||
kbd {
|
||||
background-color: var(--fg05);
|
||||
background-color: var(--fg-muted-1);
|
||||
border-radius: var(--rounded-corner-small);
|
||||
box-shadow: inset 0 -2px 0 var(--fg10), 0 -1px 0 var(--fg10);
|
||||
box-shadow: inset 0 -2px 0 var(--fg-muted-2), 0 -1px 0 var(--fg-muted-2);
|
||||
cursor: pointer;
|
||||
display: inline-block;
|
||||
font-size: 0.8rem;
|
||||
@ -250,8 +239,8 @@ kbd {
|
||||
|
||||
// small nice thingy, keys can be pressed!
|
||||
&:active {
|
||||
background-color: var(--fg10);
|
||||
box-shadow: inset 0 1px 0 var(--fg10);
|
||||
background-color: var(--fg-muted-2);
|
||||
box-shadow: inset 0 1px 0 var(--fg-muted-2);
|
||||
transform: translateY(2px);
|
||||
}
|
||||
}
|
||||
@ -268,12 +257,12 @@ figcaption {
|
||||
margin-bottom: 2rem;
|
||||
display: block;
|
||||
text-align: center;
|
||||
color: var(--fg50);
|
||||
color: var(--fg-muted-4);
|
||||
font-size: 0.8rem;
|
||||
}
|
||||
|
||||
details {
|
||||
background-color: var(--fg05);
|
||||
background-color: var(--fg-muted-1);
|
||||
border-radius: var(--rounded-corner);
|
||||
box-shadow: var(--shadow);
|
||||
padding: 1rem;
|
||||
@ -285,9 +274,9 @@ details {
|
||||
|
||||
// TABLES
|
||||
table {
|
||||
display: block;
|
||||
overflow-x: auto;
|
||||
border-collapse: collapse;
|
||||
table-layout: fixed;
|
||||
width: 100%;
|
||||
|
||||
th {
|
||||
font-weight: bold;
|
||||
@ -296,7 +285,18 @@ table {
|
||||
th,
|
||||
td {
|
||||
padding: 0.5rem 1rem;
|
||||
border: 1px solid var(--fg20);
|
||||
}
|
||||
|
||||
tr {
|
||||
border-bottom: 1px solid var(--fg-muted-2);
|
||||
|
||||
&:nth-child(even) {
|
||||
background-color: var(--fg-muted-1);
|
||||
}
|
||||
|
||||
th {
|
||||
background-color: var(--fg-muted-2);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -349,7 +349,7 @@ img {
|
||||
.nav {
|
||||
overflow: auto;
|
||||
width: 80vw;
|
||||
// max-width: var(--content-width);
|
||||
max-width: calc(var(--content-width) + 10rem);
|
||||
margin: 1rem auto;
|
||||
box-shadow: 0px 12px 24px -16px rgba(0, 0, 0, 0.5);
|
||||
border-radius: var(--rounded-corner-big);
|
||||
@ -384,11 +384,11 @@ img {
|
||||
padding: 0.4rem 1rem;
|
||||
border-radius: var(--rounded-corner);
|
||||
background-color: transparent;
|
||||
color: var(--fg50);
|
||||
color: var(--fg-muted-4);
|
||||
transition: var(--transition);
|
||||
|
||||
&:hover {
|
||||
background-color: var(--fg05);
|
||||
background-color: var(--fg-muted-1);
|
||||
color: var(--primary-color);
|
||||
text-decoration: none;
|
||||
}
|
||||
@ -453,18 +453,27 @@ img {
|
||||
}
|
||||
|
||||
.inline-button {
|
||||
background-color: var(--fg05);
|
||||
background-color: var(--fg-muted-1);
|
||||
border-radius: var(--rounded-corner);
|
||||
color: var(--fg-color);
|
||||
display: inline-block;
|
||||
font-size: 0.9rem;
|
||||
padding: 0.4rem 1rem;
|
||||
transition: var(--transition);
|
||||
}
|
||||
|
||||
.inline-button:hover {
|
||||
background-color: var(--fg10);
|
||||
text-decoration: none;
|
||||
&:hover {
|
||||
background-color: var(--fg-muted-2);
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
&.colored {
|
||||
color: var(--primary-color);
|
||||
background-color: transparent;
|
||||
|
||||
&:hover {
|
||||
background-color: var(--primary-color-alpha);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// CRT
|
||||
@ -477,8 +486,7 @@ img {
|
||||
pre {
|
||||
color: var(--primary-color);
|
||||
padding: 1rem 1rem;
|
||||
text-shadow: var(--primary-color-alpha) 0 0 4px,
|
||||
var(--primary-color) 0 0 12px;
|
||||
text-shadow: var(--primary-color-alpha) 0 0 4px, var(--primary-color) 0 0 12px;
|
||||
// unset some <pre> stuff
|
||||
background-color: unset;
|
||||
box-shadow: unset;
|
||||
@ -587,7 +595,7 @@ img {
|
||||
color: var(--fg-color);
|
||||
padding: 0.25rem 0.75rem;
|
||||
transition: var(--transition);
|
||||
background-color: var(--fg05);
|
||||
background-color: var(--fg-muted-1);
|
||||
|
||||
&:hover {
|
||||
color: rgb(255, 255, 255);
|
||||
@ -612,16 +620,44 @@ img {
|
||||
}
|
||||
}
|
||||
|
||||
.heading {
|
||||
text-align: center;
|
||||
&::after {
|
||||
content: ".";
|
||||
color: var(--primary-color);
|
||||
.post-nav {
|
||||
display: flex;
|
||||
margin-top: 6rem;
|
||||
border-top: 1px solid var(--fg-muted-2);
|
||||
|
||||
.post-nav-item {
|
||||
border-bottom: 0;
|
||||
font-weight: 600;
|
||||
padding-bottom: 0.5rem;
|
||||
width: 50%;
|
||||
padding-top: 1rem;
|
||||
text-decoration: none;
|
||||
box-sizing: border-box;
|
||||
|
||||
&:hover .post-title {
|
||||
color: var(--primary-color);
|
||||
}
|
||||
|
||||
&:nth-child(2n+1) {
|
||||
padding-left: 0;
|
||||
padding-right: 1rem;
|
||||
}
|
||||
|
||||
&:nth-child(2n) {
|
||||
text-align: right;
|
||||
padding-right: 0;
|
||||
padding-left: 1rem;
|
||||
}
|
||||
|
||||
.nav-arrow {
|
||||
font-weight: 400;
|
||||
color: var(--fg-muted-5);
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
.post-title {
|
||||
color: var(--fg-color);
|
||||
transition: var(--transition);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.date-row {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
@ -19,27 +19,20 @@ $glow: 0 0 0 1px color.scale($primary-color, $alpha: -95%),
|
||||
0 4px 24px 4px color.scale($primary-color, $alpha: -90%);
|
||||
|
||||
:root {
|
||||
// GENERAL SETUP
|
||||
// COLORS
|
||||
--bg-color: #{$bg-color-l};
|
||||
--content-width: 720px;
|
||||
--crt-bg: #{$crt-bg};
|
||||
--fg-color: rgba(0, 0, 0, 0.8);
|
||||
--primary-color-alpha: #{$primary-color-alpha};
|
||||
--primary-color: #{$primary-color};
|
||||
--rounded-corner-big: 18px;
|
||||
--rounded-corner-small: 8px;
|
||||
--rounded-corner: 12px;
|
||||
|
||||
// CUSTOM COLOR PALETTE
|
||||
--fg05: rgba(0, 0, 0, 0.05);
|
||||
--fg10: rgba(0, 0, 0, 0.1);
|
||||
--fg20: rgba(0, 0, 0, 0.2);
|
||||
--fg50: rgba(0, 0, 0, 0.5);
|
||||
--fg60: rgba(0, 0, 0, 0.6);
|
||||
--fg-muted-1: rgba(0, 0, 0, 0.05);
|
||||
--fg-muted-2: rgba(0, 0, 0, 0.1);
|
||||
--fg-muted-3: rgba(0, 0, 0, 0.2);
|
||||
--fg-muted-4: rgba(0, 0, 0, 0.5);
|
||||
--fg-muted-5: rgba(0, 0, 0, 0.6);
|
||||
--nav-bg: #{$nav-bg-l};
|
||||
|
||||
--orange-bg: rgba(255, 120, 0, 0.1);
|
||||
--orange-fg: rgb(255, 120, 0);
|
||||
--primary-color-alpha: #{$primary-color-alpha};
|
||||
--primary-color: #{$primary-color};
|
||||
--purple-bg: rgba(145, 65, 172, 0.1);
|
||||
--purple-fg: rgb(145, 65, 172);
|
||||
--red-bg: rgba(224, 27, 36, 0.1);
|
||||
@ -47,15 +40,15 @@ $glow: 0 0 0 1px color.scale($primary-color, $alpha: -95%),
|
||||
--yellow-bg: rgba(156, 110, 3, 0.1);
|
||||
--yellow-fg: rgb(156, 110, 3);
|
||||
|
||||
// CUSTOM VARIABLES
|
||||
--shadow: 0 0 0 1px rgba(0, 0, 0, 0.03), 0 1px 3px 1px rgba(0, 0, 0, 0.07),
|
||||
0 2px 6px 2px rgba(0, 0, 0, 0.03);
|
||||
--shadow-raised: 0 0 0 1px rgba(0, 0, 0, 0.06),
|
||||
0 2px 6px 2px rgba(0, 0, 0, 0.14), 0 4px 12px 4px rgba(0, 0, 0, 0.06);
|
||||
--drop-shadow: drop-shadow(0 4px 3px rgba(0, 0, 0, 0.07))
|
||||
drop-shadow(0 2px 2px rgba(0, 0, 0, 0.06));
|
||||
// VARIABLES
|
||||
--content-width: 720px;
|
||||
--drop-shadow: drop-shadow(0 4px 3px rgba(0, 0, 0, 0.07)) drop-shadow(0 2px 2px rgba(0, 0, 0, 0.06));
|
||||
--glow: #{$glow};
|
||||
|
||||
--rounded-corner-big: 18px;
|
||||
--rounded-corner-small: 8px;
|
||||
--rounded-corner: 12px;
|
||||
--shadow-raised: 0 0 0 1px rgba(0, 0, 0, 0.06), 0 2px 6px 2px rgba(0, 0, 0, 0.14), 0 4px 12px 4px rgba(0, 0, 0, 0.06);
|
||||
--shadow: 0 0 0 1px rgba(0, 0, 0, 0.03), 0 1px 3px 1px rgba(0, 0, 0, 0.07), 0 2px 6px 2px rgba(0, 0, 0, 0.03);
|
||||
--transition-bezier: 350ms cubic-bezier(0.17, 0.89, 0.32, 1.28);
|
||||
--transition-long: 800ms;
|
||||
--transition-longer: 400ms;
|
||||
@ -66,18 +59,15 @@ $glow: 0 0 0 1px color.scale($primary-color, $alpha: -95%),
|
||||
:root {
|
||||
color-scheme: dark;
|
||||
|
||||
// GENERAL SETUP
|
||||
// COLORS
|
||||
--bg-color: #{$bg-color-d};
|
||||
--fg-color: rgb(255, 255, 255);
|
||||
|
||||
// CUSTOM COLOR PALETTE
|
||||
--fg05: rgba(255, 255, 255, 0.05);
|
||||
--fg10: rgba(255, 255, 255, 0.1);
|
||||
--fg20: rgba(255, 255, 255, 0.2);
|
||||
--fg50: rgba(255, 255, 255, 0.5);
|
||||
--fg60: rgba(255, 255, 255, 0.6);
|
||||
--fg-muted-1: rgba(255, 255, 255, 0.05);
|
||||
--fg-muted-2: rgba(255, 255, 255, 0.1);
|
||||
--fg-muted-3: rgba(255, 255, 255, 0.2);
|
||||
--fg-muted-4: rgba(255, 255, 255, 0.5);
|
||||
--fg-muted-5: rgba(255, 255, 255, 0.6);
|
||||
--nav-bg: #{$nav-bg-d};
|
||||
|
||||
--orange-bg: rgba(255, 190, 111, 0.1);
|
||||
--orange-fg: rgb(255, 190, 111);
|
||||
--purple-bg: rgba(220, 138, 221, 0.1);
|
||||
|
||||
@ -1,28 +1,26 @@
|
||||
{% extends "base.html" %}
|
||||
|
||||
{% block content %}
|
||||
<h1 class="heading">{{ page.title }}</h1>
|
||||
<h1>{{ page.title }}</h1>
|
||||
|
||||
{%- if page.date %}
|
||||
<div class="date-row">
|
||||
<small>
|
||||
<time datetime='{{ page.date | date(format='%+') }}' pubdate>
|
||||
{{- page.date | date(format=config.extra.date_format) -}}
|
||||
</time>
|
||||
{%- if page.taxonomies %}
|
||||
{%- for name, taxon in page.taxonomies %}
|
||||
<span>•</span>
|
||||
<ul class="tags">
|
||||
{%-for item in taxon %}
|
||||
<li>
|
||||
<a class="tag" href="{{ get_taxonomy_url(kind=name, name=item) }}">{{ item }}</a>
|
||||
</li>
|
||||
{%- endfor %}
|
||||
</ul>
|
||||
<small>
|
||||
<time datetime='{{ page.date | date(format='%+') }}' pubdate>
|
||||
{{- page.date | date(format=config.extra.date_format) -}}
|
||||
</time>
|
||||
{%- if page.taxonomies %}
|
||||
{%- for name, taxon in page.taxonomies %}
|
||||
<span>•</span>
|
||||
<ul class="tags">
|
||||
{%-for item in taxon %}
|
||||
<li>
|
||||
<a class="tag" href="{{ get_taxonomy_url(kind=name, name=item) }}">{{ item }}</a>
|
||||
</li>
|
||||
{%- endfor %}
|
||||
{%- endif %}
|
||||
</small>
|
||||
</div>
|
||||
</ul>
|
||||
{%- endfor %}
|
||||
{%- endif %}
|
||||
</small>
|
||||
{%- endif %}
|
||||
|
||||
{% if page.extra.archive %}
|
||||
@ -72,30 +70,27 @@
|
||||
|
||||
{% if page.extra.comments.id %}
|
||||
{% include "includes/comments.html" %}
|
||||
<hr>
|
||||
{% endif %}
|
||||
|
||||
{% if page.lower or page.higher %}
|
||||
{% if page.lower %}
|
||||
<h2>
|
||||
Read Next
|
||||
</h2>
|
||||
<a class="link-page" href="{{ page.lower.permalink }}">
|
||||
{{ page.lower.title }}
|
||||
</a>
|
||||
{% endif %}
|
||||
<nav class="post-nav">
|
||||
{% if page.higher %}
|
||||
<h2>
|
||||
Read Previous
|
||||
</h2>
|
||||
<a class="link-page" href="{{ page.higher.permalink }}">
|
||||
{{ page.higher.title }}
|
||||
<a class="post-nav-item post-nav-prev" href="{{ page.higher.permalink }}">
|
||||
<div class="nav-arrow">← Previous</div>
|
||||
<span class="post-title">{{ page.higher.title }}</span>
|
||||
</a>
|
||||
{% endif %}
|
||||
{% if page.lower %}
|
||||
<a class="post-nav-item post-nav-next" href="{{ page.lower.permalink }}">
|
||||
<div class="nav-arrow">Next →</div>
|
||||
<span class="post-title">{{ page.lower.title }}</span>
|
||||
</a>
|
||||
{% endif %}
|
||||
</nav>
|
||||
{% endif %}
|
||||
|
||||
<p class="dialog-buttons">
|
||||
<a href="#top" class="inline-button">Go to top</a>
|
||||
<a href="{{ config.extra.issues_url }}">File an issue</a>
|
||||
<a class="inline-button" href="#top">Go to top</a>
|
||||
<a class="inline-button colored" href="{{ config.extra.issues_url }}">File an issue</a>
|
||||
</p>
|
||||
{% endblock content %}
|
||||
|
||||
@ -39,6 +39,5 @@
|
||||
</small>
|
||||
{%- endif %}
|
||||
</article>
|
||||
<hr>
|
||||
{% endfor %}
|
||||
{% endblock content %}
|
||||
|
||||
Reference in New Issue
Block a user