summaryrefslogtreecommitdiff
diff options
context:
space:
mode:
Diffstat
-rw-r--r--css/website.css249
-rw-r--r--templates/directory.html.twig26
-rw-r--r--templates/home.html.twig31
-rw-r--r--templates/page.html.twig16
-rw-r--r--templates/partials/base.html.twig0
-rw-r--r--templates/partials/header.html.twig11
-rw-r--r--templates/partials/list.html.twig9
-rw-r--r--templates/partials/navigation.html.twig61
-rw-r--r--templates/partials/navigation2.html.twig53
9 files changed, 185 insertions, 271 deletions
diff --git a/css/website.css b/css/website.css
index c784443..48ae34a 100644
--- a/css/website.css
+++ b/css/website.css
@@ -1,33 +1,4 @@
-html {
- color: rgba(220,220,220);
- background-color: #141516;
- background-size: 40px 40px;
- background-image: radial-gradient(circle, #242424 1px, rgba(0, 0, 0, 0) 1px);
-}
-
-body {
- min-height: 100vh;
- font-family: 'Inter';
- line-height: 1.7;
- margin: 0;
- display: flex;
- flex-direction: column;
-}
-
-.center {
- flex-grow: 1;
- display: flex;
- flex-direction: row;
- justify-content: center;
- align-items: center;
- margin-top: -20px;
-}
-
-.content {
- width: 900px;
- max-width: 95vw;
-}
-
+/* text styleing */
img {
max-width: 100%;
}
@@ -45,7 +16,6 @@ code {
padding: 5px;
}
-/* for large code blocks */
pre {
overflow-x: auto;
}
@@ -54,19 +24,10 @@ h1 {
line-height: normal;
font-size: 300%;
color: #de6b15;
- /* text-shadow: 0 0 70px #c76317; */
-}
-
-.h1t {
- margin-top: 20px;
- font-size: 500%;
- margin-bottom: 0px;
- /* text-align: center; */
}
h2 {
font-size: 200%;
- /* text-shadow: 0 0 50px #8d8d8d; */
}
h3 {
@@ -83,21 +44,11 @@ a:hover {
text-decoration: none;
}
-.date {
- margin: 10px;
- text-align: center;
-}
-
-.datebox
-{
- padding-top: 40px;
- display: flex;
- flex-direction: row;
- justify-content: center;
- align-self: center;
+li {
+ padding: 2px 0px;
}
-/* icon/button stuff */
+/* icon */
@font-face {
font-family: 'Material Symbols Rounded';
font-style: normal;
@@ -107,139 +58,159 @@ a:hover {
.icon {
font-family: 'Material Symbols Rounded';
+ user-select: none;
+}
+
+/* Structure */
+html {
+ color: rgba(220,220,220);
+ background-color: #141516;
+ background-size: 40px 40px;
+ background-image: radial-gradient(circle, #242424 1px, rgba(0, 0, 0, 0) 1px);
}
-.iconbutton {
+body {
+ min-height: 100vh;
+ font-family: 'Inter';
+ line-height: 1.7;
+ margin: 0;
display: flex;
- flex-shrink: 0;
- justify-content: center;
- align-items: center;
- margin: 10px;
- border-radius: 100px;
- width: 40px;
- height: 40px;
- border-width: 0px;
- background-color: #272a2c;
- color: white;
- font-size: 20px;
- text-align: center;
- user-select: none;
+ flex-direction: column;
}
-.iconholder {
+.center {
+ flex-grow: 1;
display: flex;
- flex-shrink: 0;
+ flex-direction: row;
justify-content: center;
align-items: center;
- margin: 10px;
- border-radius: 100px;
- width: 40px;
- height: 40px;
- border-width: 0px;
- /* background-color: #272a2c; */
- color: rgb(133, 133, 133);
- font-size: 20px;
- text-align: center;
- user-select: none;
-}
+ margin-top: 20px;
+}
-.iconbutton:hover {
- color: rgba(255, 255, 255, 0.5);
- background-color: #272a2c85;
+.content {
+ width: 900px;
+ max-width: 95vw;
+ padding-bottom: 20px;
}
-.wrlabel
-{
+.footer {
display: flex;
- margin: 5px 0px;
- border-width: 0px;
- background-color: transparent;
- height: 40px;
- font-size: 20px;
- padding: 0px 10px;
- align-items: center;
justify-content: center;
+ margin: 40px;
+}
+
+.header {
+ display: flex;
+ justify-content: space-between;
+ margin: 40px;
}
-.wrbox
+/* Buttons */
+.roundedButton
{
+ text-wrap: nowrap;
background-color: rgba(0, 0, 0, 0.411);
display: flex;
flex-direction: row;
- align-self: center;
border-radius: 500px;
+ gap: 10px;
+ padding: 8px 20px;
}
-.wrbutton
+.roundedButton:hover
{
- z-index: 1;
- margin: 5px;
- background-color: transparent;
- border-radius: 100%;
-}
-
-.wrbutton:hover {
- background-color: #0000004d;
+ background-color: rgba(0, 0, 0, 0.788);
}
-.glow {
-animation: reveal 1.7s forwards;
-animation-delay: .5s;
+.transparentButton
+{
+ display: flex;
+ flex-direction: row;
+ border-radius: 500px;
+ gap: 10px;
+ padding: 8px 20px;
}
-.h2t.glow {
- animation-delay: 1s;
+.links
+{
+ flex-wrap: wrap;
+ display: flex;
+ gap: 15px;
}
-@keyframes reveal {
-from {
- text-shadow: 0 0 0px transparent;
-}
-to {
- text-shadow: 0 0 100px;
+/* mobile */
+@media only screen
+and (max-device-width: 900px)
+{
+.header
+{
+ margin: 10px;
+}
+.footer
+{
+ margin: 10px;
}
+.h1t
+{
+ font-size: 300%;
}
-body {
-visibility: hidden;
-animation: reveal2 1s forwards;
}
+/* animation */
+
@keyframes reveal2 {
from {
opacity: 0;
}
to {
- visibility: visible;
+ visibility: inherit;
+
}
}
-.footer {
- display: flex;
- justify-content: center;
- margin: 40px;
+.anim1,body {
+ animation-delay: 0s;
+ visibility: hidden;
+ animation: reveal2 .5s forwards;
+ }
+
+.anim2,.content {
+ visibility: hidden;
+ animation: reveal2 .5s forwards;
+ animation-delay: 300ms;
}
-.header {
- display: flex;
- justify-content: left;
- margin: 40px;
+.anim3 {
+ visibility: hidden;
+ animation: reveal2 .5s forwards;
+ animation-delay: 450ms;
}
-.header .wrlabel {
- margin-right: 10px;
+.anim4 {
+ visibility: hidden;
+ animation: reveal2 .5s forwards;
+ animation-delay: 600ms;
}
-@media only screen
-and (max-device-width: 900px)
-{
-.header
-{
- margin: 10px;
-}
-.h1t
-{
- font-size: 300%;
+.anim5 {
+ visibility: hidden;
+ animation: reveal2 .5s forwards;
+ animation-delay: 750ms;
+}
+
+.anim6 {
+ visibility: hidden;
+ animation: reveal2 .5s forwards;
+ animation-delay: 900ms;
+}
+
+/* home page only */
+.h1t {
+ font-size: 500%;
+ margin: 0px;
}
-} \ No newline at end of file
+.h2t {
+ margin: 15px 5px;
+}
diff --git a/templates/directory.html.twig b/templates/directory.html.twig
new file mode 100644
index 0000000..bdb3a5c
--- /dev/null
+++ b/templates/directory.html.twig
@@ -0,0 +1,26 @@
+<!DOCTYPE html>
+{% do assets.addCss('theme://css/website.css', 100) %}
+<html>
+ <head>
+ <link rel="preconnect" href="https://fonts.googleapis.com">
+ <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+ <link href="https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700;800;900&display=swap" rel="stylesheet">
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
+ {{ assets.css()|raw }}
+ <title>{{ header.title|e }} - {{site.title|e}}</title>
+ </head>
+ <body>
+ {% include 'partials/header.html.twig' %}
+ <div class="center">
+ <div class="content">
+ <h1>Blog pages</h1>
+ {{ page.content|raw }}
+ {% include 'partials/list.html.twig' %}
+ {% include 'partials/navigation.html.twig' %}
+ </div>
+ </div>
+ <div class=footer>
+ <span title="Last Edited">{{ header.date|e }}</span>
+ </div>
+ </body>
+</html> \ No newline at end of file
diff --git a/templates/home.html.twig b/templates/home.html.twig
index ff817d1..afb2b70 100644
--- a/templates/home.html.twig
+++ b/templates/home.html.twig
@@ -1,5 +1,5 @@
-<!DOCTYPE html>
{% do assets.addCss('theme://css/website.css', 100) %}
+<!DOCTYPE html>
<html>
<head>
<link rel="preconnect" href="https://fonts.googleapis.com">
@@ -10,35 +10,22 @@
<title>{{site.title|e}}</title>
</head>
<body>
- <div class="header">
- <div class=wrbox>
- <div class="iconholder wrbutton wrleft">
- <span class="icon">home</span>
- </div>
- </div>
- </div>
+ {% include 'partials/header.html.twig' %}
<div class="center">
<div class="content">
- {% set foo = page.content|raw %}
- {% set sp = foo|split(page.header.page_list_placeholder) %}
- {{sp[0]|raw}}
- {% include 'partials/navigation2.html.twig' %}
- {{sp[1]|raw}}
+ {{ page.content|raw }}
</div>
</div>
- <div class=datebox>
- <span class="date" title="Last Edited">{{ header.date|e }}</span>
- </div>
- {# <div class="footer">
- <div class=wrbox>
- <a class="iconbutton wrbutton wrleft" href="{{page.header.webring.left}}">
+ <div class=footer>
+ <div class="transparentButton">
+ <a href="{{page.header.webring.left}}">
<span class="icon">arrow_back</span>
</a>
- <span class="wrlabel">Queso Webring</span>
- <a class="iconbutton wrbutton wrright" href="{{page.header.webring.right}}">
+ <span>Queso Webring</span>
+ <a href="{{page.header.webring.right}}">
<span class="icon">arrow_forward</span>
</a>
</div>
- </div> #}
+ </div>
</body>
</html> \ No newline at end of file
diff --git a/templates/page.html.twig b/templates/page.html.twig
index 6671f5b..1291aaf 100644
--- a/templates/page.html.twig
+++ b/templates/page.html.twig
@@ -7,24 +7,18 @@
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700;800;900&display=swap" rel="stylesheet">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
{{ assets.css()|raw }}
- <title>{{ header.title|e }}</title>
+ <title>{{ header.title|e }} - {{site.title|e}}</title>
</head>
<body>
- <div class="header">
- <div class=wrbox>
- <a class="iconbutton wrbutton wrleft" href="/">
- <span class="icon" title="/">home</span>
- </a>
- <span class="wrlabel">Tyler Ferrari's Site</span>
- </div>
- </div>
+ {% include 'partials/header.html.twig' %}
<div class="center">
<div class="content">
{{ page.content|raw }}
+ {% include 'partials/navigation.html.twig' %}
</div>
</div>
- <div class=datebox>
- <span class="date" title="Last Edited">{{ header.date|e }}</span>
+ <div class=footer>
+ <span title="Last Edited">{{ header.date|e }}</span>
</div>
</body>
</html> \ No newline at end of file
diff --git a/templates/partials/base.html.twig b/templates/partials/base.html.twig
deleted file mode 100644
index e69de29..0000000
--- a/templates/partials/base.html.twig
+++ /dev/null
diff --git a/templates/partials/header.html.twig b/templates/partials/header.html.twig
new file mode 100644
index 0000000..4229a92
--- /dev/null
+++ b/templates/partials/header.html.twig
@@ -0,0 +1,11 @@
+ <div class="header">
+ {% if page.header.icon %}
+ <span class=icon>{{page.header.icon}}</span>
+ {% else %}
+ <span class=icon>web</span>
+ {% endif %}
+ {% if page.url != "/" %}
+ <a href="/" style="color:white;">{{site.title|e}}</a>
+ {% endif %}
+ <span class="icon" style="color:transparent;">web</span>
+ </div> \ No newline at end of file
diff --git a/templates/partials/list.html.twig b/templates/partials/list.html.twig
new file mode 100644
index 0000000..eb2f485
--- /dev/null
+++ b/templates/partials/list.html.twig
@@ -0,0 +1,9 @@
+<ul>
+ {% for current_page in page.children %}
+ <li>
+ <a href="{{ current_page.url|e }}">
+ {{ current_page.title|e }}
+ </a>
+ </li>
+ {% endfor %}
+</ul>
diff --git a/templates/partials/navigation.html.twig b/templates/partials/navigation.html.twig
index 28df6aa..4426c8c 100644
--- a/templates/partials/navigation.html.twig
+++ b/templates/partials/navigation.html.twig
@@ -1,47 +1,16 @@
-{% macro loop(page) %}
- {% for p in page.children.visible %}
- {% set current_page = (p.active or p.activeChild) ? 'selected' : '' %}
- {% if p.children.visible.count > 0 %}
- <li class="has-children {{ current_page|e }}">
- <a href="{{ p.url|e }}">
- {% if p.header.icon %}<i class="fa fa-{{ p.header.icon|e }}"></i>{% endif %}
- {{ p.menu|e }}
- </a>
- <ul>
- {{ _self.loop(p) }}
- </ul>
- </li>
- {% else %}
- <li class="{{ current_page|e }}">
- <a href="{{ p.url|e }}">
- {% if p.header.icon %}<i class="fa fa-{{ p.header.icon|e }}"></i>{% endif %}
- {{ p.menu|e }}
- </a>
- </li>
- {% endif %}
- {% endfor %}
-{% endmacro %}
-
-<ul>
- {% if config.theme.dropdown.enabled %}
- {{ _self.loop(pages) }}
- {% else %}
- {% for page in pages.children.visible %}
- {% set current_page = (page.active or page.activeChild) ? 'selected' : '' %}
- <li class="{{ current_page|e }}">
- <a href="{{ page.url|e }}">
- {% if page.header.icon %}<i class="fa fa-{{ page.header.icon|e }}"></i>{% endif %}
- {{ page.menu|e }}
- </a>
- </li>
- {% endfor %}
+<div class=links>
+ {% if page.parent.url != "/" %}
+ <a class="anim3" href="{{ page.parent.url }}">
+ <div class="roundedButton">
+ <span class="icon">arrow_back</span>
+ <span>Back</span>
+ </div>
+ </a>
{% endif %}
- {% for mitem in site.menu %}
- <li>
- <a href="{{ mitem.url|e }}">
- {% if mitem.icon %}<i class="fa fa-{{ mitem.icon|e }}"></i>{% endif %}
- {{ mitem.text|e }}
- </a>
- </li>
- {% endfor %}
-</ul>
+ <a class="anim4" href="/">
+ <div class="roundedButton">
+ <span class="icon">home</span>
+ <span>Home</span>
+ </div>
+ </a>
+</div>
diff --git a/templates/partials/navigation2.html.twig b/templates/partials/navigation2.html.twig
deleted file mode 100644
index 2e865bd..0000000
--- a/templates/partials/navigation2.html.twig
+++ /dev/null
@@ -1,53 +0,0 @@
-{% macro loop(page) %}
- {% for p in page.children.visible %}
- {% set current_page = (p.active or p.activeChild) ? 'selected' : '' %}
- {% if p.children.visible.count > 0 %}
-
- <li class="has-children {{ current_page|e }}">
- <a href="{{ p.url|e }}">
- {% if p.header.icon %}<i class="fa fa-{{ p.header.icon|e }}"></i>{% endif %}
- {{ p.menu|e }}
- </a>
- <ul>
- {{ _self.loop(p) }}
- </ul>
- </li>
- {% else %}
-
- <li class="{{ current_page|e }}">
- <a href="{{ p.url|e }}">
- {% if p.header.icon %}<i class="fa fa-{{ p.header.icon|e }}"></i>{% endif %}
- {{ p.menu|e }}
- </a>
- </li>
- {% endif %}
- {% endfor %}
-{% endmacro %}
-
-<ul>
- {% if config.theme.dropdown.enabled %}
- {{ _self.loop(pages) }}
-
- {% else %}
-
- {% for page in pages.children.visible %}
- {% set current_page = (page.active or page.activeChild) ? 'selected' : '' %}
- {% if page.menu|e != 'Home' %}
- <li class="{{ current_page|e }}">
- <a href="{{ page.url|e }}">
- {% if page.header.icon %}<i class="fa fa-{{ page.header.icon|e }}"></i>{% endif %}
- {{ page.menu|e }}
- </a>
- </li>
- {% endif %}
- {% endfor %}
- {% endif %}
- {% for mitem in site.menu %}
- <li>
- <a href="{{ mitem.url|e }}">
- {% if mitem.icon %}<i class="fa fa-{{ mitem.icon|e }}"></i>{% endif %}
- {{ mitem.text|e }}
- </a>
- </li>
- {% endfor %}
-</ul>
generated by cgit v1.2.3 (git 2.25.1) at 2025-06-16 14:06:47 +0000