icons styling in seperat file

[people/shoehn/ipfire.org.git] / static / scss / _fonts.scss

diff --git a/static/scss/_fonts.scss b/static/scss/_fonts.scss
new file mode 100644 (file)
index 0000000..c6826c5
--- /dev/null
+++ b/static/scss/_fonts.scss
@@ -0,0 +1,162 @@
+body {
+       -webkit-font-smoothing: antialiased;
+       font-size: 16px;
+}
+
+h1 {
+       line-height: 3rem;
+}
+
+h2 {
+       line-height: 2.75rem;
+}
+
+h3 {
+       font-size: 20px;
+       line-height: 28px;
+       @include media-breakpoint-up(md) {
+               font-size: 24px;
+               line-height: 32px;
+               font-weight: 300;
+               margin-bottom: 0;
+       }
+       &.headline {
+               text-align: center;
+               font-size: 32px;
+               line-height: 44px;
+               color: $blue-grey-900;
+               @include media-breakpoint-up(sm) {
+                       font-size: 36px;
+                       line-height: 48px;
+               }
+       }
+}
+
+h4 {
+       font-weight: 500;
+       font-size: 16px;
+       line-height: 24px;
+       @include media-breakpoint-up(sm) {
+               font-size: 20px;
+               line-height: 28px;
+       }
+       &.secondHeadline {
+               font-size: 24px;
+               line-height: 32px;
+               text-align: left;
+               margin-top: 24px;
+       }
+}
+
+h5,
+.h5 {
+       font-size: 16px;
+       line-height: 24px;
+       @include media-breakpoint-up(md) {
+               font-size: 24px;
+               line-height: 32px;
+       }
+       &.subheadline {
+               text-align: center;
+               font-size: 16px;
+               line-height: 24px;
+               color: $blue-grey-600;
+       }
+}
+
+p {
+       font-size: 16px;
+       line-height: 24px;
+       &.lead {
+               font-size: inherit;
+               line-height: inherit;
+               @include media-breakpoint-up(md) {
+                       font-size: 24px;
+                       line-height: 32px;
+               }
+       }
+       &.copy {
+               margin-top: 16px;
+               @include media-breakpoint-up(sm) {
+                       margin-top: 24px;
+               }
+       }
+}
+
+.display-1 {
+       font-size: 120px;
+       line-height: 144px;
+}
+
+.display-2 {
+       font-size: 32px;
+       line-height: 44px;
+       margin-bottom: 40px;
+       @include media-breakpoint-up(md) {
+               font-size: 40px;
+               line-height: 56px;
+               margin-bottom: 3rem;
+       }
+}
+
+.display-3 {
+       font-size: 24px;
+       line-height: 32px;
+       @include media-breakpoint-up(md) {
+               font-size: 32px;
+               line-height: 44px;
+       }
+}
+
+.display-4 {
+       font-size: 14px;
+       line-height: 20px;
+       font-weight: 400;
+       @include media-breakpoint-up(sm) {
+               font-size: 24px;
+               line-height: 32px;;
+       }
+}
+
+.display-5 {
+       font-size: 20px;
+       line-height: 28px;
+}
+
+small,
+.small {
+       font-size: 14px;
+       line-height: 20px;
+       @include media-breakpoint-up(md) {
+               font-size: 16px;
+               line-height: 24px;
+       }
+}
+
+.truncate {
+  width: 100%;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+
+// fireInfo
+.fireinfo_cat {
+       font-size: 14px;
+       line-height: 20px;
+}
+
+h5.fireinfo {
+       font-size: 16px;
+       line-height: 28px;
+       font-weight: 500;
+       @include media-breakpoint-up(md) {
+               font-size: 20px;
+       }
+}
+
+.fireinfo_per {
+       font-size: 20px;
+       line-height: 28px;
+}
\ No newline at end of file