mirror of
https://github.com/yrzam/yrzam-hugo-theme.git
synced 2025-12-10 01:39:05 +00:00
init
This commit is contained in:
182
assets/css/classic-layout.scss
Normal file
182
assets/css/classic-layout.scss
Normal file
@@ -0,0 +1,182 @@
|
||||
/*
|
||||
Classic view: header, main and footer block. Aside column is possible.
|
||||
Details depend on section.
|
||||
*/
|
||||
.classic-layout-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100%;
|
||||
header,
|
||||
footer {
|
||||
padding: $base-margin-y $base-margin-x;
|
||||
.content {
|
||||
max-width: $base-width;
|
||||
margin: 0 auto;
|
||||
}
|
||||
}
|
||||
header {
|
||||
background: linear-gradient(
|
||||
135deg,
|
||||
$bg-accent-color-light 0%,
|
||||
$bg-accent-color-dark 100%
|
||||
);
|
||||
.content {
|
||||
& > :last-child {
|
||||
margin-bottom: 0 !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
main {
|
||||
flex: 1 0 auto;
|
||||
}
|
||||
footer {
|
||||
flex-shrink: 0;
|
||||
.content {
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* section specific - list of classic */
|
||||
.classic-layout-container main .content.list {
|
||||
padding: $base-margin-y $base-margin-x;
|
||||
.main-container {
|
||||
.list-container {
|
||||
max-width: $base-width;
|
||||
margin: 0 auto;
|
||||
ul {
|
||||
padding-left: 1rem;
|
||||
}
|
||||
.list-item-container {
|
||||
margin: 0.2rem 0;
|
||||
.list-item-a-wrapper {
|
||||
text-decoration: none;
|
||||
.list-item {
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
padding: 0.5rem 0 0.5rem 0.5rem;
|
||||
line-height: 1.5;
|
||||
.summary,
|
||||
.pub-date {
|
||||
color: $fg-color-dark;
|
||||
}
|
||||
.title {
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.paginator {
|
||||
margin: $base-margin-y 0 0 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* section specific - single of classic */
|
||||
.classic-layout-container header .content.post {
|
||||
.pub-date {
|
||||
color: $fg-color-semitransp;
|
||||
margin: 1em 0;
|
||||
}
|
||||
}
|
||||
.classic-layout-container main .content.post {
|
||||
.nav-block {
|
||||
.toc-title {
|
||||
text-align: center;
|
||||
margin-top: $base-margin-y;
|
||||
}
|
||||
nav {
|
||||
overflow-wrap: break-word;
|
||||
overflow-y: auto;
|
||||
ul {
|
||||
padding: 0 0 0 1rem; // 1rem is the browser defined bullet offset
|
||||
}
|
||||
}
|
||||
}
|
||||
.main-container {
|
||||
margin: $base-margin-y $base-margin-x;
|
||||
}
|
||||
}
|
||||
@mixin media--classic-main-content-post_1col {
|
||||
.classic-layout-container main .content.post {
|
||||
.nav-block {
|
||||
nav {
|
||||
max-height: 50vh;
|
||||
background-color: $bg-accent-color-dark;
|
||||
padding: $base-margin-y $base-margin-x;
|
||||
border: 2px solid $bg-accent-color-light;
|
||||
}
|
||||
}
|
||||
.main-container {
|
||||
margin: $base-margin-y * 2 $base-margin-x $base-margin-y $base-margin-x;
|
||||
}
|
||||
}
|
||||
}
|
||||
@mixin media--classic-main-content-post_2col {
|
||||
.classic-layout-container main .content.post {
|
||||
display: flex;
|
||||
.aside-container {
|
||||
display: flex;
|
||||
.nav-block {
|
||||
margin: $base-margin-y 0 0 $base-margin-x;
|
||||
max-width: 20.5rem;
|
||||
min-width: 0;
|
||||
nav {
|
||||
padding: 0.5rem 0.5rem 0.5rem 0;
|
||||
position: sticky;
|
||||
top: 0;
|
||||
max-height: 100vh;
|
||||
scrollbar-width: thin;
|
||||
&,
|
||||
a {
|
||||
color: $fg-color-dark;
|
||||
}
|
||||
a:hover {
|
||||
color: $fg-color;
|
||||
}
|
||||
}
|
||||
scrollbar-color: transparent transparent;
|
||||
&:hover {
|
||||
scrollbar-color: rgba($fg-color-dark, 0.6) transparent;
|
||||
}
|
||||
}
|
||||
}
|
||||
.main-container {
|
||||
margin: $base-margin-y $base-margin-x;
|
||||
article {
|
||||
max-width: $base-width;
|
||||
margin: 0 auto;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@mixin media--classic-main-content-post-2col_narrow {
|
||||
.classic-layout-container main .content.post {
|
||||
.aside-container {
|
||||
min-width: 0;
|
||||
flex: 0 1 auto;
|
||||
}
|
||||
.main-container {
|
||||
min-width: 0;
|
||||
flex: 1 1 auto;
|
||||
}
|
||||
}
|
||||
}
|
||||
@mixin media--classic-main-content-post-2col_wide {
|
||||
.classic-layout-container main .content.post {
|
||||
&::after {
|
||||
content: "";
|
||||
min-width: 0;
|
||||
flex: 1;
|
||||
}
|
||||
.aside-container {
|
||||
min-width: 0;
|
||||
flex: 1;
|
||||
}
|
||||
.main-container {
|
||||
min-width: 0;
|
||||
flex: 0 1 $base-width;
|
||||
}
|
||||
}
|
||||
}
|
||||
150
assets/css/home-layout.scss
Normal file
150
assets/css/home-layout.scss
Normal file
@@ -0,0 +1,150 @@
|
||||
.home-layout-container {
|
||||
display: flex;
|
||||
height: 100%;
|
||||
.content.home {
|
||||
flex: 0 0 100%;
|
||||
margin: auto 0;
|
||||
.about-container {
|
||||
background: linear-gradient(
|
||||
135deg,
|
||||
$bg-accent-color-light 0%,
|
||||
$bg-accent-color-dark 100%
|
||||
);
|
||||
padding: $base-margin-y $base-margin-x;
|
||||
}
|
||||
.bottom-container {
|
||||
margin: $base-margin-y $base-margin-x;
|
||||
.bottom-block {
|
||||
max-width: $base-width;
|
||||
margin: 0 auto;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.home-layout-container .content.home .about-block {
|
||||
max-width: $base-width;
|
||||
margin: 0 auto;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
flex-direction: row-reverse;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: $base-margin-y $base-margin-x;
|
||||
.info-container {
|
||||
flex: 1;
|
||||
h1 {
|
||||
text-align: center;
|
||||
margin-top: 0;
|
||||
}
|
||||
.pgp {
|
||||
margin: 1em 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
column-gap: 0.8rem;
|
||||
.icon {
|
||||
height: 1.5rem;
|
||||
width: 1.5rem;
|
||||
color: $fg-color-semitransp;
|
||||
&:hover {
|
||||
color: $fg-accent-color;
|
||||
}
|
||||
}
|
||||
.text {
|
||||
color: $fg-color-dark;
|
||||
}
|
||||
}
|
||||
.links {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
column-gap: 1rem;
|
||||
.icon {
|
||||
height: 2rem;
|
||||
width: 2rem;
|
||||
color: $fg-color-semitransp;
|
||||
&:hover {
|
||||
color: $fg-accent-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.image-container {
|
||||
flex: 0 1 30%;
|
||||
img {
|
||||
display: block;
|
||||
width: 100%;
|
||||
background: rgba(#000, 0.2);
|
||||
border-radius: 0.5rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.home-layout-container .content.home .section-list {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
flex-wrap: wrap;
|
||||
gap: 0.5rem;
|
||||
.section-item {
|
||||
white-space: nowrap;
|
||||
text-decoration: none;
|
||||
&:hover {
|
||||
color: $fg-color;
|
||||
border: 1px solid $fg-accent-color;
|
||||
}
|
||||
display: block;
|
||||
flex: 1 0 30%;
|
||||
border: 1px solid $fg-color-semitransp;
|
||||
border-radius: 1rem;
|
||||
text-align: center;
|
||||
padding: 1rem;
|
||||
.icon {
|
||||
height: 2.5rem;
|
||||
width: 2.5rem;
|
||||
vertical-align: middle;
|
||||
color: $fg-color-semitransp;
|
||||
}
|
||||
.label {
|
||||
font-size: 1.3rem;
|
||||
vertical-align: middle;
|
||||
margin: 0 0 0 0.5rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.home-layout-container .content.home .notice {
|
||||
margin: $base-margin-y 0 0 0;
|
||||
color: $fg-color-semitransp;
|
||||
}
|
||||
|
||||
@mixin media--home-content-about_vert_top {
|
||||
.home-layout-container .content.home .about-block {
|
||||
.image-container {
|
||||
flex-basis: 10rem;
|
||||
}
|
||||
.info-container {
|
||||
flex-basis: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
@mixin media--home-content-about_vert_middle {
|
||||
.home-layout-container {
|
||||
.content.home {
|
||||
.about-container {
|
||||
padding: $base-margin-y * 2 $base-margin-x;
|
||||
}
|
||||
}
|
||||
}
|
||||
.home-layout-container .content.home .section-list {
|
||||
.section-item .label {
|
||||
font-size: 1.6rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
@mixin media--home-content-about_vert_middle_wide {
|
||||
.home-layout-container .content.home .section-list {
|
||||
.section-item .label {
|
||||
font-size: 1.8rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
208
assets/css/index.scss
Normal file
208
assets/css/index.scss
Normal file
@@ -0,0 +1,208 @@
|
||||
$bg-color: #0d1117;
|
||||
$fg-color: #fff;
|
||||
$fg-color-dark: #b8bcc1;
|
||||
$fg-color-semitransp: rgba(#fff, 0.55);
|
||||
$bg-accent-color-dark: #020030;
|
||||
$bg-accent-color-light: #510079;
|
||||
$fg-accent-color: #98f;
|
||||
|
||||
$base-margin-x: 1rem;
|
||||
$base-margin-y: 1rem;
|
||||
$base-width: 50rem;
|
||||
$base-font-size: 16px;
|
||||
|
||||
/* If style is modified in a certain context, other uses must not inherit from user agent stylesheet */
|
||||
|
||||
/* elements */
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
/* prettier-ignore */
|
||||
html,body,ul,ol,li,blockquote,pre,hr {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
/* prettier-ignore */
|
||||
h1,h2,h3,h4,h5,h6 {
|
||||
margin: 0.5em 0;
|
||||
padding: 0;
|
||||
}
|
||||
html {
|
||||
font-size: 16px;
|
||||
height: 100%;
|
||||
scroll-behavior: smooth;
|
||||
scrollbar-color: rgba($fg-accent-color, 0.6) transparent;
|
||||
line-height: 1.3;
|
||||
}
|
||||
body {
|
||||
height: 100%;
|
||||
background-color: $bg-color;
|
||||
color: $fg-color;
|
||||
}
|
||||
a {
|
||||
color: $fg-color;
|
||||
&:hover {
|
||||
color: $fg-accent-color;
|
||||
}
|
||||
}
|
||||
p {
|
||||
margin: 1em 0;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
/* generic */
|
||||
.paginator {
|
||||
text-align: center;
|
||||
.button {
|
||||
display: inline-block;
|
||||
margin: 0;
|
||||
padding: 0.2rem 0;
|
||||
min-width: 2rem;
|
||||
text-decoration: none;
|
||||
background: $bg-accent-color-dark;
|
||||
&.current {
|
||||
background: $bg-accent-color-light;
|
||||
}
|
||||
}
|
||||
}
|
||||
.taxo-list {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 0.5rem;
|
||||
margin: 1em 0;
|
||||
.button {
|
||||
display: inline-block;
|
||||
padding: 0.1rem 1rem;
|
||||
border: 1px solid $fg-color-semitransp;
|
||||
border-radius: 0.25rem;
|
||||
text-decoration: none;
|
||||
&:hover {
|
||||
border: 1px solid $fg-accent-color;
|
||||
color: $fg-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
.icon {
|
||||
display: inline-block;
|
||||
svg {
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
.icon-a-wrapper {
|
||||
// if icon is inside link, eliminate inline line-height artifacts
|
||||
display: inline-block;
|
||||
.icon {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
@import "classic-layout.scss";
|
||||
@import "home-layout.scss";
|
||||
|
||||
/* markdown */
|
||||
article {
|
||||
overflow-wrap: break-word;
|
||||
& > :first-child {
|
||||
margin-top: $base-margin-y !important;
|
||||
}
|
||||
pre {
|
||||
background: $bg-accent-color-dark !important;
|
||||
overflow-x: auto;
|
||||
padding: 1rem;
|
||||
font-size: 0.875rem;
|
||||
border: 1px solid $bg-accent-color-light;
|
||||
margin: 1em 0;
|
||||
scrollbar-color: rgba($fg-accent-color, 0.2) transparent;
|
||||
&:hover {
|
||||
scrollbar-color: rgba($fg-accent-color, 0.6) transparent;
|
||||
}
|
||||
transition: 0.1s all;
|
||||
}
|
||||
h2 code,
|
||||
p code,
|
||||
li code {
|
||||
color: $fg-accent-color;
|
||||
font-weight: bold;
|
||||
}
|
||||
p img,
|
||||
li img {
|
||||
width: 100%;
|
||||
border: 1px solid $bg-accent-color-light;
|
||||
}
|
||||
blockquote {
|
||||
border-left: 0.5rem solid $bg-accent-color-light;
|
||||
background: $bg-accent-color-dark;
|
||||
padding: 0.5rem;
|
||||
p {
|
||||
margin: 0;
|
||||
}
|
||||
margin: 0.5em 0;
|
||||
}
|
||||
ul,
|
||||
ol {
|
||||
padding-left: 2rem;
|
||||
li {
|
||||
margin: 0.5em 0;
|
||||
line-height: 1.5;
|
||||
}
|
||||
}
|
||||
& > ul,
|
||||
ol {
|
||||
margin: 1em 0;
|
||||
}
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
h4,
|
||||
h5,
|
||||
h6 {
|
||||
margin: 1.5em 0 0.5em 0;
|
||||
}
|
||||
}
|
||||
|
||||
/* media */
|
||||
@mixin screen-w($mode, $rem1, $rem2: "") {
|
||||
@if $mode== "less" {
|
||||
@media screen and(max-width: ($rem1 / 1rem * $base-font-size - 0.02px)) {
|
||||
@content;
|
||||
}
|
||||
}
|
||||
@if $mode== "more" {
|
||||
@media screen and(min-width: ($rem1 / 1rem * $base-font-size)) {
|
||||
@content;
|
||||
}
|
||||
}
|
||||
@if $mode== "between" {
|
||||
@media screen and(min-width: ($rem1 / 1rem * $base-font-size)) and (max-width: ($rem2 / 1rem * $base-font-size - 0.02px)) {
|
||||
@content;
|
||||
}
|
||||
}
|
||||
}
|
||||
$base-width-with-margin: $base-width + $base-margin-x * 2;
|
||||
$post-2col-nav-block-max-width: 20.5rem + 1rem + 0.5rem;
|
||||
@include screen-w("less", 35rem + $base-margin-x * 2) {
|
||||
@include media--home-content-about_vert_top();
|
||||
}
|
||||
@include screen-w("more", 35rem + $base-margin-x * 2) {
|
||||
@include media--home-content-about_vert_middle();
|
||||
}
|
||||
@include screen-w("less", $base-width-with-margin) {
|
||||
@include media--classic-main-content-post_1col();
|
||||
}
|
||||
@include screen-w("more", $base-width-with-margin) {
|
||||
@include media--classic-main-content-post_2col();
|
||||
@include media--home-content-about_vert_middle_wide();
|
||||
}
|
||||
@include screen-w(
|
||||
"between",
|
||||
$base-width-with-margin,
|
||||
$base-width-with-margin + $post-2col-nav-block-max-width * 2 + 5rem
|
||||
) {
|
||||
@include media--classic-main-content-post_2col_narrow();
|
||||
}
|
||||
@include screen-w(
|
||||
"more",
|
||||
$base-width-with-margin + $post-2col-nav-block-max-width * 2 + 5rem
|
||||
) {
|
||||
@include media--classic-main-content-post_2col_wide();
|
||||
}
|
||||
1
assets/icons/solid/download.svg
Normal file
1
assets/icons/solid/download.svg
Normal file
@@ -0,0 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><!--! Font Awesome Free 6.5.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) Copyright 2024 Fonticons, Inc. --><path d="M288 32c0-17.7-14.3-32-32-32s-32 14.3-32 32V274.7l-73.4-73.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3l128 128c12.5 12.5 32.8 12.5 45.3 0l128-128c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L288 274.7V32zM64 352c-35.3 0-64 28.7-64 64v32c0 35.3 28.7 64 64 64H448c35.3 0 64-28.7 64-64V416c0-35.3-28.7-64-64-64H346.5l-45.3 45.3c-25 25-65.5 25-90.5 0L165.5 352H64zm368 56a24 24 0 1 1 0 48 24 24 0 1 1 0-48z"/></svg>
|
||||
|
After Width: | Height: | Size: 697 B |
Reference in New Issue
Block a user