Skip to content

Commit

Permalink
Split Style Sheets
Browse files Browse the repository at this point in the history 
- Split plugin style sheet from layout style sheets
- Toggle between layout style sheets by loop on Layouts.curLayout.css
  • Loading branch information
@OmarElgabry
OmarElgabry committed May 6, 2016
1 parent d929468 commit c78044c
Show file tree
Hide file tree
Showing 6 changed files with 190 additions and 315 deletions.
15 changes: 8 additions & 7 deletions README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -44,12 +44,12 @@ npm install hashtegny

Add CSS Files:
```html
<!-- Animation -->
<link rel="stylesheet" href="css/animations.min.css" type="text/css" />
<!-- Font Awesome -->
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
<!-- Main CSS File(Grid Layout) - Default -->
<link id="style" rel="stylesheet" href="css/main.grid.css" type="text/css" />
<!-- Font Awesome -->
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
<!-- Main CSS File -->
<link rel="stylesheet" href="css/hashtegny.css" type="text/css" />
<!-- Main CSS File(Grid Layout) - Default -->
<link id="layout-style" rel="stylesheet" href="css/main.grid.css" type="text/css" />
```

Add JS Files:
Expand Down Expand Up @@ -77,8 +77,9 @@ Finally, Run the plugin:
```js
<script>
$(document).ready(function(){

// this line of code because GitHub Pages(or something else weird) changes the link tags to style tags.
$("style#main-style").after('<link id="main-style" rel="stylesheet" href="css/main.grid.css" type="text/css" />').remove();
$("style#layout-style").after('<link id="layout-style" rel="stylesheet" href="css/main.grid.css" type="text/css" />').remove();

// start the plugin & pass your options
$('#hashtegny-container').hashtegny({
Expand Down
164 changes: 164 additions & 0 deletions css/hashtegny.css
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,164 @@
/*
* Document : hashtegny.css
* Author : Omar El Gabry <[email protected]>
* Description: Main CSS File
*
*/

html, body {
margin: 0;
height: 100%;
}
body {
background: #5f2c82; /* fallback for old browsers */
background: -webkit-linear-gradient(to left, #5f2c82 , #49a09d); /* Chrome 10-25, Safari 5.1-6 */
background: linear-gradient(to left, #5f2c82 , #49a09d); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
font-family: "Avant Garde",Avantgarde,"Century Gothic",CenturyGothic,AppleGothic,sans-serif;
}

/* ==== Social Networks === */
.instagram .user-image,.instagram .user-name,.instagram .post-text,.instagram .post-time{
background-color: #306088;
border-color: #306088;
color: white;
}
.twitter .user-image,.twitter .user-name,.twitter .post-text,.twitter .post-time{
background-color: #0084B4;
border-color: #0084B4;
color: white;
}
.google .user-image,.google .user-name,.google .post-text,.google .post-time{
background-color: #DD4B39;
border-color: #DD4B39;
color: white;
}
.vk .user-image,.vk .user-name,.vk .post-text,.vk .post-time{
background-color: #45668e;
border-color: #45668e;
color: white;
}

/* ==== Search Container === */
.intro-container{
background-color: white;
text-align: center;
}
.intro-container .toggle-header{
color: #3498db;
}
.intro-container .toggle-header:hover{
cursor: pointer;
color: #3cb0fd;
}

/* ==== Header === */
.header{
font-size: 0.9em;
padding: 0.5%;
font-family: "Avant Garde",Avantgarde,"Century Gothic",CenturyGothic,AppleGothic,sans-serif;
}
.header h3{
font-size: 70px;
font-weight: bold;
margin: 2% auto;
}
.header hr{
opacity: 0.2;
background-color: #fff;
border-color: #fff;
border-bottom: none;
width: 50%;
}
.header p{
font-size: 1.5em;
padding: 10px;
margin: 0;
}
.header button{
border: none;
font-family: "Avant Garde",Avantgarde,"Century Gothic",CenturyGothic,AppleGothic,sans-serif;
background-color: #3498db;
color: #ffffff;
padding: 10px;
}
.header button:hover{
cursor: pointer;
-webkit-transform: scale(1.1);
transform: scale(1.1);
}
.header button.animation-button, .header button.grid-button{
padding-left: 15px;
padding-right: 15px;
}
.header button.animation-button{
background-color: #49a09d;
}
.header button.grid-button{
background-color: #5f2c82;
}
.header input{
padding: 10px;
border: solid 1px #3498db;
font-family: "Avant Garde",Avantgarde,"Century Gothic",CenturyGothic,AppleGothic,sans-serif;
}
.header .network-icons{
padding: 1%;
}
.network-icons, .network-icons div{
display: inline-block;
vertical-align: middle;
}

/* ==== Spinner === */
.spinner{
color: #3498db;
text-align: center;
display: inline-block;
vertical-align: middle;
margin-top: -1px;
margin-left: 9px;
}

/* ==== Error === */
.error strong {
line-height:30px;
}
.error span {
position: fixed;
right: 0;
bottom: 0;
z-index:999;
display:inline;
font-size: 1em;
color: #a94442;
padding: 1%;
margin: 0.5%;
width: 20%;
border:1px solid transparent;
background:#f2dede;
border-radius:4px;
box-shadow: 5px 5px 8px #CCC;
}

/* ==== @media Query === */
@media screen and (max-width: 1024px) {
.error{
font-size: 0.9em;
}
}
@media screen and (max-width: 480px) {
.header{
font-size: 0.8em;
}
.header h3{
font-size: 30px;
}
.error{
display: none;
}
}
@-ms-viewport{
width: device-width;
height: device-height;
initial-scale: 1.0;
}
152 changes: 1 addition & 151 deletions css/main.animation.css
View file
Original file line number Diff line number Diff line change
@@ -1,21 +1,10 @@
/*
* Document : main.css
* Document : main.animation.css
* Author : Omar El Gabry <[email protected]>
* Description: Main CSS File(Animation Layout)
*
*/

html, body {
margin: 0;
height: 100%;
}
body {
background: #5f2c82; /* fallback for old browsers */
background: -webkit-linear-gradient(to left, #5f2c82 , #49a09d); /* Chrome 10-25, Safari 5.1-6 */
background: linear-gradient(to left, #5f2c82 , #49a09d); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
font-family: "Avant Garde",Avantgarde,"Century Gothic",CenturyGothic,AppleGothic,sans-serif;
}

/* ==== Main Post Container === */
.main-post{
margin: 0 auto;
Expand Down Expand Up @@ -143,130 +132,6 @@ body {
padding: 1.5%;
}

/* ==== Social Networks === */
.instagram .user-image,.instagram .user-name,.instagram .post-text,.instagram .post-time{
background-color: #306088;
border-color: #306088;
color: white;
}
.twitter .user-image,.twitter .user-name,.twitter .post-text,.twitter .post-time{
background-color: #0084B4;
border-color: #0084B4;
color: white;
}
.google .user-image,.google .user-name,.google .post-text,.google .post-time{
background-color: #DD4B39;
border-color: #DD4B39;
color: white;
}
.vk .user-image,.vk .user-name,.vk .post-text,.vk .post-time{
background-color: #45668e;
border-color: #45668e;
color: white;
}

/* ==== Search Container === */
.intro-container{
background-color: white;
text-align: center;
}
.intro-container .toggle-header{
color: #3498db;
}
.intro-container .toggle-header:hover{
cursor: pointer;
color: #3cb0fd;
}

/* ==== Header === */
.header{
font-size: 0.9em;
padding: 0.5%;
font-family: "Avant Garde",Avantgarde,"Century Gothic",CenturyGothic,AppleGothic,sans-serif;
}
.header h3{
font-size: 70px;
font-weight: bold;
margin: 2% auto;
}
.header hr{
opacity: 0.2;
background-color: #fff;
border-color: #fff;
border-bottom: none;
width: 50%;
}
.header p{
font-size: 1.5em;
padding: 10px;
margin: 0;
}
.header button{
border: none;
font-family: "Avant Garde",Avantgarde,"Century Gothic",CenturyGothic,AppleGothic,sans-serif;
background-color: #3498db;
color: #ffffff;
padding: 10px;
}
.header button:hover{
cursor: pointer;
-webkit-transform: scale(1.1);
transform: scale(1.1);
}
.header button.animation-button, .header button.grid-button{
padding-left: 15px;
padding-right: 15px;
}
.header button.animation-button{
background-color: #49a09d;
}
.header button.grid-button{
background-color: #5f2c82;
}
.header input{
padding: 10px;
border: solid 1px #3498db;
font-family: "Avant Garde",Avantgarde,"Century Gothic",CenturyGothic,AppleGothic,sans-serif;
}
.header .network-icons{
padding: 1%;
}
.network-icons, .network-icons div{
display: inline-block;
vertical-align: middle;
}

/* ==== Spinner === */
.spinner{
color: #3498db;
text-align: center;
display: inline-block;
vertical-align: middle;
margin-top: -1px;
margin-left: 9px;
}

/* ==== Error === */
.error strong {
line-height:30px;
}
.error span {
position: fixed;
right: 0;
bottom: 0;
z-index:999;
display:inline;
font-size: 1em;
color: #a94442;
padding: 1%;
margin: 0.5%;
width: 20%;
border:1px solid transparent;
background:#f2dede;
border-radius:4px;
box-shadow: 5px 5px 8px #CCC;
}

/* ==== @media Query === */
@media screen and (max-width: 1024px) {
.attachement-div {
Expand All @@ -285,9 +150,6 @@ body {
.no-image .post-text span{
font-size: 8em;
}
.error{
font-size: 0.9em;
}
}
@media screen and (max-width: 480px) {
.main-post, .main-post.no-image{
Expand Down Expand Up @@ -318,16 +180,4 @@ body {
-webkit-transform: scale(1);
transform: scale(1);
}
.header h3{
font-size: 30px;
}
.error{
display: none;
}

}
@-ms-viewport{
width: device-width;
height: device-height;
initial-scale: 1.0;
}
Loading

0 comments on commit c78044c

Please sign in to comment.