From 07b4b25fe8b637925d2cfd42336cfef9ff2a9f6e Mon Sep 17 00:00:00 2001
From: weru <fromweru@gmail.com>
Date: Sun, 27 Dec 2020 16:56:12 +0000
Subject: [PATCH] edit styles
---
assets/sass/_variables.sass | 6 +
assets/sass/_syntax.sass | 203 ++++++++++++++++++++++++++++++++++++++++----------
assets/sass/_utils.sass | 6
3 files changed, 170 insertions(+), 45 deletions(-)
diff --git a/assets/sass/_syntax.sass b/assets/sass/_syntax.sass
index 0702583..a76e111 100644
--- a/assets/sass/_syntax.sass
+++ b/assets/sass/_syntax.sass
@@ -1,59 +1,112 @@
-code
- min-width: 100%
- max-width: 100%
+@keyframes pulse
+ 0%
+ opacity: 1
+ 75%
+ opacity: 0.1
+ 100%
+ opacity: 1
+
+code
+ font-size: 15px
+ font-weight: 400
+ overflow-y: hidden
+ display: block
+ font-family: 'Monaco', monospace
+ word-break: break-all
&.noClass
- color: orange
-pre
+ --inlineColor: darkgoldenrod
+ color: var(--inlineColor)
+ display: inline
+ line-break: anywhere
+.windows .highlight
+ overflow-x: hidden
+ &:hover
+ overflow-x: auto
+
+.highlight
display: grid
- padding: 1rem
+ width: 100%
+ border-radius: 0 0.2rem 0.2rem 0
overflow-x: auto
-.highlight
- display: grid
- margin: 1.25rem 0
- box-shadow: 0 0 2.5rem rgba(0,0,0,0.12)
- border-radius: 4px
- overflow: hidden
+ position: relative
+ &_wrap
+ display: grid
+ background: var(--code-bg) !important
+ border-radius: 0.5rem
+ position: relative
+ padding: 0 1rem
+ margin: 1.5rem auto 1rem auto
+ & + &
+ margin-top: 2.25rem
+ &:hover > div
+ opacity: 1
+ .lang
+ position: absolute
+ top: 0
+ right: 0
+ text-align: right
+ width: 7.5rem
+ padding: 0.5rem 1rem
+ font-style: italic
+ text-transform: uppercase
+ font-size: 67%
+ opacity: 0.5
+ color: var(--light)
+ &:hover .lang
+ opacity: 0.1
+ & &
+ margin: 0
+ pre
+ color: var(--light) !important
+ border-radius: 4px
+ font-family: 'Monaco', monospace
+ padding-top: 1.5rem
+ padding-bottom: 2rem
+
table
- margin: 0
- border-collapse: collapse
- background-color: var(--overlay)
- & &
- margin: 0
+ display: grid
+ max-width: 100%
+ margin-bottom: 0
+ background: transparent
+ td, th
+ padding: 0
-.lntd
- &:first-child
- width: 2.75rem
- background-color: var(--theme)
- color: var(--light)
- pre
- padding: 0
- code
- display: flex
- flex-flow: column
- align-items: center
- &:last-child
- padding-left: 0
+ .lntd
+ width: 100%
+ border: none
+ &:first-child
+ &, pre
+ width: 2.5rem !important
+ padding-left: 0
+ padding-right: 0
+ color: rgba(255,255,255,0.5)
+ user-select: none
+ pre
+ width: 100%
+ display: flex
+ align-items: center
+ flex-direction: column
.err
color: #a61717
background-color: #e3d2d2
-
.hl
- display: block
width: 100%
- background-color: #ffffcc
+ background-color: rgba(255,255,255,0.25)
+.ln, .lnt
+ margin-right: 0.75rem
+ padding: 0
+ transition: opacity 0.3s var(--ease)
+ &, span
+ color: hsla(0,0%,100%,0.5)
+ user-select: none
-.ln
- margin-right: 0.4rem
- padding: 0 0.4em 0 0.4rem
- color: #666
-
-.k, .kc, .kd, .kn, .kp, .kr, .kt, .nt
+.k, .kc, .kd, .kn, .kp, .kr, .kt, .nt
color: #6ab825
font-weight: 500
-.kn , .kp
+.kn, .kp
font-weight: 400
.nb, .no, .nv
@@ -62,7 +115,7 @@
.nc, .nf, .nn
color: #447fcf
-.s, .sa, .sb, .sc, .dl, .sd, .s2, .se, .sh, .si, .sx, .sr, .s1, .s
+.s, .sa, .sb, .sc, .dl, .sd, .s2, .se, .sh, .si, .sx, .sr, .s1, .ss
color: #ed9d13
.m, .mb, .mf, .mh, .mi, .il, .mo
@@ -109,6 +162,72 @@
.gt
color: #d22323
-
.w
color: #666
+
+.hljs
+ &-string
+ color: #6ab825
+ &-attr
+ color: #ed9d13
+ .p &-attr
+ color: var(--light)
+
+.pre
+ &_wrap
+ white-space: pre-wrap
+ white-space: -moz-pre-wrap
+ white-space: -pre-wrap
+ white-space: -o-pre-wrap
+ word-wrap: break-word
+
+ &_nolines.ln
+ display: none
+
+// crayon-like widget styles
+.panel
+ &_box
+ display: inline-flex
+ // grid-template-columns: repeat(3, 1fr)
+ // max-width: 10rem
+ perspective: 300px
+ grid-gap: 0.5rem
+ transition: opacity 0.3s var(--easing)
+ background: var(--code-bg)
+ padding: 0.5rem 1.5rem
+ border-radius: 2rem
+ align-items: center
+ position: absolute
+ right: 0rem
+ top: -2.1rem
+ opacity: 0
+ &_icon
+ display: inline-flex
+ align-items: center
+ justify-content: center
+ cursor: pointer
+ // transition: opacity 0.3s var(--easing)
+ padding: 0.1rem
+ transform-origin: 50% 50%
+ // opacity: 0.7
+ &.active
+ animation: pulse 0.1s linear
+ svg
+ fill: var(--light)
+ width: 1.5rem
+ height: 1.5rem
+ &_hide
+ // hide icon if not needed
+ display: none
+ &_from
+ position: absolute
+ color: var(--theme)
+ bottom: 0
+ font-size: 1.5rem
+ font-weight: 500
+ padding: 0.5rem 0
+ cursor: pointer
+ letter-spacing: 0.1px
+ z-index: 19
+ &_expanded &_from
+ display: none
diff --git a/assets/sass/_utils.sass b/assets/sass/_utils.sass
index 82d4ebe..c7c5ad6 100644
--- a/assets/sass/_utils.sass
+++ b/assets/sass/_utils.sass
@@ -38,13 +38,13 @@
grid-template-columns: 3fr 1fr
.grid-2
- grid-template-columns: 1fr 1fr
+ grid-template-columns: repeat(2, 1fr)
.grid-3
- grid-template-columns: repeat(auto-fit, minmax(19rem, 1fr))
+ grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr))
.grid-4
- grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr))
+ grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr))
.active
color: var(--theme)
diff --git a/assets/sass/_variables.sass b/assets/sass/_variables.sass
index 4f8e8c7..2791edc 100644
--- a/assets/sass/_variables.sass
+++ b/assets/sass/_variables.sass
@@ -6,6 +6,7 @@
--bubble: rgb(36,36,38)
--accent: var(--haze)
--bg: var(--light)
+ --code-bg: var(--dark)
--overlay: var(--light)
--text: #111
--font: 'Metropolis', sans-serif
@@ -21,6 +22,7 @@
--accent: var(--bubble)
--overlay: var(--bubble)
--border-color: transparent
+ --code-bg: var(--accent)
*
box-shadow: none !important
@@ -38,3 +40,7 @@
%narrow
max-width: 750px
margin: 0 auto
+
+blockquote
+ + .highlight_wrap
+ margin-top: 2.25rem
\ No newline at end of file
--
Gitblit v1.10.0