kodesoul/profile - Change 5Q5DPVGZXJK66CF6LRGRXD3Z4XIF2XKYTNFL4EJ3FVMWXX3RK7AAC

refactor: revamp styles

Created by BNdMWygt9QY4LYkrHM7eBGgQQe1TeC1iA4u2rT1RNGaa on September 2, 2024

5Q5DPVGZXJK66CF6LRGRXD3Z4XIF2XKYTNFL4EJ3FVMWXX3RK7AAC

Dependencies

In channels

main

Change contents

Replacement in templates/index.html at line 4 [3.298]
B:BD[3.346] → [4.191:217]
```
<article class="article">
```
[3.346]
[4.217]
```
<article>
```

Deletion in templates/index.html at line 17 [3.298]

B:BD[4.545] → [4.545:843]

    <ul class="social">
      <li>
        <a href="https://codeberg.org/kodesoul">
          <img src="/codeberg.svg" alt="github">
        </a>
      </li>
      <li>
        <a href="https://github.com/kodesoul">
          <img src="/github.svg" alt="github">
        </a>
      </li>
    </ul>

Insertion in templates/index.html at line 19 [3.298]

[4.861]

<ul class="social">
  <li>
    <a href="https://codeberg.org/kodesoul">
      <img src="/codeberg.svg" alt="github">
    </a>
  </li>
  <li>
    <a href="https://github.com/kodesoul">
      <img src="/github.svg" alt="github">
    </a>
  </li>
</ul>

Replacement in templates/index.html at line 32 [3.298]

B:BD[4.884] → [4.884:949]

<!-- <a href="{{ get_url(path='@/blog/_index.md')}}">blog</a> -->

[4.884]

<!-- <a href="{{ get_url(path='@/blog/_index.md')}}">blog</a> -->

Replacement in templates/blog.html at line 9 [3.521]

B:BD[3.704] → [5.50:102]

∅:D[5.102] → [6.83:110]

B:BD[6.83] → [6.83:110]

      <strong class="fz-20">{{page.title}}</strong>
      <p>{{page.date}}</p>

[3.704]

[3.725]

      <p class="headline">{{page.title}}</p>
      <p class="support">{{page.date}}</p>

Replacement in templates/base.html at line 14 [3.819]

B:BD[7.228] → [8.0:69]

          <h1 class="fz-42">Kode<strong id="soul">Soul</strong></h1>

[7.228]

[7.283]

          <h1>
            Kode<strong id="soul">Soul</strong>
          </h1>

Replacement in templates/base.html at line 18 [3.819]

B:BD[7.298] → [7.298:331]

∅:D[7.331] → [9.322:425]

B:BD[9.322] → [9.322:425]

        <details id="menu" open>
          <ul>
            <li><a href="/">home</a></li>
            <li><a href="/blog">blog</a></li>

[7.298]

[9.425]

        <details open>
          <ul class="menu">
            <li class="menu-item"><a href="/">home</a></li>
            <li class="menu-item"><a href="/blog">blog</a></li>

Replacement in templates/base.html at line 23 [3.819]

B:BD[9.441] → [7.419:466]

          <summary class="hide">menu</summary>

[9.441]

          <summary>menu</summary>

Replacement in static/github.svg at line 1 [10.35]

B:BD[10.35] → [10.36:107]

<svg id="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">

[10.35]

[10.107]

<svg class="icon" width="32" height="32" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg">

Replacement in static/github.svg at line 3 [10.35]

B:BD[10.116] → [10.116:180]

    <style>.cls-1{fill-rule:evenodd;}.cls-2{fill:none;}</style>

[10.116]

[10.180]

    <style>
      .cls-1{fill-rule:evenodd;}
      .cls-2{fill:none;}
    </style>

Replacement in static/github.svg at line 8 [10.35]
B:BD[10.190] → [10.190:220]
```
  <title>logo--github</title>
```
[10.190]
[10.220]
```
  <title>
    logo--github
  </title>
```
Replacement in static/github.svg at line 13 [10.35]
B:BD[10.875] → [10.875:882]
```
</svg>
```
[10.875]
```
</svg>
```
Deletion in static/codeberg.svg at line 1 [10.920]
B:BD[10.920] → [10.921:976]
```
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
```

Replacement in static/codeberg.svg at line 2 [10.920]

B:BD[10.981] → [10.981:1047]

   width="16"
   height="16"
   viewBox="0 0 4.2333332 4.2333335"

[10.981]

[10.1047]

   class="icon"
   width="32"
   height="32"
   viewBox="0 0 5 5"

Replacement in sass/style.scss at line 1 [7.687]
B:BD[7.687] → [7.688:712]
```
// --- reset styles ---
```
[7.687]
[7.712]
```
// Graphite design system.
@use 'fonts';
@use 'reset';
```

Replacement in sass/style.scss at line 5 [7.687]

B:BD[7.713] → [7.713:791]

*,*::before,*::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

[7.713]

[7.791]

:root {
  // font sizes.
  --fs-400: 1.00em; 
  --fs-500: 1.25em;
  --fs-600: 1.50em;
  --fs-700: 2.00em;
  --fs-xxl: 2.50em;

Replacement in sass/style.scss at line 13 [7.687]
B:BD[7.792] → [7.792:809]
```
// --- theme ---
```
[7.792]
[11.693674]
```
  // background.
  --bg-900: #121212;
  --bg-050: #F7F7F7;
```

Replacement in sass/style.scss at line 17 [7.687]

B:BD[11.693675] → [8.70:196]

:root {
  --white: #FAFAFA;
  --black: #121212;
  --primary: #C678DD;
  --primary-dark: #62396E;
  --primary-light: #F3E4F9;

[11.693675]

[8.196]

  // primary color.
  --pc-normal: #c678dd;
  --pc-light: #f4e4f9;
  --pc-dark: #62396E;

Deletion in sass/style.scss at line 22 [7.687]
∅:D[8.198] → [7.993:1019]
∅:D[11.693675] → [7.993:1019]
B:BD[7.993] → [7.993:1019]
```
// --- global styles ---
```
Replacement in sass/style.scss at line 24 [7.687]
B:BD[7.1027] → [7.1027:1067]
```
  overflow-y: scroll;  
  height: 100%;
```
[7.1027]
[8.199]
```
  background-color: var(--bg-050);
```

Replacement in sass/style.scss at line 26 [7.687]

B:BD[8.232] → [8.232:255]

∅:D[8.255] → [7.1096:1157]

B:BD[7.1096] → [7.1096:1157]

B:BD[7.1157] → [8.256:313]

∅:D[8.313] → [7.1196:1305]

B:BD[7.1196] → [7.1196:1305]

B:BD[7.1305] → [8.314:350]

∅:D[8.350] → [7.1325:1339]

B:BD[7.1325] → [7.1325:1339]

  font-size: 100%/1.5;
  word-wrap: break-word;
  margin: 0 auto;
  padding: 0 1em;
  color: var(--black);
  background-color: var(--white);
  nav {
    align-items: center;
    margin: 16px 0px;
    #logo {
      padding: 16px 0px;
      #soul {
        color: var(--primary-dark);
      }
    }

[8.232]

[7.1339]

  color: var(--bg-900);
}

Replacement in sass/style.scss at line 29 [7.687]

B:BD[7.1340] → [7.1340:1505]

B:BD[7.1505] → [10.6852:6878]

∅:D[10.6878] → [8.378:424]

B:BD[8.378] → [8.378:424]

    ul {
      display: flex;
      justify-content: flex-start;
      align-items: center;
      width: 100%;
      list-style:none;
      border: 1px solid black;
      border-radius: 8px;
      background-color: var(--primary-light);

[7.1340]

[7.1560]

// --- Components ---

Replacement in sass/style.scss at line 31 [7.687]

B:BD[7.1561] → [7.1561:1598]

B:BD[7.1598] → [8.425:471]

      li {
        padding: 4px 8px;
        border-right: 1px solid var(--black);

[7.1561]

[10.6879]

nav {
  #logo h1 {
    font-size: var(--fs-xxl);
  }

Replacement in sass/style.scss at line 36 [7.687]
B:BD[10.6880] → [10.6880:6933]
∅:D[8.471] → [7.1637:1651]
∅:D[10.6933] → [7.1637:1651]
B:BD[7.1637] → [7.1637:1651]
```
        a {
          color: var(--black);
        }
      }
    }
```
[10.6880]
[7.1651]
```
  #soul {
    color: var(--pc-dark);
```

Replacement in sass/style.scss at line 40 [7.687]

B:BD[7.1656] → [10.6934:6970]

  h1,h2,h3,h4 { line-height: 1.3; }

[7.1656]

[7.1748]

  .menu {
    margin: 8px 0px;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    width: 100%;
    border: 1px solid var(--bg-900);
    border-radius: 8px;
    background-color: var(--pc-light);
  }

Replacement in sass/style.scss at line 51 [7.687]
B:BD[7.1749] → [7.1749:1755]
B:BD[7.1755] → [10.6971:6988]
∅:D[8.530] → [7.1771:1798]
∅:D[10.6988] → [7.1771:1798]
B:BD[7.1771] → [7.1771:1798]
```
  a {
    color: blue;
    text-decoration: none;
```
[7.1749]
[7.1798]
```
  .menu-item {
    padding: 4px 8px;
    border-right: 1px solid var(--bg-900);
```

Replacement in sass/style.scss at line 55 [7.687]

B:BD[7.1799] → [7.1799:1866]

    &:hover, &:focus, &:active {
      text-decoration: underline;

[7.1799]

[7.1866]

    a {
      text-decoration: none;
      color: var(--bg-900);

Deletion in sass/style.scss at line 60 [7.687]
B:BD[7.1876] → [6.204:206]
```
}
```
Replacement in sass/style.scss at line 61 [7.687]
B:BD[6.207] → [10.6989:7014]
```
// --- media queries ---
```
[6.207]
[7.1876]
```
  summary { display: none };
}
```

Replacement in sass/style.scss at line 64 [7.687]

B:BD[7.1877] → [6.233:316]

@media (min-width: 768px) {
  html {
    font-size: 125%;
    max-width: 42em;
  }

[7.1877]

[6.316]

main {
  margin: 0 auto;
  max-width: 650px;
  padding: 0.5rem;

Replacement in sass/style.scss at line 70 [7.687]

B:BD[10.7016] → [10.7016:7148]

/* @media (prefers-color-scheme: dark) { */
  /* html { */
    /* color: var(--white); */
    /* background-color: var(--black); */

[10.7016]

[6.318]

article {
  margin: 1em 0;
  word-wrap: break-word;
  hanging-punctuation: first last;

Replacement in sass/style.scss at line 75 [7.687]

B:BD[6.319] → [10.7149:7306]

    /* nav { */
      /* #logo { */
        /* #soul { */
          /* color: var(--primary); */
        /* } */
      /* } */
    /* } */
  /* } */
/* } */

[6.319]

[10.7306]

  h1 { font-size: var(--fs-500); }
  h2 { font-size: var(--fs-400); }

Replacement in sass/style.scss at line 78 [7.687]
∅:D[10.7307] → [6.319:341]
B:BD[6.319] → [6.319:341]
```
// --- components ---
```
[10.7307]
[2.83]
```
  p {
    margin: 1em 0;
    font-size: var(--fs-400);
  }
```
Replacement in sass/style.scss at line 83 [7.687]
B:BD[2.84] → [2.84:96]
```
// subtitle
```
[2.84]
[10.7308]
```
  .title { 
    font-size: var(--fs-600);
  }
```
Replacement in sass/style.scss at line 87 [7.687]
B:BD[10.7309] → [10.7309:7319]
```
// social
```
[10.7309]
[10.7319]
```
  .subtitle {
    font-size: var(--fs-400);
  }
}
```

Deletion in sass/style.scss at line 108 [7.687]

B:BD[6.342] → [6.342:365]

B:BD[6.365] → [2.97:352]

∅:D[2.352] → [7.1877:1936]

∅:D[6.365] → [7.1877:1936]

B:BD[7.1877] → [7.1877:1936]

B:BD[7.1936] → [2.353:418]

∅:D[2.418] → [7.1969:2041]

B:BD[7.1969] → [7.1969:2041]

B:BD[7.2041] → [6.366:374]

∅:D[6.374] → [7.2066:2067]

B:BD[7.2066] → [7.2066:2067]

// article
.article {
  .margin {
    margin: 1em 0;    
  }
  .title {
    font-size : 1.5rem;
  }
  .subtitle {
    font-size: 1rem;
    color: #222222;
  }
  blockquote {
    background-color: #ababab;
    border-left : 2px solid var(--black);
    padding: 0px 8px;
  }
  p {
    margin: 1em 0;
    line-height: 1.5;
    code {
      background-color: var(--black);
      color: var(--white);
      padding: 0.05em 0.2em;
      border: 1px solid #ccc;
    }
  }
}
// list

Replacement in sass/style.scss at line 109 [7.687]
B:BD[6.383] → [5.103:124]
∅:D[5.124] → [6.383:389]
B:BD[6.383] → [6.383:389]
B:BD[6.389] → [8.531:556]
∅:D[8.556] → [6.405:439]
B:BD[6.405] → [6.405:439]
B:BD[6.439] → [8.557:591]
∅:D[8.591] → [6.457:493]
B:BD[6.457] → [6.457:493]
∅:D[6.493] → [7.2146:2150]
B:BD[7.2146] → [7.2146:2150]
```
  margin: 16px 0px;
  a {
    color: var(--black);
    &:hover, &:focus, &:active {
      color: var(--primary-dark);
      text-decoration: none;
    }
  }
```
[6.383]
[6.494]
```
  margin: 8px 0px;
  list-style: none;
  font-size: var(--fs-400);
```

Replacement in sass/style.scss at line 114 [7.687]

B:BD[6.510] → [6.510:532]

B:BD[6.532] → [8.592:633]

∅:D[8.633] → [6.564:607]

B:BD[6.564] → [6.564:607]

B:BD[6.607] → [8.634:659]

    list-style: none;
    border-left: 2px solid var(--black);
    padding: 0px 8px;
    margin: 8px 0px;
    color: var(--black);

[6.510]

[6.623]

    margin: 16px 0px;
    padding: 0px 16px;
    line-height: 1.2;
    border-left: 2px solid var(--bg-900);

Replacement in sass/style.scss at line 120 [7.687]
B:BD[6.657] → [8.660:701]
```
      border-color: var(--primary-dark);
```
[6.657]
[6.682]
```
      border-color: var(--pc-dark);
```
Deletion in sass/style.scss at line 122 [7.687]
B:BD[6.688] → [6.688:692]
∅:D[6.692] → [7.2150:2152]
B:BD[7.2150] → [7.2150:2152]
```
  }
}
```

Replacement in sass/style.scss at line 123 [7.687]

B:BD[7.2153] → [7.2153:2179]

// --- atomic classes ---

[7.2153]

[8.702]

    a {
      text-decoration: none;
      display: flex;
      flex-direction: column;
      color: var(--bg-900);

Replacement in sass/style.scss at line 129 [7.687]

B:BD[8.703] → [8.703:718]

// font sizes.

[8.703]

[8.718]

      &:hover, &:focus, &:active {
        color: var(--pc-dark);
      }
    }

Replacement in sass/style.scss at line 134 [7.687]

B:BD[8.719] → [8.719:958]

∅:D[8.958] → [7.2179:2219]

B:BD[7.2179] → [7.2179:2219]

B:BD[7.2219] → [11.693676:693694]

∅:D[11.693694] → [7.2219:2220]

B:BD[7.2219] → [7.2219:2220]

B:BD[7.2220] → [11.693695:693871]

.fz-48 { font-size: 3rem; }
.fz-42 { font-size: 2.625rem; }
.fz-36 { font-size: 2.25rem; }
.fz-32 { font-size: 2rem; }
.fz-28 { font-size: 1.75rem; }
.fz-24 { font-size: 1.5rem; }
.fz-20 { font-size: 1.25rem; }
.fz-16 { font-size: 1rem; }
// hide tag. 
.hide { display:none; }
// --- fonts ---
@font-face {
  font-family: Lato;
  src: url('/Lato-Regular.ttf');
  font-weight: 400;
}
@font-face {
  font-family: Lato;
  src: url('/Lato-Bold.ttf');
  font-weight: 700;
}

[8.719]

[11.693871]

    .headline {
      font-weight: 600;
    }

Replacement in sass/style.scss at line 138 [7.687]

B:BD[11.693872] → [11.693872:693980]

@font-face {
  font-family: Lato;
  src: url('/Lato-Italic.ttf');
  font-weight: 400;
  font-style: italic;

[11.693872]

[11.693980]

    .support {
      font-weight: 300;
    }
  }

refactor: revamp styles

Dependencies

In channels

Change contents

Replacement in templates/index.html at line 4 [3.298]

Deletion in templates/index.html at line 17 [3.298]

Insertion in templates/index.html at line 19 [3.298]

Replacement in templates/index.html at line 32 [3.298]

Replacement in templates/blog.html at line 9 [3.521]

Replacement in templates/base.html at line 14 [3.819]

Replacement in templates/base.html at line 18 [3.819]

Replacement in templates/base.html at line 23 [3.819]

Replacement in static/github.svg at line 1 [10.35]

Replacement in static/github.svg at line 3 [10.35]

Replacement in static/github.svg at line 8 [10.35]

Replacement in static/github.svg at line 13 [10.35]

Deletion in static/codeberg.svg at line 1 [10.920]

Replacement in static/codeberg.svg at line 2 [10.920]

Replacement in sass/style.scss at line 1 [7.687]

Replacement in sass/style.scss at line 5 [7.687]

Replacement in sass/style.scss at line 13 [7.687]

Replacement in sass/style.scss at line 17 [7.687]

Deletion in sass/style.scss at line 22 [7.687]

Replacement in sass/style.scss at line 24 [7.687]

Replacement in sass/style.scss at line 26 [7.687]

Replacement in sass/style.scss at line 29 [7.687]

Replacement in sass/style.scss at line 31 [7.687]

Replacement in sass/style.scss at line 36 [7.687]

Replacement in sass/style.scss at line 40 [7.687]

Replacement in sass/style.scss at line 51 [7.687]

Replacement in sass/style.scss at line 55 [7.687]

Deletion in sass/style.scss at line 60 [7.687]

Replacement in sass/style.scss at line 61 [7.687]

Replacement in sass/style.scss at line 64 [7.687]

Replacement in sass/style.scss at line 70 [7.687]

Replacement in sass/style.scss at line 75 [7.687]

Replacement in sass/style.scss at line 78 [7.687]

Replacement in sass/style.scss at line 83 [7.687]

Replacement in sass/style.scss at line 87 [7.687]

Deletion in sass/style.scss at line 108 [7.687]

Replacement in sass/style.scss at line 109 [7.687]

Replacement in sass/style.scss at line 114 [7.687]

Replacement in sass/style.scss at line 120 [7.687]

Deletion in sass/style.scss at line 122 [7.687]

Replacement in sass/style.scss at line 123 [7.687]

Replacement in sass/style.scss at line 129 [7.687]

Replacement in sass/style.scss at line 134 [7.687]

Replacement in sass/style.scss at line 138 [7.687]