commit 930908e2c46e818b805bbfacfbf3ac4ace6599fa · hauleth.dev/blog

+1 -1

content/_index.md

···

       1
       1
        
       +++

     

       2
       2
        
       sort_by = "date"

     

       3
       3
        
       transparent = false

     

       4
       4
       -
       paginate_by = 3

     

       4
       4
       +
       paginate_by = 4

     

       5
       5
        
       insert_anchor_links = "right"

     

       6
       6
        
       +++

+92

sass/_buttons.scss

···

       1
       1
       +
       .button-container {

     

       2
       2
       +
         display: table;

     

       3
       3
       +
         margin-left: auto;

     

       4
       4
       +
         margin-right: auto;

     

       5
       5
       +
       }

     

       6
       6
       +
       

     

       7
       7
       +
       button,

     

       8
       8
       +
       .button,

     

       9
       9
       +
       a.button {

     

       10
       10
       +
         position: relative;

     

       11
       11
       +
         display: flex;

     

       12
       12
       +
         align-items: center;

     

       13
       13
       +
         justify-content: center;

     

       14
       14
       +
         padding: 8px 18px;

     

       15
       15
       +
         margin-bottom: 5px;

     

       16
       16
       +
         text-decoration: none;

     

       17
       17
       +
         text-align: center;

     

       18
       18
       +
         border-radius: 8px;

     

       19
       19
       +
         border: 1px solid transparent;

     

       20
       20
       +
         appearance: none;

     

       21
       21
       +
         cursor: pointer;

     

       22
       22
       +
         outline: none;

     

       23
       23
       +
       

     

       24
       24
       +
         /* variants */

     

       25
       25
       +
       

     

       26
       26
       +
         &.outline {

     

       27
       27
       +
           background: transparent;

     

       28
       28
       +
           box-shadow: none;

     

       29
       29
       +
           padding: 8px 18px;

     

       30
       30
       +
       

     

       31
       31
       +
           :hover {

     

       32
       32
       +
             transform: none;

     

       33
       33
       +
             box-shadow: none;

     

       34
       34
       +
           }

     

       35
       35
       +
         }

     

       36
       36
       +
       

     

       37
       37
       +
         &.primary {

     

       38
       38
       +
           box-shadow: 0 4px 6px rgba(50, 50, 93, .11), 0 1px 3px rgba(0, 0, 0, .08);

     

       39
       39
       +
       

     

       40
       40
       +
           &:hover {

     

       41
       41
       +
             box-shadow: 0 2px 6px rgba(50, 50, 93, .21), 0 1px 3px rgba(0, 0, 0, .08);

     

       42
       42
       +
           }

     

       43
       43
       +
         }

     

       44
       44
       +
       

     

       45
       45
       +
         &.link {

     

       46
       46
       +
           background: none;

     

       47
       47
       +
           font-size: 1rem;

     

       48
       48
       +
         }

     

       49
       49
       +
       

     

       50
       50
       +
         /* sizes */

     

       51
       51
       +
       

     

       52
       52
       +
         &.small {

     

       53
       53
       +
           font-size: .8rem;

     

       54
       54
       +
         }

     

       55
       55
       +
       

     

       56
       56
       +
         &.wide {

     

       57
       57
       +
           min-width: 200px;

     

       58
       58
       +
           padding: 14px 24px;

     

       59
       59
       +
         }

     

       60
       60
       +
       }

     

       61
       61
       +
       

     

       62
       62
       +
       a.read-more,

     

       63
       63
       +
       a.read-more:hover,

     

       64
       64
       +
       a.read-more:active {

     

       65
       65
       +
         display: inline-flex;

     

       66
       66
       +
         background: none;

     

       67
       67
       +
         box-shadow: none;

     

       68
       68
       +
         padding: 0;

     

       69
       69
       +
         margin: 20px 0;

     

       70
       70
       +
         max-width: 100%;

     

       71
       71
       +
       }

     

       72
       72
       +
       

     

       73
       73
       +
       .code-toolbar {

     

       74
       74
       +
         margin-bottom: 20px;

     

       75
       75
       +
       

     

       76
       76
       +
         .toolbar-item a {

     

       77
       77
       +
           position: relative;

     

       78
       78
       +
           display: inline-flex;

     

       79
       79
       +
           align-items: center;

     

       80
       80
       +
           justify-content: center;

     

       81
       81
       +
           padding: 3px 8px;

     

       82
       82
       +
           margin-bottom: 5px;

     

       83
       83
       +
           text-align: center;

     

       84
       84
       +
           font-size: 13px;

     

       85
       85
       +
           font-weight: 500;

     

       86
       86
       +
           border-radius: 8px;

     

       87
       87
       +
           border: 1px solid transparent;

     

       88
       88
       +
           appearance: none;

     

       89
       89
       +
           cursor: pointer;

     

       90
       90
       +
           outline: none;

     

       91
       91
       +
         }

     

       92
       92
       +
       }

+52

sass/_footer.scss

···

       1
       1
       +
       @import "variables";

     

       2
       2
       +
       

     

       3
       3
       +
       .footer {

     

       4
       4
       +
         padding: 40px 0;

     

       5
       5
       +
         flex-grow: 0;

     

       6
       6
       +
         opacity: .5;

     

       7
       7
       +
       

     

       8
       8
       +
         &__inner {

     

       9
       9
       +
           display: flex;

     

       10
       10
       +
           align-items: center;

     

       11
       11
       +
           justify-content: space-between;

     

       12
       12
       +
           margin: 0;

     

       13
       13
       +
           width: 760px;

     

       14
       14
       +
           max-width: 100%;

     

       15
       15
       +
       

     

       16
       16
       +
           @media (max-width: $tablet-max-width) {

     

       17
       17
       +
             flex-direction: column;

     

       18
       18
       +
           }

     

       19
       19
       +
         }

     

       20
       20
       +
       

     

       21
       21
       +
         a {

     

       22
       22
       +
           color: inherit;

     

       23
       23
       +
         }

     

       24
       24
       +
       

     

       25
       25
       +
         .copyright {

     

       26
       26
       +
           display: flex;

     

       27
       27
       +
           flex-direction: row;

     

       28
       28
       +
           align-items: center;

     

       29
       29
       +
           // so `--light-color-secondary` color exists no where else in the stylings

     

       30
       30
       +
           // color: var(--light-color-secondary);

     

       31
       31
       +
           // As a substitute, I'm going to use the alpha-70 version of accent.

     

       32
       32
       +
           color: var(--accent-alpha-70);

     

       33
       33
       +
       

     

       34
       34
       +
           &--user {

     

       35
       35
       +
             margin: auto;

     

       36
       36
       +
             text-align: center;

     

       37
       37
       +
           }

     

       38
       38
       +
       

     

       39
       39
       +
           & > *:first-child:not(:only-child) {

     

       40
       40
       +
             margin-right: 10px;

     

       41
       41
       +
       

     

       42
       42
       +
             @media (max-width: $tablet-max-width) {

     

       43
       43
       +
               margin: 0;

     

       44
       44
       +
             }

     

       45
       45
       +
           }

     

       46
       46
       +
       

     

       47
       47
       +
           @media (max-width: $tablet-max-width) {

     

       48
       48
       +
             flex-direction: column;

     

       49
       49
       +
             margin-top: 10px;

     

       50
       50
       +
           }

     

       51
       51
       +
         }

     

       52
       52
       +
       }

+90

sass/_header.scss

···

       1
       1
       +
       @import "variables";

     

       2
       2
       +
       

     

       3
       3
       +
       @mixin menu {

     

       4
       4
       +
         position: absolute;

     

       5
       5
       +
         background: var(--background);

     

       6
       6
       +
         box-shadow: var(--shadow);

     

       7
       7
       +
         color: white;

     

       8
       8
       +
         border: 2px solid;

     

       9
       9
       +
         margin: 0;

     

       10
       10
       +
         padding: 10px;

     

       11
       11
       +
         list-style: none;

     

       12
       12
       +
         z-index: 99;

     

       13
       13
       +
       }

     

       14
       14
       +
       

     

       15
       15
       +
       .header {

     

       16
       16
       +
         display: flex;

     

       17
       17
       +
         flex-direction: column;

     

       18
       18
       +
         position: relative;

     

       19
       19
       +
       

     

       20
       20
       +
         &__inner {

     

       21
       21
       +
           display: flex;

     

       22
       22
       +
           align-items: center;

     

       23
       23
       +
           justify-content: space-between;

     

       24
       24
       +
         }

     

       25
       25
       +
       

     

       26
       26
       +
         &__logo {

     

       27
       27
       +
           display: flex;

     

       28
       28
       +
           flex: 1;

     

       29
       29
       +
       

     

       30
       30
       +
           &:after {

     

       31
       31
       +
             content: '';

     

       32
       32
       +
             background: repeating-linear-gradient(90deg, var(--accent), var(--accent) 2px, transparent 0, transparent 10px);

     

       33
       33
       +
             display: block;

     

       34
       34
       +
             width: 100%;

     

       35
       35
       +
             right: 10px;

     

       36
       36
       +
           }

     

       37
       37
       +
       

     

       38
       38
       +
           a {

     

       39
       39
       +
             flex: 0 0 auto;

     

       40
       40
       +
             max-width: 100%;

     

       41
       41
       +
             text-decoration: none;

     

       42
       42
       +
           }

     

       43
       43
       +
         }

     

       44
       44
       +
       

     

       45
       45
       +
         .menu {

     

       46
       46
       +
           margin: 20px 0;

     

       47
       47
       +
           --shadow-color: var(--accent-alpha-70);

     

       48
       48
       +
           --shadow: 0 10px var(--shadow-color), -10px 10px var(--shadow-color), 10px 10px var(--shadow-color);

     

       49
       49
       +
       

     

       50
       50
       +
           @media (max-width: $phone-max-width) {

     

       51
       51
       +
             @include menu;

     

       52
       52
       +
             top: 50px;

     

       53
       53
       +
             right: 0;

     

       54
       54
       +
           }

     

       55
       55
       +
       

     

       56
       56
       +
           &__inner {

     

       57
       57
       +
             display: flex;

     

       58
       58
       +
             flex-wrap: wrap;

     

       59
       59
       +
             list-style: none;

     

       60
       60
       +
             margin: 0;

     

       61
       61
       +
             padding: 0;

     

       62
       62
       +
       

     

       63
       63
       +
             li:not(:last-of-type) {

     

       64
       64
       +
               margin-right: 20px;

     

       65
       65
       +
               margin-bottom: 10px;

     

       66
       66
       +
               flex: 0 0 auto;

     

       67
       67
       +
             }

     

       68
       68
       +
       

     

       69
       69
       +
             @media (max-width: $phone-max-width) {

     

       70
       70
       +
               flex-direction: column;

     

       71
       71
       +
               align-items: flex-start;

     

       72
       72
       +
               padding: 0;

     

       73
       73
       +
       

     

       74
       74
       +
               li {

     

       75
       75
       +
                 margin: 0;

     

       76
       76
       +
                 padding: 5px;

     

       77
       77
       +
               }

     

       78
       78
       +
             }

     

       79
       79
       +
           }

     

       80
       80
       +
       

     

       81
       81
       +
           &-trigger {

     

       82
       82
       +
             color: var(--accent);

     

       83
       83
       +
             border: 2px solid;

     

       84
       84
       +
             margin-left: 10px;

     

       85
       85
       +
             height: 100%;

     

       86
       86
       +
             padding: 3px 8px;

     

       87
       87
       +
             position: relative;

     

       88
       88
       +
           }

     

       89
       89
       +
         }

     

       90
       90
       +
       }

sass/_logo.scss

···

       1
       1
       +
       .logo {

     

       2
       2
       +
         display: flex;

     

       3
       3
       +
         align-items: center;

     

       4
       4
       +
         text-decoration: none;

     

       5
       5
       +
         background: var(--accent);

     

       6
       6
       +
         color: black;

     

       7
       7
       +
         padding: 5px 10px;

     

       8
       8
       +
       }

+14 -91

sass/_main.scss

···

       1
       1
       -
       @import "../themes/zerm/sass/variables";

     

       1
       1
       +
       @import "variables";

     

       2
       2
        
       

     

       3
       3
        
       html {

     

       4
       4
        
         box-sizing: border-box;

     
···

       22
       22
        
         -webkit-font-smoothing: antialiased;

     

       23
       23
        
         -webkit-overflow-scrolling: touch;

     

       24
       24
        
         -webkit-text-size-adjust: 100%;

     

       25
       25
       -
       

     

       26
       26
       -
         @media (max-width: $phone-max-width) {

     

       27
       27
       -
           font-size: 1rem;

     

       28
       28
       -
         }

     

       29
       25
        
       }

     

       30
       26
        
       

     

       31
       27
        
       h1, h2, h3, h4, h5, h6 {

     
···

       44
       40
        
           border-bottom-color: transparent;

     

       45
       41
        
           cursor: pointer;

     

       46
       42
        
       

     

       47
       47
       -
           @media(max-width: $phone-max-width){

     

       48
       48
       -
               visibility: visible;

     

       43
       43
       +
           @media (hover: none){

     

       44
       44
       +
             visibility: visible;

     

       49
       45
        
           }

     

       50
       46
        
         }

     

       51
       47
        
       

     
···

       56
       52
        
         }

     

       57
       53
        
       }

     

       58
       54
        
       

     

       59
       59
       -
       // Actually keeping Pawroman's stylings here for font-size over h1-h6.

     

       60
       60
       -
       // I prefer differentiated header height.

     

       61
       61
       -
       

     

       62
       62
       -
       // OLD

     

       63
       63
       -
       // ---------------------

     

       64
       64
       -
       // h1, h2, h3 {

     

       65
       65
       -
       //   font-size: 1.4rem;

     

       66
       66
       -
       // }

     

       67
       67
       -
       

     

       68
       68
       -
       // h4, h5, h6 {

     

       69
       69
       -
       //   font-size: 1.2rem;

     

       70
       70
       -
       // }

     

       71
       71
       -
       

     

       72
       72
       -
       // Pawroman's

     

       73
       73
       -
       // ---------------------

     

       74
       55
        
       h1 {

     

       75
       56
        
         font-size: 1.4rem;

     

       76
       57
        
       }

     
···

       95
       76
        
       img {

     

       96
       77
        
         display: block;

     

       97
       78
        
         max-width: 100%;

     

       98
       98
       -
       

     

       99
       99
       -
         &.left {

     

       100
       100
       -
           margin-right: auto;

     

       101
       101
       -
         }

     

       102
       102
       -
       

     

       103
       103
       -
         &.center {

     

       104
       104
       -
           margin-left: auto;

     

       105
       105
       -
           margin-right: auto;

     

       106
       106
       -
         }

     

       107
       107
       -
       

     

       108
       108
       -
         &.right {

     

       109
       109
       -
           margin-left: auto;

     

       110
       110
       -
         }

     

       111
       79
        
       }

     

       112
       80
        
       

     

       113
       81
        
       p {

     

       114
       82
        
         margin-bottom: 20px;

     

       115
       83
        
       }

     

       116
       84
        
       

     

       117
       117
       -
       figure {

     

       118
       118
       -
         display: table;

     

       119
       119
       -
         max-width: 100%;

     

       120
       120
       -
         margin: 25px 0;

     

       121
       121
       -
       

     

       122
       122
       -
         &.left {

     

       123
       123
       -
           // img {

     

       124
       124
       -
             margin-right: auto;

     

       125
       125
       -
           // }

     

       126
       126
       -
         }

     

       127
       127
       -
       

     

       128
       128
       -
         &.center {

     

       129
       129
       -
           // img {

     

       130
       130
       -
             margin-left: auto;

     

       131
       131
       -
             margin-right: auto;

     

       132
       132
       -
           // }

     

       133
       133
       -
         }

     

       134
       134
       -
       

     

       135
       135
       -
         &.right {

     

       136
       136
       -
           // img {

     

       137
       137
       -
             margin-left: auto;

     

       138
       138
       -
           // }

     

       139
       139
       -
         }

     

       140
       140
       -
       

     

       141
       141
       -
         figcaption {

     

       142
       142
       -
           font-size: 14px;

     

       143
       143
       -
           padding: 5px 10px;

     

       144
       144
       -
           margin-top: 5px;

     

       145
       145
       -
           background: var(--accent);

     

       146
       146
       -
           color: var(--background);

     

       147
       147
       -
       

     

       148
       148
       -
           &.left {

     

       149
       149
       -
             text-align: left;

     

       150
       150
       -
           }

     

       151
       151
       -
       

     

       152
       152
       -
           &.center {

     

       153
       153
       -
             text-align: center;

     

       154
       154
       -
           }

     

       155
       155
       -
       

     

       156
       156
       -
           &.right {

     

       157
       157
       -
             text-align: right;

     

       158
       158
       -
           }

     

       159
       159
       -
         }

     

       160
       160
       -
       }

     

       161
       161
       -
       

     

       162
       85
        
       code {

     

       163
       86
        
         font-family: ui-monospace, monospace;

     

       164
       87
        
         background: var(--accent-alpha-20);

     
···

       186
       109
        
           word-wrap: break-word;

     

       187
       110
        
         }

     

       188
       111
        
       

     

       189
       189
       -
           code {

     

       190
       190
       -
             background: none !important;

     

       191
       191
       -
             margin: 0;

     

       192
       192
       -
             padding: 0;

     

       193
       193
       -
             font-size: inherit;

     

       194
       194
       -
             border: none;

     

       112
       112
       +
         code {

     

       113
       113
       +
           background: none !important;

     

       114
       114
       +
           margin: 0;

     

       115
       115
       +
           padding: 0;

     

       116
       116
       +
           font-size: inherit;

     

       117
       117
       +
           border: none;

     

       195
       118
        
         }

     

       196
       119
        
       }

     

       197
       120
        
       

     
···

       256
       179
        
         padding: 0;

     

       257
       180
        
       

     

       258
       181
        
         li {

     

       259
       259
       -
             position: relative;

     

       260
       260
       -
             margin-top: 5px;

     

       261
       261
       -
             margin-bottom: 5px;

     

       182
       182
       +
           position: relative;

     

       183
       183
       +
           margin-top: 5px;

     

       184
       184
       +
           margin-bottom: 5px;

     

       262
       185
        
         }

     

       263
       186
        
       

     

       264
       187
        
         @media (max-width: $phone-max-width) {

     
···

       266
       189
        
         }

     

       267
       190
        
       

     

       268
       191
        
         ul, ol {

     

       269
       269
       -
             margin-top: 10px;

     

       270
       270
       -
             margin-bottom: 10px;

     

       192
       192
       +
           margin-top: 10px;

     

       193
       193
       +
           margin-bottom: 10px;

     

       271
       194
        
         }

     

       272
       195
        
       }

     

       273
       196

+81

sass/_pagination.scss

···

       1
       1
       +
       @import 'variables';

     

       2
       2
       +
       

     

       3
       3
       +
       .pagination {

     

       4
       4
       +
         margin-top: 50px;

     

       5
       5
       +
       

     

       6
       6
       +
         &__title {

     

       7
       7
       +
           display: flex;

     

       8
       8
       +
           text-align: center;

     

       9
       9
       +
           position: relative;

     

       10
       10
       +
           margin: 100px 0 20px;

     

       11
       11
       +
       

     

       12
       12
       +
           &-h {

     

       13
       13
       +
             text-align: center;

     

       14
       14
       +
             margin: 0 auto;

     

       15
       15
       +
             padding: 5px 10px;

     

       16
       16
       +
             background: var(--background);

     

       17
       17
       +
             font-size: .8rem;

     

       18
       18
       +
             text-transform: uppercase;

     

       19
       19
       +
             letter-spacing: .1em;

     

       20
       20
       +
             z-index: 1;

     

       21
       21
       +
           }

     

       22
       22
       +
       

     

       23
       23
       +
           hr {

     

       24
       24
       +
             position: absolute;

     

       25
       25
       +
             left: 0;

     

       26
       26
       +
             right: 0;

     

       27
       27
       +
             width: 100%;

     

       28
       28
       +
             margin-top: 15px;

     

       29
       29
       +
             z-index: 0;

     

       30
       30
       +
           }

     

       31
       31
       +
         }

     

       32
       32
       +
       

     

       33
       33
       +
         &__buttons {

     

       34
       34
       +
           display: flex;

     

       35
       35
       +
           align-items: center;

     

       36
       36
       +
           justify-content: center;

     

       37
       37
       +
       

     

       38
       38
       +
           a {

     

       39
       39
       +
               text-decoration: none;

     

       40
       40
       +
           }

     

       41
       41
       +
         }

     

       42
       42
       +
       }

     

       43
       43
       +
       

     

       44
       44
       +
       .button {

     

       45
       45
       +
         position: relative;

     

       46
       46
       +
         display: inline-flex;

     

       47
       47
       +
         align-items: center;

     

       48
       48
       +
         justify-content: center;

     

       49
       49
       +
         border-radius: 8px;

     

       50
       50
       +
         max-width: 40%;

     

       51
       51
       +
         padding: 0;

     

       52
       52
       +
         cursor: pointer;

     

       53
       53
       +
         appearance: none;

     

       54
       54
       +
       

     

       55
       55
       +
         + .button {

     

       56
       56
       +
             margin-left: 10px;

     

       57
       57
       +
         }

     

       58
       58
       +
       

     

       59
       59
       +
         a {

     

       60
       60
       +
           display: flex;

     

       61
       61
       +
           padding: 8px 16px;

     

       62
       62
       +
           text-decoration: none;

     

       63
       63
       +
           text-overflow: ellipsis;

     

       64
       64
       +
           white-space: nowrap;

     

       65
       65
       +
           overflow: hidden;

     

       66
       66
       +
         }

     

       67
       67
       +
       

     

       68
       68
       +
         &__text {

     

       69
       69
       +
           text-overflow: ellipsis;

     

       70
       70
       +
           white-space: nowrap;

     

       71
       71
       +
           overflow: hidden;

     

       72
       72
       +
         }

     

       73
       73
       +
       

     

       74
       74
       +
         &.next .button__icon {

     

       75
       75
       +
           margin-left: 8px;

     

       76
       76
       +
         }

     

       77
       77
       +
       

     

       78
       78
       +
         &.previous .button__icon {

     

       79
       79
       +
           margin-right: 8px;

     

       80
       80
       +
         }

     

       81
       81
       +
       }

+142

sass/_post.scss

···

       1
       1
       +
       @import "variables";

     

       2
       2
       +
       

     

       3
       3
       +
       .post {

     

       4
       4
       +
         width: 100%;

     

       5
       5
       +
         text-align: left;

     

       6
       6
       +
         margin: 20px auto;

     

       7
       7
       +
         padding: 20px 0;

     

       8
       8
       +
       

     

       9
       9
       +
         @media (max-width: $tablet-max-width) {

     

       10
       10
       +
           max-width: 660px;

     

       11
       11
       +
         }

     

       12
       12
       +
       

     

       13
       13
       +
         &:not(:last-of-type) {

     

       14
       14
       +
           border-bottom: 1px solid var(--border-color);

     

       15
       15
       +
         }

     

       16
       16
       +
       

     

       17
       17
       +
         &-meta {

     

       18
       18
       +
           margin-bottom: 10px;

     

       19
       19
       +
           color: var(--accent-alpha-70);

     

       20
       20
       +
         }

     

       21
       21
       +
       

     

       22
       22
       +
         &-title {

     

       23
       23
       +
           --border: 3px dotted var(--accent);

     

       24
       24
       +
           position: relative;

     

       25
       25
       +
           color: var(--accent);

     

       26
       26
       +
           margin: 0 0 15px;

     

       27
       27
       +
           padding-bottom: 15px;

     

       28
       28
       +
           border-bottom: var(--border);

     

       29
       29
       +
       

     

       30
       30
       +
           &:after {

     

       31
       31
       +
             content: '';

     

       32
       32
       +
             position: absolute;

     

       33
       33
       +
             bottom: 2px;

     

       34
       34
       +
             display: block;

     

       35
       35
       +
             width: 100%;

     

       36
       36
       +
             border-bottom: var(--border);

     

       37
       37
       +
           }

     

       38
       38
       +
       

     

       39
       39
       +
           a {

     

       40
       40
       +
             text-decoration: none;

     

       41
       41
       +
           }

     

       42
       42
       +
         }

     

       43
       43
       +
       

     

       44
       44
       +
         &-tags {

     

       45
       45
       +
           display: block;

     

       46
       46
       +
           margin-bottom: 20px;

     

       47
       47
       +
           opacity: .5;

     

       48
       48
       +
       

     

       49
       49
       +
           a {

     

       50
       50
       +
               text-decoration: none;

     

       51
       51
       +
           }

     

       52
       52
       +
         }

     

       53
       53
       +
       

     

       54
       54
       +
         &-content {

     

       55
       55
       +
           margin-top: 30px;

     

       56
       56
       +
         }

     

       57
       57
       +
       

     

       58
       58
       +
         &-cover {

     

       59
       59
       +
           border: 20px solid var(--accent);

     

       60
       60
       +
           background: transparent;

     

       61
       61
       +
           margin: 40px 0;

     

       62
       62
       +
           padding: 20px;

     

       63
       63
       +
       

     

       64
       64
       +
           @media (max-width: $phone-max-width) {

     

       65
       65
       +
             padding: 10px;

     

       66
       66
       +
             border-width: 10px;

     

       67
       67
       +
           }

     

       68
       68
       +
         }

     

       69
       69
       +
       

     

       70
       70
       +
         ul {

     

       71
       71
       +
           list-style: none;

     

       72
       72
       +
       

     

       73
       73
       +
           li:before {

     

       74
       74
       +
             content: '⦿';

     

       75
       75
       +
             position: absolute;

     

       76
       76
       +
             left: -20px;

     

       77
       77
       +
             color: var(--accent);

     

       78
       78
       +
           }

     

       79
       79
       +
           ul {

     

       80
       80
       +
       

     

       81
       81
       +
             li:before {

     

       82
       82
       +
               content: '■';

     

       83
       83
       +
               position: absolute;

     

       84
       84
       +
               left: -20px;

     

       85
       85
       +
               color: var(--accent);

     

       86
       86
       +
             }

     

       87
       87
       +
       

     

       88
       88
       +
             ul {

     

       89
       89
       +
       

     

       90
       90
       +
               li:before {

     

       91
       91
       +
                 content: '►';

     

       92
       92
       +
                 position: absolute;

     

       93
       93
       +
                 left: -20px;

     

       94
       94
       +
                 color: var(--accent);

     

       95
       95
       +
               }

     

       96
       96
       +
             }

     

       97
       97
       +
           }

     

       98
       98
       +
         }

     

       99
       99
       +
       }

     

       100
       100
       +
       

     

       101
       101
       +
       // TODO: try adapting this using a properly nested selector in the block above

     

       102
       102
       +
       //       for ul items.

     

       103
       103
       +
       .tag-list {

     

       104
       104
       +
           @media(max-width: $phone-max-width) {

     

       105
       105
       +
               margin-left: 5%;

     

       106
       106
       +
           }

     

       107
       107
       +
       }

     

       108
       108
       +
       

     

       109
       109
       +
       .post--regulation {

     

       110
       110
       +
         h1 {

     

       111
       111
       +
           justify-content: center;

     

       112
       112
       +
         }

     

       113
       113
       +
       

     

       114
       114
       +
         h2 {

     

       115
       115
       +
           justify-content: center;

     

       116
       116
       +
           margin-bottom: 10px;

     

       117
       117
       +
       

     

       118
       118
       +
           &+ h2 {

     

       119
       119
       +
             margin-top: -10px;

     

       120
       120
       +
             margin-bottom: 20px;

     

       121
       121
       +
           }

     

       122
       122
       +
         }

     

       123
       123
       +
       }

     

       124
       124
       +
       

     

       125
       125
       +
       .post-list {

     

       126
       126
       +
         .post-date {

     

       127
       127
       +
           color: var(--accent-alpha-70);

     

       128
       128
       +
           text-decoration: none;

     

       129
       129
       +
         }

     

       130
       130
       +
       

     

       131
       131
       +
         a {

     

       132
       132
       +
           text-decoration: none;

     

       133
       133
       +
         }

     

       134
       134
       +
       

     

       135
       135
       +
         .post-list-title {

     

       136
       136
       +
           text-decoration: underline;

     

       137
       137
       +
         }

     

       138
       138
       +
       

     

       139
       139
       +
         .post-tag {

     

       140
       140
       +
           text-decoration: underline;

     

       141
       141
       +
         }

     

       142
       142
       +
       }

sass/_variables.scss

···

       1
       1
       +
       $phone-max-width: 683px;

     

       2
       2
       +
       $tablet-max-width: 899px;

+13 -6

sass/style.scss

···

       1
       1
       -
       @import '../themes/zerm/sass/buttons';

     

       2
       2
       -
       @import '../themes/zerm/sass/header';

     

       3
       3
       -
       @import '../themes/zerm/sass/logo';

     

       1
       1
       +
       @import 'variables';

     

       2
       2
       +
       // @import 'buttons';

     

       3
       3
       +
       @import 'header';

     

       4
       4
       +
       @import 'logo';

     

       4
       5
        
       @import 'main';

     

       5
       5
       -
       @import '../themes/zerm/sass/post';

     

       6
       6
       -
       @import '../themes/zerm/sass/pagination';

     

       7
       7
       -
       @import '../themes/zerm/sass/footer';

     

       6
       6
       +
       @import 'post';

     

       7
       7
       +
       @import 'pagination';

     

       8
       8
       +
       @import 'footer';

     

       9
       9
       +
       

     

       10
       10
       +
       :root {

     

       11
       11
       +
         --phoneWidth: (max-width: #{$phone-max-width + 1px});

     

       12
       12
       +
         --tabletWidth: (max-width: #{$tablet-max-width + 1px});

     

       13
       13
       +
       }

     

       14
       14
       +

+4 -6

templates/index.html

···

       1
       1
        
       {% extends "zerm/templates/index.html" %}

     

       2
       2
        
       

     

       3
       3
       -
       {% block general_meta %}

     

       4
       4
       -
           <meta http-equiv="content-type" content="text/html; charset=utf-8">

     

       5
       5
       -
           <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1">

     

       6
       6
       -
           <meta name="description" content="{{ config.description }}"/>

     

       7
       7
       -
           <script async defer data-domain="hauleth.dev" src="https://plausible.io/js/plausible.js"></script>

     

       8
       8
       -
       {% endblock general_meta %}

     

       3
       3
       +
       {% block script %}

     

       4
       4
       +
         {{ footer::script() }}

     

       5
       5
       +
         <script async defer data-domain="hauleth.dev" src="https://plausible.io/js/plausible.js"></script>

     

       6
       6
       +
       {% endblock script %}

     

       9
       7
        
       

     

       10
       8
        
       {% block header %}

     

       11
       9
        
       <header class="header">