mirror of
https://github.com/pierre42100/comunic
synced 2025-06-21 01:25:20 +00:00
First commit
This commit is contained in:
Pierre Hubert
171
developer/user/themes/antimatter/scss/template/_blog.scss
Normal file
171
developer/user/themes/antimatter/scss/template/_blog.scss
Normal file
@ -0,0 +1,171 @@
|
||||
.blog-header {
|
||||
|
||||
padding-top: 2rem;
|
||||
padding-bottom: 2rem;
|
||||
|
||||
&.blog-header-image {
|
||||
background-size: cover;
|
||||
background-position: center;
|
||||
|
||||
h1, h2 {
|
||||
color: $header-text;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 4rem;
|
||||
margin-top: 0;
|
||||
@include breakpoint(tablet-range) {
|
||||
font-size: 3rem;
|
||||
}
|
||||
@include breakpoint(mobile-only) {
|
||||
font-size: 2.5rem;
|
||||
line-height: 1.2;
|
||||
margin-bottom: 2.5rem;
|
||||
}
|
||||
}
|
||||
|
||||
& + .blog-content {
|
||||
padding-top: $padding-vert;
|
||||
}
|
||||
}
|
||||
|
||||
// List Blog Item
|
||||
.list-item {
|
||||
|
||||
border-bottom: 1px solid $border-color;
|
||||
margin-bottom: $padding-vert;
|
||||
|
||||
&:last-child {
|
||||
border-bottom: 0;
|
||||
}
|
||||
|
||||
.list-blog-header {
|
||||
position: relative;
|
||||
h4 {
|
||||
|
||||
margin-bottom: 0.5rem;
|
||||
a {
|
||||
color: $core-text;
|
||||
&:hover {
|
||||
color: $core-accent;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
img {
|
||||
display: block;
|
||||
margin-top: 1rem;
|
||||
border-radius: $border-radius;
|
||||
}
|
||||
}
|
||||
|
||||
.list-blog-date {
|
||||
float: right;
|
||||
text-align: center;
|
||||
span {
|
||||
display: block;
|
||||
font-size: 1.75rem;
|
||||
font-weight: $font-weight-bold;
|
||||
line-height: 110%;
|
||||
}
|
||||
em {
|
||||
display: block;
|
||||
border-top: 1px solid $border-color;
|
||||
font-style: normal;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Bigger first para
|
||||
.blog-content-item {
|
||||
.list-blog-padding > p:nth-child(2) {
|
||||
font-size: $core-font-size + 0.2rem;
|
||||
}
|
||||
}
|
||||
|
||||
// Tags
|
||||
.tags {
|
||||
a {
|
||||
display: inline-block;
|
||||
font-size: $core-font-size - 0.2rem;
|
||||
border: 1px solid $core-accent;
|
||||
border-radius: $border-radius;
|
||||
padding: 0.1rem 0.4rem;
|
||||
margin-bottom: 0.2rem;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
}
|
||||
|
||||
// Archives & Related-Pages
|
||||
.archives, .related-pages {
|
||||
padding: 0;
|
||||
list-style: none;
|
||||
li {
|
||||
border-bottom: 1px solid $border-color;
|
||||
line-height: $core-font-size + 1rem;
|
||||
&:last-child {
|
||||
border-bottom: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.related-pages {
|
||||
li {
|
||||
a {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
.score {
|
||||
display: block;
|
||||
float: right;
|
||||
color: #999;
|
||||
font-size: 85%
|
||||
}
|
||||
}
|
||||
|
||||
// Syndicate
|
||||
.syndicate {
|
||||
a {
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
}
|
||||
|
||||
// Breadcrumbs
|
||||
div#breadcrumbs {
|
||||
padding-left: 0;
|
||||
@include breakpoint(mobile-only) {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
// Sidebar
|
||||
#sidebar {
|
||||
padding-left: 3rem;
|
||||
@include breakpoint(mobile-only) {
|
||||
padding-left: 0;
|
||||
}
|
||||
.sidebar-content {
|
||||
h4 {
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
p, ul {
|
||||
margin-top: 1rem;
|
||||
}
|
||||
margin-bottom: $padding-vert;
|
||||
}
|
||||
}
|
||||
|
||||
// Pagination
|
||||
ul.pagination {
|
||||
margin: 0 0 $padding-vert;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
// Prev / Next
|
||||
.prev-next {
|
||||
margin-top: 5rem;
|
||||
text-align: center;
|
||||
}
|
||||
60
developer/user/themes/antimatter/scss/template/_bullets.scss
Normal file
60
developer/user/themes/antimatter/scss/template/_bullets.scss
Normal file
@ -0,0 +1,60 @@
|
||||
.bullets {
|
||||
margin: $leading-margin 0;
|
||||
margin-left: -$leading-margin / 2;
|
||||
margin-right: -$leading-margin / 2;
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
.bullet {
|
||||
float: left;
|
||||
padding: 0 $leading-margin / 2;
|
||||
}
|
||||
|
||||
.two-column-bullet {
|
||||
@include columns(2);
|
||||
@include breakpoint(mobile-only) {
|
||||
@include columns(1);
|
||||
}
|
||||
}
|
||||
|
||||
.three-column-bullet {
|
||||
@include columns(3);
|
||||
@include breakpoint(mobile-only) {
|
||||
@include columns(1);
|
||||
}
|
||||
}
|
||||
|
||||
.four-column-bullet {
|
||||
@include columns(4);
|
||||
@include breakpoint(mobile-only) {
|
||||
@include columns(1);
|
||||
}
|
||||
}
|
||||
|
||||
.bullet-icon {
|
||||
float: left;
|
||||
background: $bullet-icon-color-1;
|
||||
padding: $bullet-icon-size / 4;
|
||||
width: $bullet-icon-size;
|
||||
height: $bullet-icon-size;
|
||||
border-radius: 50%;
|
||||
color: $white;
|
||||
font-size: $bullet-icon-size / 2;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.bullet-icon-1 {
|
||||
background: $bullet-icon-color-1;
|
||||
}
|
||||
|
||||
.bullet-icon-2 {
|
||||
background: $bullet-icon-color-2;
|
||||
}
|
||||
|
||||
.bullet-icon-3 {
|
||||
background: $bullet-icon-color-3;
|
||||
}
|
||||
|
||||
.bullet-content {
|
||||
margin-left: $bullet-icon-size * 1.3;
|
||||
}
|
||||
@ -0,0 +1,9 @@
|
||||
.button {
|
||||
@extend %button;
|
||||
@include button-color($core-accent);
|
||||
}
|
||||
|
||||
.button-secondary {
|
||||
@extend %button;
|
||||
@include button-color($secondary-link);
|
||||
}
|
||||
58
developer/user/themes/antimatter/scss/template/_core.scss
Normal file
58
developer/user/themes/antimatter/scss/template/_core.scss
Normal file
@ -0,0 +1,58 @@
|
||||
html, body {
|
||||
height: 100%; // use !important to override slidebars.min.css
|
||||
}
|
||||
|
||||
body {
|
||||
background: $page-bg;
|
||||
color: $core-text;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
}
|
||||
|
||||
a {
|
||||
color: $core-accent;
|
||||
&:hover {
|
||||
color: darken($core-accent, 20%);
|
||||
}
|
||||
}
|
||||
|
||||
b, strong {
|
||||
font-weight: $font-weight-bold
|
||||
}
|
||||
|
||||
// Global Container
|
||||
#container {
|
||||
min-height: 100%;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
// Fullwidth styles
|
||||
.fullwidth {
|
||||
#body {
|
||||
padding-left: 0;
|
||||
padding-right: 0;
|
||||
}
|
||||
#header, #breadcrumbs, .blog-header, .blog-content-item, .content-wrapper, ul.pagination, #body > .modular-row {
|
||||
@extend .padding-horiz;
|
||||
}
|
||||
}
|
||||
|
||||
// Global body styling
|
||||
#body {
|
||||
@extend .default-animation;
|
||||
@extend .padding-horiz;
|
||||
|
||||
background: $page-bg;
|
||||
padding-top: $header-height + $padding-vert;
|
||||
padding-bottom: $footer-height + $padding-vert + 2rem;
|
||||
}
|
||||
|
||||
// Alignment
|
||||
.left {
|
||||
float: left;
|
||||
}
|
||||
|
||||
.right {
|
||||
float: right;
|
||||
}
|
||||
|
||||
15
developer/user/themes/antimatter/scss/template/_custom.scss
Normal file
15
developer/user/themes/antimatter/scss/template/_custom.scss
Normal file
@ -0,0 +1,15 @@
|
||||
// Your custom SCSS should be written here...
|
||||
|
||||
.grav-lightslider {
|
||||
.lSSlideOuter {
|
||||
.lSPager.lSpg {
|
||||
> li a {
|
||||
z-index: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
#body > script:first-child + .grav-lightslider {
|
||||
margin-top: -3rem;
|
||||
}
|
||||
17
developer/user/themes/antimatter/scss/template/_errors.scss
Normal file
17
developer/user/themes/antimatter/scss/template/_errors.scss
Normal file
@ -0,0 +1,17 @@
|
||||
// Error specific styling
|
||||
#error {
|
||||
text-align: center;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
height: 100%;
|
||||
padding-bottom: 6rem;
|
||||
|
||||
h1 {
|
||||
font-size: $core-font-size + 4.0rem;
|
||||
}
|
||||
|
||||
p {
|
||||
margin: 1rem 0;
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,22 @@
|
||||
.default-animation {
|
||||
@include transition(all 0.5s ease);
|
||||
}
|
||||
|
||||
.padding-horiz {
|
||||
padding-left: $padding-horiz;
|
||||
padding-right: $padding-horiz;
|
||||
@include breakpoint(desktop-only) {
|
||||
padding-left: $padding-horiz - 3rem;
|
||||
padding-right: $padding-horiz - 3rem;
|
||||
}
|
||||
|
||||
@include breakpoint(mobile-only) {
|
||||
padding-left: $padding-horiz - 6rem;
|
||||
padding-right: $padding-horiz - 6rem;
|
||||
}
|
||||
}
|
||||
|
||||
.padding-vert {
|
||||
padding-top: $padding-vert;
|
||||
padding-bottom: $padding-vert;
|
||||
}
|
||||
@ -0,0 +1,3 @@
|
||||
// Import Google Web Fonts
|
||||
@import url(//fonts.googleapis.com/css?family=Montserrat:400|Raleway:300,400,600|Inconsolata);
|
||||
|
||||
42
developer/user/themes/antimatter/scss/template/_footer.scss
Normal file
42
developer/user/themes/antimatter/scss/template/_footer.scss
Normal file
@ -0,0 +1,42 @@
|
||||
// Footer styling
|
||||
#footer {
|
||||
position: absolute;
|
||||
background: $footer-bg;
|
||||
height: $footer-height;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
@extend .padding-horiz;
|
||||
color: $footer-text;
|
||||
text-align: center;
|
||||
|
||||
a:hover {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.totop {
|
||||
position: absolute;
|
||||
bottom: $footer-height - 1rem;
|
||||
text-align: center;
|
||||
left: 0;
|
||||
right: 0;
|
||||
span {
|
||||
font-size: 1.7rem;
|
||||
line-height: 2.5rem;
|
||||
background: $footer-bg;
|
||||
width: 3rem;
|
||||
height: 2rem;
|
||||
border-radius: $border-radius;
|
||||
display: inline-block;
|
||||
text-align: top;
|
||||
}
|
||||
}
|
||||
|
||||
p {
|
||||
@extend %vertical-align;
|
||||
margin: 0;
|
||||
.fa {
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
}
|
||||
43
developer/user/themes/antimatter/scss/template/_forms.scss
Normal file
43
developer/user/themes/antimatter/scss/template/_forms.scss
Normal file
@ -0,0 +1,43 @@
|
||||
fieldset {
|
||||
border: 1px solid $core-border-color;
|
||||
}
|
||||
|
||||
textarea, #{$all-text-inputs}, select[multiple=multiple] {
|
||||
background-color: white;
|
||||
border: 1px solid $core-border-color;
|
||||
box-shadow: $core-box-shadow;
|
||||
|
||||
&:hover {
|
||||
border-color: $core-border-color-hover;
|
||||
}
|
||||
|
||||
&:focus {
|
||||
border-color: $core-border-color-focus;
|
||||
box-shadow: $core-box-shadow-focus;
|
||||
}
|
||||
}
|
||||
|
||||
label {
|
||||
@extend strong;
|
||||
}
|
||||
|
||||
// Forms
|
||||
.form-field {
|
||||
.required {
|
||||
color: #F3443F;
|
||||
font-size: $core-font-size + 2rem;
|
||||
line-height: $core-font-size + 2rem;
|
||||
vertical-align: top;
|
||||
height: 1.5rem;
|
||||
display: inline-block;
|
||||
}
|
||||
}
|
||||
|
||||
form {
|
||||
.buttons {
|
||||
text-align: center;
|
||||
}
|
||||
input {
|
||||
font-weight: 400;
|
||||
}
|
||||
}
|
||||
280
developer/user/themes/antimatter/scss/template/_header.scss
Normal file
280
developer/user/themes/antimatter/scss/template/_header.scss
Normal file
@ -0,0 +1,280 @@
|
||||
// Header styling
|
||||
$dropdown-color: #f6f6f6;
|
||||
|
||||
#header {
|
||||
@extend .default-animation;
|
||||
@extend .padding-horiz;
|
||||
position: fixed;
|
||||
z-index: 10;
|
||||
width: 100%;
|
||||
height: $header-height;
|
||||
background-color: rgba(255,255,255,0.90);
|
||||
box-shadow: 0 0.05rem 1rem rgba(0,0,0, 0.15);
|
||||
|
||||
// scroll based changes
|
||||
&.scrolled {
|
||||
height: $header-height - 2rem;
|
||||
background-color: rgba(255,255,255,0.90) !important;
|
||||
box-shadow: 0 0.05rem 1rem rgba(0,0,0, 0.15) !important;
|
||||
|
||||
#logo h3 {
|
||||
color: $core-text !important;
|
||||
font-size: 1.6rem !important;
|
||||
}
|
||||
#logo a, #navbar span {
|
||||
color: $core-text !important;
|
||||
}
|
||||
#navbar a {
|
||||
color: $core-accent !important;
|
||||
&:hover {
|
||||
color: darken($core-accent, 20%) !important;
|
||||
}
|
||||
}
|
||||
#navbar a:before, #navbar a:after {
|
||||
background-color: $core-accent !important;
|
||||
}
|
||||
|
||||
.navigation {
|
||||
margin-top: 0.5rem !important;
|
||||
}
|
||||
}
|
||||
|
||||
// set heights for vertical centering
|
||||
> .grid, #logo, #navbar {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
#logo {
|
||||
float: left;
|
||||
h3 {
|
||||
@extend .default-animation;
|
||||
@extend %vertical-align;
|
||||
font-size: 2rem;
|
||||
line-height: 2rem;
|
||||
margin: 0;
|
||||
text-transform: uppercase;
|
||||
a {
|
||||
color: $core-text;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
#navbar {
|
||||
font-size: $core-font-size - 0.1rem;
|
||||
|
||||
/* Child Indicator */
|
||||
.has-children {
|
||||
|
||||
& > a {
|
||||
& > span {
|
||||
display: inline-block;
|
||||
padding-right: 8px;
|
||||
|
||||
&:after {
|
||||
font-family: FontAwesome;
|
||||
content: '\f107';
|
||||
position: absolute;
|
||||
display: inline-block;
|
||||
right: 8px;
|
||||
top: 4px;
|
||||
}
|
||||
}
|
||||
&:after, &:before {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
& .has-children > a > span:after {
|
||||
content: '\f105';
|
||||
}
|
||||
}
|
||||
|
||||
.navigation > .has-children:hover > a {
|
||||
background: $dropdown-color;
|
||||
border: 1px solid darken($dropdown-color, 4%);
|
||||
border-bottom-color: $dropdown-color;
|
||||
margin: -1px -1px 0 -1px;
|
||||
z-index: 1000;
|
||||
position: relative;
|
||||
padding-bottom: 1px;
|
||||
}
|
||||
|
||||
ul {
|
||||
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
list-style: none;
|
||||
|
||||
&.navigation {
|
||||
display: inline-block;
|
||||
float: right;
|
||||
@extend .default-animation;
|
||||
|
||||
margin-top: 1.4rem;
|
||||
|
||||
li {
|
||||
float: left;
|
||||
position: relative;
|
||||
|
||||
a {
|
||||
font-family: $font-family-header;
|
||||
display: inline-block;
|
||||
padding: 0.3rem 0.8rem;
|
||||
|
||||
-webkit-backface-visibility: hidden;
|
||||
|
||||
|
||||
&:before, &:after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 1px;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
background-color: $core-accent;
|
||||
visibility: hidden;
|
||||
@include transform(scaleX(0));
|
||||
@include transition(all 0.2s ease);
|
||||
|
||||
}
|
||||
|
||||
&:hover:before {
|
||||
visibility: visible;
|
||||
@include transform(scaleX(0.75));
|
||||
}
|
||||
|
||||
&.active:after {
|
||||
top: 0;
|
||||
visibility: visible;
|
||||
@include transform(scaleX(0.75));
|
||||
}
|
||||
}
|
||||
|
||||
&.active {
|
||||
a:after {
|
||||
top: 0;
|
||||
visibility: visible;
|
||||
@include transform(scaleX(0.75));
|
||||
}
|
||||
}
|
||||
|
||||
/*Active dropdown nav item */
|
||||
ul {
|
||||
position: absolute;
|
||||
background-color: $dropdown-color;
|
||||
border: 1px solid darken($dropdown-color, 4%);
|
||||
border-top: 0;
|
||||
min-width: 12rem;
|
||||
text-align: left;
|
||||
z-index: 999;
|
||||
left: -1px;
|
||||
display: none;
|
||||
}
|
||||
|
||||
ul li {
|
||||
display: block;
|
||||
float: none;
|
||||
|
||||
/* Active Dropdown nav item */
|
||||
&.active > a {
|
||||
background-color: darken($dropdown-color, 4%);
|
||||
color: $core-accent;
|
||||
}
|
||||
|
||||
&:hover > a {
|
||||
background-color: $core-accent;
|
||||
color: $white;
|
||||
}
|
||||
|
||||
a {
|
||||
display: block;
|
||||
margin: 0 -1px;
|
||||
|
||||
&:after, &:before {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* Dropdown CSS */
|
||||
ul ul {
|
||||
left: 100%;
|
||||
top: 0px;
|
||||
}
|
||||
|
||||
/* Active on Hover */
|
||||
&:hover > ul {
|
||||
display: block;
|
||||
}
|
||||
|
||||
}
|
||||
@include breakpoint(desktop-only) {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.panel-activation {
|
||||
@extend %vertical-align;
|
||||
padding: 1rem;
|
||||
display: none;
|
||||
font-size: 1.8rem;
|
||||
cursor: pointer;
|
||||
float: right;
|
||||
@include breakpoint(desktop-only) {
|
||||
display: inline-block;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
// Header Image
|
||||
.header-image {
|
||||
&.fullwidth {
|
||||
#body {
|
||||
padding-left: 0;
|
||||
padding-right: 0;
|
||||
|
||||
>.listing-row {
|
||||
padding-left: $padding-horiz;
|
||||
padding-right: $padding-horiz;
|
||||
}
|
||||
}
|
||||
}
|
||||
.listing-row:last-child {
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
|
||||
#body {
|
||||
.flush-top {
|
||||
margin-top: - $header-height - $padding-vert - 1.5rem;
|
||||
padding-top: $header-height + 4rem;
|
||||
}
|
||||
}
|
||||
|
||||
#breadcrumbs {
|
||||
margin-top: 1rem;
|
||||
}
|
||||
|
||||
#header {
|
||||
background-color: rgba($header-text,0);
|
||||
box-shadow: none;
|
||||
|
||||
.navigation .has-children:hover a {
|
||||
color: $core-accent;
|
||||
}
|
||||
|
||||
#logo h3, #logo a {
|
||||
color: $header-text;
|
||||
}
|
||||
a, .menu-btn {
|
||||
color: $header-text;
|
||||
}
|
||||
a:before, a:after {
|
||||
background-color: rgba($header-text,0.7) !important;
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
74
developer/user/themes/antimatter/scss/template/_panel.scss
Normal file
74
developer/user/themes/antimatter/scss/template/_panel.scss
Normal file
@ -0,0 +1,74 @@
|
||||
$sidebar-color: #333;
|
||||
$panel-padding: 1rem;
|
||||
$panel-text: #ddd;
|
||||
|
||||
.sb-slidebar {
|
||||
background-color: $sidebar-color !important;
|
||||
}
|
||||
|
||||
#panel {
|
||||
padding-top: $panel-padding;
|
||||
color: $panel-text;
|
||||
.navigation {
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
|
||||
li {
|
||||
a {
|
||||
color: $panel-text;
|
||||
display: block;
|
||||
padding: 0.5rem 1rem;
|
||||
font-weight: 600;
|
||||
|
||||
&:hover {
|
||||
color: lighten($panel-text,20%);
|
||||
background-color: darken($sidebar-color,5%);
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
border-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
&.active {
|
||||
& > a {
|
||||
background: #fff;
|
||||
color: $core-text;
|
||||
&:hover {
|
||||
color: $core-text;
|
||||
}
|
||||
}
|
||||
}
|
||||
border-bottom: 1px solid lighten($sidebar-color,4%);
|
||||
&:first-child {
|
||||
border-top: 1px solid lighten($sidebar-color,4%);
|
||||
}
|
||||
|
||||
ul {
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
|
||||
li {
|
||||
border: 0 !important;
|
||||
a {
|
||||
color: darken($panel-text, 10%);
|
||||
padding: 0.2rem 1rem 0.2rem 2rem;
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
li a {
|
||||
padding-left: 3rem;
|
||||
li a {
|
||||
padding-left: 4rem;
|
||||
}
|
||||
}
|
||||
&.active {
|
||||
& > a {
|
||||
background: #ccc;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -0,0 +1,64 @@
|
||||
.simplesearch {
|
||||
|
||||
h1 {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.center {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
|
||||
input {
|
||||
display: inline-block;
|
||||
max-width: 30rem;
|
||||
font-size: 2rem;
|
||||
}
|
||||
|
||||
.search-image {
|
||||
margin-top: 1rem;
|
||||
img {
|
||||
border-radius: 4px;
|
||||
|
||||
@include breakpoint(mobile-only) {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.search-item {
|
||||
@include breakpoint(mobile-only) {
|
||||
margin-left: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.search-wrapper {
|
||||
.search-submit {
|
||||
height: 52px;
|
||||
padding: 0 10px;
|
||||
img {
|
||||
width: 30px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.search-details {
|
||||
float: right;
|
||||
margin-top: -2.5rem;
|
||||
font-weight: bold;
|
||||
font-size: 1rem;
|
||||
color: lighten($core-text,20%);
|
||||
|
||||
@include breakpoint(mobile-only) {
|
||||
float: none;
|
||||
margin-top: -0.2rem;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
}
|
||||
|
||||
hr {
|
||||
border-bottom: 1px solid #eee;
|
||||
}
|
||||
|
||||
}
|
||||
15
developer/user/themes/antimatter/scss/template/_tables.scss
Normal file
15
developer/user/themes/antimatter/scss/template/_tables.scss
Normal file
@ -0,0 +1,15 @@
|
||||
table {
|
||||
border: 1px solid lighten($core-border-color,5%);
|
||||
table-layout: auto;
|
||||
}
|
||||
|
||||
th {
|
||||
@extend strong;
|
||||
background: lighten($core-border-color,10%);
|
||||
padding: 0.5rem;
|
||||
}
|
||||
|
||||
td {
|
||||
padding: 0.5rem;
|
||||
border: 1px solid lighten($core-border-color,5%);
|
||||
}
|
||||
236
developer/user/themes/antimatter/scss/template/_typography.scss
Normal file
236
developer/user/themes/antimatter/scss/template/_typography.scss
Normal file
@ -0,0 +1,236 @@
|
||||
// Body Base
|
||||
html, body, button, input, select, textarea, .pure-g, .pure-g [class *= "pure-u"] {
|
||||
font-family: $font-family-default;
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
// Headings
|
||||
h1, h2, h3, h4, h5, h6 {
|
||||
font-family: $font-family-header;
|
||||
font-weight: 400;
|
||||
text-rendering: optimizeLegibility;
|
||||
letter-spacing: -0px;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: $h1-font-size;
|
||||
@include breakpoint(mobile-only) {
|
||||
font-size: 2.5rem;
|
||||
line-height: 1.2;
|
||||
margin-bottom: 2.5rem;
|
||||
}
|
||||
}
|
||||
|
||||
h2 {
|
||||
@include breakpoint(tablet-range) {
|
||||
font-size: $h2-font-size - .40;
|
||||
}
|
||||
@include breakpoint(mobile-only) {
|
||||
font-size: $h2-font-size - .50;
|
||||
}
|
||||
}
|
||||
|
||||
h3 {
|
||||
@include breakpoint(tablet-range) {
|
||||
font-size: $h3-font-size - .40;
|
||||
}
|
||||
@include breakpoint(mobile-only) {
|
||||
font-size: $h3-font-size - .50;
|
||||
}
|
||||
}
|
||||
|
||||
h4 {
|
||||
@include breakpoint(tablet-range) {
|
||||
font-size: $h4-font-size - .40;
|
||||
}
|
||||
@include breakpoint(mobile-only) {
|
||||
font-size: $h4-font-size - .50;
|
||||
}
|
||||
}
|
||||
|
||||
h1 {
|
||||
text-align: center;
|
||||
letter-spacing: -3px;
|
||||
}
|
||||
|
||||
h2 {
|
||||
letter-spacing: -2px;
|
||||
}
|
||||
|
||||
h3 {
|
||||
letter-spacing: -1px;
|
||||
}
|
||||
|
||||
h1 + h2 {
|
||||
margin: -2rem 0 2rem 0;
|
||||
font-size: 2rem;
|
||||
@include breakpoint(tablet-range) {
|
||||
font-size: 1.6rem;
|
||||
}
|
||||
@include breakpoint(mobile-only) {
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
line-height: 1;
|
||||
text-align: center;
|
||||
font-family: $font-family-default;
|
||||
font-weight: 300;
|
||||
}
|
||||
|
||||
h2 + h3 {
|
||||
margin: 0.5rem 0 2rem 0;
|
||||
font-size: 2rem;
|
||||
@include breakpoint(tablet-range) {
|
||||
font-size: 1.6rem;
|
||||
}
|
||||
@include breakpoint(mobile-only) {
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
line-height: 1;
|
||||
text-align: center;
|
||||
font-family: $font-family-default;
|
||||
font-weight: 300;
|
||||
}
|
||||
|
||||
|
||||
// Blockquote
|
||||
blockquote {
|
||||
border-left: 10px solid $rule-color;
|
||||
p {
|
||||
font-size: 1.1rem;
|
||||
color: #999;
|
||||
}
|
||||
cite {
|
||||
display: block;
|
||||
text-align: right;
|
||||
color: #666;
|
||||
font-size: 1.2rem;
|
||||
}
|
||||
}
|
||||
|
||||
// NOTES!!!!
|
||||
blockquote > blockquote > blockquote {
|
||||
|
||||
margin: 0;
|
||||
|
||||
p {
|
||||
|
||||
padding: 15px;
|
||||
display: block;
|
||||
font-size: 1rem;
|
||||
margin-top: 0rem;
|
||||
margin-bottom: 0rem;
|
||||
}
|
||||
|
||||
> p {
|
||||
// Yellow
|
||||
margin-left: -71px;
|
||||
border-left: 10px solid $notes-info-border;
|
||||
background: $notes-info-bg;
|
||||
color: darken($notes-info-border,15%);
|
||||
a {
|
||||
color: darken($notes-info-border,25%);
|
||||
&:hover {
|
||||
color: lighten($notes-info-border,5%);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
> blockquote > p {
|
||||
// Red
|
||||
margin-left: -94px;
|
||||
border-left: 10px solid $notes-warning-border;
|
||||
background: $notes-warning-bg;
|
||||
color: darken($notes-warning-border,15%);
|
||||
a {
|
||||
color: darken($notes-warning-border,25%);
|
||||
&:hover {
|
||||
color: lighten($notes-warning-border,5%);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
> blockquote > blockquote > p {
|
||||
// Blue
|
||||
margin-left: -118px;
|
||||
border-left: 10px solid $notes-note-border;
|
||||
background: $notes-note-bg;
|
||||
color: darken($notes-note-border,15%);
|
||||
a {
|
||||
color: darken($notes-note-border,25%);
|
||||
&:hover {
|
||||
color: lighten($notes-note-border,5%);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
> blockquote > blockquote > blockquote > p {
|
||||
// Green
|
||||
margin-left: -142px;
|
||||
border-left: 10px solid $notes-success-border;
|
||||
background: $notes-success-bg;
|
||||
color: darken($notes-success-border,15%);
|
||||
a {
|
||||
color: darken($notes-success-border,25%);
|
||||
&:hover {
|
||||
color: lighten($notes-success-border,5%);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
// Inline and Code
|
||||
code,
|
||||
kbd,
|
||||
pre,
|
||||
samp {
|
||||
font-family: $font-family-mono;
|
||||
}
|
||||
|
||||
code {
|
||||
background: $code-bg;
|
||||
color: darken($code-text,10%);
|
||||
}
|
||||
|
||||
pre {
|
||||
padding: 2rem;
|
||||
background: $pre-bg;
|
||||
border: 1px solid $core-border-color;
|
||||
border-radius: 3px;
|
||||
code {
|
||||
color: $pre-text;
|
||||
background: inherit;
|
||||
}
|
||||
}
|
||||
|
||||
// Extras
|
||||
hr {
|
||||
border-bottom: 4px solid $rule-color;
|
||||
}
|
||||
|
||||
// Page Title
|
||||
.page-title {
|
||||
margin-top: -25px;
|
||||
padding: 25px;
|
||||
float: left;
|
||||
clear: both;
|
||||
background: $core-accent;
|
||||
color: $white;
|
||||
}
|
||||
|
||||
// Label
|
||||
.label {
|
||||
vertical-align: middle;
|
||||
background: $core-accent;
|
||||
border-radius: 100%;
|
||||
color: $white;
|
||||
height: 1rem;
|
||||
min-width: 1rem;
|
||||
line-height: 1rem;
|
||||
display: inline-block;
|
||||
text-align: center;
|
||||
font-size: $core-font-size - 0.3rem;
|
||||
font-family: $font-family-header;
|
||||
margin-right: 0.75rem;
|
||||
}
|
||||
|
||||
@ -0,0 +1,9 @@
|
||||
@import "showcase";
|
||||
@import "features";
|
||||
@import "text";
|
||||
|
||||
.modular {
|
||||
.modular-row:last-child {
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,99 @@
|
||||
// Modular Showcase styling
|
||||
.modular {
|
||||
.features {
|
||||
padding: 6rem 0;
|
||||
text-align: center;
|
||||
@include clearfix;
|
||||
|
||||
h2 {
|
||||
margin: 0;
|
||||
line-height: 100%;
|
||||
}
|
||||
|
||||
p {
|
||||
margin: 1rem 0;
|
||||
font-size: $core-font-size + 0.2rem;
|
||||
@include breakpoint(mobile-only) {
|
||||
font-size: $core-font-size;
|
||||
}
|
||||
}
|
||||
|
||||
.feature-items {
|
||||
margin-top: 2rem;
|
||||
@supports not (flex-wrap: wrap) {
|
||||
overflow: hidden;
|
||||
}
|
||||
}
|
||||
|
||||
.feature {
|
||||
display:block;
|
||||
float: left;
|
||||
width: 25%;
|
||||
vertical-align: top;
|
||||
margin-top: 2rem;
|
||||
margin-bottom: 1rem;
|
||||
@include breakpoint(large-mobile-range) {
|
||||
margin-top: 1rem;
|
||||
width: 50%;
|
||||
}
|
||||
@include breakpoint(small-mobile-range) {
|
||||
margin-top: 1rem;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
i.fa {
|
||||
font-size: 2rem;
|
||||
color: $core-accent;
|
||||
}
|
||||
|
||||
h4 {
|
||||
margin: 0;
|
||||
font-size: 1.1rem;
|
||||
}
|
||||
|
||||
p {
|
||||
display: inline-block;
|
||||
font-size: $core-font-size;
|
||||
margin: 0.2rem 0 1rem;
|
||||
}
|
||||
}
|
||||
|
||||
&.big {
|
||||
|
||||
text-align: center;
|
||||
|
||||
.feature {
|
||||
width: 50%;
|
||||
@include breakpoint(small-mobile-range) {
|
||||
margin-top: 1rem;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
i.fa {
|
||||
font-size: 3rem;
|
||||
float: left;
|
||||
}
|
||||
|
||||
.feature-content {
|
||||
padding-right: 2rem;
|
||||
|
||||
&.icon-offset {
|
||||
margin-left: 5rem;
|
||||
}
|
||||
|
||||
h4 {
|
||||
font-size: 1.3rem;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
p {
|
||||
padding: 0;
|
||||
text-align: left;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
@ -0,0 +1,60 @@
|
||||
// Modular Showcase styling
|
||||
.modular {
|
||||
|
||||
// special case for header
|
||||
&.header-image {
|
||||
|
||||
#header {
|
||||
background-color: rgba(255,255,255,0);
|
||||
box-shadow: none;
|
||||
|
||||
#logo h3 {
|
||||
color: $header-text;
|
||||
}
|
||||
#navbar a {
|
||||
color: $header-text;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.showcase {
|
||||
|
||||
padding-top: 4rem;
|
||||
padding-bottom: 4rem;
|
||||
background-color: #666;
|
||||
background-size: cover;
|
||||
background-position: center;
|
||||
|
||||
text-align: center;
|
||||
color: $header-text;
|
||||
h1 {
|
||||
font-size: 4rem;
|
||||
margin-top: 0;
|
||||
@include breakpoint(tablet-range) {
|
||||
font-size: 3rem;
|
||||
}
|
||||
@include breakpoint(mobile-only) {
|
||||
font-size: 2.5rem;
|
||||
line-height: 1.2;
|
||||
margin-bottom: 2.5rem;
|
||||
}
|
||||
}
|
||||
|
||||
.button {
|
||||
@extend .default-animation;
|
||||
color: $header-text;
|
||||
padding: 0.7rem 2rem;
|
||||
margin-top: 2rem;
|
||||
background: rgba(255,255,255,0);
|
||||
border: 1px solid $header-text;
|
||||
border-radius: $border-radius;
|
||||
box-shadow: none;
|
||||
font-size: $core-font-size + 0.3rem;
|
||||
|
||||
&:hover {
|
||||
background: rgba(255,255,255,0.2);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
@ -0,0 +1,35 @@
|
||||
// variables
|
||||
$text-bg: #f6f6f6;
|
||||
$text-padding: 6rem;
|
||||
$image-margin: 2rem;
|
||||
|
||||
|
||||
// styling
|
||||
.callout {
|
||||
background: $text-bg;
|
||||
padding: $text-padding $content-padding;
|
||||
@include breakpoint(desktop-only) {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.align-left {
|
||||
float: left;
|
||||
margin-right: $image-margin;
|
||||
@include breakpoint(desktop-only) {
|
||||
float: none;
|
||||
margin-right: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.align-right {
|
||||
float: right;
|
||||
margin-left: $image-margin;
|
||||
@include breakpoint(desktop-only) {
|
||||
float: none;
|
||||
margin-left: 0;
|
||||
}
|
||||
}
|
||||
img {
|
||||
border-radius: $border-radius;
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,2 @@
|
||||
// Buttons
|
||||
@import "buttons";
|
||||
@ -0,0 +1,24 @@
|
||||
%button {
|
||||
display: inline-block;
|
||||
padding: 7px 20px;
|
||||
|
||||
&.button-small {
|
||||
padding: 3px 10px;
|
||||
font-size: $core-font-size - 0.1rem;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
@mixin button-color($color) {
|
||||
background: $white;
|
||||
color: $color;
|
||||
border: 1px solid $color;
|
||||
border-radius: 3px;
|
||||
&:hover {
|
||||
background: $color;
|
||||
color: $white;
|
||||
}
|
||||
&:active {
|
||||
box-shadow: 0 1px 0 darken($color, 12%);
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user