up styles

templates/styles_src/truc.scss

@@ -0,0 +1,260 @@
+@use "sass:math";
+@use "sass:color";
+
+// Variables
+$primary-color: #2c3e50;
+$secondary-color: #3498db;
+$text-color: #333;
+$light-gray: #f5f5f5;
+$dark-gray: #2c3e50;
+$header-height: 400px;
+$spacing: 1rem;
+$border-radius: 8px;
+$max-width: 1200px;
+
+// Mixins
+@mixin container {
+  max-width: $max-width;
+  margin: 0 auto;
+  padding: 0 $spacing;
+}
+
+@mixin flex-center {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+// Reset et styles de base
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+body {
+  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
+  line-height: 1.6;
+  color: $text-color;
+  background-color: $light-gray;
+}
+
+// Header
+.site-header {
+  position: relative;
+
+  .header-image {
+    height: $header-height;
+    position: relative;
+    @include flex-center;
+    flex-direction: column;
+    color: white;
+    text-align: center;
+    padding: $spacing * 2;
+
+    &::before {
+      content: '';
+      position: absolute;
+      top: 0;
+      left: 0;
+      right: 0;
+      bottom: 0;
+      background: rgba(0, 0, 0, 0.5);
+      z-index: 1;
+    }
+
+    >* {
+      position: relative;
+      z-index: 2;
+    }
+  }
+
+  .site-icon {
+    width: 120px;
+    height: 120px;
+    border-radius: 50%;
+    margin-bottom: $spacing;
+    border: 4px solid white;
+  }
+
+  .blog-title {
+    font-size: 2.5rem;
+    margin-bottom: $spacing;
+    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
+  }
+
+  .blog-subtitle {
+    font-size: 1.2rem;
+    opacity: 0.9;
+  }
+}
+
+// Navigation
+.navbar {
+  background-color: $dark-gray;
+  padding: $spacing;
+
+  .navbar-menu {
+    @include container;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+  }
+
+  .navbar-start,
+  .navbar-end {
+    display: flex;
+    align-items: center;
+    gap: $spacing;
+  }
+
+  a {
+    color: white;
+    text-decoration: none;
+    padding: math.div($spacing, 2) $spacing;
+    border-radius: $border-radius;
+    transition: background-color 0.3s;
+
+    &:hover {
+      background-color: rgba(255, 255, 255, 0.1);
+    }
+  }
+
+  .search-form {
+    input {
+      padding: math.div($spacing, 2);
+      border-radius: $border-radius;
+      border: none;
+      background: rgba(255, 255, 255, 0.1);
+      color: white;
+
+      &::placeholder {
+        color: rgba(255, 255, 255, 0.7);
+      }
+    }
+  }
+}
+
+// Articles
+.body-wrap {
+  @include container;
+  padding-top: $spacing * 3;
+  padding-bottom: $spacing * 3;
+}
+
+article {
+  background: white;
+  border-radius: $border-radius;
+  margin-bottom: $spacing * 2;
+  padding: $spacing * 2;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+
+  .article-title-container {
+    margin-bottom: $spacing;
+
+    h1 {
+      font-size: 2rem;
+      color: $primary-color;
+
+      a {
+        text-decoration: none;
+        color: inherit;
+
+        &:hover {
+          color: $secondary-color;
+        }
+      }
+    }
+  }
+
+  .article-date {
+    color: color.adjust($text-color, $lightness: 20%);
+    margin-bottom: $spacing;
+    font-size: 0.9rem;
+  }
+
+  .article-tags {
+    margin-top: $spacing;
+
+    a {
+      display: inline-block;
+      padding: math.div($spacing, 4) math.div($spacing, 2);
+      background: $light-gray;
+      border-radius: math.div($border-radius, 2);
+      margin-right: math.div($spacing, 2);
+      color: $text-color;
+      text-decoration: none;
+      font-size: 0.9rem;
+
+      &:hover {
+        background: color.adjust($light-gray, $lightness: -5%);
+      }
+    }
+  }
+}
+
+// Articles plus anciens
+.more-content {
+  padding: $spacing;
+  border-bottom: 1px solid color.adjust($light-gray, $lightness: -10%);
+
+  .article-title {
+    a {
+      text-decoration: none;
+      color: $text-color;
+
+      &:hover {
+        color: $secondary-color;
+      }
+    }
+
+    .article-date-inline {
+      color: color.adjust($text-color, $lightness: 20%);
+      margin-right: $spacing;
+    }
+  }
+}
+
+// Footer
+.site-footer {
+  background: $dark-gray;
+  color: white;
+  padding: $spacing * 2 0;
+  margin-top: $spacing * 3;
+
+  .footer-nav {
+    @include flex-center;
+    gap: $spacing * 2;
+
+    a {
+      color: white;
+      text-decoration: none;
+
+      &:hover {
+        text-decoration: underline;
+      }
+    }
+  }
+}
+
+// Media queries
+@media (max-width: 768px) {
+  .header-image {
+    height: 300px;
+
+    .blog-title {
+      font-size: 2rem;
+    }
+  }
+
+  .navbar {
+    .navbar-menu {
+      flex-direction: column;
+      gap: $spacing;
+    }
+  }
+
+  article {
+    padding: $spacing;
+  }
+}