- {{ if .Get "icone" }}
- {{ partial (printf "svg/%s.svg" (.Get "icone")) . }}
+ {{ if .Get "icon" }}
+ {{ partial (printf "svg/%s.svg" (.Get "icon")) . }}
{{ end }}
{{ .Inner | markdownify }}
\ No newline at end of file
diff --git a/themes/Indiiie/layouts/shortcodes/implementation.html b/themes/Indiiie/layouts/shortcodes/implementation.html
index b0a0a82..7bb9b63 100644
--- a/themes/Indiiie/layouts/shortcodes/implementation.html
+++ b/themes/Indiiie/layouts/shortcodes/implementation.html
@@ -1,4 +1,5 @@
-
+
+
{{ .Inner | markdownify }}
{{ if .Get "type" }}
@@ -14,7 +15,10 @@
{{ if .Get "devs" }}
Devs: {{ .Get "devs" }}
{{ end }}
+
+
{{ if .Get "link" }}
specs ↗
{{ end }}
+
\ No newline at end of file
diff --git a/themes/Indiiie/static/css/style.css b/themes/Indiiie/static/css/style.css
index 6a62538..1d74ba4 100644
--- a/themes/Indiiie/static/css/style.css
+++ b/themes/Indiiie/static/css/style.css
@@ -2,7 +2,7 @@
/* GENERAL */
/****************************/
-/* Global */
+/* GLOBAL */
:root {
width: 100%;
scroll-behavior: smooth;
@@ -10,7 +10,6 @@
--black:#102a2d;
--black-dark:#102a2d;
--white:#FFFDEA;
- /* --yellow:#FFF78C; */
--yellow:#FFF468;
--yellow-dark:#FCBC3F;
--green:#D5E052;
@@ -49,7 +48,6 @@ body{
}
/* TYPO */
-
@font-face {
font-family: 'Source Code Pro';
src: url("../fonts/SourceCodePro-Light.ttf") format('truetype');
@@ -128,51 +126,7 @@ body{
font-style: italic;
}
-/* block */
-.flex{
- display: flex;
- flex-direction: column;
- align-items: start;
-}
-
-.flex-row{
- display: flex;
- flex-direction: row;
- align-items: start;
- flex-wrap: wrap;
-}
-
-.align-center{
- align-items: center;
-}
-
-.space-between{
- justify-content: space-between;
-}
-
-
-img, .w-100{
- width: 100%;
-}
-
-figcaption{
- font-family: 'Courier New', Courier, monospace;
- font-size: 1em;
- line-height: 1.5em;
-}
-
-.float-right{
- float: right;
- margin-left: 2em;
- width: 40%;
-}
-.float-left{
- float: left;
- margin-right: 2em;
- width: 40%;
-}
-
-/* Texte */
+/* TEXT */
h1{
font-size: 2.5em;
font-weight: 1000;
@@ -238,6 +192,7 @@ mark strong{
color: var(--marked-color);
text-shadow: none;
}
+
span.mark{
font-weight: 300;
background-color: var(--marked-color);
@@ -258,11 +213,14 @@ li{
max-width: 32em;
}
-.underline{
- text-decoration: underline;
+figcaption{
+ font-family: 'Courier New', Courier, monospace;
+ font-size: 1em;
+ line-height: 1.5em;
}
-/* lien */
+
+/* LINK */
a{color: inherit;cursor:default;}
a:not(.btn):not(.active):hover{
@@ -271,7 +229,7 @@ a:not(.btn):not(.active):hover{
text-decoration: underline!important;
}
-/* Svg */
+/* SVG */
svg{
height: auto;
}
@@ -283,61 +241,22 @@ svg{
.fill-marked-color{
fill: var(--marked-color);
}
-
-
-.blue-1{
- --marked-color:var(--blue-1);
- --marked-color-dark:var(--blue-1-dark);
-}
-
-.blue-2{
- --marked-color:var(--blue-2);
- --marked-color-dark:var(--blue-2-dark);
-}
-
-.white{
- --marked-color:var(--white);
- --marked-color-dark:var(--blue-1);
-}
-
-.green{
- --marked-color:var(--green);
- --marked-color-dark:var(--green-dark);
-}
-
-.yellow{
- --marked-color:var(--yellow);
- --marked-color-dark:var(--yellow-dark);
-
-}
-
-/*[class*="bck-"]{
- color: var(--black);
-}*/
-
-.bck-marked{
- background-color: var(--marked-color);
- color: var(--black);
-}
-
-
+/* Arrow */
.arrow svg{
width: 1.2em;
height: auto;
}
-
-/* Arrow */
-.arrow-left{
+.arrow-left svg{
transform: rotate(180deg);
}
.arrow-up svg{
transform: rotate(-90deg);
}
-.arrow-down{
+.arrow-down svg{
transform: rotate(90deg);
}
-/* Button */
+/* BUTTON */
.btn, button{
text-decoration: inherit;
font-weight: bolder;
@@ -348,7 +267,7 @@ svg{
}
.btn:not(.active):hover{
transform:translateY(-2px) scale(1.01);
- transition: 0.5s;
+ transition: 0.35s;
cursor: pointer;
}
@@ -380,11 +299,87 @@ svg{
border: 2px solid var(--marked-color);
box-shadow: none;
}
-/****************************/
-/* BODY */
-/****************************/
-/* HEADER */
+/* TO USE CLASSES */
+.flex{
+ display: flex;
+ flex-direction: column;
+ align-items: start;
+}
+
+.flex-row{
+ display: flex;
+ flex-direction: row;
+ align-items: start;
+ flex-wrap: wrap;
+}
+
+.align-center{
+ align-items: center;
+}
+
+.space-between{
+ justify-content: space-between;
+}
+
+.baseline{
+ align-items: baseline;
+}
+
+img, .w-100{
+ width: 100%;
+}
+
+.float-right{
+ float: right;
+ margin-left: 2em;
+ width: 40%;
+}
+.float-left{
+ float: left;
+ margin-right: 2em;
+ width: 40%;
+}
+
+.underline{
+ text-decoration: underline;
+}
+
+.blue-1{
+ --marked-color:var(--blue-1);
+ --marked-color-dark:var(--blue-1-dark);
+}
+
+.blue-2{
+ --marked-color:var(--blue-2);
+ --marked-color-dark:var(--blue-2-dark);
+}
+
+.white{
+ --marked-color:var(--white);
+ --marked-color-dark:var(--yellow-dark);
+}
+
+.green{
+ --marked-color:var(--green);
+ --marked-color-dark:var(--green-dark);
+}
+
+.yellow{
+ --marked-color:var(--yellow);
+ --marked-color-dark:var(--yellow-dark);
+
+}
+
+.bck-marked{
+ background-color: var(--marked-color);
+ color: var(--black);
+}
+
+
+/****************************/
+/* HEADER */
+/****************************/
header{
width: 100%;
top: 0;
@@ -418,6 +413,8 @@ header>div{
width: auto;
}
+/* MENU */
+
#menu ul {
width: 100%;
list-style-type: none;
@@ -451,8 +448,48 @@ header .btn.lv2{
}
+/****************************/
+/* FOOTER */
+/****************************/
+footer{
+ border-top: 0.2px dashed var(--text-color);
+ width: 80%;
+ margin-right:auto;
+ margin-left:auto;
+ padding-top: 2em;
+ font-size: 0.8em;
+ padding-bottom: 2em;
+}
-/* MAIN */
+footer img{
+ height: 1.5rem;
+ width: auto;
+ margin-right: 1rem;
+ margin-bottom: .5rem;
+}
+
+footer ul{
+ margin: 0;
+ padding: 0;
+}
+
+footer h4{
+ margin-top: 0;
+ margin-bottom: 1rem;
+}
+
+.up-page{
+ position: fixed;
+ bottom: 2em;
+ right: 2em;
+ padding: 0.5em;
+ width: 2rem;
+ height: 2rem;
+}
+
+/****************************/
+/* BODY */
+/****************************/
main{
margin: auto;
margin-top: 3.4em;
@@ -474,7 +511,6 @@ main{
margin-top: 2em;
}
-
/* SVG ANIM */
g.app{
transition: transform 0.3s ease, fill 0.3s ease, stroke 0.3s ease;
@@ -506,54 +542,12 @@ g.server.svg-active rect:first-of-type {
fill: var(--marked-color);
}
-
g.word{
border: solid 1px var(--paper-color);
}
-/* FOOTER */
-footer{
- border-top: 0.2px dashed var(--text-color);
- width: 80%;
- margin-right:auto;
- margin-left:auto;
- padding-top: 2em;
- font-size: 0.8em;
- padding-bottom: 2em;
-}
-footer img{
- height: 1.5rem;
- width: auto;
- margin-right: 1rem;
- margin-bottom: .5rem;
-}
-
-footer ul{
- margin: 0;
- padding: 0;
-}
-
-footer h4{
- margin-top: 0;
- margin-bottom: 1rem;
-}
-
-.baseline{
- align-items: baseline;
-}
-
-.up-page{
- position: fixed;
- bottom: 2em;
- right: 2em;
- padding: 0.5em;
- width: 2rem;
- height: 2rem;
-}
-
-
-/* Section */
+/* CONTENT */
.section-home {
padding-bottom: 3rem;
}
@@ -590,6 +584,7 @@ footer h4{
margin-bottom: 4em;
}
+/* cards default */
.card{
border: .1px var(--text-color) solid;
border-radius: 2px;
@@ -602,6 +597,25 @@ footer h4{
.card h4{margin-top: 1.5em;}
.card p{margin-bottom: .5em;}
+/* cards implementation */
+.implementation p{
+ margin-top: .3em;
+ margin-bottom: .3em;
+}
+
+.implementation h4{
+ margin-top: 1em;
+}
+
+.implementation .lv1{
+ padding: .1em .3em;
+ margin-top: .5em;
+ margin-bottom: 1em;
+ top: 1em;
+}
+
+/* ACTIVABLE TRIGGERS */
+/* Switch-boxes */
#switch-box-trigger{
margin-bottom: .5em;
}
@@ -622,7 +636,30 @@ footer h4{
background-color: var(--paper-color);
}
+/* Implementation type */
+.type{
+ font-weight: 1000;
+ font-size: .75em;
+}
+.server{
+ color: var(--blue-2);
+ --marked-color: var(--blue-2);
+ --marked-color-dark:var(--blue-2-dark);
+}
+.client{
+ color: var(--yellow);
+ --marked-color: var(--yellow);
+ --marked-color-dark:var(--yellow-dark);
+}
+
+.server.client{
+ color: var(--blue-1);
+ --marked-color: var(--blue-1);
+ --marked-color-dark:var(--blue-1-dark);
+}
+
+/* TABLE */
table{
table-layout: auto;
width: 100%;
@@ -671,37 +708,6 @@ table svg:nth-child(2){
}
-
-.implementation p{
- margin-top: .3em;
- margin-bottom: .3em;
-}
-
-.implementation h4{
- margin-top: 1em;
-}
-
-.implementation .lv1{
- padding: .1em .3em;
- margin-top: .5em;
- margin-bottom: 1em;
-}
-
-.type{
- font-weight: 1000;
- font-size: .75em;
-}
-.server{
- color: var(--blue-2);
- --marked-color: var(--blue-2)
-}
-
-.client{
- color: var(--yellow);
- --marked-color: var(--yellow)
-}
-
-
/*********************/
/* MOBILE */
/*********************/
diff --git a/themes/Indiiie/static/js/script.js b/themes/Indiiie/static/js/script.js
index ee16420..00ae37f 100644
--- a/themes/Indiiie/static/js/script.js
+++ b/themes/Indiiie/static/js/script.js
@@ -67,7 +67,7 @@ document.addEventListener('DOMContentLoaded', function () {
}
});
-// Activate button
+// Select implementation type
document.addEventListener('DOMContentLoaded', function () {
const triggerButtons = document.querySelectorAll('button.activable.implementationtype');
const implementationCards = document.querySelectorAll('.implementation');
@@ -152,7 +152,6 @@ document.addEventListener('DOMContentLoaded', function () {
});
// Scroll menu
-
document.addEventListener('DOMContentLoaded', () => {
let lastScrollTopForMenu = 0;
diff --git a/themes/Indiiie/theme.toml b/themes/Indiiie/theme.toml
index f5c561f..01913e5 100644
--- a/themes/Indiiie/theme.toml
+++ b/themes/Indiiie/theme.toml
@@ -4,5 +4,4 @@ description = "Hugo theme"
tags = ["hugo", "hugo-theme", "markdown"]
[author]
Name = "Timothé Jeanne"
- Website = "timothejeanne.net"