summaryrefslogtreecommitdiff
path: root/src/scss
diff options
context:
space:
mode:
Diffstat (limited to '')
-rw-r--r--src/scss/_mixins.scss12
-rw-r--r--src/scss/_variables.scss1
-rw-r--r--src/scss/blog.scss32
-rw-r--r--src/scss/bucket/_style.scss1
-rw-r--r--src/scss/error.scss2
-rw-r--r--src/scss/home.scss9
-rw-r--r--src/scss/ie/ie.scss17
-rw-r--r--src/scss/ie/ie6.scss41
-rw-r--r--src/scss/main.scss163
9 files changed, 119 insertions, 159 deletions
diff --git a/src/scss/_mixins.scss b/src/scss/_mixins.scss
index 25eb0c1..62ae802 100644
--- a/src/scss/_mixins.scss
+++ b/src/scss/_mixins.scss
@@ -1,16 +1,8 @@
-@mixin box-sizing {
- * {
- -moz-box-sizing: border-box;
- -webkit-border-box: border-box;
- box-sizing: border-box;
- }
-}
-
@mixin section {
- border: $border-width solid $border-color;
@include border-radius($outer-radius);
+ border: $border-width solid $border-color;
background: $black;
- margin-bottom: $outer-gap;
+ text-align: left;
}
@mixin linear-gradient($deg, $first, $values...) {
diff --git a/src/scss/_variables.scss b/src/scss/_variables.scss
index 55627f8..9f493ff 100644
--- a/src/scss/_variables.scss
+++ b/src/scss/_variables.scss
@@ -23,3 +23,4 @@ $border-width: 5px;
$border-color: #ccc;
$page-width: 1000px;
+$logo-width: 200px;
diff --git a/src/scss/blog.scss b/src/scss/blog.scss
index 665c5a4..be47c70 100644
--- a/src/scss/blog.scss
+++ b/src/scss/blog.scss
@@ -13,14 +13,11 @@
margin-left: 0 !important;
}
- overflow-x: scroll;
max-width: $page-width - $outer-gap * 2 - $inner-gap;
}
code {
display: inline-block;
- max-width: 100%;
- overflow-x: scroll;
}
img {
@@ -31,17 +28,18 @@
}
#comments {
- > span {
- margin-bottom: 10px;
+ .no-comments {
+ display: block;
+ margin: $inner-gap 0;
}
.comment {
.header {
- display: inline-block;;
+ display: inline-block;
}
.date {
font-size: 70%;
- display: inline-block;;
+ display: inline-block;
}
.content {
margin-top: 0;
@@ -54,16 +52,6 @@
max-width: 400px;
padding-right: $inner-gap;
- input.hidden {
- display: none;
- }
-
- input#author,
- input#content {
- display: block;
- width: 100%;
- }
-
input {
@include border-radius($inner-radius);
display: block;
@@ -79,6 +67,16 @@
outline: none;
border: 2px solid $white;
}
+
+ &.hidden {
+ display: none;
+ }
+
+ &#author,
+ &#content {
+ display: block;
+ width: 100%;
+ }
}
}
}
diff --git a/src/scss/bucket/_style.scss b/src/scss/bucket/_style.scss
index 8d65c68..050485c 100644
--- a/src/scss/bucket/_style.scss
+++ b/src/scss/bucket/_style.scss
@@ -1,4 +1,3 @@
-@include box-sizing;
@include font-face("Merriweather");
@include font-face("CourierNew");
diff --git a/src/scss/error.scss b/src/scss/error.scss
index 34c9d21..2ef2cab 100644
--- a/src/scss/error.scss
+++ b/src/scss/error.scss
@@ -1,7 +1,7 @@
@import "./variables";
.section {
- text-align: center;
+ text-align: center !important;
}
#main h1 {
diff --git a/src/scss/home.scss b/src/scss/home.scss
index fa3159f..a32fdfb 100644
--- a/src/scss/home.scss
+++ b/src/scss/home.scss
@@ -12,11 +12,10 @@
}
#about {
- span {
- margin: 0 !important;
- font-family: monospace;
- font-size: 110%;
- }
+ span {
+ margin: 0 !important;
+ font-family: monospace;
+ }
}
@media (max-width: 800px) {
diff --git a/src/scss/ie/ie.scss b/src/scss/ie/ie.scss
index 0498093..6305875 100644
--- a/src/scss/ie/ie.scss
+++ b/src/scss/ie/ie.scss
@@ -4,7 +4,7 @@
#header {
.ie-nav {
- margin-left: 90px;
+ margin-left: 70px;
}
}
@@ -23,12 +23,13 @@
h2.heading {
background: $blue;
}
- }
- #post,
- #writeup {
- .posted {
- margin-top: $inner-gap;
+ table {
+ width: 99%;
+ }
+
+ pre code {
+ width: 95%;
}
}
@@ -45,8 +46,4 @@
}
}
}
-
- table {
- behavior: url(boxsizing.htc);
- }
}
diff --git a/src/scss/ie/ie6.scss b/src/scss/ie/ie6.scss
deleted file mode 100644
index a443956..0000000
--- a/src/scss/ie/ie6.scss
+++ /dev/null
@@ -1,41 +0,0 @@
-/* IE 6 and 7 Only */
-
-@import "../variables";
-
-/**
- * IE5 and below seem to look fine without boxsizing
- * additions, its only the jump to IE5 where things seem
- * to start breaking and thus this is needed
- */
-
-* {
- behavior: url(boxsizing.htc);
-}
-
-/**
- * Fix homepage margin near footer, only caused
- * by the boxsizing i think
- */
-body {
- #main {
- .col {
-
- &div.left {
- margin-bottom: $inner-gap;
- }
-
- &div.right {
- margin-top: $inner-gap;
- }
-
- }
- }
-
- div#contact {
- margin-bottom: 0;
- }
-
- div#footer {
- margin-top: $inner-gap;
- }
-}
diff --git a/src/scss/main.scss b/src/scss/main.scss
index 925cfef..3a3a149 100644
--- a/src/scss/main.scss
+++ b/src/scss/main.scss
@@ -1,7 +1,6 @@
@import "./variables";
@import "./mixins";
-@include box-sizing;
@include font-face("FontStuck-Extended");
@include font-face("CourierNew");
@@ -115,36 +114,25 @@ html {
body {
@include background-image(
- url("WEB_ROOT/public/img/background.png?ref=4"),
- url("WEB_ROOT/public/img/background.webp?ref=7") type("image/webp"),
- url("WEB_ROOT/public/img/background.png?ref=4") type("image/png")
+ url("WEB_ROOT/public/img/background.png?ref=4"),
+ url("WEB_ROOT/public/img/background.webp?ref=7") type("image/webp"),
+ url("WEB_ROOT/public/img/background.png?ref=4") type("image/png")
);
background-repeat: repeat;
background-size: 512px;
background-color: #181818;
-}
-
-.center {
- display: block;
- margin-left: auto !important;
- margin-right: auto !important;
+ min-height: 100%;
}
html,
body,
-#container {
+.container {
width: 100%;
margin: 0;
padding: 0;
-}
-
-body {
- padding: $inner-gap;
- min-height: 100%;
- > .center {
- display: table;
- margin: 0 auto;
+ .section {
+ @include section;
}
}
@@ -155,52 +143,58 @@ body {
#header,
#main,
#footer,
-#container {
- @include border-radius($outer-radius);
+.container {
+ display: block;
width: $page-width;
- text-align: left;
}
#header,
#footer {
- display: block;
- @include section;
+ margin-bottom: $outer-gap;
+
+ .section {
+ padding: $inner-gap;
+ }
}
#header {
- $logo-size: 200px;
- height: #{$logo-size + $inner-gap * 2 + 10px};
- padding: $inner-gap;
+ margin-top: $outer-gap;
- img {
+ &, &.container {
+ height: $logo-width + $inner-gap * 2 + $border-width * 2;
+
+ .section {
+ height: $logo-width;
+ }
+ }
+
+ #logo {
@include border-radius($inner-radius);
float: left;
- height: $logo-size;
- width: $logo-size;
+ height: $logo-width;
+ width: $logo-width;
}
.content {
- padding-top: 30px;
- padding-left: $logo-size;
+ height: $logo-width;
.logo-text {
margin: 0;
text-align: center;
text-shadow: 3px 3px $white-alt;
+ height: $logo-width / 2;
+ line-height: $logo-width / 2;
}
#nav {
- margin: 0;
padding: 0;
- list-style-type: none;
margin: 0 auto;
+ list-style-type: none;
@include display-table($inner-gap);
- ul { padding: none;}
-
li {
- @include display-table-cell;
float: left;
+ @include display-table-cell;
padding: $inner-gap;
a {
@@ -222,41 +216,51 @@ body {
}
}
-/* once the page has been shrank to max content width */
-@media (max-width: ($page-width + $outer-gap * 2)) {
- body {
- width: 1px;
- min-width: 100%;
-
- > .center {
- display: block;
- }
- }
+#header,
+#main,
+#footer {
+ display: block;
+ margin-left: auto !important;
+ margin-right: auto !important;
+}
- body > .center,
+/* once the page has been shrank to max content width */
+@media (max-width: ($page-width + $outer-gap * 2 + $border-width * 2)) {
+ body,
#header,
#main,
- #footer,
- #container {
+ #footer {
width: 100%;
- max-width: 100%;
+
+ .container {
+ padding: 0 $outer-gap;
+ width: auto;
+ }
}
}
@media (max-width: 800px) {
#header {
- display: block;
- height: auto;
+ &, &.container {
+ height: auto;
- img {
+ .section {
+ height: auto;
+ }
+ }
+
+ #logo {
float: none;
display: block;
margin: 0 auto;
}
.content {
- padding-top: 0;
- padding-left: 0;
+ height: auto;
+
+ .logo-text {
+ height: auto;
+ }
#nav {
text-align: center;
@@ -268,21 +272,22 @@ body {
@media (max-width: 550px) {
#header .content #nav {
li {
- float: none;
display: block;
+ float: none;
}
}
}
@media (max-width: 300px) {
- body {
- width: 300px;
+ body,
+ #header,
+ #main,
+ #footer {
+ width: 300px;
}
}
#footer {
- padding: $inner-gap;
-
.footer-text {
display: block;
margin: 10px 0;
@@ -318,6 +323,7 @@ body {
#main .section {
@include section;
+ margin-bottom: $outer-gap;
.heading {
@include linear-gradient(to bottom, $blue, $black);
@@ -339,20 +345,22 @@ body {
border-left: 5px solid $blue;
}
- pre {
- background: black;
- margin-right: $inner-gap;
- @include border-radius($outer-radius);
- padding: $inner-gap;
- }
-
code {
font-family: $font;
color: $green;
}
- pre code {
- color: $white;
+ pre {
+ @include border-radius($outer-radius);
+ background: black;
+ overflow-x: scroll;
+ margin-right: $inner-gap;
+
+ code {
+ padding: $inner-gap;
+ padding-bottom: 0px;
+ color: $white;
+ }
}
table {
@@ -363,6 +371,7 @@ body {
font-family: $header-font;
font-size: 120%;
line-height: 120%;
+ text-align: left;
@media (max-width: 400px) {
font-size: 100%;
@@ -387,7 +396,6 @@ body {
th {
background: $blue;
- text-align: left;
}
tr:last-child {
@@ -399,8 +407,15 @@ body {
}
}
}
-}
-#main #ad {
- padding: $inner-gap;
+ &#post,
+ &#writeup {
+ .posted {
+ margin-top: $inner-gap;
+ }
+ }
+
+ &#ad {
+ padding: $inner-gap;
+ }
}
generated by cgit v1.2.3-freya (git 2.53.0.84.g453e7b744a) at 2026-02-27 20:34:40 +0000