PHiAX/phiax-hugo-theme
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Public release 1

Browse source
This commit is contained in:
Frank "PHiAX" Weggelaar 2026-03-12 16:52:48 +01:00
parent a7b5476385
commit d60b4ffecd
5 changed files with 125 additions and 20 deletions
Download patch file Download diff file Expand all files Collapse all files

136
assets/css/main.css
View file

@ -1,4 +1,40 @@
@import url('https://fonts.googleapis.com/css2?family=Josefin+Sans:ital,wght@0,100..700;1,100..700&family=Open+Sans:ital,wght@0,300..800;1,300..800&display=swap');
@font-face { font-family: 'Josefin Sans'; src: url('/fonts/JosefinSans.ttf') format('truetype'), font-weight: normal; font-style: normal; }
@font-face { font-family: 'Open Sans'; src: url('/fonts/OpenSans.ttf') format('truetype'), font-weight: normal; font-style: normal; }
@font-face { font-family: 'cc-icons'; src: url('/fonts/cc-icons.otf') format('opentype'), font-weight: normal; font-style: normal; }
.cc
{
-moz-font-feature-settings: normal;
-moz-font-language-override: normal;
display: inline-block;
font-family: cc-icons;
font-size: 2em;
font-stretch: normal;
font-style: normal;
font-variant: normal;
font-weight: normal;
text-rendering: auto;
}
/*Share Alike*/
.cc-sa:before
{
content: "\0061";
}
/*Attribution*/
.cc-by:before
{
content: "\0062";
}
/* CC */
.cc-cc:before
{
content: "\0063";
}
/* Non Commercial Euro */
.cc-nc-eu:before
{
content: "\0065";
}
*,
*::before,
@ -88,24 +124,18 @@ article.article-box article.article-content {
}
article.article-box article.article-content .article {
padding: 0 1rem 0 1rem;
font-family: 'Open Sans', sans-serif;
padding: 0 1rem 0 1rem;
font-family: 'Open Sans', sans-serif;
}
article.article-box article.article-content .article p {
padding-bottom: 0.5rem;
}
article.article-box article.article-content .article h1{
article.article-box article.article-content .article h1,h2,h3 {
padding-block-start: 0.5rem;
font-family: 'Josefin Sans', sans-serif;
}
article.article-box article.article-content .article h2{
padding-block-start: 0.5rem;
font-family: 'Josefin Sans', sans-serif;
}
article.article-box article.article-content .article h3{
padding-block-start: 0.5rem;
font-family: 'Josefin Sans', sans-serif;
}
article.article-box article.article-content .article-title {
justify-self: start;
@ -179,6 +209,82 @@ article.article-box:nth-last-child(2) {
margin-bottom: 3rem;
}
article.article-box article.article-content .article-tag-ribbon {
justify-self: end;
margin-right: calc(var(--overlap-size) * -1);
padding-block: 0.25rem;
padding-inline: 2.5rem;
background-color: var(--accent-color);
color: white;
font-size: 1.1rem;
background-image: linear-gradient(transparent 50%, rgba(0, 0, 0, 0.25) 0);
background-size: 100% 200%;
transition: background-position 100ms ease;
cursor: pointer;
position: relative;
}
article.article-box article.article-content .article-tag-ribbon:focus-visible {
outline-offset: 5px;
outline: 2px solid var(--accent-color);
background-position: 0 100%;
}
article.article-box article.article-content .article-tag-ribbon::after {
content: "";
position: absolute;
height: var(--overlap-size);
width: var(--overlap-size);
right: 0;
top: 100%;
background-color: inherit;
background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5));
clip-path: polygon(0 0, 100% 0, 0 100%);
}
/* links */
a:link {
color: #a256ff;
}
a:visited {
color: #7A44DD;
}
a:hover {
color: #9F69FF;
}
a:active {
color: #A48EFF;
}
/* ribbon links */
.article-tag-ribbon a:link {
color: #fff;
}
.article-tag-ribbon a:visited {
color: #fff;
}
.article-tag-ribbon a:hover {
color: #000;
}
.article-tag-ribbon a:active {
color: #fff;
}
img {
max-width: 100%;
}
div.highlight pre {
white-space: pre-wrap;
word-break: break-word;
overflow-x: scroll;
}
footer {
position: fixed;
left: 0;
@ -202,7 +308,7 @@ footer .container {
height: 100%;
padding-inline: 1rem; /* optional inner padding */
gap: 1rem;
font-size: 1.2rem;
font-size: 0.75rem;
color: white;
}
@ -211,7 +317,7 @@ footer::before,
footer::after {
content: '';
position: absolute;
height: 3rem;
height: 100%;
width: 50vw;
background-color: var(--accent-color);
z-index: -1;