diff --git a/_config.yml b/_config.yml index d54d3cb..912d193 100644 --- a/_config.yml +++ b/_config.yml @@ -1,3 +1,4 @@ highlighter: rouge exclude: - _sass/bootstrap/ + diff --git a/_includes/post-stub.html b/_includes/post-stub.html index 294988a..383543d 100644 --- a/_includes/post-stub.html +++ b/_includes/post-stub.html @@ -1,5 +1,6 @@ -
-

+

+ + diff --git a/_layouts/master.html b/_layouts/master.html index df40550..01657ef 100644 --- a/_layouts/master.html +++ b/_layouts/master.html @@ -9,39 +9,47 @@ {{ page.title }} - -
-
+ + diff --git a/_layouts/post.html b/_layouts/post.html index 4540ae3..4cc0c62 100644 --- a/_layouts/post.html +++ b/_layouts/post.html @@ -1,10 +1,10 @@ --- layout: master --- - -
-
-

{{page.title}}

- {{ content }} -
+
+
+
+ {{ content }} +
+
diff --git a/assets/theme/theme.css b/assets/theme/theme.css index c9d2999..195b97c 100644 --- a/assets/theme/theme.css +++ b/assets/theme/theme.css @@ -1,79 +1,320 @@ -.highlight table td { padding: 5px; } -.highlight table pre { margin: 0; } -.highlight, .highlight .w { - color: #fbf1c7; - background-color: #282828; -} -.highlight .c, .highlight .ch, .highlight .cd, .highlight .cm, .highlight .cpf, .highlight .c1, .highlight .cs { - color: #928374; - font-style: italic; -} -.highlight .cp { - color: #8ec07c; -} -.highlight .nt { - color: #fb4934; -} -.highlight .o, .highlight .ow { - color: #fbf1c7; -} -.highlight .p, .highlight .pi { - color: #fbf1c7; -} -.highlight .gi { - color: #b8bb26; - background-color: #282828; -} -.highlight .gd { - color: #fb4934; - background-color: #282828; -} -.highlight .gh { - color: #b8bb26; - font-weight: bold; -} -.highlight .k, .highlight .kn, .highlight .kp, .highlight .kr, .highlight .kv { - color: #fb4934; -} -.highlight .kc { - color: #d3869b; -} -.highlight .kt { - color: #fabd2f; -} -.highlight .kd { - color: #fe8019; -} -.highlight .s, .highlight .sa, .highlight .sb, .highlight .sc, .highlight .dl, .highlight .sd, .highlight .s2, .highlight .sh, .highlight .sx, .highlight .s1 { - color: #b8bb26; - font-style: italic; -} -.highlight .si { - color: #b8bb26; - font-style: italic; -} -.highlight .sr { - color: #b8bb26; - font-style: italic; -} -.highlight .se { - color: #fe8019; -} -.highlight .nn { - color: #8ec07c; -} -.highlight .nc { - color: #8ec07c; -} -.highlight .no { - color: #d3869b; -} -.highlight .na { - color: #b8bb26; -} -.highlight .m, .highlight .mb, .highlight .mf, .highlight .mh, .highlight .mi, .highlight .il, .highlight .mo, .highlight .mx { - color: #d3869b; -} -.highlight .ss { - color: #83a598; -} + * { + margin: 0; + padding: 0; + box-sizing: border-box; + } + + h2, h3, h4, h5 { + margin: 20px 0; + } + + + body { + font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; + line-height: 1.6; + color: #ffffff; + background: #fff; + min-height: 1vh; + overflow-x: hidden; + position: relative; + } + + + .container { + max-width: 1400px; + margin: 0 auto; + padding: 20px; + position: relative; + z-index: 1; + } + + .header { + background: rgba(255, 255, 255, 0.03); + backdrop-filter: blur(30px); + border-radius: 25px; + padding: 20px; + margin-bottom: 20px; + box-shadow: + 0 30px 80px rgba(0, 0, 0, 0.4), + inset 0 1px 0 rgba(255, 255, 255, 0.1), + 0 0 100px rgba(102, 126, 234, 0.1); + border: 1px solid rgba(255, 255, 255, 0.08); + position: relative; + overflow: hidden; + } + + .header::before { + content: ''; + position: absolute; + top: 0; + left: -100%; + width: 100%; + height: 100%; + background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.05), transparent); + animation: shimmer 3s infinite; + } + + .logo { + display: flex; + align-items: center; + justify-content: center; + gap: 20px; + font-size: 4em; + font-weight: 900; + background: #353535; + background-size: 300% 300%; + -webkit-background-clip: text; + -webkit-text-fill-color: transparent; + background-clip: text; + margin-bottom: 20px; + } + + + .logo img { + width: 80px; + height: 80px; + filter: drop-shadow(0 0 20px rgba(102, 126, 234, 0.5)); + animation: pulse 2s ease-in-out infinite; + } + + .tagline { + font-size: 1.4em; + color: #353535; + margin-bottom: 30px; + text-align: center; + opacity: 0.9; + text-shadow: 0 2px 10px rgba(0, 0, 0, 0.5); + } + + .nav-links { + display: flex; + flex-wrap: wrap; + gap: 20px; + margin-bottom: 30px; + justify-content: center; + } + + .nav-link { + background: linear-gradient(135deg, rgba(228, 3, 7, 0.8), rgb(255, 141, 80)); + color: white; + padding: 15px 25px; + border-radius: 50px; + text-decoration: none; + font-weight: 600; + font-size: 1.1em; + transition: all 0.3s ease; + box-shadow: + 0 8px 25px rgba(102, 126, 234, 0.3), + inset 0 1px 0 rgba(255, 255, 255, 0.2); + position: relative; + overflow: hidden; + } + + .nav-link::before { + content: ''; + position: absolute; + top: 0; + left: -100%; + width: 100%; + height: 100%; + background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent); + transition: left 0.5s; + } + + .nav-link:hover::before { + left: 100%; + } + + .description { + background: #e7e7e7; + padding: 25px; + border-radius: 20px; + border: 1px solid rgba(102, 126, 234, 0.3); + color: #353535; + text-align: center; + font-size: 1.3em; + font-weight: 600; + box-shadow: + 0 10px 30px rgba(0, 0, 0, 0.2), + inset 0 1px 0 rgba(255, 255, 255, 0.1); + width: 80%; + margin: 0 auto; + } + + .main-content { + background: #353535; + backdrop-filter: blur(30px); + border-radius: 25px; + padding: 50px; + box-shadow: + 0 30px 80px rgba(0, 0, 0, 0.1), + inset 0 1px 0 rgba(255, 255, 255, 0.5); + border: 1px solid rgba(255, 255, 255, 0.3); + position: relative; + overflow: hidden; + } + + .main-content::before { + content: ''; + position: absolute; + top: 0; + left: 0; + right: 0; + height: 2px; + background: #353535; + background-size: 300% 100%; + animation: gradientMove 3s linear infinite; + } + + .section-title { + font-size: 3.5em; + color: #333; + margin-bottom: 40px; + text-align: center; + position: relative; + font-weight: 800; + background: #353535; + -webkit-background-clip: text; + -webkit-text-fill-color: transparent; + background-clip: text; + } + + .section-title::after { + content: ''; + position: absolute; + bottom: -15px; + left: 50%; + transform: translateX(-50%); + width: 150px; + height: 4px; + background: linear-gradient(45deg, #fff, #fff); + border-radius: 2px; + box-shadow: 0 2px 10px rgba(102, 126, 234, 0.3); + } + + .blog-posts { + display: grid; + gap: 30px; + } + + .blog-post { + background: rgba(255, 255, 255, 0.05); + border-radius: 20px; + padding: 30px; + border-left: 6px solid var(--primary-color); + transition: all 0.3s ease; + cursor: pointer; + box-shadow: + 0 10px 30px rgba(0, 0, 0, 0.08), + inset 0 1px 0 rgba(255, 255, 255, 0.8); + position: relative; + overflow: hidden; + } + + + .blog-post:hover::before { + width: 100%; + } + + .blog-post:hover { + transform: translateY(-5px); + box-shadow: + 0 25px 50px rgba(0, 0, 0, 0.15), + 0 0 30px rgba(102, 126, 234, 0.2); + } + + .blog-post:hover { + transform: translateY(-10px) scale(1.02); + box-shadow: + 0 25px 50px rgba(0, 0, 0, 0.15), + 0 0 30px rgba(102, 126, 234, 0.2); + border-left-color: #353535; + } + + .blog-post>* { + position: relative; + z-index: 1; + } + + .post-title { + font-size: 1.6em; + font-weight: 700; + color: #353535; + margin-bottom: 10px; + display: flex; + align-items: center; + flex-wrap: wrap; + gap: 10px; + } + + .post-date { + color: #666; + font-size: 0.95em; + margin-bottom: 18px; + font-weight: 500; + opacity: 0.8; + } + + .post-excerpt { + color: #353535; + line-height: 1.8; + font-size: 1.05em; + } + + .version-badge { + display: inline-block; + background: #353535; + color: white; + padding: 6px 15px; + border-radius: 25px; + font-size: 0.8em; + font-weight: 700; + box-shadow: 0 4px 15px rgba(102, 126, 234, 0.3); + animation: glow 2s ease-in-out infinite alternate; + } + + @media (max-width: 768px) { + .container { + padding: 15px; + } + + .header { + padding: 25px; + } + + .logo { + font-size: 2.8em; + } + + .nav-links { + justify-content: center; + } + + .main-content { + padding: 30px; + } + + .section-title { + font-size: 2.5em; + } + + .nav-link { + padding: 12px 20px; + font-size: 1em; + } + } + + .fade-in { + animation: fadeInUp 1s ease-out forwards; + } + + /* Scrollbar styling */ + ::-webkit-scrollbar { + width: 8px; + } + + ::-webkit-scrollbar-track { + background: rgba(0, 0, 0, 0.1); + } + + diff --git a/css/master.scss b/css/master.scss index cd58239..71a3dcf 100644 --- a/css/master.scss +++ b/css/master.scss @@ -1,8 +1,6 @@ --- --- -@import "bootstrap/scss/bootstrap"; - html { height: 100%; } diff --git a/index.html b/index.html index 846b387..30214e4 100644 --- a/index.html +++ b/index.html @@ -3,33 +3,9 @@ layout: master --- -
-
-

- -

-

- Wayfire is a wayland compositor based on - wlroots. - It aims to create a customizable, extendable and lightweight environment - without sacrificing its appearance. -

-
-
- -
-
-
-
+
{% for post in site.posts %} {% include post-stub.html post=post %} {% endfor %} -
-
+ +