333 lines
7.6 KiB
Plaintext
333 lines
7.6 KiB
Plaintext
// colors
|
|
$white-main: #DEDEDF
|
|
$accent-main: rgb(255, 51, 255)
|
|
$gray-main: #696969
|
|
$gray-dull: #141414
|
|
$card-color: #080808
|
|
$red-color: rgb(143, 2, 2)
|
|
|
|
// sizes
|
|
// Ширина
|
|
$main-width: 48vw
|
|
// Отступ от боков экрана
|
|
$main-offset: 25vw
|
|
// Отступы между абзацами
|
|
$div-offset: 1vw
|
|
|
|
// mixins
|
|
// Ширина обводки, цвет овбодки, радиус
|
|
$border-border-radius($a, $b, $c)
|
|
border: $a solid $b
|
|
border-radius: $c
|
|
// color, background-color
|
|
$color($a, $b)
|
|
color: $a
|
|
background-color: $b
|
|
// верх, право, низ, лево
|
|
$margin($a, $b, $c, $d)
|
|
margin: $a $b $c $d
|
|
// ширина, высота
|
|
$width-height($a, $b)
|
|
width: $a
|
|
height: $b
|
|
// justify, align
|
|
$flex-justify-align($a, $b)
|
|
display: flex
|
|
justify-content: $a
|
|
align-items: $b
|
|
// display flex + column dir
|
|
$flex-column()
|
|
display: flex
|
|
flex-direction: column
|
|
// изменение цвета бордера при нажатии
|
|
$focus-input-border()
|
|
transition: border .3s ease
|
|
&:focus
|
|
border: .1vw solid $accent-main
|
|
outline: none
|
|
// изменение цвета при наведении
|
|
$hover-color($color)
|
|
transition: color .3s ease
|
|
&:hover
|
|
color: $color
|
|
|
|
.accent
|
|
color: $accent-main
|
|
.accent-dull
|
|
opacity: .8
|
|
color: $accent-main
|
|
.gray
|
|
color: $gray-main
|
|
.card-color
|
|
color: $card-color
|
|
.gray-dull
|
|
color: $gray-dull
|
|
.red
|
|
color: $red-color
|
|
|
|
// тут почему то не работает соответствующий миксин
|
|
::selection
|
|
color: white
|
|
background-color: rgba(255, 51, 255, .7)
|
|
|
|
// устанавливает отступы для всех вложенный div'ов
|
|
#div-offset
|
|
div
|
|
margin-top: $div-offset
|
|
|
|
a
|
|
cursor: pointer
|
|
color: $white-main
|
|
text-decoration: none
|
|
&:hover
|
|
text-decoration: none
|
|
|
|
input
|
|
font-size: 1vw
|
|
width: 10vw
|
|
$border-border-radius(.1vw, $gray-dull, .3vw)
|
|
$color($white-main, $card-color)
|
|
$focus-input-border()
|
|
&[type="file"]
|
|
display: none
|
|
|
|
textarea
|
|
$border-border-radius(.1vw, $gray-dull, .3vw)
|
|
padding: .5vw
|
|
$color($white-main, $card-color)
|
|
font-size: 1vw
|
|
margin-top: 1vw
|
|
resize: vertical
|
|
width: 100%
|
|
$focus-input-border()
|
|
|
|
button
|
|
padding: .2vw
|
|
$border-border-radius(.1vw, $gray-main, .3vw)
|
|
font-size: 1vw
|
|
$color($white-main, $card-color)
|
|
cursor: pointer
|
|
|
|
.button
|
|
padding: .2vw
|
|
$border-border-radius(.1vw, $gray-main, .3vw)
|
|
font-size: 1vw
|
|
$color($white-main, $card-color)
|
|
cursor: pointer
|
|
|
|
body
|
|
$color($white-main, #000)
|
|
font-size: 1vw
|
|
margin: 0
|
|
font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif
|
|
$flex-column()
|
|
position: relative
|
|
overflow-x: hidden
|
|
|
|
@keyframes blink
|
|
0%, 100%
|
|
opacity: 1
|
|
50%
|
|
opacity: 0
|
|
|
|
.content
|
|
position: relative
|
|
$margin(0, $main-offset, 2vw, $main-offset)
|
|
width: $main-width
|
|
flex: 1
|
|
.main-content
|
|
position: relative
|
|
width: 100%
|
|
margin-right: 0vw
|
|
box-sizing: border-box
|
|
.tags
|
|
color: $gray-main
|
|
font-weight: 700
|
|
margin-bottom: 1vw
|
|
.post
|
|
position: relative
|
|
$border-border-radius(.1vw, $gray-dull, 1vw)
|
|
background-color: $card-color
|
|
padding: 1vw
|
|
$margin(1vw, 0, 1vw, 0)
|
|
text-decoration: none
|
|
&:hover::after, &:hover::before
|
|
content: ''
|
|
opacity: .5
|
|
position: absolute
|
|
top: 50%
|
|
transform: translateY(-50%)
|
|
border-width: 2vw
|
|
border-style: solid
|
|
&:hover::after
|
|
left: 100%
|
|
border-color: transparent $accent-main transparent transparent
|
|
&:hover::before
|
|
right: 100%
|
|
border-color: transparent transparent transparent $accent-main
|
|
.date
|
|
border-top: 0.17vw dotted $gray-main
|
|
$margin(.2vw, 0, 1vw, 0)
|
|
padding-top: 1vw
|
|
color: $gray-main
|
|
.title
|
|
border-bottom: 0.17vw dotted $gray-main
|
|
padding-bottom: 1vw
|
|
font-size: 1.7vw
|
|
font-weight: 700
|
|
.body
|
|
margin-bottom: 0
|
|
.read-other-posts
|
|
color: $white-main
|
|
text-align: center
|
|
margin-top: 2vw
|
|
display: flex
|
|
align-items: center
|
|
#right-border
|
|
flex-grow: 1
|
|
border-bottom: 0.1vw solid $white-main
|
|
margin-right: 1vw
|
|
#left-border
|
|
flex-grow: 1
|
|
border-bottom: 0.1vw solid $white-main
|
|
margin-left: 1vw
|
|
.next-post
|
|
color: $white-main
|
|
text-align: center
|
|
margin-top: 2vw
|
|
$flex-justify-align(center, center)
|
|
.content-control
|
|
margin-bottom: 1vw
|
|
display: flex
|
|
align-items: center
|
|
gap: 0.3vw
|
|
.post-header
|
|
text-decoration: none
|
|
overflow-wrap: break-word
|
|
border: none
|
|
padding-bottom: 1vw
|
|
margin-bottom: 0
|
|
.post.red-border
|
|
border: .1vw solid $accent-main
|
|
.mail
|
|
overflow: hidden
|
|
$border-border-radius(.1vw, $gray-dull, 1vw)
|
|
background-color: $card-color
|
|
display: flex
|
|
$width-height(100%, 5vw)
|
|
box-sizing: border-box
|
|
button
|
|
padding: 1vw
|
|
font-size: 2vw
|
|
color: $white-main
|
|
border: none
|
|
$hover-color($gray-main)
|
|
textarea
|
|
border: none
|
|
padding: .7vw
|
|
$color($white-main, transparent)
|
|
font-size: .8vw
|
|
margin-top: 0
|
|
resize: none
|
|
$width-height(100%, 100%)
|
|
form
|
|
width: 100%
|
|
display: flex
|
|
.footer
|
|
color: $gray-main
|
|
text-align: center
|
|
margin-top: 2vw
|
|
.post-container
|
|
$border-border-radius(.1vw, $gray-dull, 1vw)
|
|
background-color: $card-color
|
|
margin-bottom: 1vw
|
|
padding: 1vw
|
|
.pagination
|
|
$flex-justify-align(center, center)
|
|
margin-top: 2vw
|
|
gap: 5vw
|
|
.page-name
|
|
box-sizing: border-box
|
|
width: 100%
|
|
$border-border-radius(.2vw, $gray-dull, .5vw)
|
|
overflow-wrap: break-word
|
|
$margin(1vw, 0, 1vw, 0)
|
|
padding: 1vw
|
|
font-size: 1.7vw
|
|
.cursor
|
|
display: inline-block
|
|
animation: blink 2s step-end infinite
|
|
|
|
.navbar
|
|
position: relative
|
|
$margin(1vw, $main-offset, 0vw, $main-offset)
|
|
$flex-justify-align(center, center)
|
|
width: $main-width
|
|
gap: 1vw
|
|
.button
|
|
position: relative
|
|
$color($gray-main, $card-color)
|
|
$border-border-radius(.1vw, $gray-dull, .3vw)
|
|
padding: .7vw
|
|
$width-height(auto, auto)
|
|
$hover-color($white-main)
|
|
&::before
|
|
content: ''
|
|
position: absolute
|
|
top: 50%
|
|
$width-height($main-width, .1vw)
|
|
background-color: $gray-dull
|
|
|
|
.logo
|
|
display: flex
|
|
$margin(2vw, $main-offset, 0vw, $main-offset)
|
|
width: $main-width
|
|
gap: 3vw
|
|
|
|
.avatar
|
|
$width-height(6vw, 6vw)
|
|
border-radius: 1vw
|
|
opacity: 60%
|
|
z-index: 99999
|
|
transition: transform .3s ease
|
|
transform: scale(1.2) rotate(30deg)
|
|
&:hover
|
|
transform: rotate(-30deg)
|
|
|
|
.site-name-and-status
|
|
$flex-column()
|
|
.site-name
|
|
font-family: Ubuntu Mono, "Courier New", Courier, monospace
|
|
font-weight: bold
|
|
font-size: 3vw
|
|
|
|
.last-track
|
|
position: relative
|
|
box-sizing: border-box
|
|
background-color: $card-color
|
|
$border-border-radius(.1vw, $accent-main, 1vw)
|
|
$width-height(17vw, 6vw)
|
|
padding: .5vw
|
|
gap: .5vw
|
|
$flex-justify-align(flex-start, center)
|
|
img
|
|
box-sizing: border-box
|
|
$border-border-radius(.1vw, $gray-dull, 1vw)
|
|
$width-height(5vw, 5vw)
|
|
.overlay-image
|
|
background-color: rgba(0, 0, 0, 0.5)
|
|
display: none
|
|
position: absolute
|
|
box-sizing: border-box
|
|
$width-height(5vw, 5vw)
|
|
pointer-events: none
|
|
.descr
|
|
font-size: .8vw
|
|
gap: .1vw
|
|
$flex-column()
|
|
margin-bottom: auto
|
|
max-height: 100%
|
|
overflow-y: scroll
|
|
scrollbar-width: none
|
|
#subdescr
|
|
color: $gray-main |