init
This commit is contained in:
commit
7e7f3f8f06
1588
css/35c3.css
Normal file
1588
css/35c3.css
Normal file
File diff suppressed because it is too large
Load Diff
1
css/35c3.css.map
Normal file
1
css/35c3.css.map
Normal file
File diff suppressed because one or more lines are too long
1
css/35c3.min.css
vendored
Normal file
1
css/35c3.min.css
vendored
Normal file
File diff suppressed because one or more lines are too long
1
css/35c3.min.css.map
Normal file
1
css/35c3.min.css.map
Normal file
File diff suppressed because one or more lines are too long
920
css/35c3.scss
Normal file
920
css/35c3.scss
Normal file
@ -0,0 +1,920 @@
|
|||||||
|
$color-fresh: #0084b0;
|
||||||
|
$color-hope: #00a356;
|
||||||
|
$color-glint: #f9b000;
|
||||||
|
$color-beat: #e40429;
|
||||||
|
$color-tenacity: #44357e;
|
||||||
|
$color-base: #18386b;
|
||||||
|
$color-reboot: #4d4d4c;
|
||||||
|
$color-black: #000;
|
||||||
|
$color-white: #fff;
|
||||||
|
$color-fresh-hope: #009483;
|
||||||
|
$colors: ("fresh": $color-fresh, "hope": $color-hope, "glint": $color-glint, "beat": $color-beat, "tenacity": $color-tenacity, "base": $color-base, "reboot": $color-reboot);
|
||||||
|
$screen-xs: 767;
|
||||||
|
$screen-sm: 768;
|
||||||
|
$screen-md: 992;
|
||||||
|
$screen-lg: 1200;
|
||||||
|
$screen-xl: 1800;
|
||||||
|
$grid-size: 12;
|
||||||
|
$font-light: '35c3-font-light';
|
||||||
|
$font-black: '35c3-font-black';
|
||||||
|
|
||||||
|
@font-face {
|
||||||
|
font-family: $font-light;
|
||||||
|
src: url('fonts/35c3-light.woff2') format('woff2'), url('fonts/35c3-light.woff') format('woff');
|
||||||
|
font-weight: normal;
|
||||||
|
font-style: normal;
|
||||||
|
}
|
||||||
|
|
||||||
|
@font-face {
|
||||||
|
font-family: $font-black;
|
||||||
|
src: url('fonts/35c3-black.woff2') format('woff2'), url('fonts/35c3-black.woff') format('woff');
|
||||||
|
font-weight: bold;
|
||||||
|
font-style: normal;
|
||||||
|
}
|
||||||
|
|
||||||
|
body {
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
* {
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* basic colors */
|
||||||
|
|
||||||
|
.text-white {
|
||||||
|
color: $color-white;
|
||||||
|
}
|
||||||
|
|
||||||
|
.bg-white {
|
||||||
|
color: $color-black;
|
||||||
|
background-color: $color-white;
|
||||||
|
}
|
||||||
|
|
||||||
|
.text-black {
|
||||||
|
color: $color-black;
|
||||||
|
}
|
||||||
|
|
||||||
|
.bg-black {
|
||||||
|
color: $color-white;
|
||||||
|
background-color: $color-black;
|
||||||
|
}
|
||||||
|
|
||||||
|
@each $color,
|
||||||
|
$value in $colors {
|
||||||
|
.text-#{$color} {
|
||||||
|
color: #{$value};
|
||||||
|
}
|
||||||
|
.bg-#{$color} {
|
||||||
|
color: $color-white;
|
||||||
|
background-color: #{$value};
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* typography */
|
||||||
|
|
||||||
|
* {
|
||||||
|
font-family: $font-light;
|
||||||
|
}
|
||||||
|
|
||||||
|
h1,
|
||||||
|
h2,
|
||||||
|
h3,
|
||||||
|
h4,
|
||||||
|
h5,
|
||||||
|
h6 {
|
||||||
|
font-family: $font-black;
|
||||||
|
}
|
||||||
|
|
||||||
|
a {
|
||||||
|
color: $color-fresh;
|
||||||
|
}
|
||||||
|
|
||||||
|
.text-left {
|
||||||
|
text-align: left;
|
||||||
|
}
|
||||||
|
|
||||||
|
.text-center {
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.text-right {
|
||||||
|
text-align: right;
|
||||||
|
}
|
||||||
|
|
||||||
|
.text-justify {
|
||||||
|
text-align: justify;
|
||||||
|
}
|
||||||
|
|
||||||
|
.text-nowrap {
|
||||||
|
white-space: nowrap;
|
||||||
|
}
|
||||||
|
|
||||||
|
.text-breakword {
|
||||||
|
word-break: break-word;
|
||||||
|
}
|
||||||
|
|
||||||
|
.text-breakall {
|
||||||
|
word-break: break-all;
|
||||||
|
}
|
||||||
|
|
||||||
|
.text-breakline {
|
||||||
|
white-space: pre-line;
|
||||||
|
word-break: break-all;
|
||||||
|
}
|
||||||
|
|
||||||
|
.text-lowercase {
|
||||||
|
text-transform: lowercase;
|
||||||
|
}
|
||||||
|
|
||||||
|
.text-uppercase {
|
||||||
|
text-transform: uppercase;
|
||||||
|
}
|
||||||
|
|
||||||
|
.text-capitalize {
|
||||||
|
text-transform: capitalize;
|
||||||
|
}
|
||||||
|
|
||||||
|
label {
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
|
||||||
|
blockquote {
|
||||||
|
padding: 10px 20px;
|
||||||
|
margin: 0 0 20px;
|
||||||
|
border-left: 4px solid transparent;
|
||||||
|
border-image: linear-gradient(to bottom, $color-hope, $color-fresh) 1 round;
|
||||||
|
}
|
||||||
|
|
||||||
|
code {
|
||||||
|
padding: 2px 4px;
|
||||||
|
color: $color-glint;
|
||||||
|
background-color: $color-reboot;
|
||||||
|
}
|
||||||
|
|
||||||
|
ul.unstyled {
|
||||||
|
list-style: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* tables */
|
||||||
|
|
||||||
|
.table {
|
||||||
|
width: 100%;
|
||||||
|
max-width: 100%;
|
||||||
|
border-spacing: 0;
|
||||||
|
border-collapse: collapse;
|
||||||
|
}
|
||||||
|
|
||||||
|
.table>thead {
|
||||||
|
border-bottom: 2px solid $color-reboot;
|
||||||
|
}
|
||||||
|
|
||||||
|
.table>tbody {
|
||||||
|
border-top: 1px solid $color-reboot;
|
||||||
|
}
|
||||||
|
|
||||||
|
.table>thead>tr>th {
|
||||||
|
vertical-align: bottom;
|
||||||
|
}
|
||||||
|
|
||||||
|
.table tr th,
|
||||||
|
.table tr td {
|
||||||
|
padding: 8px;
|
||||||
|
text-align: left;
|
||||||
|
vertical-align: top;
|
||||||
|
font-size: 1em;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* line */
|
||||||
|
|
||||||
|
hr {
|
||||||
|
height: 8px;
|
||||||
|
border: none;
|
||||||
|
background-image: linear-gradient(to right, $color-fresh, $color-hope);
|
||||||
|
}
|
||||||
|
|
||||||
|
@each $color,
|
||||||
|
$value in $colors {
|
||||||
|
.hr-#{$color} {
|
||||||
|
background-color: #{$value};
|
||||||
|
background-image: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.border {
|
||||||
|
border: 2px solid transparent;
|
||||||
|
border-image: linear-gradient(to right, $color-hope, $color-fresh) 1 round;
|
||||||
|
}
|
||||||
|
|
||||||
|
@each $color,
|
||||||
|
$value in $colors {
|
||||||
|
.border-#{$color} {
|
||||||
|
border: 2px solid #{$value};
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* input */
|
||||||
|
|
||||||
|
input,
|
||||||
|
textarea,
|
||||||
|
select {
|
||||||
|
width: 100%;
|
||||||
|
border-radius: 0;
|
||||||
|
box-shadow: none;
|
||||||
|
border: 2px solid transparent;
|
||||||
|
border-image: linear-gradient(to right, $color-hope, $color-fresh) 1 round;
|
||||||
|
background: none;
|
||||||
|
padding: 6px 6px;
|
||||||
|
font-size: 1em;
|
||||||
|
color: inherit;
|
||||||
|
}
|
||||||
|
|
||||||
|
input:invalid,
|
||||||
|
textarea:invalid {
|
||||||
|
border-image: linear-gradient(to right, $color-beat, $color-tenacity) 1 round;
|
||||||
|
}
|
||||||
|
|
||||||
|
input:disabled,
|
||||||
|
textarea:disabled {
|
||||||
|
border-image: linear-gradient(to right, $color-reboot, $color-base) 1 round;
|
||||||
|
}
|
||||||
|
|
||||||
|
input:focus,
|
||||||
|
textarea:focus,
|
||||||
|
input:invalid:focus,
|
||||||
|
textarea:invalid:focus {
|
||||||
|
outline: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
input::placeholder,
|
||||||
|
textarea::placeholder {
|
||||||
|
color: inherit;
|
||||||
|
opacity: 0.8;
|
||||||
|
font-size: 0.9em;
|
||||||
|
font-style: italic;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* range input */
|
||||||
|
|
||||||
|
input[type=range] {
|
||||||
|
-webkit-appearance: none;
|
||||||
|
border: none;
|
||||||
|
background: transparent;
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
height: 32px;
|
||||||
|
}
|
||||||
|
|
||||||
|
// webkit
|
||||||
|
input[type=range]::-webkit-slider-thumb {
|
||||||
|
-webkit-appearance: none;
|
||||||
|
margin-top: -10px;
|
||||||
|
height: 26px;
|
||||||
|
width: 26px;
|
||||||
|
border: none;
|
||||||
|
border-radius: 50%;
|
||||||
|
background: $color-fresh-hope;
|
||||||
|
cursor: pointer;
|
||||||
|
&:hover,
|
||||||
|
&:active {
|
||||||
|
height: 26px;
|
||||||
|
width: 26px;
|
||||||
|
border: 4px solid $color-fresh-hope;
|
||||||
|
border-radius: 50%;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
input[type=range]::-webkit-slider-runnable-track {
|
||||||
|
width: 100%;
|
||||||
|
height: 8px;
|
||||||
|
cursor: pointer;
|
||||||
|
background-image: linear-gradient(to right, $color-fresh, $color-hope);
|
||||||
|
}
|
||||||
|
|
||||||
|
// moz
|
||||||
|
input[type=range]::-moz-range-thumb {
|
||||||
|
height: 26px;
|
||||||
|
width: 26px;
|
||||||
|
border: none;
|
||||||
|
border-radius: 50%;
|
||||||
|
background: $color-fresh-hope;
|
||||||
|
cursor: pointer;
|
||||||
|
&:hover,
|
||||||
|
&:active {
|
||||||
|
height: 26px;
|
||||||
|
width: 26px;
|
||||||
|
border: 4px solid $color-fresh-hope;
|
||||||
|
border-radius: 50%;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
input[type=range]::-moz-range-track {
|
||||||
|
width: 100%;
|
||||||
|
height: 8px;
|
||||||
|
cursor: pointer;
|
||||||
|
background-image: linear-gradient(to right, $color-fresh, $color-hope);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* select */
|
||||||
|
|
||||||
|
select {
|
||||||
|
-moz-appearance: none;
|
||||||
|
appearance: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* checkbox input */
|
||||||
|
|
||||||
|
.checkbox {
|
||||||
|
position: relative;
|
||||||
|
display: inline-block;
|
||||||
|
width: 26px;
|
||||||
|
height: 26px;
|
||||||
|
text-indent: -9999px;
|
||||||
|
input {
|
||||||
|
opacity: 0;
|
||||||
|
width: 0;
|
||||||
|
height: 0;
|
||||||
|
}
|
||||||
|
.toggle {
|
||||||
|
position: absolute;
|
||||||
|
cursor: pointer;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
right: 0;
|
||||||
|
bottom: 0;
|
||||||
|
}
|
||||||
|
.toggle:before {
|
||||||
|
content: "";
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
right: 0;
|
||||||
|
bottom: 0;
|
||||||
|
border: 2px solid $color-reboot;
|
||||||
|
transition: .4s;
|
||||||
|
}
|
||||||
|
.toggle:after {
|
||||||
|
content: "";
|
||||||
|
position: absolute;
|
||||||
|
width: 14px;
|
||||||
|
height: 6px;
|
||||||
|
left: 5px;
|
||||||
|
top: 6px;
|
||||||
|
border: 3px solid transparent;
|
||||||
|
border-top: none;
|
||||||
|
border-right: none;
|
||||||
|
transform: rotate(-45deg);
|
||||||
|
transition: .4s;
|
||||||
|
}
|
||||||
|
input:checked+.toggle:after {
|
||||||
|
border-color: $color-reboot;
|
||||||
|
}
|
||||||
|
input:checked+.toggle:before {
|
||||||
|
border-color: $color-fresh;
|
||||||
|
background-color: $color-fresh;
|
||||||
|
}
|
||||||
|
&:hover input:not(:checked)+.toggle:before {
|
||||||
|
border-color: $color-fresh;
|
||||||
|
}
|
||||||
|
&:hover input:checked+.toggle:before {
|
||||||
|
background-color: transparent;
|
||||||
|
}
|
||||||
|
@each $color,
|
||||||
|
$value in $colors {
|
||||||
|
&.checkbox-#{$color} input:checked+.toggle:before {
|
||||||
|
border-color: #{$value};
|
||||||
|
background-color: #{$value};
|
||||||
|
}
|
||||||
|
&.checkbox-#{$color}:hover input:not(:checked)+.toggle:before {
|
||||||
|
border-color: #{$value};
|
||||||
|
}
|
||||||
|
&.checkbox-#{$color}:hover input:checked+.toggle:before {
|
||||||
|
background-color: transparent;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* radio input */
|
||||||
|
|
||||||
|
.radio {
|
||||||
|
position: relative;
|
||||||
|
display: inline-block;
|
||||||
|
width: 26px;
|
||||||
|
height: 26px;
|
||||||
|
text-indent: -9999px;
|
||||||
|
input {
|
||||||
|
opacity: 0;
|
||||||
|
width: 0;
|
||||||
|
height: 0;
|
||||||
|
}
|
||||||
|
.toggle {
|
||||||
|
position: absolute;
|
||||||
|
cursor: pointer;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
right: 0;
|
||||||
|
bottom: 0;
|
||||||
|
}
|
||||||
|
.toggle:before {
|
||||||
|
content: "";
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
right: 0;
|
||||||
|
bottom: 0;
|
||||||
|
border: 2px solid $color-reboot;
|
||||||
|
border-radius: 100%;
|
||||||
|
transition: .4s;
|
||||||
|
}
|
||||||
|
.toggle:after {
|
||||||
|
content: "";
|
||||||
|
position: absolute;
|
||||||
|
width: 11px;
|
||||||
|
height: 11px;
|
||||||
|
left: 7px;
|
||||||
|
top: 7px;
|
||||||
|
border: 1px solid transparent;
|
||||||
|
border-top: none;
|
||||||
|
border-right: none;
|
||||||
|
border-radius: 100%;
|
||||||
|
transition: .4s;
|
||||||
|
}
|
||||||
|
input:checked+.toggle:after {
|
||||||
|
background-color: $color-reboot;
|
||||||
|
}
|
||||||
|
input:checked+.toggle:before {
|
||||||
|
border-color: $color-fresh;
|
||||||
|
}
|
||||||
|
&:hover .toggle:after,
|
||||||
|
input:checked+.toggle:after {
|
||||||
|
background-color: $color-fresh;
|
||||||
|
}
|
||||||
|
@each $color,
|
||||||
|
$value in $colors {
|
||||||
|
&.radio-#{$color} input:checked+.toggle:before {
|
||||||
|
border-color: #{$value};
|
||||||
|
}
|
||||||
|
&.radio-#{$color}:hover .toggle:after,
|
||||||
|
&.radio-#{$color} input:checked+.toggle:after {
|
||||||
|
background-color:#{$value};
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* switch */
|
||||||
|
|
||||||
|
.switch {
|
||||||
|
position: relative;
|
||||||
|
display: inline-block;
|
||||||
|
width: 48px;
|
||||||
|
height: 26px;
|
||||||
|
text-indent: -9999px;
|
||||||
|
input {
|
||||||
|
opacity: 0;
|
||||||
|
width: 0;
|
||||||
|
height: 0;
|
||||||
|
}
|
||||||
|
.toggle {
|
||||||
|
position: absolute;
|
||||||
|
cursor: pointer;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
right: 0;
|
||||||
|
bottom: 0;
|
||||||
|
}
|
||||||
|
.toggle:before {
|
||||||
|
position: absolute;
|
||||||
|
top: 3px;
|
||||||
|
left: 0;
|
||||||
|
right: 0;
|
||||||
|
bottom: 3px;
|
||||||
|
content: "";
|
||||||
|
background-color: $color-reboot;
|
||||||
|
border-radius: 26px;
|
||||||
|
transition: .4s;
|
||||||
|
}
|
||||||
|
.toggle:after {
|
||||||
|
position: absolute;
|
||||||
|
content: "";
|
||||||
|
height: 26px;
|
||||||
|
width: 26px;
|
||||||
|
left: 0px;
|
||||||
|
bottom: 0px;
|
||||||
|
background-color: $color-fresh;
|
||||||
|
border-radius: 50%;
|
||||||
|
transition: .4s;
|
||||||
|
}
|
||||||
|
input:checked+.toggle:after {
|
||||||
|
transform: translateX(23px);
|
||||||
|
background-color: $color-reboot;
|
||||||
|
}
|
||||||
|
input:checked+.toggle:before {
|
||||||
|
background-color: $color-fresh;
|
||||||
|
}
|
||||||
|
@each $color,
|
||||||
|
$value in $colors {
|
||||||
|
&.switch-#{$color} .toggle:after {
|
||||||
|
background-color: #{$value};
|
||||||
|
}
|
||||||
|
&.switch-#{$color} input:checked+.toggle:before {
|
||||||
|
background-color: #{$value};
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* buttons */
|
||||||
|
|
||||||
|
button {
|
||||||
|
font-size: 1em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn {
|
||||||
|
display: inline-block;
|
||||||
|
text-align: center;
|
||||||
|
padding: 8px;
|
||||||
|
cursor: pointer;
|
||||||
|
white-space: nowrap;
|
||||||
|
vertical-align: middle;
|
||||||
|
border: none;
|
||||||
|
color: $color-reboot;
|
||||||
|
background-color: transparent;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn:hover {
|
||||||
|
opacity: 0.8;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn:active {
|
||||||
|
opacity: 0.9;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-white {
|
||||||
|
background-color: $color-white;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-black {
|
||||||
|
background-color: $color-black;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-fresh {
|
||||||
|
color: $color-white;
|
||||||
|
background-color: $color-fresh;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-hope {
|
||||||
|
color: $color-white;
|
||||||
|
background-color: $color-hope;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-glint {
|
||||||
|
color: $color-white;
|
||||||
|
background-color: $color-glint;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-beat {
|
||||||
|
color: $color-white;
|
||||||
|
background-color: $color-beat;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-tenacity {
|
||||||
|
color: $color-white;
|
||||||
|
background-color: $color-tenacity;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-base {
|
||||||
|
color: $color-white;
|
||||||
|
background-color: $color-base;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-reboot {
|
||||||
|
color: $color-white;
|
||||||
|
background-color: $color-reboot;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn.btn-block {
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-xs {
|
||||||
|
font-size: 0.7em;
|
||||||
|
padding: 4px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-sm {
|
||||||
|
font-size: 0.9em;
|
||||||
|
padding: 6px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-xl {
|
||||||
|
font-size: 1.2em;
|
||||||
|
padding: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-round {
|
||||||
|
width: 2.33em;
|
||||||
|
height: 2.33em;
|
||||||
|
border-radius: 50%;
|
||||||
|
overflow: hidden;
|
||||||
|
display: inline-flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
flex-direction: row;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* images */
|
||||||
|
|
||||||
|
.img-auto {
|
||||||
|
display: block;
|
||||||
|
max-width: 100%;
|
||||||
|
height: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* container */
|
||||||
|
|
||||||
|
.container {
|
||||||
|
padding-right: 15px;
|
||||||
|
padding-left: 15px;
|
||||||
|
margin-right: auto;
|
||||||
|
margin-left: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media screen and (min-width: $screen-sm+'px') {
|
||||||
|
.container {
|
||||||
|
width: #{$screen-sm * 0.97}+'px';
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media screen and (min-width: $screen-md+'px') {
|
||||||
|
.container {
|
||||||
|
width: #{$screen-md * 0.97}+'px';
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media screen and (min-width: $screen-lg+'px') {
|
||||||
|
.container {
|
||||||
|
width: #{$screen-lg * 0.97}+'px';
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media screen and (min-width: $screen-xl+'px') {
|
||||||
|
.container {
|
||||||
|
width: #{$screen-xl * 0.97}+'px';
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* grid */
|
||||||
|
|
||||||
|
.row {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: repeat($grid-size, 1fr);
|
||||||
|
grid-row-gap: 8px;
|
||||||
|
grid-column-gap: 8px;
|
||||||
|
&.section {
|
||||||
|
margin-block-start: 1em;
|
||||||
|
margin-block-end: 1em;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@for $i from 1 through $grid-size {
|
||||||
|
.col-#{$i} {
|
||||||
|
grid-column-end: span $i;
|
||||||
|
}
|
||||||
|
.col-offset-#{$i} {
|
||||||
|
grid-column-start: $i + 1;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media screen and (max-width: $screen-xs+'px') {
|
||||||
|
@for $i from 1 through $grid-size {
|
||||||
|
.col-xs-#{$i} {
|
||||||
|
grid-column-end: span $i;
|
||||||
|
}
|
||||||
|
.col-xs-offset-#{$i} {
|
||||||
|
grid-column-start: $i + 1;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media screen and (min-width: $screen-sm+'px') {
|
||||||
|
@for $i from 1 through $grid-size {
|
||||||
|
.col-sm-#{$i} {
|
||||||
|
grid-column-end: span $i;
|
||||||
|
}
|
||||||
|
.col-sm-offset-#{$i} {
|
||||||
|
grid-column-start: $i + 1;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media screen and (min-width: $screen-md+'px') {
|
||||||
|
@for $i from 1 through $grid-size {
|
||||||
|
.col-md-#{$i} {
|
||||||
|
grid-column-end: span $i;
|
||||||
|
}
|
||||||
|
.col-md-offset-#{$i} {
|
||||||
|
grid-column-start: $i + 1;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media screen and (min-width: $screen-lg+'px') {
|
||||||
|
@for $i from 1 through $grid-size {
|
||||||
|
.col-lg-#{$i} {
|
||||||
|
grid-column-end: span $i;
|
||||||
|
}
|
||||||
|
.col-lg-offset-#{$i} {
|
||||||
|
grid-column-start: $i + 1;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media screen and (min-width: $screen-xl+'px') {
|
||||||
|
@for $i from 1 through $grid-size {
|
||||||
|
.col-xl-#{$i} {
|
||||||
|
grid-column-end: span $i;
|
||||||
|
}
|
||||||
|
.col-xl-offset-#{$i} {
|
||||||
|
grid-column-start: $i + 1;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* visible/hidden responsive */
|
||||||
|
|
||||||
|
.hidden {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.visible,
|
||||||
|
.visible-block {
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
|
||||||
|
.visible-inline {
|
||||||
|
display: inline;
|
||||||
|
}
|
||||||
|
|
||||||
|
.visible-inline-block {
|
||||||
|
display: inline-block;
|
||||||
|
}
|
||||||
|
|
||||||
|
.visible-print,
|
||||||
|
.visible-print-block,
|
||||||
|
.visible-print-inline,
|
||||||
|
.visible-print-inline-block {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media print {
|
||||||
|
.hidden-print {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
.visible-print,
|
||||||
|
.visible-print-block {
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
.visible-print-inline {
|
||||||
|
display: inline;
|
||||||
|
}
|
||||||
|
.visible-print-inline-block {
|
||||||
|
display: inline-block;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media screen and (max-width: $screen-xs+'px') {
|
||||||
|
.hidden-xs {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
.visible-xs,
|
||||||
|
.visible-xs-block {
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
.visible-xs-inline {
|
||||||
|
display: inline;
|
||||||
|
}
|
||||||
|
.visible-xs-inline-block {
|
||||||
|
display: inline-block;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media screen and (min-width: $screen-sm+'px') and (max-width: #{$screen-md - 1}+'px') {
|
||||||
|
.hidden-sm {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
.visible-sm,
|
||||||
|
.visible-sm-block {
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
.visible-sm-inline {
|
||||||
|
display: inline;
|
||||||
|
}
|
||||||
|
.visible-sm-inline-block {
|
||||||
|
display: inline-block;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media screen and (min-width: $screen-md+'px') and (max-width: #{$screen-lg - 1}+'px') {
|
||||||
|
.hidden-md {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
.visible-md,
|
||||||
|
.visible-md-block {
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
.visible-md-inline {
|
||||||
|
display: inline;
|
||||||
|
}
|
||||||
|
.visible-md-inline-block {
|
||||||
|
display: inline-block;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media screen and (min-width: $screen-lg+'px') and (max-width: #{$screen-xl - 1}+'px') {
|
||||||
|
.hidden-lg {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
.visible-lg,
|
||||||
|
.visible-lg-block {
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
.visible-lg-inline {
|
||||||
|
display: inline;
|
||||||
|
}
|
||||||
|
.visible-lg-inline-block {
|
||||||
|
display: inline-block;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media screen and (min-width: $screen-xl+'px') {
|
||||||
|
.hidden-xl {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
.visible-xl,
|
||||||
|
.visible-xl-block {
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
.visible-xl-inline {
|
||||||
|
display: inline;
|
||||||
|
}
|
||||||
|
.visible-xl-inline-block {
|
||||||
|
display: inline-block;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* other helper */
|
||||||
|
|
||||||
|
.float-left {
|
||||||
|
float: left;
|
||||||
|
}
|
||||||
|
|
||||||
|
.float-right {
|
||||||
|
float: right;
|
||||||
|
}
|
||||||
|
|
||||||
|
.clear {
|
||||||
|
clear: both;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* popover */
|
||||||
|
|
||||||
|
.popover {
|
||||||
|
display: inline;
|
||||||
|
position: relative;
|
||||||
|
z-index: 1;
|
||||||
|
cursor: help;
|
||||||
|
}
|
||||||
|
|
||||||
|
.popover-content {
|
||||||
|
opacity: 0;
|
||||||
|
visibility: hidden;
|
||||||
|
position: absolute;
|
||||||
|
bottom: 0;
|
||||||
|
left: 50%;
|
||||||
|
transform: translate(-50%, -25px);
|
||||||
|
color: $color-glint;
|
||||||
|
background-color: $color-reboot;
|
||||||
|
font-size: 0.8em;
|
||||||
|
padding: 7px;
|
||||||
|
width: 200px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.popover-content:after {
|
||||||
|
content: '';
|
||||||
|
position: absolute;
|
||||||
|
left: 50%;
|
||||||
|
bottom: 0;
|
||||||
|
transform: translate(-50%, 7px);
|
||||||
|
width: 0;
|
||||||
|
height: 0;
|
||||||
|
border-left: 7px solid transparent;
|
||||||
|
border-right: 7px solid transparent;
|
||||||
|
border-top: 7px solid $color-reboot;
|
||||||
|
}
|
||||||
|
|
||||||
|
.popover:hover .popover-content {
|
||||||
|
opacity: 1;
|
||||||
|
visibility: visible;
|
||||||
|
z-index: 2;
|
||||||
|
}
|
||||||
1
css/fonts/.htaccess
Normal file
1
css/fonts/.htaccess
Normal file
@ -0,0 +1 @@
|
|||||||
|
Options +Indexes
|
||||||
BIN
css/fonts/35c3-black.woff
Normal file
BIN
css/fonts/35c3-black.woff
Normal file
Binary file not shown.
BIN
css/fonts/35c3-black.woff2
Normal file
BIN
css/fonts/35c3-black.woff2
Normal file
Binary file not shown.
BIN
css/fonts/35c3-light.woff
Normal file
BIN
css/fonts/35c3-light.woff
Normal file
Binary file not shown.
BIN
css/fonts/35c3-light.woff2
Normal file
BIN
css/fonts/35c3-light.woff2
Normal file
Binary file not shown.
84
css/style.css
Normal file
84
css/style.css
Normal file
@ -0,0 +1,84 @@
|
|||||||
|
/* ADVANCED styling */
|
||||||
|
/* sidebar */
|
||||||
|
#sidebar {
|
||||||
|
position: fixed;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
height: 100%;
|
||||||
|
transition: 0.4s;
|
||||||
|
overflow: hidden;
|
||||||
|
z-index: 2;
|
||||||
|
}
|
||||||
|
|
||||||
|
.sidebar-toggle {
|
||||||
|
cursor: pointer;
|
||||||
|
font-size: 2em;
|
||||||
|
padding: 5px;
|
||||||
|
}
|
||||||
|
|
||||||
|
#sidebar-toggle {
|
||||||
|
position: fixed;
|
||||||
|
top: 0;
|
||||||
|
background-color: inherit;
|
||||||
|
z-index: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
#sidebar-toggle-input {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
#main {
|
||||||
|
position: relative;
|
||||||
|
left: 0;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
#sidebar-toggle-input:not(:checked) ~ #sidebar {
|
||||||
|
width: 0px;
|
||||||
|
}
|
||||||
|
|
||||||
|
#sidebar-toggle-input:checked ~ #sidebar {
|
||||||
|
width: 250px;
|
||||||
|
}
|
||||||
|
|
||||||
|
#sidebar-toggle-input:checked ~ #main {
|
||||||
|
left: 250px;
|
||||||
|
width: calc(100% - 250px);
|
||||||
|
}
|
||||||
|
|
||||||
|
@media screen and (max-width: 767px) {
|
||||||
|
#sidebar-toggle {
|
||||||
|
left: auto;
|
||||||
|
right: 0;
|
||||||
|
}
|
||||||
|
#sidebar-toggle-input:checked ~ #sidebar {
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
#sidebar-toggle-input:checked ~ #main .container {
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media screen and (min-width: 768px) {
|
||||||
|
#sidebar-toggle-input:checked ~ #main .container {
|
||||||
|
width: calc(744.96px - 250px);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media screen and (min-width: 992px) {
|
||||||
|
#sidebar-toggle-input:checked ~ #main .container {
|
||||||
|
width: calc(962.24px - 250px);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media screen and (min-width: 1200px) {
|
||||||
|
#sidebar-toggle-input:checked ~ #main .container {
|
||||||
|
width: calc(1164px -250px);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media screen and (min-width: 1800px) {
|
||||||
|
#sidebar-toggle-input:checked ~ #main .container {
|
||||||
|
width: calc(1746px - 250px);
|
||||||
|
}
|
||||||
|
}
|
||||||
1
css/style.min.css
vendored
Normal file
1
css/style.min.css
vendored
Normal file
@ -0,0 +1 @@
|
|||||||
|
#sidebar{position:fixed;top:0;left:0;height:100%;transition:0.4s;overflow:hidden;z-index:2}.sidebar-toggle{cursor:pointer;font-size:2em;padding:5px}#sidebar-toggle{position:fixed;top:0;background-color:inherit;z-index:1}#sidebar-toggle-input{display:none}#main{position:relative;left:0;width:100%}#sidebar-toggle-input:not(:checked) ~ #sidebar{width:0px}#sidebar-toggle-input:checked ~ #sidebar{width:250px}#sidebar-toggle-input:checked ~ #main{left:250px;width:calc(100% - 250px)}@media screen and (max-width: 767px){#sidebar-toggle{left:auto;right:0}#sidebar-toggle-input:checked ~ #sidebar{width:100%}#sidebar-toggle-input:checked ~ #main .container{width:100%}}@media screen and (min-width: 768px){#sidebar-toggle-input:checked ~ #main .container{width:calc(744.96px - 250px)}}@media screen and (min-width: 992px){#sidebar-toggle-input:checked ~ #main .container{width:calc(962.24px - 250px)}}@media screen and (min-width: 1200px){#sidebar-toggle-input:checked ~ #main .container{width:calc(1164px -250px)}}@media screen and (min-width: 1800px){#sidebar-toggle-input:checked ~ #main .container{width:calc(1746px - 250px)}}
|
||||||
86
css/style.scss
Normal file
86
css/style.scss
Normal file
@ -0,0 +1,86 @@
|
|||||||
|
/* ADVANCED styling */
|
||||||
|
|
||||||
|
/* sidebar */
|
||||||
|
|
||||||
|
#sidebar {
|
||||||
|
position: fixed;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
height: 100%;
|
||||||
|
transition: 0.4s;
|
||||||
|
overflow: hidden;
|
||||||
|
z-index: 2;
|
||||||
|
}
|
||||||
|
|
||||||
|
.sidebar-toggle {
|
||||||
|
cursor: pointer;
|
||||||
|
font-size: 2em;
|
||||||
|
padding: 5px;
|
||||||
|
}
|
||||||
|
|
||||||
|
#sidebar-toggle {
|
||||||
|
position: fixed;
|
||||||
|
top: 0;
|
||||||
|
background-color: inherit;
|
||||||
|
z-index: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
#sidebar-toggle-input {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
#main {
|
||||||
|
position: relative;
|
||||||
|
left: 0;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
#sidebar-toggle-input:not(:checked)~#sidebar {
|
||||||
|
width: 0px;
|
||||||
|
}
|
||||||
|
|
||||||
|
#sidebar-toggle-input:checked~#sidebar {
|
||||||
|
width: 250px;
|
||||||
|
}
|
||||||
|
|
||||||
|
#sidebar-toggle-input:checked~#main {
|
||||||
|
left: 250px;
|
||||||
|
width: calc(100% - 250px);
|
||||||
|
}
|
||||||
|
|
||||||
|
@media screen and (max-width: 767px) {
|
||||||
|
#sidebar-toggle {
|
||||||
|
left: auto;
|
||||||
|
right: 0;
|
||||||
|
}
|
||||||
|
#sidebar-toggle-input:checked~#sidebar {
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
#sidebar-toggle-input:checked~#main .container {
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media screen and (min-width: 768px) {
|
||||||
|
#sidebar-toggle-input:checked~#main .container {
|
||||||
|
width: calc(744.96px - 250px);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media screen and (min-width: 992px) {
|
||||||
|
#sidebar-toggle-input:checked~#main .container {
|
||||||
|
width: calc(962.24px - 250px);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media screen and (min-width: 1200px) {
|
||||||
|
#sidebar-toggle-input:checked~#main .container {
|
||||||
|
width: calc(1164px -250px);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media screen and (min-width: 1800px) {
|
||||||
|
#sidebar-toggle-input:checked~#main .container {
|
||||||
|
width: calc(1746px - 250px);
|
||||||
|
}
|
||||||
|
}
|
||||||
20
img/35C3Logo.svg
Normal file
20
img/35C3Logo.svg
Normal file
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 9.2 KiB |
10
img/35C3LogoBW.svg
Normal file
10
img/35C3LogoBW.svg
Normal file
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 8.8 KiB |
52
img/35C3LogoTR.svg
Normal file
52
img/35C3LogoTR.svg
Normal file
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 9.6 KiB |
920
index.html
Normal file
920
index.html
Normal file
@ -0,0 +1,920 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
|
||||||
|
<head>
|
||||||
|
<title>35c3 css demo</title>
|
||||||
|
<meta charset="utf-8">
|
||||||
|
<meta name="Description" content="Demo site for a 35c3 css template">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<link href="css/35c3.min.css" type="text/css" rel="stylesheet" />
|
||||||
|
<link href="css/style.min.css" type="text/css" rel="stylesheet" />
|
||||||
|
</head>
|
||||||
|
|
||||||
|
<body class="bg-black text-reboot text-breakall">
|
||||||
|
<label id="sidebar-toggle" class="sidebar-toggle" for="sidebar-toggle-input">≡</label>
|
||||||
|
<input id="sidebar-toggle-input" type="checkbox" role="button" />
|
||||||
|
<div id="sidebar" class="bg-black">
|
||||||
|
<label class="sidebar-toggle text-fresh float-right" for="sidebar-toggle-input">×</label>
|
||||||
|
|
||||||
|
<ul class="unstyled">
|
||||||
|
<li><a href="#35css">35css</a></li>
|
||||||
|
<li><a href="#typography">typography</a></li>
|
||||||
|
<li><a href="#tables">tables</a></li>
|
||||||
|
<li><a href="#colors">colors</a></li>
|
||||||
|
<li><a href="#buttons">buttons</a></li>
|
||||||
|
<li><a href="#input">input</a></li>
|
||||||
|
<li><a href="#images">images</a></li>
|
||||||
|
<li><a href="#grid">grid</a></li>
|
||||||
|
<li><a href="#other">other</a></li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div id="main">
|
||||||
|
<div class="container">
|
||||||
|
<h1 id="35css">35c3 css demo</h1>
|
||||||
|
<p>Simple stylesheet inspired <a href="https://content.events.ccc.de/35C3/Styleguide.pdf">https://content.events.ccc.de/35C3/Styleguide.pdf</a>
|
||||||
|
and <a href="https://pbs.twimg.com/media/DsZNqPMWsAE53H9.jpg:large">https://pbs.twimg.com/media/DsZNqPMWsAE53H9.jpg:large</a>
|
||||||
|
thx to <a href="https://twitter.com/c3groc">@c3groc</a></p>
|
||||||
|
<p><a href="css/35c3.min.css">minified css</a> | <a href="css/35c3.css">css</a> | <a href="css/35c3.scss">sass
|
||||||
|
source</a></p>
|
||||||
|
<p><a href="css/fonts/">fonts</a></p>
|
||||||
|
<p><span class="text-beat">Accessibility <span alt="warning sign">⚠</span></span>: For higher contrast, add
|
||||||
|
text-white class to parent
|
||||||
|
element!</p>
|
||||||
|
<hr />
|
||||||
|
<h2 id="typography">typography</h2>
|
||||||
|
<h1>Heading 1</h1>
|
||||||
|
<h2>Heading 2</h2>
|
||||||
|
<h3>Heading 3</h3>
|
||||||
|
<h4>Heading 4</h4>
|
||||||
|
<h5>Heading 5</h5>
|
||||||
|
<h6>Heading 6</h6>
|
||||||
|
<p>Paragraph </p>
|
||||||
|
<p class="text-left">text-left</p>
|
||||||
|
<p class="text-center">text-center</p>
|
||||||
|
<p class="text-right">text-right</p>
|
||||||
|
<p class="text-justify">text-justify</p>
|
||||||
|
<p class="text-nowrap">text-nowrap no wrap demo</p>
|
||||||
|
<p class="text-breakline">text-breakline break line demo</p>
|
||||||
|
<p class="text-lowercase">text-lowercase LOWERCASE demo</p>
|
||||||
|
<p class="text-uppercase">text-uppercase uppercase demo</p>
|
||||||
|
<p class="text-capitalize">text-capitalize capitalize demo</p>
|
||||||
|
<p><label>label</label></p>
|
||||||
|
<blockquote>blockquote</blockquote>
|
||||||
|
<p><code>code</code></p>
|
||||||
|
<hr />
|
||||||
|
<h2 id="tables">Tables</h2>
|
||||||
|
<table class="table">
|
||||||
|
<thead>
|
||||||
|
<tr>
|
||||||
|
<th>#</th>
|
||||||
|
<th>table heading 2</th>
|
||||||
|
<th>table heading 3</th>
|
||||||
|
<th>table heading 4</th>
|
||||||
|
</tr>
|
||||||
|
</thead>
|
||||||
|
<tbody>
|
||||||
|
<tr>
|
||||||
|
<th>1</th>
|
||||||
|
<td>table body row 1 2</td>
|
||||||
|
<td>table body row 1 3</td>
|
||||||
|
<td>table body row 1 4</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<th>2</th>
|
||||||
|
<td>table body row 2 2</td>
|
||||||
|
<td>table body row 2 3</td>
|
||||||
|
<td>table body row 2 4</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<th>3</th>
|
||||||
|
<td>table body row 3 2</td>
|
||||||
|
<td>table body row 3 3</td>
|
||||||
|
<td>table body row 3 4</td>
|
||||||
|
</tr>
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
<hr />
|
||||||
|
<h2 id="colors">colors</h2>
|
||||||
|
<p class="text-white">text-white</p>
|
||||||
|
<p class="text-fresh">text-fresh</p>
|
||||||
|
<p class="text-hope">text-hope</p>
|
||||||
|
<p class="text-glint">text-glint</p>
|
||||||
|
<p class="text-beat">text-beat</p>
|
||||||
|
<p class="text-tenacity">text-tenacity</p>
|
||||||
|
<p class="text-base">text-base</p>
|
||||||
|
<p class="text-reboot">text-reboot</p>
|
||||||
|
<p class="bg-white">bg-white</p>
|
||||||
|
<p class="bg-fresh">bg-fresh</p>
|
||||||
|
<p class="bg-hope">bg-hope</p>
|
||||||
|
<p class="bg-glint">bg-glint</p>
|
||||||
|
<p class="bg-beat">bg-beat</p>
|
||||||
|
<p class="bg-tenacity">bg-tenacity</p>
|
||||||
|
<p class="bg-base">bg-base</p>
|
||||||
|
<p class="bg-reboot">bg-reboot</p>
|
||||||
|
<p class="bg-black">bg-black</p>
|
||||||
|
<hr />
|
||||||
|
<h2 id="buttons">buttons</h2>
|
||||||
|
<p>
|
||||||
|
<button class="btn">btn</button>
|
||||||
|
<a class="btn btn-fresh">btn btn-fresh</a>
|
||||||
|
<a class="btn btn-hope">btn btn-hope</a>
|
||||||
|
<a class="btn btn-glint">btn btn-glint</a>
|
||||||
|
<a class="btn btn-beat">btn btn-beat</a>
|
||||||
|
<a class="btn btn-tenacity">btn btn-tenacity</a>
|
||||||
|
<a class="btn btn-base">btn btn-base</a>
|
||||||
|
<a class="btn btn-reboot">btn btn-reboot</a>
|
||||||
|
<a class="btn btn-white">btn btn-white</a>
|
||||||
|
<a class="btn btn-black">btn btn-black</a></p>
|
||||||
|
<p>
|
||||||
|
<a class="btn btn-fresh btn-block">btn btn-fresh btn-block</a>
|
||||||
|
</p>
|
||||||
|
<p>
|
||||||
|
<a class="btn btn-hope btn-xs">btn btn-hope btn-xs</a>
|
||||||
|
<a class="btn btn-glint btn-sm">btn btn-glint btn-sm</a>
|
||||||
|
<a class="btn btn-beat">btn btn-beat</a>
|
||||||
|
<a class="btn btn-tenacity btn-xl">btn btn-tenacity btn-xl</a>
|
||||||
|
</p>
|
||||||
|
<p>
|
||||||
|
<a class="btn btn-hope btn-round btn-xs" title="btn btn-hope btn-round btn-xs">x</a>
|
||||||
|
<a class="btn btn-glint btn-round btn-sm" title="btn btn-glint btn-round btn-sm">x</a>
|
||||||
|
<a class="btn btn-beat btn-round" title="btn btn-round btn-beat" x>x</a>
|
||||||
|
<a class="btn btn-tenacity btn-round btn-xl" title="btn btn-tenacity btn-round btn-xl">x</a>
|
||||||
|
</p>
|
||||||
|
<hr />
|
||||||
|
<h2 id="input">input</h2>
|
||||||
|
<form name="demo-form">
|
||||||
|
<div class="row section">
|
||||||
|
<div class="col-xs-6 col-sm-4 col-md-3 col-lg-2 col-xl-1">
|
||||||
|
<label for="input_text">text</label>
|
||||||
|
</div>
|
||||||
|
<div class="col-xs-6 col-sm-6 col-md-4 col-lg-3 col-xl-2">
|
||||||
|
<input id="input_text" type="text" placeholder="placeholder" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="row section">
|
||||||
|
<div class="col-xs-6 col-sm-4 col-md-3 col-lg-2 col-xl-1">
|
||||||
|
<label for="input_required">required</label>
|
||||||
|
</div>
|
||||||
|
<div class="col-xs-6 col-sm-6 col-md-4 col-lg-3 col-xl-2">
|
||||||
|
<input id="input_required" type="text" required placeholder="required" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="row section">
|
||||||
|
<div class="col-xs-6 col-sm-4 col-md-3 col-lg-2 col-xl-1">
|
||||||
|
<label for="input_invalid">invalid</label>
|
||||||
|
</div>
|
||||||
|
<div class="col-xs-6 col-sm-6 col-md-4 col-lg-3 col-xl-2">
|
||||||
|
<input id="input_invalid" type="email" placeholder="email" value="invalid" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="row section">
|
||||||
|
<div class="col-xs-6 col-sm-4 col-md-3 col-lg-2 col-xl-1">
|
||||||
|
<label for="input_disabled">disabled</label>
|
||||||
|
</div>
|
||||||
|
<div class="col-xs-6 col-sm-6 col-md-4 col-lg-3 col-xl-2">
|
||||||
|
<input id="input_disabled" type="text" placeholder="disabled" disabled />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="row section">
|
||||||
|
<div class="col-xs-6 col-sm-4 col-md-3 col-lg-2 col-xl-1">
|
||||||
|
<label for="input_date">date</label>
|
||||||
|
</div>
|
||||||
|
<div class="col-xs-6 col-sm-6 col-md-4 col-lg-3 col-xl-2">
|
||||||
|
<input id="input_date" type="date" placeholder="date" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="row section">
|
||||||
|
<div class="col-xs-6 col-sm-4 col-md-3 col-lg-2 col-xl-1">
|
||||||
|
<label for="input_time">time</label>
|
||||||
|
</div>
|
||||||
|
<div class="col-xs-6 col-sm-6 col-md-4 col-lg-3 col-xl-2">
|
||||||
|
<input id="input_time" type="time" placeholder="time" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="row section">
|
||||||
|
<div class="col-xs-6 col-sm-4 col-md-3 col-lg-2 col-xl-1">
|
||||||
|
<label for="input_number">number</label>
|
||||||
|
</div>
|
||||||
|
<div class="col-xs-6 col-sm-6 col-md-4 col-lg-3 col-xl-2">
|
||||||
|
<input id="input_number" type="number" placeholder="number" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="row section">
|
||||||
|
<div class="col-xs-6 col-sm-4 col-md-3 col-lg-2 col-xl-1">
|
||||||
|
<label for="input_textarea">textarea</label>
|
||||||
|
</div>
|
||||||
|
<div class="col-xs-6 col-sm-6 col-md-4 col-lg-3 col-xl-2">
|
||||||
|
<textarea id="input_textarea"></textarea>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="row section">
|
||||||
|
<div class="col-xs-6 col-sm-4 col-md-3 col-lg-2 col-xl-1">
|
||||||
|
<label for="input_range">range</label>
|
||||||
|
<div class="popover">
|
||||||
|
<span class="text-beat" alt="warning sign">⚠</span>
|
||||||
|
<div class="popover-content">
|
||||||
|
no IE support 🤷 hover not working for webkit
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="col-xs-6 col-sm-6 col-md-4 col-lg-3 col-xl-2">
|
||||||
|
<input id="input_range" type="range" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="row section">
|
||||||
|
<div class="col-xs-6 col-sm-4 col-md-3 col-lg-2 col-xl-1">
|
||||||
|
<label for="input_select">select</label>
|
||||||
|
</div>
|
||||||
|
<div class="col-xs-6 col-sm-6 col-md-4 col-lg-3 col-xl-2">
|
||||||
|
<select id="input_select">
|
||||||
|
<option>option 1</option>
|
||||||
|
<option>option 2</option>
|
||||||
|
<option>option 3</option>
|
||||||
|
</select>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="row section">
|
||||||
|
<div class="col-xs-6 col-sm-4 col-md-3 col-lg-2 col-xl-1">
|
||||||
|
<label for="input_checkbox">checkbox</label>
|
||||||
|
</div>
|
||||||
|
<div class="col-xs-6 col-sm-8 col-md-9 col-lg-10 col-xl-11">
|
||||||
|
<div class="row" id="input_checkbox">
|
||||||
|
<div class="col-2 col-lg-1 col-xl-1 col-xs-6">
|
||||||
|
<label for="input_checkbox_default" class="checkbox">
|
||||||
|
<input id="input_checkbox_default" type="checkbox" />
|
||||||
|
<span class="toggle"></span>
|
||||||
|
checkbox default
|
||||||
|
</label>
|
||||||
|
<label for="input_checkbox_default_checked" class="checkbox">
|
||||||
|
<input id="input_checkbox_default_checked" type="checkbox" checked />
|
||||||
|
<span class="toggle"></span>
|
||||||
|
checkbox default checked
|
||||||
|
</label>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="col-2 col-lg-1 col-xl-1 col-xs-6">
|
||||||
|
<label for="input_checkbox_hope" class="checkbox checkbox-hope">
|
||||||
|
<input id="input_checkbox_hope" type="checkbox" />
|
||||||
|
<span class="toggle"></span>
|
||||||
|
checkbox hope
|
||||||
|
</label>
|
||||||
|
<label for="input_checkbox_hope_checked" class="checkbox checkbox-hope">
|
||||||
|
<input id="input_checkbox_hope_checked" type="checkbox" checked />
|
||||||
|
<span class="toggle"></span>
|
||||||
|
checkbox hope checked
|
||||||
|
</label>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
<div class="col-2 col-lg-1 col-xl-1 col-xs-6">
|
||||||
|
<label for="input_checkbox_glint" class="checkbox checkbox-glint">
|
||||||
|
<input id="input_checkbox_glint" type="checkbox" />
|
||||||
|
<span class="toggle"></span>
|
||||||
|
checkbox glint
|
||||||
|
</label>
|
||||||
|
<label for="input_checkbox_glint_checked" class="checkbox checkbox-glint">
|
||||||
|
<input id="input_checkbox_glint_checked" type="checkbox" checked />
|
||||||
|
<span class="toggle"></span>
|
||||||
|
checkbox glint checked
|
||||||
|
</label>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="col-2 col-lg-1 col-xl-1 col-xs-6">
|
||||||
|
<label for="input_checkbox_beat" class="checkbox checkbox-beat">
|
||||||
|
<input id="input_checkbox_beat" type="checkbox" />
|
||||||
|
<span class="toggle"></span>
|
||||||
|
checkbox beat
|
||||||
|
</label>
|
||||||
|
<label for="input_checkbox_beat_checked" class="checkbox checkbox-beat">
|
||||||
|
<input id="input_checkbox_beat_checked" type="checkbox" checked />
|
||||||
|
<span class="toggle"></span>
|
||||||
|
checkbox beat checked
|
||||||
|
</label>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="col-2 col-lg-1 col-xl-1 col-xs-6">
|
||||||
|
<label for="input_checkbox_tenacity" class="checkbox checkbox-tenacity">
|
||||||
|
<input id="input_checkbox_tenacity" type="checkbox" />
|
||||||
|
<span class="toggle"></span>
|
||||||
|
checkbox tenacity
|
||||||
|
</label>
|
||||||
|
<label for="input_checkbox_tenacity_checked" class="checkbox checkbox-tenacity">
|
||||||
|
<input id="input_checkbox_tenacity_checked" type="checkbox" checked />
|
||||||
|
<span class="toggle"></span>
|
||||||
|
checkbox tenacity checked
|
||||||
|
</label>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="col-2 col-lg-1 col-xl-1 col-xs-6">
|
||||||
|
<label for="input_checkbox_base" class="checkbox checkbox-base">
|
||||||
|
<input id="input_checkbox_base" type="checkbox" />
|
||||||
|
<span class="toggle"></span>
|
||||||
|
checkbox base
|
||||||
|
</label>
|
||||||
|
<label for="input_checkbox_base_checked" class="checkbox checkbox-base">
|
||||||
|
<input id="input_checkbox_base_checked" type="checkbox" checked />
|
||||||
|
<span class="toggle"></span>
|
||||||
|
checkbox base checked
|
||||||
|
</label>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="row section">
|
||||||
|
<div class="col-xs-6 col-sm-4 col-md-3 col-lg-2 col-xl-1">
|
||||||
|
<label for="input_radio">radio</label>
|
||||||
|
</div>
|
||||||
|
<div class="col-xs-6 col-sm-8 col-md-9 col-lg-10 col-xl-11">
|
||||||
|
<div class="row" id="input_radio">
|
||||||
|
<div class="col-2 col-lg-1 col-xl-1 col-xs-6">
|
||||||
|
<label for="input_radio_default" class="radio">
|
||||||
|
<input id="input_radio_default" type="radio" name="radio-default" />
|
||||||
|
<span class="toggle"></span>
|
||||||
|
radio default
|
||||||
|
</label>
|
||||||
|
<label for="input_radio_default_checked" class="radio">
|
||||||
|
<input id="input_radio_default_checked" type="radio" name="radio-default" checked />
|
||||||
|
<span class="toggle"></span>
|
||||||
|
radio default checked
|
||||||
|
</label>
|
||||||
|
</div>
|
||||||
|
<div class="col-2 col-lg-1 col-xl-1 col-xs-6">
|
||||||
|
<label id="input_radio_hope" class="radio radio-hope">
|
||||||
|
<input for="input_radio_hope" type="radio" name="radio-hope" />
|
||||||
|
<span class="toggle"></span>
|
||||||
|
radio hope
|
||||||
|
</label>
|
||||||
|
<label for="input_radio_hope_checked" class="radio radio-hope">
|
||||||
|
<input id="input_radio_hope_checked" type="radio" name="radio-hope" checked />
|
||||||
|
<span class="toggle"></span>
|
||||||
|
radio hope checked
|
||||||
|
</label>
|
||||||
|
</div>
|
||||||
|
<div class="col-2 col-lg-1 col-xl-1 col-xs-6">
|
||||||
|
<label for="input_radio_glint" class="radio radio-glint">
|
||||||
|
<input id="input_radio_glint" type="radio" name="radio-glint" />
|
||||||
|
<span class="toggle"></span>
|
||||||
|
radio glint
|
||||||
|
</label>
|
||||||
|
<label for="input_radio_glint_checked" class="radio radio-glint">
|
||||||
|
<input id="input_radio_glint_checked" type="radio" name="radio-glint" checked />
|
||||||
|
<span class="toggle"></span>
|
||||||
|
radio glint checked
|
||||||
|
</label>
|
||||||
|
</div>
|
||||||
|
<div class="col-2 col-lg-1 col-xl-1 col-xs-6">
|
||||||
|
<label for="input_radio_beat" class="radio radio-beat">
|
||||||
|
<input id="input_radio_beat" type="radio" name="radio-beat" />
|
||||||
|
<span class="toggle"></span>
|
||||||
|
radio beat
|
||||||
|
</label>
|
||||||
|
<label for="input_radio_beat_checked" class="radio radio-beat">
|
||||||
|
<input id="input_radio_beat_checked" type="radio" name="radio-beat" checked />
|
||||||
|
<span class="toggle"></span>
|
||||||
|
radio beat checked
|
||||||
|
</label>
|
||||||
|
</div>
|
||||||
|
<div class="col-2 col-lg-1 col-xl-1 col-xs-6">
|
||||||
|
<label for="input_radio_tenacity" class="radio radio-tenacity">
|
||||||
|
<input id="input_radio_tenacity" type="radio" name="radio-tenacity" />
|
||||||
|
<span class="toggle"></span>
|
||||||
|
radio tenacity
|
||||||
|
</label>
|
||||||
|
<label for="input_radio_tenacity_checked" class="radio radio-tenacity">
|
||||||
|
<input id="input_radio_tenacity_checked" type="radio" name="radio-tenacity" checked />
|
||||||
|
<span class="toggle"></span>
|
||||||
|
radio tenacity checked
|
||||||
|
</label>
|
||||||
|
</div>
|
||||||
|
<div class="col-2 col-lg-1 col-xl-1 col-xs-6">
|
||||||
|
<label for="input_radio_base" class="radio radio-base">
|
||||||
|
<input id="input_radio_base" type="radio" name="radio-base" />
|
||||||
|
<span class="toggle"></span>
|
||||||
|
radio base
|
||||||
|
</label>
|
||||||
|
<label for="input_radio_base_checked" class="radio radio-base">
|
||||||
|
<input id="input_radio_base_checked" type="radio" name="radio-base" checked />
|
||||||
|
<span class="toggle"></span>
|
||||||
|
radio base checked
|
||||||
|
</label>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="row section">
|
||||||
|
<div class="col-xs-6 col-sm-4 col-md-3 col-lg-2 col-xl-1">
|
||||||
|
<label for="input_switch">switch</label>
|
||||||
|
</div>
|
||||||
|
<div class="col-xs-6 col-sm-8 col-md-9 col-lg-10 col-xl-11">
|
||||||
|
<div class="row" id="input_switch">
|
||||||
|
<div class="col-2 col-lg-1 col-xl-1 col-xs-6">
|
||||||
|
<label for="input_switch_default" class="switch">
|
||||||
|
<input id="input_switch_default" type="checkbox" />
|
||||||
|
<span class="toggle"></span>
|
||||||
|
switch default
|
||||||
|
</label>
|
||||||
|
</div>
|
||||||
|
<div class="col-2 col-lg-1 col-xl-1 col-xs-6">
|
||||||
|
<label for="input_switch_hope" class="switch switch-hope">
|
||||||
|
<input id="input_switch_hope" type="checkbox" />
|
||||||
|
<span class="toggle"></span>
|
||||||
|
switch hope
|
||||||
|
</label>
|
||||||
|
</div>
|
||||||
|
<div class="col-2 col-lg-1 col-xl-1 col-xs-6">
|
||||||
|
<label for="input_switch_glint" class="switch switch-glint">
|
||||||
|
<input id="input_switch_glint" type="checkbox" />
|
||||||
|
<span class="toggle"></span>
|
||||||
|
switch glint
|
||||||
|
</label>
|
||||||
|
</div>
|
||||||
|
<div class="col-2 col-lg-1 col-xl-1 col-xs-6">
|
||||||
|
<label for="input_switch_beat" class="switch switch-beat">
|
||||||
|
<input id="input_switch_beat" type="checkbox" />
|
||||||
|
<span class="toggle"></span>
|
||||||
|
switch beat
|
||||||
|
</label>
|
||||||
|
</div>
|
||||||
|
<div class="col-2 col-lg-1 col-xl-1 col-xs-6">
|
||||||
|
<label for="input_switch_tenacity" class="switch switch-tenacity">
|
||||||
|
<input id="input_switch_tenacity" type="checkbox" />
|
||||||
|
<span class="toggle"></span>
|
||||||
|
switch tenacity
|
||||||
|
</label>
|
||||||
|
</div>
|
||||||
|
<div class="col-2 col-lg-1 col-xl-1 col-xs-6">
|
||||||
|
<label for="input_switch_base" class="switch switch-base">
|
||||||
|
<input id="input_switch_base" type="checkbox" />
|
||||||
|
<span class="toggle"></span>
|
||||||
|
switch base
|
||||||
|
</label>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</form>
|
||||||
|
<hr />
|
||||||
|
<h2 id="images">images</h2>
|
||||||
|
<p>img-auto for responsive images (max-width 100%)</p>
|
||||||
|
<div class="row">
|
||||||
|
<div class="col-xs-12 col-sm-6 col-md-4 col-lg-3 col-xl-2">
|
||||||
|
<img class="img-auto" alt="35c3 logo" src="img/35C3Logo.svg" />
|
||||||
|
</div>
|
||||||
|
<div class="col-xs-12 col-sm-6 col-md-4 col-lg-3 col-xl-2">
|
||||||
|
<img class="img-auto" alt="35c3 logo with transparent background" src="img/35C3LogoTR.svg" />
|
||||||
|
</div>
|
||||||
|
<div class="col-xs-12 col-sm-6 col-md-4 col-lg-3 col-xl-2">
|
||||||
|
<img class="img-auto" alt="35c3 logo black & white" src="img/35C3LogoBW.svg" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<hr />
|
||||||
|
<h2 id="grid">grid</h2>
|
||||||
|
<p>simple grid layout (default 12, can be configured in sass), border class added separately for visualization,
|
||||||
|
offsets are absolute! <br />
|
||||||
|
responsive classes col-xs-* (< 768px), col-sm-* (>= 768px), col-md-* (>= 922px), col-lg-* (>=
|
||||||
|
1200px),
|
||||||
|
col-xl-* (>= 1800px) </p>
|
||||||
|
<div class="row section">
|
||||||
|
<div class="col-1 border text-breakline">col-1</div>
|
||||||
|
<div class="col-11 border text-breakline">col-11</div>
|
||||||
|
</div>
|
||||||
|
<div class="row section">
|
||||||
|
<div class="col-1 col-offset-11 border text-breakline">col-1 col-offset-11</div>
|
||||||
|
</div>
|
||||||
|
<div class="row section">
|
||||||
|
<div class="col-2 border text-breakline">col-2</div>
|
||||||
|
<div class="col-10 border text-breakline">col-10</div>
|
||||||
|
</div>
|
||||||
|
<div class="row section">
|
||||||
|
<div class="col-2 col-offset-10 border text-breakline">col-2 col-offset-10</div>
|
||||||
|
</div>
|
||||||
|
<div class="row section">
|
||||||
|
<div class="col-3 border text-breakline">col-3</div>
|
||||||
|
<div class="col-9 border text-breakline">col-9</div>
|
||||||
|
</div>
|
||||||
|
<div class="row section">
|
||||||
|
<div class="col-3 col-offset-9 border text-breakline">col-3 col-offset-9</div>
|
||||||
|
</div>
|
||||||
|
<div class="row section">
|
||||||
|
<div class="col-4 border text-breakline">col-4</div>
|
||||||
|
<div class="col-8 border text-breakline">col-8</div>
|
||||||
|
</div>
|
||||||
|
<div class="row section">
|
||||||
|
<div class="col-4 col-offset-8 border text-breakline">col-4 col-offset-8</div>
|
||||||
|
</div>
|
||||||
|
<div class="row section">
|
||||||
|
<div class="col-5 border text-breakline">col-5</div>
|
||||||
|
<div class="col-7 border text-breakline">col-7</div>
|
||||||
|
</div>
|
||||||
|
<div class="row section">
|
||||||
|
<div class="col-5 col-offset-7 border text-breakline">col-5 col-offset-7</div>
|
||||||
|
</div>
|
||||||
|
<div class="row section">
|
||||||
|
<div class="col-6 border text-breakline">col-6</div>
|
||||||
|
<div class="col-6 border text-breakline">col-6</div>
|
||||||
|
</div>
|
||||||
|
<div class="row section">
|
||||||
|
<div class="col-6 col-offset-6 border text-breakline">col-6 col-offset-6</div>
|
||||||
|
</div>
|
||||||
|
<div class="row section">
|
||||||
|
<div class="col-7 border text-breakline">col-7</div>
|
||||||
|
<div class="col-5 border text-breakline">col-5</div>
|
||||||
|
</div>
|
||||||
|
<div class="row section">
|
||||||
|
<div class="col-7 col-offset-5 border text-breakline">col-7 col-offset-5</div>
|
||||||
|
</div>
|
||||||
|
<div class="row section">
|
||||||
|
<div class="col-8 border text-breakline">col-8</div>
|
||||||
|
<div class="col-4 border text-breakline">col-4</div>
|
||||||
|
</div>
|
||||||
|
<div class="row section">
|
||||||
|
<div class="col-8 col-offset-4 border text-breakline">col-8 col-offset-4</div>
|
||||||
|
</div>
|
||||||
|
<div class="row section">
|
||||||
|
<div class="col-9 border text-breakline">col-9</div>
|
||||||
|
<div class="col-3 border text-breakline">col-3</div>
|
||||||
|
</div>
|
||||||
|
<div class="row section">
|
||||||
|
<div class="col-9 col-offset-3 border text-breakline">col-9 col-offset-3</div>
|
||||||
|
</div>
|
||||||
|
<div class="row section">
|
||||||
|
<div class="col-10 border text-breakline">col-10</div>
|
||||||
|
<div class="col-2 border text-breakline">col-2</div>
|
||||||
|
</div>
|
||||||
|
<div class="row section">
|
||||||
|
<div class="col-10 col-offset-2 border text-breakline">col-10 col-offset-2</div>
|
||||||
|
</div>
|
||||||
|
<div class="row section">
|
||||||
|
<div class="col-11 border text-breakline">col-11</div>
|
||||||
|
<div class="col-1 border text-breakline">col-1</div>
|
||||||
|
</div>
|
||||||
|
<div class="row section">
|
||||||
|
<div class="col-11 col-offset-1 border text-breakline">col-11 col-offset-1</div>
|
||||||
|
</div>
|
||||||
|
<div class="row section">
|
||||||
|
<div class="col-12 border text-breakline">col-12</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<p>Nested example</p>
|
||||||
|
<div class="row section">
|
||||||
|
<div class="col-7">
|
||||||
|
<div class="row">
|
||||||
|
<div class="col-2 border text-breakline">col-2 inside col-7</div>
|
||||||
|
<div class="col-4 col-offset-6 border text-breakline">col-4 col-offset-6 inside col-8</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
<hr />
|
||||||
|
<h2 id="other">other</h2>
|
||||||
|
<h3>container</h3>
|
||||||
|
<p>container class centered page with 97% of screen limits at 768px, 992px, 1200px and 1800</p>
|
||||||
|
<h3>section</h3>
|
||||||
|
<p>adds a margin of 1em to start and end</p>
|
||||||
|
<h3>border</h3>
|
||||||
|
<p class="border">border</p>
|
||||||
|
<p class="border-fresh">border-fresh</p>
|
||||||
|
<p class="border-hope">border-hope</p>
|
||||||
|
<p class="border-glint">border-glint</p>
|
||||||
|
<p class="border-beat">border-beat</p>
|
||||||
|
<p class="border-tenacity">border-tenacity</p>
|
||||||
|
<p class="border-base">border-base</p>
|
||||||
|
<h3>horizontal line</h3>
|
||||||
|
<hr />
|
||||||
|
<hr class="hr-fresh" />
|
||||||
|
<hr class="hr-hope" />
|
||||||
|
<hr class="hr-glint" />
|
||||||
|
<hr class="hr-beat" />
|
||||||
|
<hr class="hr-tenacity" />
|
||||||
|
<hr class="hr-base" />
|
||||||
|
<h3>visibility</h3>
|
||||||
|
<table class="table text-center">
|
||||||
|
<thead>
|
||||||
|
<tr>
|
||||||
|
<th></th>
|
||||||
|
<th>< 768px</th>
|
||||||
|
<th>>= 768px</th>
|
||||||
|
<th>>= 922px</th>
|
||||||
|
<th>>= 1200px</th>
|
||||||
|
<th>>= 1800px</th>
|
||||||
|
</tr>
|
||||||
|
</thead>
|
||||||
|
<tbody>
|
||||||
|
<tr>
|
||||||
|
<th>visible</th>
|
||||||
|
<td>
|
||||||
|
<span class="text-hope" alt="visible">☑</span>
|
||||||
|
</td>
|
||||||
|
<td>
|
||||||
|
<span class="text-hope" alt="visible">☑</span>
|
||||||
|
</td>
|
||||||
|
<td>
|
||||||
|
<span class="text-hope" alt="visible">☑</span>
|
||||||
|
</td>
|
||||||
|
<td>
|
||||||
|
<span class="text-hope" alt="visible">☑</span>
|
||||||
|
</td>
|
||||||
|
<td>
|
||||||
|
<span class="text-hope" alt="visible">☑</span>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<th>visible-xs</th>
|
||||||
|
<td>
|
||||||
|
<span class="text-hope" alt="visible">☑</span>
|
||||||
|
</td>
|
||||||
|
<td>
|
||||||
|
<span class="text-beat" alt="not visible">☐</span>
|
||||||
|
</td>
|
||||||
|
<td>
|
||||||
|
<span class="text-beat" alt="not visible">☐</span>
|
||||||
|
</td>
|
||||||
|
<td>
|
||||||
|
<span class="text-beat" alt="not visible">☐</span>
|
||||||
|
</td>
|
||||||
|
<td>
|
||||||
|
<span class="text-beat" alt="not visible">☐</span>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<th>visible-sm</th>
|
||||||
|
<td>
|
||||||
|
<span class="text-beat" alt="not visible">☐</span>
|
||||||
|
</td>
|
||||||
|
<td>
|
||||||
|
<span class="text-hope" alt="visible">☑</span>
|
||||||
|
</td>
|
||||||
|
<td>
|
||||||
|
<span class="text-beat" alt="not visible">☐</span>
|
||||||
|
</td>
|
||||||
|
<td>
|
||||||
|
<span class="text-beat" alt="not visible">☐</span>
|
||||||
|
</td>
|
||||||
|
<td>
|
||||||
|
<span class="text-beat" alt="not visible">☐</span>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<th>visible-md</th>
|
||||||
|
<td>
|
||||||
|
<span class="text-beat" alt="not visible">☐</span>
|
||||||
|
</td>
|
||||||
|
<td>
|
||||||
|
<span class="text-beat" alt="not visible">☐</span>
|
||||||
|
</td>
|
||||||
|
<td>
|
||||||
|
<span class="text-hope" alt="visible">☑</span>
|
||||||
|
</td>
|
||||||
|
<td>
|
||||||
|
<span class="text-beat" alt="not visible">☐</span>
|
||||||
|
</td>
|
||||||
|
<td>
|
||||||
|
<span class="text-beat" alt="not visible">☐</span>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<th>visible-lg</th>
|
||||||
|
<td>
|
||||||
|
<span class="text-beat" alt="not visible">☐</span>
|
||||||
|
</td>
|
||||||
|
<td>
|
||||||
|
<span class="text-beat" alt="not visible">☐</span>
|
||||||
|
</td>
|
||||||
|
<td>
|
||||||
|
<span class="text-beat" alt="not visible">☐</span>
|
||||||
|
</td>
|
||||||
|
<td>
|
||||||
|
<span class="text-hope" alt="visible">☑</span>
|
||||||
|
</td>
|
||||||
|
<td>
|
||||||
|
<span class="text-beat" alt="not visible">☐</span>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<th>visible-xl</th>
|
||||||
|
<td>
|
||||||
|
<span class="text-beat" alt="not visible">☐</span>
|
||||||
|
</td>
|
||||||
|
<td>
|
||||||
|
<span class="text-beat" alt="not visible">☐</span>
|
||||||
|
</td>
|
||||||
|
<td>
|
||||||
|
<span class="text-beat" alt="not visible">☐</span>
|
||||||
|
</td>
|
||||||
|
<td>
|
||||||
|
<span class="text-beat" alt="not visible">☐</span>
|
||||||
|
</td>
|
||||||
|
<td>
|
||||||
|
<span class="text-hope" alt="visible">☑</span>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
</tbody>
|
||||||
|
<tbody>
|
||||||
|
<tr>
|
||||||
|
<th>hidden</th>
|
||||||
|
<td>
|
||||||
|
<span class="text-beat" alt="not visible">☐</span>
|
||||||
|
</td>
|
||||||
|
<td>
|
||||||
|
<span class="text-beat" alt="not visible">☐</span>
|
||||||
|
</td>
|
||||||
|
<td>
|
||||||
|
<span class="text-beat" alt="not visible">☐</span>
|
||||||
|
</td>
|
||||||
|
<td>
|
||||||
|
<span class="text-beat" alt="not visible">☐</span>
|
||||||
|
</td>
|
||||||
|
<td>
|
||||||
|
<span class="text-beat" alt="not visible">☐</span>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<th>hidden-xs</th>
|
||||||
|
<td>
|
||||||
|
<span class="text-beat" alt="not visible">☐</span>
|
||||||
|
</td>
|
||||||
|
<td>
|
||||||
|
<span class="text-hope" alt="visible">☑</span>
|
||||||
|
</td>
|
||||||
|
<td>
|
||||||
|
<span class="text-hope" alt="visible">☑</span>
|
||||||
|
</td>
|
||||||
|
<td>
|
||||||
|
<span class="text-hope" alt="visible">☑</span>
|
||||||
|
</td>
|
||||||
|
<td>
|
||||||
|
<span class="text-hope" alt="visible">☑</span>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<th>hidden-sm</th>
|
||||||
|
<td>
|
||||||
|
<span class="text-hope" alt="visible">☑</span>
|
||||||
|
</td>
|
||||||
|
<td>
|
||||||
|
<span class="text-beat" alt="not visible">☐</span>
|
||||||
|
</td>
|
||||||
|
<td>
|
||||||
|
<span class="text-hope" alt="visible">☑</span>
|
||||||
|
</td>
|
||||||
|
<td>
|
||||||
|
<span class="text-hope" alt="visible">☑</span>
|
||||||
|
</td>
|
||||||
|
<td>
|
||||||
|
<span class="text-hope" alt="visible">☑</span>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<th>hidden-md</th>
|
||||||
|
<td>
|
||||||
|
<span class="text-hope" alt="visible">☑</span>
|
||||||
|
</td>
|
||||||
|
<td>
|
||||||
|
<span class="text-hope" alt="visible">☑</span>
|
||||||
|
</td>
|
||||||
|
<td>
|
||||||
|
<span class="text-beat" alt="not visible">☐</span>
|
||||||
|
</td>
|
||||||
|
<td>
|
||||||
|
<span class="text-hope" alt="visible">☑</span>
|
||||||
|
</td>
|
||||||
|
<td>
|
||||||
|
<span class="text-hope" alt="visible">☑</span>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<th>hidden-lg</th>
|
||||||
|
<td>
|
||||||
|
<span class="text-hope" alt="visible">☑</span>
|
||||||
|
</td>
|
||||||
|
<td>
|
||||||
|
<span class="text-hope" alt="visible">☑</span>
|
||||||
|
</td>
|
||||||
|
<td>
|
||||||
|
<span class="text-hope" alt="visible">☑</span>
|
||||||
|
</td>
|
||||||
|
<td>
|
||||||
|
<span class="text-beat" alt="not visible">☐</span>
|
||||||
|
</td>
|
||||||
|
<td>
|
||||||
|
<span class="text-hope" alt="visible">☑</span>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<th>hidden-xl</th>
|
||||||
|
<td>
|
||||||
|
<span class="text-hope" alt="visible">☑</span>
|
||||||
|
</td>
|
||||||
|
<td>
|
||||||
|
<span class="text-hope" alt="visible">☑</span>
|
||||||
|
</td>
|
||||||
|
<td>
|
||||||
|
<span class="text-hope" alt="visible">☑</span>
|
||||||
|
</td>
|
||||||
|
<td>
|
||||||
|
<span class="text-hope" alt="visible">☑</span>
|
||||||
|
</td>
|
||||||
|
<td>
|
||||||
|
<span class="text-beat" alt="not visible">☐</span>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
|
||||||
|
<table class="table text-center">
|
||||||
|
<thead>
|
||||||
|
<tr>
|
||||||
|
<th></th>
|
||||||
|
<th>css</th>
|
||||||
|
<th>screen</th>
|
||||||
|
<th>print</th>
|
||||||
|
</tr>
|
||||||
|
</thead>
|
||||||
|
<tbody>
|
||||||
|
<tr>
|
||||||
|
<th>visible, visible-*, visible-block, visible-*-block</th>
|
||||||
|
<td>display: block;</td>
|
||||||
|
<td>
|
||||||
|
<span class="text-hope" alt="visible">☑</span>
|
||||||
|
</td>
|
||||||
|
<td>
|
||||||
|
<span class="text-hope" alt="visible">☑</span>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<th>visible-inline, visible-*-inline</th>
|
||||||
|
<td>display: inline;</td>
|
||||||
|
<td>
|
||||||
|
<span class="text-hope" alt="visible">☑</span>
|
||||||
|
</td>
|
||||||
|
<td>
|
||||||
|
<span class="text-hope" alt="visible">☑</span>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<th>visible-inline-block, visible-*-inline-block</th>
|
||||||
|
<td>display: inline-block;</td>
|
||||||
|
<td>
|
||||||
|
<span class="text-hope" alt="visible">☑</span>
|
||||||
|
</td>
|
||||||
|
<td>
|
||||||
|
<span class="text-hope" alt="visible">☑</span>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
</tbody>
|
||||||
|
<tbody>
|
||||||
|
<tr>
|
||||||
|
<th>hidden-print</th>
|
||||||
|
<td></td>
|
||||||
|
<td>
|
||||||
|
<span class="text-hope" alt="visible">☑</span>
|
||||||
|
</td>
|
||||||
|
<td>
|
||||||
|
<span class="text-beat" alt="not visible">☐</span>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<th>visible-print, visible-print-block</th>
|
||||||
|
<td>display: block;</td>
|
||||||
|
<td>
|
||||||
|
<span class="text-beat" alt="not visible">☐</span>
|
||||||
|
</td>
|
||||||
|
<td>
|
||||||
|
<span class="text-hope" alt="visible">☑</span>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<th>visible-print-inline</th>
|
||||||
|
<td>display: inline;</td>
|
||||||
|
<td>
|
||||||
|
<span class="text-beat" alt="not visible">☐</span>
|
||||||
|
</td>
|
||||||
|
<td>
|
||||||
|
<span class="text-hope" alt="visible">☑</span>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<th>visible-print-inline-block</th>
|
||||||
|
<td>display: inline-block;</td>
|
||||||
|
<td>
|
||||||
|
<span class="text-beat" alt="not visible">☐</span>
|
||||||
|
</td>
|
||||||
|
<td>
|
||||||
|
<span class="text-hope" alt="visible">☑</span>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
|
||||||
|
<h3>float</h3>
|
||||||
|
<p class="float-left">float-left</p>
|
||||||
|
<p class="float-right">float-right</p>
|
||||||
|
<p class="clear">clear</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</body>
|
||||||
|
|
||||||
|
</html>
|
||||||
Loading…
Reference in New Issue
Block a user