app/assets/stylesheets/hmno_main.scss


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156

// Color Scheme:
// http://colorschemedesigner.com/#1j11TiW8EWTs.
//
$primary-1: #453C1C;
$primary-2: #252219;
$primary-3: #181301;
$primary-4: #988952;
$primary-5: #988D62;

$bg: $primary-2;
$fg: $primary-5;

$link-fg: lighten($primary-4, 20%);
$link-visited-fg: $primary-4;
$link-hover-fg: lighten($link-fg, 20%);

$selected-menu-bg: $primary-4;
$selected-menu-fg: $primary-2;
$hover-menu-bg: $selected-menu-bg;
$hover-menu-fg: $selected-menu-fg;
$menu-bg: $primary-1;
$menu-fg: $primary-5;

$header-bg: black;
$body-bg: black;

$spacing: 10px;
$sidebar-width: 200px;


body {
    background-color: $body-bg;
    color: $fg;
    font: {
        family: Helvetica, "Sans Seriff";
        size: 10pt;
    }
}

h1, h2, h3 {
    color: $fg;
}

a {
    color: $link-fg;
    &:hover {
        color: $link-hover-fg;
    }
    &:visited {
        color: $link-visited-fg;
        &:hover {
            color: $link-hover-fg;
        }
    }
}

#header {
    #logo {
        background-color: $header-bg;
        border-bottom: 1px solid $fg;
    }

    #menu {
        position: relative;
        text-align: center;
        top: -2em;

        ul {
            padding: 0;

            li {
                list-style: none;
                display: inline-block;
                background-color: $menu-bg;

                padding: {
                    left: 1em;
                    right: 1em;
                    top: 0.3em;
                    bottom: 0.3em;
                }

                &.selected {
                    background-color: $selected-menu-bg;
                    font-weight: 600;

                    a {
                        color: $selected-menu-fg;
                    }
                }

                &:hover {
                    background-color: $hover-menu-bg;

                    a {
                        color: $hover-menu-fg;
                    }
                }

                a {
                    text-decoration: none;
                    color: $menu-fg;
                }
            }
        }
    }
}

#page_container {
    background: $bg;

    margin: {
        left: 5em;
        right: 5em;
    }

    #page {
        position: relative;

        #left_sidebar, #right_sidebar {
            position: absolute;
            width: 200px;
            top: 0;
            border: 1px groove $fg;
            padding: 5px;
            height: 100%;
        }

        #left_sidebar {
            left: $spacing;
        }

        #right_sidebar {
            right: $spacing;
        }

        #body_content {
            margin: {
                left: $sidebar-width + 3 * $spacing;
                right: $sidebar-width + 3 * $spacing;
            }
            padding: {
                left: 0.5em;
                right: 0.5em;
            }
        }
    }
}

#left_img {
    float: left;
}

#right_img {
    float: right;
}