/* =========
IMPORTS
========= */
@import url('http://css.wikidot.com/cssnippet:fontawesome-editor/code_');
@import url('http://css.wikidot.com/cssnippet:inline-hovertips/code_');
@import url('https://fonts.googleapis.com/css?family=Montserrat|Muli|Questrial');
a{
font-family: 'Montserrat', Arial, sans-serif;
transition-duration: 0.4s;
color: #046acc;
text-decoration: none;
}
a:hover{
color: #292929;
background-color: transparent;
}
h1, h2, h3, h4, h5, h6 {
font-family: 'Montserrat';
color: #353535;
}
body
{
font-family: 'Montserrat',arial,helvetica,sans-serif;
font-size: 0.82em;
}
/* =========================
TOP PAGE RELATED THINGS
========================= */
#header {
margin: 0 auto;
width: 90%;
border-right: 3px solid #444;
border-left: 3px solid #444;
position: relative;
z-index: 30;
height: 7em;
background-image: url("http://csspractice.wikidot.com/local--files/start/pattern2");
padding-bottom: 10px;
}
#header h1{
font-family: 'Questrial', Arial, sans-serif;
margin: 0 auto;
padding: 0;
font-size: 40px;
color: white;
}
#header h1 a{
margin: 0 auto;
font-family: 'Montserrat', Arial, sans-serif;
font-weight: bold;
color: white;
}
#header h1 a:hover{
color: #0172de;
background-color: none;
}
#header h2{
font-family: 'Montserrat', Arial, sans-serif;
margin-left: 23px;
margin-top: -10px;
font-size: 20px;
color: #aaa;
}
#top-bar{
width: 100%;
margin: 0 auto;
height: 30px;
left: -3px;
position: absolute;
z-index:0;
background-image: url("http://csspractice.wikidot.com/local--files/start/pattern2");
border-left: 3px solid #444;
border-right: 3px solid #444;
border-bottom: 3px solid #444;
bottom: -33px;
}
#top-bar li a{
font-family: 'Montserrat', Arial, sans-serif;
letter-spacing: -1px;
text-align: center;
display: block;
padding: 4px 5px;
text-decoration: none;
border-right: 1px solid #aaa;
border-left: 1px solid #aaa;
border-top: none;
border-bottom: none;
font-size: 15px;
}
#top-bar ul {
background-color: #444;
}
#top-bar li ul li a{
width: auto;
text-align: left;
background-color: #2b2b2b;
border: none;
text-decoration: none;
}
#top-bar a {
color: #ffffff;
-webkit-transition-duration: 0.4s;
transition-duration: 0.4s;
}
#top-bar a:hover {
background-color: #3a3a3a;
color: white;
text-decoration: none;
}
#top-bar li a:hover {
}
.printuser{
color: whitesmoke;
}
#login-status{
font-family: 'Montserrat', Arial, sans-serif;
position: absolute;
right: 10px;
top: 10px;
overflow: visible;
z-index:25;
color: white;
}
#search-top-box{
background-image: url("http://csspractice.wikidot.com/local--files/start/pattern1");
position: absolute;
right: -0.3em;
top: 8em;
z-index:10;
color: white;
border-bottom: 3px solid #444;
border-right: 3px solid #444;
}
#search-top-box input.empty{
color: #aaa;
}
#search-top-box input.text:focus {
color: #3c3c3c;
}
/* ============
MAIN STUFF
============ */
#page-title{
font-family: 'Questrial', Arial, sans-serif;
margin: 0 0 0.5em 0;
padding-top: 0.5em; /* Firefox bug? */
font-size: 200%;
border-bottom: 1px solid #666;
}
#main-content{
width: 70%;
margin:0 auto;
margin-top: 40px;
padding: 0 1em;
border: 1px solid #aaa;
background-color: white;
border-radius: 5px;
min-height: 900px;
}
#container {
margin: 0;
padding: 0;
background-image: url("http://csspractice.wikidot.com/local--files/start/pattern1");
}
#page-content{
width: 100%;
}
/* ===================
BUTTONS AND STUFF
=================== */
input.text{
margin: 0 auto;
height: 25px;
border-top: none;
border-bottom: none;
border-left: none;
margin: 0 1px;
padding: 1px 2px;
background-color: transparent;
color: #383838;
outline: none;
border-right; 3px solid #444;
}
div.buttons input, button, a.button{
-webkit-transition-duration: 0.4s; /* Safari */
transition-duration: 0.4s;
font-family: 'Muli', Arial, sans-serif;
height:27px;
margin: 0 2px;
padding: 0px 0.5em;
text-decoration: none;
background-color: transparent;
border-left: 2px solid #3e639c;
border-right: 2px solid #3e639c;
border-top: none;
border-bottom: none;
color: #424242;
cursor: pointer;
}
div input.button {
-webkit-transition-duration: 0.4s; /* Safari */
transition-duration: 0.4s;
font-family: 'Muli', Arial, sans-serif;
height:27px;
padding: 4px 10px;
margin-left: ;
text-decoration: none;
background-color: transparent;
border: none;
color: #000000;
cursor: pointer;
}
div.buttons input:hover, input.button:hover, button:hover, a.button:hover{
margin-right: -3px;
padding: 4px 10px;
background-color: #505050;
color: #fff;
}
/* ================
FOOTER RELATED
================ */
.page-options-bottom a{
margin: 2px 2px;
font-size: 95%;
padding: 0 8px;
border: 1px solid #d2d2d2;
border-radius: 3px;
-webkit-transition-duration: 0.4s; /* Safari */
transition-duration: 0.4s;
}
.page-options-bottom a:hover {
background-color: #dcdcdc;
color: #353535;
box-shadow: 2px 2px 5px #444;
}
#footer{
color: white;
margin-top: 5px;
padding: 3px 10px;
clear: both;
overflow: hidden;
width: 100%
margin-left: 220px;
border-top: 3px solid #444;
border-left: 3px solid #444;
border-right: 3px solid #444;
background-image: url("http://csspractice.wikidot.com/local--files/start/pattern2");
}
#footer a {
color: white;
}
#footer .options{
float: right;
font-size: 90%;
padding: 1px 0;
}
#footer p {
margin: 0.2em 0;
padding: 0;
}
.hovertip{
display: ; /* hide by default */
width: 20em; /* default */
border: 2px solid #dadada;
background-image: url("http://csspractice.wikidot.com/local--files/start/pattern1");
z-index: 100;
}
.hovertip .title{
font-weight: bold;
padding: 0.2em 0.5em;
font-size: 110%;
}
.hovertip .content{
padding: 0.2em 0.5em;
}
#license-area {
margin: 0 auto;
border-left: 3px solid #444;
border-right: 3px solid #444;
background-image: url("http://csspractice.wikidot.com/local--files/start/pattern2");
padding: 0.5em 0;
color: #fff;
text-align: center;
}
#license-area a{
color:white;
}
#action-area{
width: 100%;
padding: 0 0 1em 0;
border-top: 3px solid #dedede;
}
Quick question. Is this responsive or fluid? The reason I'm asking is because I've been using a standard minimalist template that I built ages ago and then just retheme for the site but I need a good responsive base to theme and I'm too confused about the wikidot default responsive site that uses bootstrapp. Noise appears to be fluid through as I did not see the menu collapse on a resize and the "join this site" text overlapped the menu on minimum browser decrease. A good test is to pop a wide logo in replacement of the site title and see what happens. Do you have a sample to show images responding to the device too?
What's the difference between Responsive and fluid? :P
EDIT: I searched it up, this design is fluid.
All I did was center the top bar, main content, header, and footer/licesnse area using "margin: 0 auto", then set the width to 100% (instead of using a fixed pixel width). You could probably do the same with those elements (provided that you don't include the sidebar), and then use @media to check the width like so:
I chose 320px because it is the smallest screen width for most smartphones. Basically, the code is checking if the screen width is less than 320px, and if so, apply the CSS rules specified in the brackets. Using this in conjunction with the "margin: 0 auto" and "width:100%" properties should get your web page to be responsive to a good extent. For example, if the width was less than 320px, then you could run some rules to hide the sidebar (if included) and reposition some elements. You could do this with many screen widths, having different rules each time a certain width is reached, therefore making your website responsive.
As for images, I don't have any yet, but I emulated the screen width using the Chrome Inspector. The logo would be an easy fix, probably just set an initial width to it (regular width, not min-width) then call for the rules to change when the screen width is reached.
I am still working on a sidebar version and working out all the bugs, so I will update this when I have that done.
You just described a fluid site, not a responsive site, There is a bit of a difference. All of my wikidot sites used to be fluid but the flexibility of the content made it difficult to create the look that I could achieve with a static site so at some point I switched to static sites. Since then my preference has been for a minimalist theme and a BG image that fits to the size of the browser. So yes I could very easily adjust the content area to a %, but that is only going to wrap the text to fit the block and ignore images which could still break the site into a horizontal scroll unless they also resize and regrid.
I'd say you are close but face a few hurdles:
1) Images within the content area need to resize. This does restrict the design, which is why all responsive sites kind of look the same, I'm not a fan of that.
2) The menu will need to collapse to vertical drop down reach through a single universally accepted options button.
3) Text size needs to be larger. This is not necessarily a responsive feature, but Google has made it clear that they will not recognize a site as responsive if the text is too small because on mobile devices standard text we've seen in the past is very difficult to read, this is why there is a trend to see larger text now on websites. This is important because Google gives more rank to sites that are mobile friendly, since the content can reach a larger audience. Technically most sites, even static look fine on modern mobile devices with the one caveat being text size.
Oh, minor nudge here: Your footer text is white with white BG so not visible.
One more tiny nudge (sorry) but I think you will find this useful. I noticed on your 68K site that you are using the maple theme (love this theme btw) via the auto import feature from themes.wikidot.com and then publishing edits to the CSS on individual pages. I used to do the same thing, for a while I used to copy the CSS to the admin section of my sites and edit it there too. Until someone posted a much better way to store and call CSS: If you are doing a lot of CSS edits, then you will love this: http://onx.wikidot.com/lab:bettercss
Thanks for the feedback! I really appreciate it :)
2. Yes I was using Chrome.
3. I have no idea lol, is that how it's done? I have only recently taken an interest in responsive sites. Have you looked at http://www.scp-wiki.net/? They have built a nice responsive site and the entire sidebar gets reduced to a button when the width is small. The top nav bar also reduces down to a fewer number of links. When I find the time I'll have a look at their CSS and markup.