Skip to content

Commit

Permalink
Update styles
Browse files Browse the repository at this point in the history
  • Loading branch information
nighon committed Nov 22, 2024
1 parent a3ac247 commit 45ce7f5
Show file tree
Hide file tree
Showing 6 changed files with 115 additions and 165 deletions.
16 changes: 12 additions & 4 deletions _includes/header.html
Original file line number Diff line number Diff line change
@@ -1,5 +1,13 @@
<header>
<h5>
<a href="/">{{ site.title }}</a>
</h5>
<header class="site-header-post">
{% if page.url != "/" %}
<button aria-checked="false" data-testid="add-button" class="menu button-clear" aria-label="收藏至音乐库" data-encore-id="buttonTertiary">
<a href="/">
<span aria-hidden="true" class="IconWrapper__Wrapper-sc-16usrgb-0 hYdsxw">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-arrow-left-short" viewBox="0 0 16 16">
<path fill-rule="evenodd" d="M12 8a.5.5 0 0 1-.5.5H5.707l2.147 2.146a.5.5 0 0 1-.708.708l-3-3a.5.5 0 0 1 0-.708l3-3a.5.5 0 1 1 .708.708L5.707 7.5H11.5a.5.5 0 0 1 .5.5"/>
</svg>
</span>
</a>
</button>
{% endif %}
</header>
8 changes: 4 additions & 4 deletions _layouts/post.html
Original file line number Diff line number Diff line change
Expand Up @@ -4,11 +4,11 @@

{% include header.html %}

<div class="post">
<div class="post-head" style="background-color: {% if page.bgcolor %}{{ page.bgcolor }}{% else %}{{ site.bgcolor }}{% endif %}">
<h1>{{ page.title }}</h1>
<div class="single-post">
<div class="single-post-head" style="background-color: {% if page.bgcolor %}{{ page.bgcolor }}{% else %}{{ site.bgcolor }}{% endif %}">
<h1 class="post-header">{{ page.title }}</h1>
</div>
<article>
<article class="article-single">
{{ content }}
</article>
</div>
Expand Down
50 changes: 26 additions & 24 deletions _sass/_header.scss
Original file line number Diff line number Diff line change
@@ -1,30 +1,32 @@
header {
.menu {
position: absolute;
top: 0;
left: 0;
right: 0;
text-align: center;

h5 {
padding-top: 2vmin;
font-size: 12px;
font-weight: 800;
// text-align: center;
// text-transform: uppercase;
// letter-spacing: 0.1em;
margin: 0;
}
top: 2.7vmin;
left: 2.8vmin;
z-index: 2024;
outline: none;
-webkit-tap-highlight-color: transparent;
width: 43px;
padding: 10px;
cursor: pointer;
}

a {
text-decoration: none;
color: rgba(var(--black), 0.5);
.button-clear {
border: none;
background-color: transparent;
}

&:active {
color: inherit;
}
.bi-arrow-left-short {
fill: currentColor;
width: 40px;
height: 40px;
padding: 4px;
border-radius: 50%;
color: #666;
background-color: rgba(220, 220, 220, 0.2);

&:hover {
color: rgba(var(--black), 0.75)
}
&:hover {
transform: scale(1.04);
color: #333;
background-color: rgba(220, 220, 220, 0.4);
}
}
86 changes: 40 additions & 46 deletions _sass/_post.scss
Original file line number Diff line number Diff line change
@@ -1,71 +1,65 @@
.post {
color: rgba(0, 0, 0, 0.75)
.site-header-post {
position: absolute;
width: 100%;
}

.post-head {
padding: calc(15px + 15vmin) var(--gutter-x);
margin-left: auto;
margin-right: auto;
.single-post {
clear: both;
position: relative;
color: #333;
font-size: 18px;
line-height: 1.8em;
overflow: hidden;
}

.single-post-head {
text-align: center;
background-color: #f8f8f0;
padding: 21vh 20px 21vh;
position: relative;
}

h1 {
max-width: 1200px;
margin: 0 auto;
font-size: calc(16px + 3vw);
font-weight: 600;
line-height: 1.3em;
}
.post-header {
position: relative;
font-size: 74px;
font-weight: 800;
line-height: 1.3em;
max-width: 980px;
margin-left: auto;
margin-right: auto;
}

@media (min-width: 1200px) {
.post-head h1 {
font-size: 3em;
@media (max-width: 1200px) {
.post-header {
font-size: calc(12px + 5vw);
}
}

article {
font-size: var(--post-font-size);
line-height: 1.9em;
overflow-wrap: break-word;

> h1,
> h2,
> h3 {
position: relative;
max-width: var(--post-max-width);
padding: 0 var(--gutter-x);
margin: 3em auto 1.2em;
font-size: 1.5em;
font-weight: 400;
margin: 3em auto 1em;
font-size: 1.7em;
line-height: 1.3em;
font-weight: 400;
max-width: 700px;
padding-left: 20px;
padding-right: 20px;
scroll-margin-top: 1em;

&:first-child {
margin-top: 0;
}
text-wrap: balance;
}

> p {
max-width: var(--post-max-width);
padding: 0 var(--gutter-x);
margin: 0 auto 2em;

&:first-child {
margin-top: calc(2em + 2vh);
}
max-width: 700px;
padding-left: 20px;
padding-right: 20px;
}
}

> ul,
> ol {
max-width: var(--post-max-width);
padding: 0 var(--gutter-x);
margin: 0 auto 2em;

li {
margin-bottom: 0.5em;
}
}
.article-single {
margin-top: 60px;
}

p img {
Expand Down
91 changes: 17 additions & 74 deletions _sass/_post_code.scss
Original file line number Diff line number Diff line change
@@ -1,93 +1,36 @@
div.highlight {
max-width: calc(var(--post-max-width) + 80px);
margin: 0 auto 2em;
padding: 2em 0;
border-radius: 1em;
line-height: 1.3em;
background-color: #f4f4f6;
color: rgb(var(--darkgray));
overflow: auto;
border-radius: var(--rounded);
padding: 2.4em 1em 2.6em;
width: 100%;
max-width: 820px;
overflow-x: auto;
margin-right: auto;
margin-bottom: 2em;
margin-left: auto;
line-height: 1.3em;
box-sizing: border-box;
position: relative;
font-family: var(--mono-font);

> pre {
max-width: var(--post-max-width);
padding: 0 var(--gutter-x);
margin: 0 auto;
max-width: 700px;
font-size: 14px;
background-color: inherit;
}

.c,
.c1 {
color: gray;
margin: 0 auto;
}
}

code {
font-family: 'SF Mono', SFMono-Regular, ui-monospace, 'DejaVu Sans Mono', Menlo, Consolas, monospace;;
font-family: var(--mono-font)
}

div.language-shell .nv {
div.language-console .gp {
-webkit-user-select: none;
user-select: none;
}

code.highlighter-rouge {
font-size: 14px;
padding: 0.3em 0.5em;
border-radius: 7px;
background-color: #eee;
}

@media (max-width: 1000px) {
div.highlight {
max-width: var(--post-max-width);;
}
}

@media (max-width: 780px) {
div.highlight {
max-width: 100%;
border-radius: 0;
position: unset;
}
}

// .language-shell div.highlight::before {
// content: "Shell"
// }

// .language-css div.highlight::before {
// content: "CSS"
// }

// .language-html div.highlight::before {
// content: "HTML"
// }

// .language-javascript div.highlight::before {
// content: "JavaScript"
// }

// div.highlight {
// position: relative;
// }

// div.highlight::before {
// z-index: 100;
// position: absolute;
// content: "";
// top: 10px;
// right: 10px;
// font-size: 13px;
// font-weight: 400;
// background-color: #ccc;
// padding: 4px 10px;
// border-radius: 9px;
// letter-spacing: 0.04em;
// color: #fff;
// opacity: 0;
// transition: opacity 0.2s ease-out;
// }

// div.highlight:hover::before {
// opacity: 1;
// }
29 changes: 16 additions & 13 deletions _sass/main.scss
Original file line number Diff line number Diff line change
@@ -1,18 +1,18 @@
:root {
--black: 0, 0, 0;
--darkgray: 50, 50, 50;
--lightgray: 200, 200, 200;
--teal-color: 0, 128, 128;
--gutter-x: 20px;
--post-max-width: 740px;
--post-font-size: 18px;
--rounded: 18px;
--mono-font: 'SF Mono', SFMono-Regular, ui-monospace, 'DejaVu Sans Mono', Menlo, Consolas, monospace;
}

*,
*::before,
*::after {
box-sizing: border-box;
}
// *,
// *::before,
// *::after {
// box-sizing: border-box;
// }

html,
div,
Expand Down Expand Up @@ -72,10 +72,6 @@ footer {

a {
text-decoration: none;

// &:hover {
// color: #eb6534;
// }
}

div {
Expand All @@ -90,8 +86,6 @@ footer {

a {
color: inherit;
text-decoration: underline;
text-underline-offset: 0.3em;

&
:active,
Expand Down Expand Up @@ -124,6 +118,15 @@ a.underline {
}
}

h1 {
font-style: normal;
font-size: 45px;
font-weight: normal;
vertical-align: baseline;
margin: 0;
padding: 0;
}

.not-found {
flex: 1;
display: flex;
Expand Down

0 comments on commit 45ce7f5

Please sign in to comment.