Skip to content

Commit 32a1a07

Browse files
samharpsamharp
committed
feat: implement Aurum CSS framework
1 parent 9be176c commit 32a1a07

File tree

8 files changed

+129
-131
lines changed

8 files changed

+129
-131
lines changed

‎_data/defaults.json‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
{
2+
"language": "en-US",
3+
"authLanguage": "na",
4+
"uiTheme": "system"
5+
}

‎_includes/footer.njk‎

Lines changed: 21 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,9 @@
11
<footer>
22
{# carbon footer #}
33
<div class="reg-footer">
4-
<section class="flex-container">
4+
<section data-au="flex-container">
55
<!-- logo col -->
6-
<div class="flex-width">
6+
<div data-au="flex-width">
77
<h2 class="p-name">
88
<span class="highlighter-container">
99
<span>Sammy</span>
@@ -14,7 +14,7 @@
1414
</h2>
1515

1616
<!-- social media links -->
17-
<div id="footer-socials-container" class="flex-container align-center">
17+
<div id="footer-socials-container" data-au="flex-container align-center">
1818
<!-- instagram, etc. -->
1919
<div class="social-link-container">
2020
<a href="https://instagram.com/OfficialSamHarp" class="icon-link" target="_blank">
@@ -39,54 +39,54 @@
3939
</div>
4040
</div>
4141
</div>
42-
<div id="footer-link-cols-container" class="flex-width flex-container">
42+
<div id="footer-link-cols-container" data-au="flex-width flex-container">
4343
<!-- columns of links -->
44-
<div class="footer-col-section flex-width">
44+
<div class="footer-col-section" data-au="flex-width">
4545
<h3>Projects</h3>
4646
<div class="footer-link-container">
47-
<a class="standard-link" href="https://pixelplanettoday.com" target="_blank">Pixel Planet Today</a>
47+
<a class="text-link" href="https://www.pixelplanettoday.com" target="_blank">Pixel Planet Today</a>
4848
</div>
4949
<div class="footer-link-container">
50-
<a class="standard-link" href="https://wastedspace.fun" target="_blank">Wasted Space</a>
50+
<a class="text-link" href="https://www.wastedspace.fun" target="_blank">Wasted Space</a>
5151
</div>
5252
<div class="footer-link-container">
53-
<a class="standard-link" href="https://play.google.com/store/apps/details?id=com.terrabyte.byteosnotes" target="_blank">byteOS: Notes</a>
53+
<a class="text-link" href="https://play.google.com/store/apps/details?id=com.terrabyte.byteosnotes" target="_blank">byteOS: Notes</a>
5454
</div>
5555
<div class="footer-link-container">
56-
<a class="standard-link" href="https://pinekeepers.com" target="_blank">Pinekeepers</a>
56+
<a class="text-link" href="https://www.pinekeepers.com" target="_blank">Pinekeepers</a>
5757
</div>
5858
</div>
59-
<div class="footer-col-section flex-width">
59+
<div class="footer-col-section" data-au="flex-width">
6060
<h3>Company</h3>
6161
<div class="footer-link-container">
62-
<a class="standard-link" href="https://terrabyte.eco" target="_blank">Terrabyte</a>
62+
<a class="text-link" href="https://www.terrabyte.eco" target="_blank">Terrabyte</a>
6363
</div>
6464
<div class="footer-link-container">
65-
<a class="standard-link" href="https://goldenharpmedia.com" target="_blank">Golden Harp Media</a>
65+
<a class="text-link" href="https://www.goldenharpmedia.com" target="_blank">Golden Harp Media</a>
6666
</div>
6767
</div>
68-
<div class="footer-col-section flex-width">
68+
<div class="footer-col-section" data-au="flex-width">
6969
<h3>Other</h3>
7070
<div class="footer-link-container">
71-
<a class="standard-link" href="https://github.com/samharp" target="_blank">GitHub</a>
71+
<a class="text-link" href="https://github.com/samharp" target="_blank">GitHub</a>
7272
</div>
7373
<div class="footer-link-container">
74-
<a class="standard-link" href="/now" target="_blank">Current projects (/now)</a>
74+
<a class="text-link" href="/now" target="_blank">Current projects (/now)</a>
7575
</div>
7676
<div class="footer-link-container">
77-
<a class="standard-link" href="https://www.buymeacoffee.com/samharp" target="_blank">Buy Me A Coffee</a>
77+
<a class="text-link" href="https://www.buymeacoffee.com/samharp" target="_blank">Buy Me A Coffee</a>
7878
</div>
7979

80-
<a id="back-to-top-link" class="standard-link show-with-jsx" href="#top">Back to top</a>
80+
<a id="back-to-top-link" class="text-link show-with-jsx" href="#top">Back to top</a>
8181
</div>
8282
</div>
8383
</section>
84-
<section class="flex-container align-center">
85-
<div class="flex-width">
84+
<section data-au="flex-container align-center">
85+
<div data-au="flex-width">
8686
<p>Copyright &copy; <span id="copyright-year"></span>, Sammy Harper. All Rights Reserved.</p>
87-
<p>Website hosted by <a class="standard-link" href="https://goldenharpmedia.com" target="_blank">Golden Harp Media</a>.</p>
87+
<p>Website hosted by <a class="text-link" href="https://goldenharpmedia.com" target="_blank">Golden Harp Media</a>.</p>
8888
</div>
89-
<div id="footer-badges-container" class="set-width flex-container align-center">
89+
<div id="footer-badges-container" data-au="set-width flex-container align-center">
9090
<!-- website carbon -->
9191
<div class="footer-badge">
9292
<div id="wcb" class="carbonbadge"></div>

‎_includes/layouts/base.njk‎

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -22,6 +22,11 @@
2222
<link href="https://fonts.googleapis.com/css2?family=Open+Sans&family=Poppins:wght@600&display=swap" rel="stylesheet">
2323

2424
{# shared styles #}
25+
26+
{# aurum framework #}
27+
<link rel="stylesheet" type="text/css" href="https://au.goldenharpmedia.com/framework/packages/v1.1.1/au.css">
28+
{# <link href="https://www.au.goldenharpmedia.com/packages/vLatest" rel="stylesheet" type="text/css" /> #}
29+
2530
{# site styles #}
2631
<link href="/css/general-styles.css" rel="stylesheet" type="text/css" />
2732
<link href="/css/hero-styles.css" rel="stylesheet" type="text/css" />
@@ -80,7 +85,7 @@
8085
<script data-host="https://microanalytics.io" data-dnt="false" src="https://microanalytics.io/js/script.js" id="ZwSg9rf6GA" async defer></script>
8186

8287
</head>
83-
<body>
88+
<body data-theme="{{ defaults.uiTheme | default("system") }}">
8489
{# svg container component #}
8590
{% include "svgs.njk" %}
8691

‎css/footer-styles.css‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -66,6 +66,9 @@ footer .p-name .highlighter-container span{
6666
.footer-link-container {
6767
margin-bottom: 10px;
6868
}
69+
.footer-col-section{
70+
margin-right:20px;
71+
}
6972
#back-to-top-link{
7073
margin-top:30px;
7174
}
@@ -74,6 +77,7 @@ footer .p-name .highlighter-container span{
7477
flex-wrap: wrap;
7578
}
7679
.footer-col-section{
80+
width:100%;
7781
margin-bottom:40px;
7882
}
7983
.footer-col-section h3{

‎css/general-styles.css‎

Lines changed: 14 additions & 40 deletions
Original file line numberDiff line numberDiff line change
@@ -45,39 +45,6 @@ body{
4545
}
4646

4747
/*layout styles*/
48-
.flex-container{
49-
display:flex;
50-
flex-direction:row;
51-
}
52-
.flex-vertical{
53-
flex-direction: column;
54-
}
55-
.flex-wrap{
56-
flex-wrap: wrap;
57-
}
58-
.flex-width{
59-
flex:auto;
60-
width:100%;
61-
}
62-
.set-width{
63-
flex:none;
64-
}
65-
.align-center{
66-
align-items: center;
67-
}
68-
.justify-center{
69-
justify-content: center;
70-
}
71-
.space-between{
72-
justify-content: space-between;
73-
}
74-
.space-around{
75-
justify-content: space-around;
76-
}
77-
.all-center{
78-
align-items:center;
79-
justify-content:center;
80-
}
8148
.text-right{
8249
text-align:right;
8350
}
@@ -146,13 +113,15 @@ a[href]{
146113
/* transition:.25s; */
147114
}
148115
/*text links with underline*/
149-
a.standard-link{
116+
a.standard-link,
117+
a.text-link{
150118
transform:scale(1);
151119
position:relative;
152120
display:inline-block;
153121
transition:.25s;
154122
}
155-
a.standard-link:after{
123+
a.standard-link:after,
124+
a.text-link:after{
156125
content:"";
157126
opacity:1;
158127
position:absolute;
@@ -163,7 +132,8 @@ a.standard-link:after{
163132
background-color:currentColor;
164133
}
165134
@media (hover: hover) and (pointer: fine) {
166-
a.standard-link:hover:after{
135+
a.standard-link:hover:after,
136+
a.text-link:hover:after{
167137
animation:hoverLink .55s;
168138
}
169139
}
@@ -186,7 +156,8 @@ a.standard-link:after{
186156
width:100%;
187157
}
188158
}
189-
a.standard-link:active{
159+
a.standard-link:active,
160+
a.text-link:active{
190161
transform:scale(.95);
191162
}
192163
/*image links/thumbnails/category*/
@@ -323,10 +294,12 @@ svg{
323294
h2{
324295
font-size:2.5em;
325296
}
326-
a.standard-link{
297+
a.standard-link,
298+
a.text-link{
327299
text-decoration:underline;
328300
}
329-
a.standard-link:after{
301+
a.standard-link:after,
302+
a.text-link:after{
330303
background-color:transparent;
331304
}
332305
}
@@ -428,7 +401,8 @@ h4 .highlighter-container span{
428401
}
429402
/* responsive styles */
430403
@media only screen and (max-width: 865px){
431-
.item-header.align-center{
404+
.item-header.align-center,
405+
.item-header[data-au~="align-center"]{
432406
align-items:initial;
433407
}
434408
.item-category-badge span{

0 commit comments

Comments
 (0)