add some styling

This commit is contained in:
Mario 2020-11-16 15:51:44 +01:00
parent 1b0743b0cf
commit 7ffe9ff18b
5 changed files with 32 additions and 64 deletions

View File

@ -5,3 +5,31 @@
position: relative;
padding-bottom: 60px; /* height of your footer + 30px*/
}
.tutorial img{
display: flex;
align-items: center;
max-height: 40vH;
max-width: 100%;
margin: auto;
}
.tutorial blockquote{
background: #f9f9f9;
border-left: 10px solid#4EAF47;
margin: 1.5em 10px;
padding: 0.5em 10px;
quotes: "\201C""\201D""\2018""\2019";
}
blockquote:before {
color:#4EAF47;
content: open-quote;
font-size: 4em;
line-height: 0.1em;
margin-right: 0.25em;
vertical-align: -0.4em;
}
blockquote p {
display: inline;
}

View File

@ -234,7 +234,7 @@ class Toolbox extends React.Component {
<Block type="sensebox_send_to_osem" />
</Category>
<Category id="catSenseBoxOutput_LoRa" name=" LoRa" colour={getColour().sensebox}>
<Category id="catSenseBoxOutput_LoRa_activation" name=" Aktiviereung" colour={getColour().sensebox}>
<Category id="catSenseBoxOutput_LoRa_activation" name=" Aktivierung" colour={getColour().sensebox}>
<Block type="sensebox_lora_initialize_otaa" />
<Block type="sensebox_lora_initialize_abp" />
</Category>

View File

@ -20,7 +20,7 @@ class Instruction extends Component {
return (
<div>
<Typography variant='h4' style={{ marginBottom: '5px' }}>{step.headline}</Typography>
<Typography style={isHardware ? {} : { marginBottom: '5px' }}><ReactMarkdown allowDangerousHtml skipHtml={false}>{step.text}</ReactMarkdown></Typography>
<Typography style={isHardware ? {} : { marginBottom: '5px' }}><ReactMarkdown className={'tutorial'} linkTarget={'_blank'} skipHtml={false}>{step.text}</ReactMarkdown></Typography>
{isHardware ?
<Hardware picture={step.hardware} /> : null}
{areRequirements > 0 ?

File diff suppressed because one or more lines are too long

View File

@ -4,7 +4,7 @@ let tutorials = [
require('./tutorial/Wenn-DannBedingungen.json'),
require('./tutorial/VerwendungVonVariablen.json'),
require('./tutorial/AnzeigeVonMesswertenAufDemDisplay.json'),
require('./tutorial/SendenVonMesswertenueberLoRa.json')
require('./tutorial/SendenVonMesswertenUeberLoRa.json'),
require('./tutorial/MesswerteAnDieOpenSenseMapSenden.json')
]