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--------------*/
|
/*--------------Veränderung der Textgröße--------------*/
|
||||||
#font-sizePX{
|
#font-sizePX {
|
||||||
font-size: 20px;
|
font-size: 20px;
|
||||||
}
|
}
|
||||||
#font-sizePR{
|
|
||||||
|
#font-sizePR {
|
||||||
font-size: 120%;
|
font-size: 120%;
|
||||||
}
|
}
|
||||||
#font-sizeCM{
|
|
||||||
|
#font-sizeCM {
|
||||||
font-size: 1cm;
|
font-size: 1cm;
|
||||||
}
|
}
|
||||||
#font-sizeS{
|
|
||||||
|
#font-sizeS {
|
||||||
font-size: smaller;
|
font-size: smaller;
|
||||||
}
|
}
|
||||||
#font-sizeM{
|
|
||||||
|
#font-sizeM {
|
||||||
font-size: medium;
|
font-size: medium;
|
||||||
}
|
}
|
||||||
#font-sizeL{
|
|
||||||
|
#font-sizeL {
|
||||||
font-size: larger;
|
font-size: larger;
|
||||||
}
|
}
|
||||||
|
|
||||||
/*--------------Veränderung der Textart--------------*/
|
/*--------------Veränderung der Textart--------------*/
|
||||||
#font-familyA{
|
#font-familyA {
|
||||||
font-family: Arial;
|
font-family: Arial;
|
||||||
}
|
}
|
||||||
#font-familyG{
|
|
||||||
|
#font-familyG {
|
||||||
font-family: Georgia;
|
font-family: Georgia;
|
||||||
}
|
}
|
||||||
#font-familyLH{
|
|
||||||
|
#font-familyLH {
|
||||||
font-family: Lucida Handwriting;
|
font-family: Lucida Handwriting;
|
||||||
}
|
}
|
||||||
|
|
||||||
/*--------------Schriftfarbe ändern--------------*/
|
/*--------------Schriftfarbe ändern--------------*/
|
||||||
#colorW{
|
#colorW {
|
||||||
color: red;
|
color: red;
|
||||||
}
|
}
|
||||||
#colorZ{
|
|
||||||
|
#colorZ {
|
||||||
color: rgb(81, 132, 109);
|
color: rgb(81, 132, 109);
|
||||||
}
|
}
|
||||||
|
|
||||||
/*--------------Schrift stylen--------------*/
|
/*--------------Schrift stylen--------------*/
|
||||||
#font-styleI{
|
#font-styleI {
|
||||||
font-style: italic;
|
font-style: italic;
|
||||||
}
|
}
|
||||||
#font-styleO{
|
|
||||||
|
#font-styleO {
|
||||||
font-style: oblique;
|
font-style: oblique;
|
||||||
}
|
}
|
||||||
|
|
||||||
/*--------------Schriftdicke verändern--------------*/
|
/*--------------Schriftdicke verändern--------------*/
|
||||||
#font-weightB{
|
#font-weightB {
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
}
|
}
|
||||||
#font-weightZ{
|
|
||||||
|
#font-weightZ {
|
||||||
font-weight: 700;
|
font-weight: 700;
|
||||||
}
|
}
|
||||||
|
|
||||||
/*--------------Schrift Variante ändern--------------*/
|
/*--------------Schrift Variante ändern--------------*/
|
||||||
#font-variant{
|
#font-variant {
|
||||||
font-variant: small-caps;
|
font-variant: small-caps;
|
||||||
}
|
}
|
||||||
|
|
||||||
/*--------------Textausrichtung ändern--------------*/
|
/*--------------Textausrichtung ändern--------------*/
|
||||||
#text-alignL{
|
#text-alignL {
|
||||||
text-align: left;
|
text-align: left;
|
||||||
}
|
}
|
||||||
#text-alignR{
|
|
||||||
|
#text-alignR {
|
||||||
text-align: right;
|
text-align: right;
|
||||||
}
|
}
|
||||||
#text-alignC{
|
|
||||||
|
#text-alignC {
|
||||||
text-align: center;
|
text-align: center;
|
||||||
}
|
}
|
||||||
#text-alignJ{
|
|
||||||
|
#text-alignJ {
|
||||||
text-align: justify;
|
text-align: justify;
|
||||||
}
|
}
|
||||||
|
|
||||||
/*--------------Textgestaltung--------------*/
|
/*--------------Textgestaltung--------------*/
|
||||||
#text-decorationU{
|
#text-decorationU {
|
||||||
text-decoration: underline;
|
text-decoration: underline;
|
||||||
}
|
}
|
||||||
#text-decorationO{
|
|
||||||
|
#text-decorationO {
|
||||||
text-decoration: overline;
|
text-decoration: overline;
|
||||||
margin: 4px;;
|
margin: 4px;;
|
||||||
}
|
}
|
||||||
#text-decorationLT{
|
|
||||||
|
#text-decorationLT {
|
||||||
text-decoration: line-through;
|
text-decoration: line-through;
|
||||||
}
|
}
|
||||||
|
|
||||||
/*--------------Wort- und Zeichenabstände verändern--------------*/
|
/*--------------Wort- und Zeichenabstände verändern--------------*/
|
||||||
#word-spacingMM{
|
#word-spacingMM {
|
||||||
word-spacing: 3mm;
|
word-spacing: 3mm;
|
||||||
}
|
}
|
||||||
#word-spacingPX{
|
|
||||||
|
#word-spacingPX {
|
||||||
word-spacing: 10px;
|
word-spacing: 10px;
|
||||||
}
|
}
|
||||||
#word-spacingREM{
|
|
||||||
|
#word-spacingREM {
|
||||||
word-spacing: 1rem;
|
word-spacing: 1rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
/*--------------Texte einrücken--------------*/
|
/*--------------Texte einrücken--------------*/
|
||||||
#text-indentMM{
|
#text-indentMM {
|
||||||
text-indent: 10mm
|
text-indent: 10mm
|
||||||
}
|
}
|
||||||
#text-indentPX{
|
|
||||||
|
#text-indentPX {
|
||||||
text-indent: 20px;
|
text-indent: 20px;
|
||||||
}
|
}
|
||||||
#text-indentREM{
|
|
||||||
|
#text-indentREM {
|
||||||
text-indent: 1rem;
|
text-indent: 1rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
/*--------------Texte transvormieren--------------*/
|
/*--------------Texte transvormieren--------------*/
|
||||||
#text-transformC{
|
#text-transformC {
|
||||||
text-transform: capitalize
|
text-transform: capitalize
|
||||||
}
|
}
|
||||||
#text-transformU{
|
|
||||||
|
#text-transformU {
|
||||||
text-transform: uppercase
|
text-transform: uppercase
|
||||||
}
|
}
|
||||||
#text-transformL{
|
|
||||||
|
#text-transformL {
|
||||||
text-transform: lowercase
|
text-transform: lowercase
|
||||||
}
|
}
|
||||||
#text-transformN{
|
|
||||||
|
#text-transformN {
|
||||||
text-transform: none
|
text-transform: none
|
||||||
}
|
}
|
||||||
Loading…
Reference in New Issue