kristoferssolo/kristofersxyz
1
0
Fork 0
mirror of https://github.com/kristoferssolo/kristofersxyz.git synced 2025-10-21 18:30:34 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

Created button primary

Browse Source
This commit is contained in:
Kristofers Solo 2023-01-20 19:30:23 +02:00
parent c06ce26d6f
commit 1097812daf
8 changed files with 490 additions and 426 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

40
static/main/css/button.css Normal file
View File

@ -0,0 +1,40 @@
.btn {
position: relative;
display: inline-block;
padding: 0.4rem 1rem;
font-weight: 500;
line-height: 1.25rem;
white-space: nowrap;
vertical-align: middle;
cursor: pointer;
user-select: none;
border: 1px solid;
border-radius: 0.375rem;
appearance: none;
text-decoration: none;
transition-property: color, background-color, border-color;
max-width: 3rem;
}
.btn {
color: var(--color-btn-text);
background-color: var(--color-btn-bg);
border-color: var(--color-btn-border);
}
.btn:hover {
background-color: var(--color-btn-hover-bg);
border-color: var(--color-btn-hover-border);
transition-duration: 0.1s;
}
.btn-primary {
color: var(--color-btn-primary-text);
background-color: var(--color-btn-primary-bg);
border-color: var(--color-btn-primary-border);
}
.btn-primary:hover {
background-color: var(--color-btn-primary-hover-bg);
border-color: var(--color-btn-primary-hover-border);
}

13
static/main/css/colors.css
View File

@ -64,6 +64,12 @@
--color-btn-hover-border: var(--color-scale-gray-3);
--color-btn-active-border: var(--color-scale-gray-5);
--color-btn-primary-text: var(--color-scale-white);
--color-btn-primary-bg: var(--color-scale-purple-4);
--color-btn-primary-border: var(--color-scale-gray-0-transparent-10);
--color-btn-primary-hover-bg: var(--color-scale-purple-3);
--color-btn-primary-hover-border: var(--color-scale-gray-0-transparent-10);
--color-fg-default: var(--color-scale-gray-1);
--color-fg-muted: var(--color-scale-gray-3);
--color-fg-subtle: var(--color-scale-gray-4);
@ -71,7 +77,6 @@
--color-text-hover: var(--color-fg-muted);
--color-accent-fg: var(--color-scale-purple-4);
--color-text-link: var(--color-accent-fg);
--color-card-default: var(--color-scale-gray-8);
@ -103,6 +108,12 @@
--color-btn-hover-border: var(--color-scale-gray-1-transparent-15);
--color-btn-active-border: var(--color-scale-gray-1-transparent-15);
--color-btn-primary-text: var(--color-scale-white);
--color-btn-primary-bg: var(--color-scale-purple-4);
--color-btn-primary-border: var(--color-scale-gray-0-transparent-10);
--color-btn-primary-hover-bg: var(--color-scale-purple-3);
--color-btn-primary-hover-border: var(--color-scale-gray-0-transparent-10);
--color-fg-default: var(--color-scale-gray-7);
--color-fg-muted: var(--color-scale-gray-5);
--color-fg-subtle: var(--color-scale-gray-4);

2
static/main/css/layout.css
View File

@ -104,6 +104,7 @@ em {
.primary-navigation a:hover {
background-color: var(--color-btn-hover-bg);
transition-duration: 0.1s;
}
.primary-navigation[data-visible="true"] {
@ -135,5 +136,6 @@ em {
.primary-navigation *:hover {
color: var(--color-header-text-hover);
transition-duration: 0.1s;
}
}

25
static/main/css/markdown.css
View File

@ -1,13 +1,21 @@
@import url("https://fonts.googleapis.com/css2?family=JetBrains+Mono:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800&display=swap");
.block {
margin: 8em auto 8em auto;
max-width: 50rem;
}
.block > .btn-container {
text-align: right;
margin-bottom: 1em;
}
.markdown-body {
font-size: 16px;
border: 1px solid var(--color-border-default);
border-radius: 1rem;
max-width: 50rem;
color: var(--color-fg-default);
padding: 2rem;
margin: 8em auto 8em auto;
line-height: 1.5;
word-wrap: break-word;
}
@ -88,12 +96,12 @@
font-size: 1rem;
}
.markdown-body a {
.markdown-body a:not(.btn) {
text-decoration: none;
color: var(--color-accent-fg);
}
.markdown-body a:hover {
.markdown-body a:hover:not(.btn) {
text-decoration: underline;
}
@ -297,8 +305,15 @@ g-emoji img {
}
@media (max-width: 35em) {
.markdown-body {
.block {
margin: 2em 0 2em 0;
}
.block > .btn-container {
text-align: center;
}
.markdown-body {
border-left: none;
border-right: none;
border-radius: 0;

21
static/projects/css/projects.css
View File

@ -111,30 +111,9 @@
height: 180px;
}
.card-image {
height: 80px;
}
.card-image > i {
font-size: 3em;
}
.card-info-wrapper {
padding: 0px 10px;
}
.card-info > i {
font-size: 0.8em;
}
.card-info-title > h3 {
font-size: 0.9em;
}
.card-info-title > h4 {
font-size: 0.8em;
margin-top: 4px;
}
}
@media (max-width: 35em) {

3
templates/layout.html
View File

@ -22,6 +22,9 @@
<link rel="stylesheet"
type="text/css"
href="{% static 'main/css/navigation_button.css' %}"/>
<link rel="stylesheet"
type="text/css"
href="{% static 'main/css/button.css' %}"/>
<link rel="stylesheet"
type="text/css"
href="{% static 'main/css/layout.css' %}"/>

7
templates/projects/karbs/instructions.html
View File

@ -7,6 +7,12 @@
href="{% static 'main/css/markdown.css' %}"/>
{% endblock %}
{% block content %}
<div class="block">
<div class="btn-container">
<a class="btn btn-primary"
href="https://github.com/kristoferssolo/karbs"
target="_blank">GitHub</a>
</div>
<article class="markdown-body">
<h1>Kristofers Auto-Rice Bootsrapping Script (KARBS)</h1>
<p>
@ -71,4 +77,5 @@ sh karbs</pre>
Note that making your own fork of KARBS is as easy as using your own dotfiles, making a programs file like the one above, and making any other direct changes to the script you want.
</p>
</article>
</div>
{% endblock %}

7
templates/projects/traffic_light_detector/traffic_light_detector.html
View File

@ -7,6 +7,12 @@
href="{% static 'main/css/markdown.css' %}"/>
{% endblock %}
{% block content %}
<div class="block">
<div class="btn-container">
<a class="btn btn-primary"
href="https://github.com/kristoferssolo/Traffic-Light-Detector"
target="_blank">GitHub</a>
</div>
<article class="markdown-body">
<h1>Traffic-Light-Detector</h1>
<h2>
@ -352,4 +358,5 @@
</ol>
</section>
</article>
</div>
{% endblock %}