fix style
parent
614733ef64
commit
a0b133679b
@ -0,0 +1,62 @@
|
||||
section.examples .example-box {
|
||||
background-color: #3268aa;
|
||||
border: 3px solid #88ff9c;
|
||||
height: 3rem;
|
||||
width: 3rem;
|
||||
border-radius: .3rem;
|
||||
margin: .5rem;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
flex: 0 0 auto;
|
||||
}
|
||||
|
||||
section.examples .example-box.active {
|
||||
border: 3px solid #d73f3f;
|
||||
}
|
||||
|
||||
.visual-example {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
position: relative;
|
||||
padding: .5rem;
|
||||
}
|
||||
|
||||
#example1 .active {
|
||||
position: static;
|
||||
top: 1rem;
|
||||
left: 1rem;
|
||||
}
|
||||
|
||||
#example2 .active {
|
||||
position: relative;
|
||||
top: 1rem;
|
||||
left: 1rem;
|
||||
}
|
||||
|
||||
#example3 .active {
|
||||
position: absolute;
|
||||
top: 1rem;
|
||||
left: 1rem;
|
||||
}
|
||||
|
||||
#example4 .active {
|
||||
position: fixed;
|
||||
top: 1rem;
|
||||
left: 1rem;
|
||||
}
|
||||
|
||||
#example5 {
|
||||
overflow: scroll;
|
||||
}
|
||||
|
||||
#example5 .active {
|
||||
position: sticky;
|
||||
left: 1rem;
|
||||
right: 1rem;
|
||||
}
|
||||
|
||||
#example5 .wrapper {
|
||||
display: flex;
|
||||
border: 2px solid #d73f3f;
|
||||
}
|
||||
@ -1,119 +1,143 @@
|
||||
/*--------------Veränderung der Textgröße--------------*/
|
||||
#font-sizePX{
|
||||
#font-sizePX {
|
||||
font-size: 20px;
|
||||
}
|
||||
#font-sizePR{
|
||||
|
||||
#font-sizePR {
|
||||
font-size: 120%;
|
||||
}
|
||||
#font-sizeCM{
|
||||
|
||||
#font-sizeCM {
|
||||
font-size: 1cm;
|
||||
}
|
||||
#font-sizeS{
|
||||
|
||||
#font-sizeS {
|
||||
font-size: smaller;
|
||||
}
|
||||
#font-sizeM{
|
||||
|
||||
#font-sizeM {
|
||||
font-size: medium;
|
||||
}
|
||||
#font-sizeL{
|
||||
|
||||
#font-sizeL {
|
||||
font-size: larger;
|
||||
}
|
||||
|
||||
/*--------------Veränderung der Textart--------------*/
|
||||
#font-familyA{
|
||||
#font-familyA {
|
||||
font-family: Arial;
|
||||
}
|
||||
#font-familyG{
|
||||
|
||||
#font-familyG {
|
||||
font-family: Georgia;
|
||||
}
|
||||
#font-familyLH{
|
||||
|
||||
#font-familyLH {
|
||||
font-family: Lucida Handwriting;
|
||||
}
|
||||
|
||||
/*--------------Schriftfarbe ändern--------------*/
|
||||
#colorW{
|
||||
#colorW {
|
||||
color: red;
|
||||
}
|
||||
#colorZ{
|
||||
|
||||
#colorZ {
|
||||
color: rgb(81, 132, 109);
|
||||
}
|
||||
|
||||
/*--------------Schrift stylen--------------*/
|
||||
#font-styleI{
|
||||
#font-styleI {
|
||||
font-style: italic;
|
||||
}
|
||||
#font-styleO{
|
||||
|
||||
#font-styleO {
|
||||
font-style: oblique;
|
||||
}
|
||||
|
||||
/*--------------Schriftdicke verändern--------------*/
|
||||
#font-weightB{
|
||||
#font-weightB {
|
||||
font-weight: bold;
|
||||
}
|
||||
#font-weightZ{
|
||||
|
||||
#font-weightZ {
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
/*--------------Schrift Variante ändern--------------*/
|
||||
#font-variant{
|
||||
#font-variant {
|
||||
font-variant: small-caps;
|
||||
}
|
||||
|
||||
/*--------------Textausrichtung ändern--------------*/
|
||||
#text-alignL{
|
||||
#text-alignL {
|
||||
text-align: left;
|
||||
}
|
||||
#text-alignR{
|
||||
|
||||
#text-alignR {
|
||||
text-align: right;
|
||||
}
|
||||
#text-alignC{
|
||||
|
||||
#text-alignC {
|
||||
text-align: center;
|
||||
}
|
||||
#text-alignJ{
|
||||
|
||||
#text-alignJ {
|
||||
text-align: justify;
|
||||
}
|
||||
|
||||
/*--------------Textgestaltung--------------*/
|
||||
#text-decorationU{
|
||||
#text-decorationU {
|
||||
text-decoration: underline;
|
||||
}
|
||||
#text-decorationO{
|
||||
|
||||
#text-decorationO {
|
||||
text-decoration: overline;
|
||||
margin: 4px;;
|
||||
}
|
||||
#text-decorationLT{
|
||||
|
||||
#text-decorationLT {
|
||||
text-decoration: line-through;
|
||||
}
|
||||
|
||||
/*--------------Wort- und Zeichenabstände verändern--------------*/
|
||||
#word-spacingMM{
|
||||
#word-spacingMM {
|
||||
word-spacing: 3mm;
|
||||
}
|
||||
#word-spacingPX{
|
||||
|
||||
#word-spacingPX {
|
||||
word-spacing: 10px;
|
||||
}
|
||||
#word-spacingREM{
|
||||
|
||||
#word-spacingREM {
|
||||
word-spacing: 1rem;
|
||||
}
|
||||
|
||||
/*--------------Texte einrücken--------------*/
|
||||
#text-indentMM{
|
||||
#text-indentMM {
|
||||
text-indent: 10mm
|
||||
}
|
||||
#text-indentPX{
|
||||
|
||||
#text-indentPX {
|
||||
text-indent: 20px;
|
||||
}
|
||||
#text-indentREM{
|
||||
|
||||
#text-indentREM {
|
||||
text-indent: 1rem;
|
||||
}
|
||||
|
||||
/*--------------Texte transvormieren--------------*/
|
||||
#text-transformC{
|
||||
#text-transformC {
|
||||
text-transform: capitalize
|
||||
}
|
||||
#text-transformU{
|
||||
|
||||
#text-transformU {
|
||||
text-transform: uppercase
|
||||
}
|
||||
#text-transformL{
|
||||
|
||||
#text-transformL {
|
||||
text-transform: lowercase
|
||||
}
|
||||
#text-transformN{
|
||||
|
||||
#text-transformN {
|
||||
text-transform: none
|
||||
}
|
||||
Loading…
Reference in New Issue