all repos — aaoth.xyz @ d2e30485e7cd11e93fc507dbdfab2b4c08f22075

aaoth.xyz website

_sass/main.scss (view raw)

  1$color-main-bg: #f0f0f0;
  2$color-dark-bg: #070707;
  3$color-main-blue: #397eaf;
  4$color-dark-blue: #2e4054;
  5$color-main-grey: #e1e1e1;
  6$color-dark-grey: #1f1f1f;
  7$color-link-idle: #707070;
  8$color-link-hover: #999999;
  9$color-nav-current: #333333;
 10$border-main: 5px solid $color-main-grey;
 11$border-dark: 5px solid $color-dark-grey;
 12$font-title: sans-serif;
 13$body-font: sans-serif;
 14
 15html {
 16	background: $color-main-bg;
 17}
 18
 19body {
 20	max-width: 835px;
 21	min-width: 364px;
 22	margin: 20px auto 0 auto;
 23	padding: 8px;
 24	color: $color-dark-bg;
 25	font: 100% $body-font;
 26}
 27a {
 28	color: $color-link-idle;
 29	text-decoration: none;
 30}
 31a:hover {
 32	color: $color-link-hover;
 33}
 34
 35.current {
 36	color: $color-nav-current;
 37}
 38
 39nav {
 40	display: flex;
 41	font: 400 1.5em $font-title;
 42	letter-spacing: -1.2px;
 43
 44	ul {
 45		display: inline-flex;
 46		width: 430px;
 47		height: 32px;
 48		margin: 0;
 49		padding: 50px 30px 0 0;
 50		flex-direction: row;
 51		justify-content: space-between;
 52		list-style-type: none;
 53		border-bottom: $border-main;
 54	}
 55}
 56
 57h1, h2, h3, h4, h5, h6 {
 58	margin: 0;
 59	font: 200% $font-title;
 60	color: $color-main-blue;
 61}
 62
 63.post {
 64    padding: 1em;
 65    margin: 1em;
 66    background: $color-main-grey;
 67    border-radius: 25px 25px 25px 0px;
 68    word-wrap: break-word;
 69    p {
 70        img {
 71            max-width: 100%
 72        }
 73    }
 74}
 75
 76audio {
 77    width: 100%;
 78    border-radius: 25px;
 79}
 80
 81footer {
 82	border-top: $border-main;
 83	text-align: center;
 84	font: 75% $body-font;
 85	p {
 86		margin: 0;
 87	}
 88}
 89
 90@media only screen and (max-width: 700px) {
 91	nav {
 92		margin-bottom: 5vh;
 93		ul {
 94			width: 100%;
 95			padding: 0;
 96			padding-top: 30px;
 97			position: relative;
 98			top: 5vh;
 99		}
100		img {
101			position: absolute;
102			top: 0;
103		}
104	}
105}
106
107@media (prefers-color-scheme: dark) {
108	html {
109		background: $color-dark-bg;
110	}
111	body {
112		color: $color-main-bg;
113	}
114	nav {
115		ul {
116			border-bottom: $border-dark;
117		}
118	}
119    .post {
120        background: $color-dark-grey;
121    }
122	footer {
123		border-top: $border-dark;
124	}
125}