From 606af5568e839f8bc6651ac1d43f711f00b1b3aa Mon Sep 17 00:00:00 2001 From: sowgro Date: Thu, 14 Dec 2023 01:22:21 -0500 Subject: theme v4 --- css/website.css | 249 ++++++++++++++----------------- templates/directory.html.twig | 26 ++++ templates/home.html.twig | 31 ++-- templates/page.html.twig | 16 +- templates/partials/base.html.twig | 0 templates/partials/header.html.twig | 11 ++ templates/partials/list.html.twig | 9 ++ templates/partials/navigation.html.twig | 61 ++------ templates/partials/navigation2.html.twig | 53 ------- 9 files changed, 185 insertions(+), 271 deletions(-) create mode 100644 templates/directory.html.twig delete mode 100644 templates/partials/base.html.twig create mode 100644 templates/partials/header.html.twig create mode 100644 templates/partials/list.html.twig delete mode 100644 templates/partials/navigation2.html.twig 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 @@ + +{% do assets.addCss('theme://css/website.css', 100) %} + + + + + + + {{ assets.css()|raw }} + {{ header.title|e }} - {{site.title|e}} + + + {% include 'partials/header.html.twig' %} +
+
+

Blog pages

+ {{ page.content|raw }} + {% include 'partials/list.html.twig' %} + {% include 'partials/navigation.html.twig' %} +
+
+
+ {{ header.date|e }} +
+ + \ 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 @@ - {% do assets.addCss('theme://css/website.css', 100) %} + @@ -10,35 +10,22 @@ {{site.title|e}} -
-
-
- home -
-
-
+ {% include 'partials/header.html.twig' %}
- {% 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 }}
-
- {{ header.date|e }} -
- {#
-
- +
+
+ arrow_back - Queso Webring - + Queso Webring + arrow_forward
-
#} +
\ 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 @@ {{ assets.css()|raw }} - {{ header.title|e }} + {{ header.title|e }} - {{site.title|e}} -
-
- - home - - Tyler Ferrari's Site -
-
+ {% include 'partials/header.html.twig' %}
{{ page.content|raw }} + {% include 'partials/navigation.html.twig' %}
-
- {{ header.date|e }} +
+ {{ header.date|e }}
\ 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 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 @@ +
+ {% if page.header.icon %} + {{page.header.icon}} + {% else %} + web + {% endif %} + {% if page.url != "/" %} + {{site.title|e}} + {% endif %} + web +
\ 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 @@ + 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 %} -
  • - - {% if p.header.icon %}{% endif %} - {{ p.menu|e }} - -
      - {{ _self.loop(p) }} -
    -
    • - {% else %} -
  • - - {% if p.header.icon %}{% endif %} - {{ p.menu|e }} - -
    • - {% endif %} - {% endfor %} -{% endmacro %} - - + +
    + home + Home +
    +     +
    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 %} - -
  • - - {% if p.header.icon %}{% endif %} - {{ p.menu|e }} - -
      - {{ _self.loop(p) }} -
    -
    • - {% else %} - -
  • - - {% if p.header.icon %}{% endif %} - {{ p.menu|e }} - -
    • - {% endif %} - {% endfor %} -{% endmacro %} - - -- cgit v1.2.3