Skip to content
Snippets Groups Projects
Verified Commit 4603e780 authored by Louis-Olivier Brassard's avatar Louis-Olivier Brassard
Browse files

Credits: fix layout (#31) make the thing scrollable

parent 67e9c797
No related branches found
No related tags found
No related merge requests found
Hide whitespace changes
Inline Side-by-side
Showing
with 7 additions and 1031 deletions
src/components/CreditsComponent.vue
+ 7
− 4
View file @ 4603e780
......@@ -102,17 +102,20 @@ $raleway: 'Raileway', Helvetica, Arial, sans-serif
//transform: translate3d(0, -50%, 0)
#credits
width: 100%
height: 100%
display: flex
flex-direction: column
justify-content: flex-end
position: absolute;
overflow-x: hidden
top: 0;
bottom: 0;
left: 0;
right: 0;
overflow-y: scroll;
.desc-container
color: #2c2c2c
margin-top: 20vh
padding: 40px 20px
max-height: 66vh
overflow: scroll
......
src/components/partials/epigramApi/Characters.vue deleted 100644 → 0
+ 0
− 141
View file @ 67e9c797
<template>
<div class="characters"
v-if="data.keywords.length > 0"
>
<div v-if="data.notes.length == 0" style="margin-top: 230px"></div>
<p @click="onCharactersDropdownClick">
Les personnages
<span class="glyphicon glyphicon-chevron-right"></span>
<span class="border-bottom"></span>
</p>
<div class="dropdown-drop">
<ul>
<li v-for="character in data.keywords">
<a
@click="onCharactersListClick"
v-bind:id="'character-' + character.keywords_translations[0].title + '-list'"
v-bind:data-click="'character-' + character.keywords_translations[0].title"
href="#"
>
<span class="dash"></span>{{ character.keywords_translations[0].title | cglobal.apitalize }}
</a>
</li>
</ul>
</div>
<div class="dropdown-text-container">
<span class="glyphicon glyphicon-chevron-left"></span>
<div class="dropdown-text-wrapper">
<div v-for="character in data.keywords"
v-bind:id="'character-' + character.keywords_translations[0].title"
class="dropdown-text"
>
<div class="dropdown-title">
<h4>{{ character.keywords_translations[0].title | cglobal.apitalize }}</h4>
</div>
<div class="dropdown-desc">
<q v-html="character.keywords_translations[0].description"></q>
</div>
</div>
</div>
<span class="glyphicon glyphicon-chevron-right"></span>
</div>
</div>
</div>
</template>
<script>
import $ from 'jquery'
export default {
propsData: {
data: Object
},
methods: {
onCharactersDropdownClick: function () {
var charactersContainer = $('.characters')
var charactersDropdown = charactersContainer.children('.dropdown-drop')
var charactersTextContainer = charactersContainer.children('.dropdown-text-container')
var charactersText = charactersTextContainer.find('.dropdown-text')
var charactersDropdownArrow = charactersContainer.children('p').children('.glyphicon')
var charactersTextArrows = charactersTextContainer.children('.glyphicon')
if (!charactersContainer.hasClass('droped')) {
charactersContainer.addClass('droped')
charactersDropdownArrow.addClass('glyphicon-chevron-down').removeClass('glyphicon-chevron-right')
charactersDropdown.addClass('visible')
charactersTextContainer.addClass('visible')
} else {
charactersContainer.removeClass('droped')
charactersDropdownArrow.addClass('glyphicon-chevron-right').removeClass('glyphicon-chevron-down')
charactersDropdown.removeClass('visible')
charactersTextContainer.removeClass('visible').fadeOut('500')
charactersTextArrows.fadeOut('500')
charactersText.removeClass('visible').fadeOut('500')
}
},
onCharactersListClick: function (e) {
e.preventDefault()
var targetId = e.target.id
var thisListClicked = $('.dropdown-drop a#' + targetId)
var thisListClickedData = e.target.dataset.click
var thisListClickedParent = thisListClicked.parents('.dropdown-drop')
var thisListClickedTextContainer = thisListClickedParent.siblings('.dropdown-text-container')
var thisListClickedDropWrapper = thisListClickedTextContainer.children('.dropdown-text-wrapper')
var thisListClickedDropText = thisListClickedDropWrapper.children('.dropdown-text')
var thisListClickedDropTextLength = thisListClickedDropText.length
var thisListClickedArrowLeft = thisListClickedTextContainer.children('.glyphicon-chevron-left')
var thisListClickedArrowRight = thisListClickedTextContainer.children('.glyphicon-chevron-right')
thisListClickedTextContainer.css('display', 'flex')
$('#' + thisListClickedData).addClass('visible').fadeIn('500')
var thisListClickedDropTextVisibleIndex = $('#' + thisListClickedData).index()
thisListClickedArrowLeft.show()
thisListClickedArrowRight.show()
if (thisListClickedDropTextVisibleIndex === 0) {
thisListClickedArrowLeft.hide()
}
if (thisListClickedDropTextVisibleIndex === thisListClickedDropTextLength - 1) {
thisListClickedArrowRight.hide()
}
}
}
}
</script>
<style lang="sass" scoped>
$hover: .7s all ease-out
.characters
margin-top: 150px
.dropdown-drop
ul
list-style: none
padding: 0
li
a
font-size: 14px
opacity: 0.5
transition: $hover
color: #2c2c2c
.dash
width: 0
height: 1px
margin-right: 0
transition: $hover
&:hover,
&:focus
opacity: 1
text-decoration: none
.dash
width: 13px
margin-right: 5px
.dropdown-text-container
opacity: 0
&.visible
opacity: 1
</style>
src/components/partials/epigramApi/GreekText.vue deleted 100644 → 0
+ 0
− 171
View file @ 67e9c797
<template>
<div class="greek-text">
<div class="greek-translation dropdown">
<p @click="onGreekDropdownClick">
Texte source grec
<span class="glyphicon glyphicon-chevron-right"></span>
<span class="border-bottom"></span>
</p>
<div class="dropdown-drop">
<div class="dropdown-content">
<!--
<div
@click="onGreekMuteClick"
v-if="epigram.texts[0].text_translations[0].sound_url"
class="mute greek-mute"
>
<span class="glyphicon glyphicon-volume-up"></span>
-->
<p v-html="texteGrec"></p>
</div>
</div>
</div>
</div>
</div>
</template>
<script>
import $ from 'jquery'
export default {
props: {
epigram: Object
},
created () {
var self = this
self.$nextTick(function () {
console.log('[GreekText.vue] self.epigram:', self.epigram)
// self.$set(self, 'epigram', this.epigram)
})
},
computed: {
texteGrec () {
var self = this
return self.epigram.versions[0].text_translated
}
},
methods: {
onGreekDropdownClick: function () {
var greekContainer = $('.greek-translation')
var greekDropdown = greekContainer.children('.dropdown-drop')
var greekDropdownArrow = greekContainer.children('p').children('.glyphicon')
if (!greekContainer.hasClass('droped')) {
greekContainer.addClass('droped')
greekDropdownArrow.addClass('glyphicon-chevron-down').removeClass('glyphicon-chevron-right')
greekDropdown.addClass('visible')
} else {
greekContainer.removeClass('droped')
greekDropdownArrow.addClass('glyphicon-chevron-right').removeClass('glyphicon-chevron-down')
greekContainer.children('.dropdown-drop').removeClass('visible')
}
},
onGreekMuteClick: function () {
var controlBtn, playBtn, frenchSound, greekSound, frenchMute
var greekMute = $('.greek-mute .glyphicon')
var audioLength = $('audio').length - 1
controlBtn = $('.control')
playBtn = controlBtn.children('.play-button')
frenchMute = $('.french-mute .glyphicon')
greekSound = $('audio')[audioLength]
frenchMute.removeClass('glyphicon-volume-off').addClass('glyphicon-volume-up')
if (audioLength !== 0) {
frenchSound = $('audio')[0]
if (frenchSound.currentTime > 0) {
frenchSound.pause()
frenchSound.currentTime = 0
frenchSound.volume = 1
}
}
if (greekSound.paused) {
greekSound.play()
controlBtn
.removeClass('french-sound-playing')
.addClass('greek-sound-playing')
playBtn.removeClass('paused')
} else {
if (greekSound.volume === 1) {
greekSound.volume = 0
greekMute.removeClass('glyphicon-volume-up').addClass('glyphicon-volume-off')
} else {
greekSound.volume = 1
greekMute.removeClass('glyphicon-volume-off').addClass('glyphicon-volume-up')
}
}
}
}
}
</script>
<style lang="sass" scoped>
.greek-text
.greek-translation
display: inline-block
>p
cursor: pointer
display: inline-block
font-style: italic
font-size: 18px
color: #2c2c2c
margin: 0
letter-spacing: 0.02em
span.glyphicon
font-size: 10px
margin-left: 14px
.dropdown-drop
width: 350px
margin-left: -35px
.mute
margin-top: 8px
.dropdown-content
p
font-size: 14px
color: #2c2c2c
line-height: 1.5em
padding-top: 20px
padding-bottom: 10px
margin: 0
display: inline-block
word-wrap: break-word
width: 89%
height: 228px
overflow-y: auto
scrollbar-face-color: #2c2c2c
scrollbar-track-color: #fff
scrollbar-arrow-color: #fff
&::first-letter
font-size: 36px
&:hover
&::-webkit-scrollbar-thumb,
&::-webkit-scrollbar-track
visibility: visible
&::-webkit-scrollbar
background: #fff
width: 3px
&::-webkit-scrollbar-button
display: none
&::-webkit-scrollbar-thumb
background: rgba(44, 44, 44, .3)
visibility: hidden
&:hover
background: rgba(44, 44, 44, .8)
&:active
background: rgba(44, 44, 44, 1)
&::-webkit-scrollbar-track
border-bottom: 1px solid #2c2c2c
border-top: 1px solid #2c2c2c
visibility: hidden
</style>
src/components/partials/epigramApi/Notes.vue deleted 100644 → 0
+ 0
− 93
View file @ 67e9c797
<template>
<div class="notes-partial">
<div
v-if="data.notes.length > 0"
class="notes dropdown"
>
<p @click="onNotesDropdownClick">
Les notes
<span class="glyphicon glyphicon-chevron-right"></span>
<span class="border-bottom"></span>
</p>
<div class="dropdown-drop">
<div class="dropdown-text-container">
<span class="glyphicon glyphicon-chevron-left"></span>
<div class="dropdown-text-wrapper">
<div
v-for="note in data.notes"
v-bind:id="'note' + note.note_translations[0].id"
class="dropdown-text"
>
<div class="dropdown-desc">
<q v-html="note.note_translations[0].text"></q>
</div>
</div>
</div>
<span class="glyphicon glyphicon-chevron-right"></span>
</div>
</div>
</div>
</div>
</template>
<script>
import $ from 'jquery'
export default {
propsData: {
data: Object
},
methods: {
onNotesDropdownClick: function () {
var notesContainer = $('.notes')
var notesDropdown = notesContainer.children('.dropdown-drop')
var notesDropdownText = notesDropdown.find('.dropdown-text')
var notesDropdownArrow = notesContainer.children('p').children('.glyphicon')
var notesTextArrows = notesDropdown.find('.glyphicon')
var notesTextArrowLeft = notesDropdown.find('.glyphicon-chevron-left')
var notesTextArrowRight = notesDropdown.find('.glyphicon-chevron-right')
if (!notesContainer.hasClass('droped')) {
notesContainer.addClass('droped')
notesDropdownArrow.addClass('glyphicon-chevron-down').removeClass('glyphicon-chevron-right')
notesDropdown.addClass('visible')
notesDropdownText.first().addClass('visible').fadeIn('500')
notesTextArrowRight.show()
notesTextArrowLeft.hide()
if (notesDropdownText.length === 1) {
notesTextArrowRight.hide()
}
} else {
notesContainer.removeClass('droped')
notesDropdownArrow.addClass('glyphicon-chevron-right').removeClass('glyphicon-chevron-down')
notesDropdown.removeClass('visible')
notesDropdownText.removeClass('visible').fadeOut('500')
notesTextArrows.fadeOut('500')
}
}
}
}
</script>
<style lang="sass" scoped>
.notes-partial
.notes
margin-top: 60px
.dropdown-drop
width: 100%
padding-left: 20px;
margin-left: -20px;
.dropdown-text-container
display: flex
background: none
.dropdown-text-wrapper
width: 170px
.dropdown-text
.dropdown-desc
q
&:before
top: -10px
</style>
src/components/partials/epigramApi/Pagination.vue deleted 100644 → 0
+ 0
− 126
View file @ 67e9c797
<template>
<div class="col-md-1 col-md-offset-10 pagination-partial">
<div class="index">
<p class="total">
{{ length | numberize }}
</p>
<span class="separator"></span>
<p class="current">
{{ epigram | numberize }}
</p>
</div>
<div class="arrows">
<span>
<router-link :to="{ name: 'epigram', params: { id: epigram - 1 }}"
@click="onPaginationClick"
v-show="!(epigram == 1)">
<span class="glyphicon glyphicon-chevron-left"></span>
</router-link>
</span>
<span class="separator"></span>
<span>
<router-link :to="{ name: 'epigram', params: { id: epigram + 1 }}"
@click="onPaginationClick"
v-show="!(epigram == length)">
<span class="glyphicon glyphicon-chevron-right"></span>
</router-link>
</span>
</div>
</div>
</template>
<script>
import $ from 'jquery'
export default {
props: {
data: Object,
epigram: Number,
length: Number
},
methods: {
onPaginationClick: function () {
$('.notes.dropdown > p .glyphicon').addClass('glyphicon-chevron-right').removeClass('glyphicon-chevron-down')
$('.notes').removeClass('droped')
$('.notes .dropdown-drop').removeClass('visible')
}
}
}
</script>
<style lang="sass" scoped>
$hover: .5s all ease-out
.index
position: relative
p
position: absolute
color: #2c2c2c
&.total
font-weight: 700
font-size: 16px
right: 0
top: 0
&.current
font-size: 48px
right: 23px
top: 10px
span.separator
position: absolute
right: 5px
top: 18px
width: 30px
height: 1px
transform: rotate(45deg)
background: #2c2c2c
.arrows
width: 55px
float: right
margin-top: 90px
display: flex
justify-content: space-between
align-items: center
&:after
clear: both
.separator
height: 10px
width: 1px
background: #2c2c2c
display: inline-block
opacity: 0.15
>span
a
font-size: 10px
color: #2c2c2c
opacity: 0.3
transition: $hover
display: block
&:hover
text-decoration: none
opacity: 1
&:first-child,
&:last-child
flex-grow: 2
&:first-child
a
&:hover
transform: translateX(-5px)
&:last-child
text-align: right
a
&:hover
transform: translateX(5px)
</style>
src/components/partials/epigramApi/Player.vue deleted 100644 → 0
+ 0
− 231
View file @ 67e9c797
<template>
<div class="player">
<div
v-if="data.texts[0].text_translations[0].sound_url"
class="player-container"
>
<div
@click="onControlClick"
class="control"
>
<span class="no-play-button-border"></span>
<a
@click="ePreventDefault"
class="play-button paused"
href="#"
>
<div class="left"></div>
<div class="right"></div>
<div class="triangle-1"></div>
<div class="triangle-2"></div>
</a>
</div>
<div class="progressbar">
<span class="progress"></span>
</div>
</div>
<div
v-if="data.sounds"
class="sound"
>
<audio
v-if="data.texts[0].text_translations[0].sound_url"
@timeupdate="onAudioTimeUpdate"
@ended="onAudioEnded"
class="greek-sound"
>
<source
:src="data.texts[0].text_translations[0].sound_url"
type="audio/mpeg"
>
</audio>
</div>
</div>
</template>
<script>
import $ from 'jquery'
export default {
propsData: {
data: Object
},
methods: {
onControlClick: function () {
var playBtn, frenchSound, greekSound
var controlBtn = $('.control')
playBtn = controlBtn.children('.play-button')
if ($('audio').length !== 1) {
frenchSound = $('audio')[0]
}
greekSound = $('audio')[$('audio').length - 1]
if (controlBtn.hasClass('french-sound-playing')) {
if (!frenchSound.paused) {
frenchSound.pause()
playBtn.addClass('paused')
$('.french-mute span').removeClass('glyphicon-volume-off').addClass('glyphicon-volume-up')
frenchSound.volume = 1
} else {
frenchSound.play()
playBtn.removeClass('paused')
}
} else if (controlBtn.hasClass('greek-sound-playing')) {
if (!greekSound.paused) {
greekSound.pause()
playBtn.addClass('paused')
$('.greek-mute span').removeClass('glyphicon-volume-off').addClass('glyphicon-volume-up')
greekSound.volume = 1
} else {
greekSound.play()
playBtn.removeClass('paused')
}
} else {
$('audio')[0].play()
playBtn.removeClass('paused')
if ($('audio').length === 1) {
controlBtn.addClass('greek-sound-playing')
} else {
controlBtn.addClass('french-sound-playing')
}
}
},
onAudioTimeUpdate: function () {
var currentTime, duration, frenchSound, greekSound, progressBar, controlBtn
controlBtn = $('.control')
if ($('audio').length !== 1) {
frenchSound = $('audio')[0]
}
greekSound = $('audio')[$('audio').length - 1]
progressBar = $('.progress')
if (controlBtn.hasClass('french-sound-playing')) {
currentTime = frenchSound.currentTime
duration = frenchSound.duration
} else {
currentTime = greekSound.currentTime
duration = greekSound.duration
}
var percent = currentTime / duration * 100
progressBar.css('height', percent + '%')
},
onAudioEnded: function () {
var controlBtn, playBtn, frenchSound, greekSound, muteBtn, progressBar
controlBtn = $('.control')
playBtn = controlBtn.children('.play-button')
muteBtn = $('.mute span')
if ($('audio').length !== 1) {
frenchSound = $('audio')[0]
frenchSound.volume = 1
}
greekSound = $('audio')[$('audio').length - 1]
progressBar = $('.progress')
progressBar.css('height', '0')
controlBtn.removeClass('french-sound-playing').removeClass('greek-sound-playing')
playBtn.addClass('paused')
muteBtn.removeClass('glyphicon-volume-off').addClass('glyphicon-volume-up')
greekSound.volume = 1
},
ePreventDefault: function (e) {
e.preventDefault()
}
}
}
</script>
<style lang="sass" scoped>
$hover: .5s all ease-out
.player-container
width: 45px
text-align: center
margin-right: 50px
.control
cursor: pointer
width: 100%
height: 45px
border-radius: 50%
display: flex
border: 1px solid #2c2c2c
justify-content: center
align-items: center
position: relative
.no-play-button-border
position: absolute
background: transparent
width: 11px
height: 13px
top: 50%
left: 50%
transform: translate3d(-50%, -50%, 0)
border-bottom: 2px solid #fff
border-top: 2px solid #fff
z-index: 2
.play-button
height: 10px
width: 10px
display: inline-block
overflow: hidden
position: relative
.left,
.right
height: 10px
background: #2c2c2c
transition: all 0.25s ease
width: 3px
.left
float: left
overflow: hidden
.right
float: right
.triangle-1
transform: translate(0, -100%)
.triangle-2
transform: translate(0, 100%)
.triangle-1,
.triangle-2
position: absolute
top: 0
right: 0
background: transparent
width: 0
height: 0
border-right: 4px solid #fff
border-top: 5px solid #2c2c2c
border-bottom: 5px solid #2c2c2c
transition: transform 0.25s ease
&.paused
.left,
.right
width: 50%
.triangle-1,
.triangle-2
border-right: 10px solid #fff
.triangle-1
transform: translate(0, -50%)
.triangle-2
transform: translate(0, 50%)
.progressbar
height: 300px
width: 1px
display: inline-block
background: rgba(44, 44, 44, 0.2)
.progress
display: inline-block
width: 100%
height: 0
background: #2c2c2c
</style>
src/components/partials/epigramApi/Translation.vue deleted 100644 → 0
+ 0
− 265
View file @ 67e9c797
<template>
<div class="translation">
<div
@click="onFrenchMuteClick"
v-if="epigram.sounds"
class="mute french-mute"
>
<span class="glyphicon glyphicon-volume-up"></span>
</div>
<div class="text-container">
<div class="text-theme"
v-show="theme">
<h2>
<span class="bg"></span>
{{ theme }}
</h2>
</div>
<div class="text-title">
<h3>{{ epigram.title }}</h3>
<div
v-if="epigram.versions"
class="text-lang"
>
<select v-model="selectedEpigram">
<option v-for="version in epigram.versions.options"
v-bind:value="version.id_entity - 1"
>
{{ version.text_translated }}
</option>
</select>
</div>
</div>
<div class="text-content">
<p v-if="epigram.versions"
v-html="epigramTranslated"></p>
</div>
<div class="text-author" v-if="epigram.authors">
<span class="dash"></span>
<p v-for="(author, index) in epigram.authors">
<span v-show="index !== 0">/</span>
{{ author.name ? author.name : '(Auteur)' }}
</p>
</div>
</div>
</div>
</template>
<script>
import $ from 'jquery'
export default {
props: {
epigram: Object,
authors: Array,
languages: Array,
selectedEpigram: Object
},
computed: {
epigramTranslated: function () {
var self = this
var prefIndex = 0
// determine which version is our favourite
prefIndex = self.getPrefVersion()
return self.epigram.versions[prefIndex].text_translated
}
},
created () {
var self = this
self.$nextTick(function () {
console.log('[Translation.vue] this.epigram', this.epigram)
self.getLanguages()
})
},
methods: {
getLanguages: function () {
var self = this
self.$http.get(global.api + 'languages')
.then(function (response) {
var languages = JSON.parse(response.bodyText)
self.$set(self, 'languages', languages)
console.log('self.langs -- ', self.languages)
// self.getPrefVersion()
})
},
getPrefVersion: function (prefFamily, prefName) {
// Get the closest version based on the lang preference
// Currently, hard-coded preference is Français Moderne
// Falls back to other versions of the same family
// Then falls back to other langs if non available
var self = this
var prefIndex = 0 // defauls to first position in array
var preferredFamily = prefFamily || 'Français'
var preferredName = prefName || 'moderne'
if (!self.languages) {
// ugh, we can't do much without the languages loaded...
return prefIndex
}
self.languages.each(function (language, index) {
if (language.family === preferredFamily) {
// language family match (general)
prefIndex = index
// bonus: language name match (specific in a language family)
if (language.name === preferredName) {
prefIndex = index
}
}
})
return prefIndex
},
onFrenchMuteClick: function () {
var controlBtn, playBtn, frenchSound, greekSound, greekMute
var frenchMute = $('.french-mute .glyphicon')
controlBtn = $('.control')
playBtn = controlBtn.children('.play-button')
frenchSound = $('audio')[0]
greekSound = $('audio')[1]
greekMute = $('.greek-mute .glyphicon')
greekMute.removeClass('glyphicon-volume-off').addClass('glyphicon-volume-up')
if (greekSound.currentTime > 0) {
greekSound.pause()
greekSound.currentTime = 0
greekSound.volume = 1
}
if (frenchSound.paused) {
frenchSound.play()
controlBtn
.removeClass('greek-sound-playing')
.addClass('french-sound-playing')
playBtn.removeClass('paused')
} else {
if (frenchSound.volume === 1) {
frenchSound.volume = 0
frenchMute.removeClass('glyphicon-volume-up').addClass('glyphicon-volume-off')
} else {
frenchSound.volume = 1
frenchMute.removeClass('glyphicon-volume-off').addClass('glyphicon-volume-up')
}
}
}
}
}
</script>
<style lang="sass" scoped>
$raleway: 'Raleway', Helvetica, Arial, sans-serif
.translation
.text-container
display: inline-block
width: 86%
.text-theme,
.text-title
text-align: center
h2,
h3,
select
font-family: $raleway
font-weight: 600
color: #5e5e5e
.text-theme
h2
font-size: 14px
position: relative
display: inline-block
span.bg
left: -10px
.text-title
position: relative
h3
font-size: 12px
.text-lang
background: url('/assets/img/select-arrow.png') no-repeat right
width: 34px
overflow: hidden
position: absolute
top: 0
right: 0
margin-top: -5px
select
font-size: 10px
text-transform: uppercase
border: none
color: #2c2c2c
width: 55px
background: transparent
outline: none
.text-content
width: 300px
height: 300px
overflow-y: auto
margin: 0 auto
scrollbar-face-color: #2c2c2c
scrollbar-track-color: #fff
scrollbar-arrow-color: #fff
&:hover
&::-webkit-scrollbar-thumb,
&::-webkit-scrollbar-track
visibility: visible
&::-webkit-scrollbar
background: #fff
width: 3px
&::-webkit-scrollbar-button
display: none
&::-webkit-scrollbar-thumb
background: rgba(44, 44, 44, .3)
visibility: hidden
&:hover
background: rgba(44, 44, 44, .8)
&:active
background: rgba(44, 44, 44, 1)
&::-webkit-scrollbar-track
border-bottom: 1px solid #2c2c2c
border-top: 1px solid #2c2c2c
visibility: hidden
p
font-size: 14px
color: #2c2c2c
line-height: 1.5em
padding: 20px 0
&::first-letter
font-size: 36px
.text-author
margin-top: 20px
.dash
width: 10px
height: 1px
margin-right: 10px
p
display: inline-block
margin: 0
font-style: italic
font-size: 14px
color: #2c2c2c
font-family: "Times New Roman", sans-serif
</style>
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment