diff --git a/resources/css/main.css b/resources/css/main.css index 0b3f1c4..213f329 100644 --- a/resources/css/main.css +++ b/resources/css/main.css @@ -54,6 +54,27 @@ input[type=color] { background-color: #787878; } +table { + width: 100%; +} + +td, th { + border: 1px solid white; + padding: 8px; +} + +th { + text-align: left; + background-color: #4CAF50; +} + +tr:nth-child(even) { + background-color: #00000033; +} +tr:hover { + background-color: rgba(255, 255, 255, 0.281); +} + .center { background-color: #505050; margin: auto; @@ -80,23 +101,32 @@ input[type=color] { text-align: left; } -table { - width: 100%; +.textboxGrid { + display: grid; + justify-content: space-evenly; + align-content: space-evenly; + grid-template-columns: repeat(3, 1fr); + grid-column-gap: auto; + grid-row-gap: 20px; } - -td, th { - border: 1px solid white; - padding: 8px; +.textboxGrid * { + size: 100%; + padding: 40px 80px; + background-color: #787878; } - -th { - text-align: left; - background-color: #4CAF50; +.textboxGrid .linkElement { + border: 1px solid black; } - -tr:nth-child(even) { - background-color: #00000033; +.textboxGrid .linkElement:hover { + background-color: #505050; + cursor: pointer; } -tr:hover { - background-color: rgba(255, 255, 255, 0.281); +.textboxGrid .linkElement a:hover { + text-decoration: underline; + color: #66D9EF; +} +.textboxGrid .linkElement * { + margin: 0px; + padding: 0px; + background-color: transparent; } diff --git a/resources/css/scss/_classes.scss b/resources/css/scss/_classes.scss new file mode 100644 index 0000000..56e67ac --- /dev/null +++ b/resources/css/scss/_classes.scss @@ -0,0 +1,67 @@ +.center { + background-color: $grey3; + margin: auto; + margin-bottom: 10%; + width: 70%; + padding: 5%; + height: max-content; + border-radius: $radius; + + * { + margin: auto; + display: block; + } +} + +.inline { + margin: $standardMargin; + * {display: inline-block;} +} + +.leftalign * { + margin: $standardMargin; + text-align: left; +} + +.textboxGrid { + + display: grid; + justify-content: space-evenly; + align-content: space-evenly; + + grid: { + template-columns: repeat(3, 1fr); + + column-gap: auto; + row-gap: 20px; + } + + * { + + size: 100%; + padding: 40px 80px; + background-color: $grey4; + + } + + .linkElement { + border: 1px solid black; + + &:hover { + background-color: $grey3; + cursor: pointer; + } + + a:hover { + text-decoration: underline; + color: $linkStill; + } + + * { + margin: 0px; + padding: 0px; + background-color: transparent; + } + + } +} \ No newline at end of file diff --git a/resources/css/scss/_colors.scss b/resources/css/scss/_colors.scss index 6409a4a..0dd939a 100644 --- a/resources/css/scss/_colors.scss +++ b/resources/css/scss/_colors.scss @@ -10,6 +10,8 @@ $grey3: rgb(80, 80, 80); $grey4: rgb(120, 120, 120); $border-color: white; +$linkStill: #66D9EF; +$linkHover: #A6E22E;; $radius: 15px; $standardMargin: 15px; \ No newline at end of file diff --git a/resources/css/scss/main.scss b/resources/css/scss/main.scss index 142365d..244350f 100644 --- a/resources/css/scss/main.scss +++ b/resources/css/scss/main.scss @@ -48,8 +48,8 @@ h2 { } a { - color: #66D9EF; - &:hover { color: #A6E22E; } + color: $linkStill; + &:hover {color: $linkHover;} } input[type=color] { @@ -57,31 +57,6 @@ input[type=color] { height: 2em; background-color: $grey4; } - -.center { - background-color: $grey3; - margin: auto; - margin-bottom: 10%; - width: 70%; - padding: 5%; - height: max-content; - border-radius: $radius; - - * { - margin: auto; - display: block; - } -} - -.inline { - margin: $standardMargin; - * {display: inline-block;} -} - -.leftalign * { - margin: $standardMargin; - text-align: left; -} table { width: 100%; @@ -100,4 +75,6 @@ th { tr { &:nth-child(even) { background-color: #00000033;} &:hover { background-color: rgba(255, 255, 255, 0.281);} -} \ No newline at end of file +} + +@import "classes"; \ No newline at end of file