diff --git a/kfet/static/kfet/css/index.css b/kfet/static/kfet/css/index.css index 6821a4e4..b1509727 100644 --- a/kfet/static/kfet/css/index.css +++ b/kfet/static/kfet/css/index.css @@ -372,3 +372,147 @@ textarea { .stat-graph { height: 100px; } + +/* + * Responsive Columns + */ + +.column-row { + padding: 15px 20px; +} + +.column-xs-1, +.column-sm-1, +.column-md-1, +.column-lg-1, +.column-xs-2, +.column-sm-2, +.column-md-2, +.column-lg-2, +.column-xs-3, +.column-sm-3, +.column-md-3, +.column-lg-3, +.column-xs-4, +.column-sm-4, +.column-md-4, +.column-lg-4, +.column-xs-5, +.column-sm-5, +.column-md-5, +.column-lg-5 { + -webkit-column-count: 1; /* Chrome, Safari, Opera */ + -moz-column-count: 1; /* Firefox */ + column-count: 1; +} + + +.column-xs-1 { + -webkit-column-count: 1; /* Chrome, Safari, Opera */ + -moz-column-count: 1; /* Firefox */ + column-count: 1; +} +.column-xs-2 { + -webkit-column-count: 2; /* Chrome, Safari, Opera */ + -moz-column-count: 2; /* Firefox */ + column-count: 2; +} +.column-xs-3 { + -webkit-column-count: 3; /* Chrome, Safari, Opera */ + -moz-column-count: 3; /* Firefox */ + column-count: 3; +} +.column-xs-4 { + -webkit-column-count: 4; /* Chrome, Safari, Opera */ + -moz-column-count: 4; /* Firefox */ + column-count: 4; +} +.column-xs-5 { + -webkit-column-count: 5; /* Chrome, Safari, Opera */ + -moz-column-count: 5; /* Firefox */ + column-count: 5; +} + +@media (min-width: 576px) { + .column-sm-1 { + -webkit-column-count: 1; /* Chrome, Safari, Opera */ + -moz-column-count: 1; /* Firefox */ + column-count: 1; + } + .column-sm-2 { + -webkit-column-count: 2; /* Chrome, Safari, Opera */ + -moz-column-count: 2; /* Firefox */ + column-count: 2; + } + .column-sm-3 { + -webkit-column-count: 3; /* Chrome, Safari, Opera */ + -moz-column-count: 3; /* Firefox */ + column-count: 3; + } + .column-sm-4 { + -webkit-column-count: 4; /* Chrome, Safari, Opera */ + -moz-column-count: 4; /* Firefox */ + column-count: 4; + } + .column-sm-5 { + -webkit-column-count: 5; /* Chrome, Safari, Opera */ + -moz-column-count: 5; /* Firefox */ + column-count: 5; + } +} + +@media (min-width: 768px) { + .column-md-1 { + -webkit-column-count: 1; /* Chrome, Safari, Opera */ + -moz-column-count: 1; /* Firefox */ + column-count: 1; + } + .column-md-2 { + -webkit-column-count: 2; /* Chrome, Safari, Opera */ + -moz-column-count: 2; /* Firefox */ + column-count: 2; + } + .column-md-3 { + -webkit-column-count: 3; /* Chrome, Safari, Opera */ + -moz-column-count: 3; /* Firefox */ + column-count: 3; + } + .column-md-4 { + -webkit-column-count: 4; /* Chrome, Safari, Opera */ + -moz-column-count: 4; /* Firefox */ + column-count: 4; + } + .column-md-5 { + -webkit-column-count: 5; /* Chrome, Safari, Opera */ + -moz-column-count: 5; /* Firefox */ + column-count: 5; + } +} + +@media (min-width: 992px) { + .column-lg-1 { + -webkit-column-count: 1; /* Chrome, Safari, Opera */ + -moz-column-count: 1; /* Firefox */ + column-count: 1; + } + .column-lg-2 { + -webkit-column-count: 2; /* Chrome, Safari, Opera */ + -moz-column-count: 2; /* Firefox */ + column-count: 2; + } + .column-lg-3 { + -webkit-column-count: 3; /* Chrome, Safari, Opera */ + -moz-column-count: 3; /* Firefox */ + column-count: 3; + } + .column-lg-4 { + -webkit-column-count: 4; /* Chrome, Safari, Opera */ + -moz-column-count: 4; /* Firefox */ + column-count: 4; + } + .column-lg-5 { + -webkit-column-count: 5; /* Chrome, Safari, Opera */ + -moz-column-count: 5; /* Firefox */ + column-count: 5; + } +} diff --git a/kfet/templates/kfet/home.html b/kfet/templates/kfet/home.html index fb1e78b7..6db833df 100644 --- a/kfet/templates/kfet/home.html +++ b/kfet/templates/kfet/home.html @@ -8,10 +8,171 @@